ヘッダーのロゴ

すぐに仕事で使えるIT技術情報メディア

ユーザー管理画面で特定のカスタムフィールドで絞り込み機能を実装する方法

投稿日:2024年04月08日(月) 更新日:2024年04月14日(日)
ユーザー管理画面で特定のカスタムフィールドで絞り込み機能を実装する方法|WordPress MAGAZINE ワードプレスマガジン|すぐに仕事で使えるIT技術情報メディア

みなさんこんにちは!エンジニアの高澤です!

今回はWordPressのユーザー管理画面で特定のカスタムフィールドで絞り込み機能を実装する方法ついて解説していきたいと思います。

当記事の内容は、ユーザー管理画面に対して、ユーザー情報に紐づけられたカスタムフィールドの値で絞り込み機能を実装したいといった場合にお役立ていただけるかと思います。

エンジニアの方へ向けた内容となっており、実務でお役立てできる構成にしておりますのでよろしければぜひ当記事をご活用ください。

ユーザー管理画面の絞り込み機能の実装とは

それでは改めて当記事でいうところの絞り込み機能について事前にご説明いたします。

絞り込み機能とは、ユーザー一覧管理画面に対してセレクトボックスを追加し、ユーザーに紐づけられたカスタムフィールドの値をセレクトボックスで選択できるようにして、同一の値を持つユーザーに絞り込んで一覧に表示させるという実装になります。

当記事のサンプルコードで実装していただいたイメージが下図になりますが、画面右上に「特定のカスタムフィールドの値で絞り込む」のセレクトボックスが追加されているのがわかるかと思います。

セレクトボックスを選択していただくと、下図のように「公開中」「非公開中」といったカスタムフィールドの値が選択できるようになっております。

具体的には下図のイメージです。

例えば「公開中」を選択していただくと、「公開中」というカスタムフィールドの値をもつユーザーだけを絞り込み、管理画面に一覧表示することができます。

絞り込み機能を実装する方法

それでは早速、絞り込み機能を実装していきましょう。

流れとしては以下の手順で進めていただけるとスムーズかと思います。

  • カスタムフィールドプラグインのインストール
  • ユーザー情報にカスタムフィールドの値を設定
  • 絞り込み検索機能コードをfunctions.phpにコピー&ペースト
  • ご自身のWordPressに適した形でカスタマイズ

上記の流れで解説していきます。

プラグインのインストール

まずはカスタムフィールドのプラグインをインストールしていきます。

基本的に一般公開されているどのカスタムフィールドのプラグインをお使いいただいても問題ありません。

当記事ではAdvanced Custom Fieldsプラグインを利用します。

インストールは、WordPress管理画面左メニューの「プラグイン」→「新規プラグインを追加」をクリックしてください。

新規プラグインインストール画面が開くので、画面右上にある検索ボックスに「Advanced Custom Fields」と入力してください。

入力していただくと下図のようなイメージで検索結果にAdvanced Custom Fieldsが表示されるので、「今すぐインストール」→「有効化」の順でボタンをクリックしてください。

すると、管理画面左メニューに「ACF」が追加され、カスタムフィールドを設定できるようになります。

これでカスタムフィールドを設定するためのセットアップが完了しました!

ユーザー情報にカスタムフィールドの値を設定

プラグインのインストールができたら、次はユーザー情報にカスタムフィールドの設定を行い、データを入力してみましょう。

Advanceds Custom Fieldsの設定ページから以下の内容で入力してください。

当記事ではフィールド名を「user_status」として設定します。

サンプルコードも「user_status」に対応して記述しているため、カスタマイズの際はこちらを修正してください。

  • グループ名:「ユーザーカスタムフィールド」
  • フィールドタイプ:「テキスト」
  • フィールドラベル:「ユーザーステータス」
  • フィールド名:「user_status」
  • ロケーションルール:「現在のユーザー権限グループ」→「Administrator」

ロケーションルールに関しては、下図のように全ての権限に適用するか、一部に適用するかは任意でご設定ください。

入力が完了したら「変更内容を保存」ボタンをクリックしていただけましたら完了です。

絞り込み検索機能コードをfunctions.phpにコピー&ペースト

設定が完了したら、いよいよ絞り込み検索機能コードをfunctions.phpにコピー&ペーストしていきます。

以下のコードをfunctions.phpにコピー&ペーストしてください。

<?php
// ユーザー一覧管理画面にて、「特定のカスタムフィールドの値」でソートをかけられるように実装する
function custom_manage_users_sortable_columns($columns) {
    // 追加した列をソート可能にする
    $columns['user_status'] = 'user_status';
    return $columns;
}
add_filter('manage_users_sortable_columns', 'custom_manage_users_sortable_columns');

function custom_pre_get_users($query) {
    // ソートの方法を指定する
    if (!is_admin()) return; // 管理画面以外では処理をしない

    if ($orderby = $query->get('orderby')) {
        switch ($orderby) {
            case 'user_status':
                $query->set('meta_key', 'user_status');
                $query->set('orderby', 'meta_value');
                $query->set('order', $query->get('order'));
                break;
        }
    }
}
add_action('pre_get_users', 'custom_pre_get_users');


function custom_filter_users_by_course_section($query) {
    // ユーザー一覧を特定のカスタムフィールドの値で絞り込む
    if (isset($_GET['user_status_sort'])) {
        global $pagenow;
        if (is_admin() && $pagenow == 'users.php' && !empty($_GET['user_status_sort'])) {
            $section = $_GET['user_status_sort'];
            $meta_query = array(
                array(
                    'key'   => 'user_status',
                    'value' => $section
                )
            );
            $query->set('meta_key', 'user_status');
            $query->set('meta_query', $meta_query);
        }
    }
}
add_filter('pre_get_users', 'custom_filter_users_by_course_section');

// ユーザー一覧管理画面のヘッダーにHTMLを追加する
function custom_admin_head() {
    global $pagenow;
    if ($pagenow == 'users.php') {
        // データベースからユーザーカスタムフィールド情報を取得
        global $wpdb;
        $users_results_array = array();
        $users_results = $wpdb->get_results("SELECT meta_key, meta_value FROM {$wpdb->usermeta} WHERE meta_key = 'user_status' ");
        foreach ($users_results as $val) {
            $users_results_array[] = $val->meta_value;
        }
        $users_results_array = array_unique($users_results_array);
        $users_results_array = array_diff($users_results_array, array(''));
        $users_results_array = array_values($users_results_array);
        ?>
        <style>
            .search__content__box__el {
                text-align: right;
                padding: 20px 20px 0;
                margin-bottom: -42px;
            }
            .search__content__box__el__title {

            }
            .search__content__box__el select {

            }
        </style>
        <div class="search__content__box__el">
            <!--<h2 class="search__content__box__el__title">
                絞り込み検索
            </h2>-->
            <select name="user_status_sort" style="float:none;" onChange='document.location.href=this.options[this.selectedIndex].value;'>
                <option value="<?php echo esc_url(home_url()); ?>/wp-admin/users.php" <?php if($_GET['user_status_sort'] == ''): ?>selected<?php endif; ?>>特定のカスタムフィールドの値で絞り込む</option>
                <?php
                foreach($users_results_array as $value):
                ?>
                <option value="<?php echo esc_url(home_url()); ?>/wp-admin/users.php?s&action=-1&new_role&user_status_sort=<?php echo $value ; ?>&paged=1&action2=-1&new_role2" <?php if($_GET['user_status_sort'] == $value ): ?>selected<?php endif; ?>><?php echo $value; ?></option>
                <?php
                endforeach;
                ?>
            </select>
        </div>
        <?php
    }
}
add_action('admin_notices', 'custom_admin_head');
?>

ペースト後保存していただき、ユーザー管理画面をご覧いただくと下図のように画面右上にセレクトボックスが追加されているかと思います。

ただし、選択してもまだ項目が表示されておりません。

なぜならばまだユーザー編集画面からカスタムフィールドの値を設定していないからです。

なのでデータを入力していきましょう!

ユーザー編集管理画面を開いて以下のユーザーステータスのテキストボックスにご自身でお好きな値を入力してください。(複数のユーザーに違うデータを入力していただくとあとで結果がわかりやすいです)

当記事では「公開中」と「非公開中」と入力して設定していきます。

設定できましたか?

設定が完了したらユーザー一覧管理画面に戻っていただきセレクトボックスを選択していただくと下図のように「公開中」と「非公開中」が選択できるようになり、選択した時に該当するユーザーに絞り込まれるかと思います。

これで実装は完了です。お疲れ様でした!

ご自身のWordPressに適した形でカスタマイズ

あとはサンプルのソースコードをご自身でカスタマイズしてください。

まだまだ応用できるコードかと思いますので、ご自身でカスタマイズしていただきより便利な管理画面を構築しましょう。

ソースコードの説明

以下に掲載したサンプルコードの説明をしておきます。

custom_manage_users_sortable_columns関数

ユーザー管理画面に新しい列を追加し、その列をソート可能にします。

この関数はmanage_users_sortable_columnsフィルターフックにフックしています。

この例では、user_statusというカスタムフィールドをソート可能な列として追加しています。

custom_pre_get_users関数

pre_get_usersアクションフックを使用して、ユーザーのクエリを変更し、特定のカスタムフィールドの値でユーザーをソートする方法を指定します。

この関数は、管理画面でのみ実行され、特定の条件下でのみ実行されます。

この例では、user_statusというカスタムフィールドの値でユーザーをソートします。

custom_filter_users_by_course_section関数

特定のカスタムフィールドの値でユーザーを絞り込むための関数です。

ユーザーが特定のカスタムフィールドの値で絞り込みを行うためのフォームを追加し、その値に基づいてユーザーのクエリを変更します。

custom_admin_head関数

管理画面のユーザー一覧ページのヘッダーに、特定のカスタムフィールドの値でユーザーを絞り込むためのセレクトボックスを追加します。

このセレクトボックスには、データベースから取得した特定のカスタムフィールドの値の一覧が表示されます。

ユーザーが特定の値を選択すると、ページがリロードされてその値のユーザーのみが表示されます。

これらの機能を組み合わせることで、ユーザー管理画面にて特定のカスタムフィールドの値でユーザーを絞り込んで表示する機能が実現されています。

まとめ

ユーザー管理画面に対して、ユーザー情報に紐づけられたカスタムフィールドの値で絞り込み機能を実装する方法の解説は以上になります。

当記事のソースコードは実際のお仕事で使えるようにしており、ソースコードに関する説明をあわせてご確認いただくことで様々な用途にカスタマイズできるかと思います。

実務でお役立てできる構成にしておりますので、よろしければぜひ繰り返し当記事をご活用ください。

執筆者

ワードプレスマガジン編集部 高澤 翔汰

歴4年目(2024年8月以降から5年目です)のエンジニアです!
CMSでのサイト構築とWebデザイン制作を兼任して4年目になります。
自作のiOSアプリ(iPhoneアプリ)やWordPressプラグインを開発することもあり、まだまだ現在進行形で勉強中です!