特定のユーザーを非表示にする

開発
1

Users リストから特定のユーザーを非表示にするシンプルな JavaScript を共有させていただきます。プラグインで実装すればもっと洗練された方法になると思いますが、まだそこまで踏み込む勇気がありません！また、この方法は各テーマごとに適用する必要があり、現在は Light テーマにのみ対応するハードコーディングとなっています。ただし、基本的な考え方はどのテーマにも適用可能です。

例えば、james-admin や another-admin というユーザーがいて、これらをすべてのユーザーに公開したくないとします。その場合、以下のカスタムスクリプトを </body> カスタマイズ（設定 -> カスタマイズ -> テーマ -> Light -> </body>）に追加してください。

<script type="text/javascript">
    
    // 非表示にするユーザー
    let hidden_users = [ "james-admin", "another-admin" ];
    
    // AJAX 経由でページが読み込まれたとき
    $( document ).ajaxComplete( function( event, xhr, settings ) {
        
        // ユーザーリストページかどうかを確認
        if ( settings.url.startsWith("/directory_items?") ) {
            
            // 非表示対象のユーザーを含むすべての要素を検索
            hidden_users.forEach(function ( hidden_user ) {
                $( "a:contains('" + hidden_user + "')" ).each( function() {
                    
                    // 念のため再確認
                    if ( this.text === hidden_user ) {
                        
                        // ユーザーを非表示にする（このテーマ固有の処理です！）
                        $( this ).closest( "tr" ).remove();
                        
                    }
                    
                });
            });
            
        }
        
    });
    
</script>

ご意見やコメントをお待ちしています！

2

確認のためですが、これは管理者とモデレーターを一覧表示する「About」ページでしょうか？

とても素晴らしいですね。コーディングについてもっと学びたいです。

3

@Heliosurge、ご指摘ありがとうございます。これはユーザー一覧（/u）に関するものですが、サイト情報（/about）も含むように更新しました。

ページを非表示にする対象を指定できるように、また親コンテナも削除する必要がある場合の処理も含むようにコードを更新しました。

<script type="text/javascript">
    
    // 非表示にするページ（ページ|親要素）
    let mask_pages = ["/directory_items?|tr", "/about.json"];
    let mask_users = ["james-admin", "another-admin"];
    
    // AJAX でページが読み込まれたとき
    $(document).ajaxComplete(function(event, xhr, settings) {
        
        // ユーザー一覧にいるか確認
        mask_pages.forEach(function(mask_page_full_spec) {
            
            // 仕様を分割
            let mask_page_spec = mask_page_full_spec.split("|");
            
            // ページを検出
            if (settings.url.startsWith(mask_page_spec[0])) {
                mask_users.forEach(function(mask_user) {
                    
                    // 要素を取得
                    let mask_user_elem = $("[data-username='"+mask_user+"']");
                    
                    // 親コンテナ？
                    if (mask_page_spec.length == 2) {
                        mask_user_elem.closest(mask_page_spec[1]).remove();
                    } else {
                        mask_user_elem.remove();
                    }
                    
                });
            }
            
        });
        
    });
    
</script>
4

素晴らしい仕事ですね。

5

モバイル版では動作しないことに気づきました。以下を変更してください。

// <tr> または <div> をこの順序で検索
let mask_pages = ["/directory_items?|tr,div", "/about.json"];

// closest は対象自身を含む可能性があるため、親から検索
mask_user_elem.parent().closest(mask_page_spec[1]).remove();

これが誰かの役に立てば幸いです。前述の通り、クライアントフォーラムに「管理者」であるユーザーを表示したくない場合、プラグインを使用する方がはるかに良い方法だと確信しています。

6

この JavaScript は、互換性のあるテーマ間で共有できるコンポーネントとしても機能しうると気づきました。この些細な機能についてみなさんを退屈させるのはここまでにしますが、私にはとても役立ちました！ :grinning: