はじめに
プラグイン「Team Members」などを使わず、Cocoonの搭載されている「プロフィール」ショートコードを活用して、プロフィール一覧を表示できる独自ショートコードを追加します。
さらに、ユーザー→プロフィールで肩書を入力できるようにし、その内容を「プロフィール」ウィジェットのラベルに表示させます。
この記事では、この方法について説明します。
完成イメージ



使用方法
以下にショートコードを示します。
[my_profiles_list]
| オプション | 説明 | 値 | 初期値 |
|---|---|---|---|
| orderby | 並び替えの基準 | ID | |
| order | 並び順 | ASC |
実装手順
以下のコードをfunctions.phpに追加します。
- ラベルPHPを追加(プロフィール画面)
以下のコードをfunctions.phpに追加します。
/** * プロフィール画面に「肩書」フィールドを追加 * * @param WP_User $user 現在表示しているユーザーオブジェクト * @return void */ if (!function_exists('add_user_label_field')): function add_user_label_field($user) { wp_nonce_field('profiles_list_action', 'profiles_list_nonce'); ?> <h3>追加プロフィール情報</h3> <table class="form-table"> <tr> <th><label for="user_label">肩書</label></th> <td> <input type="text" name="user_label" id="user_label" value="<?= esc_attr(get_the_author_meta('my_user_label', $user->ID)); ?>" class="regular-text" /><br/> <span class="description">肩書を入力してください(例:代表取締役、編集長など)。</span> </td> </tr> </table> <?php } endif; // プロフィールを編集 add_action('show_user_profile', 'add_user_label_field'); add_action('edit_user_profile', 'add_user_label_field'); /** * 「肩書」フィールドを保存 * * @param int $user_id 保存対象のユーザーID * @return void */ if (!function_exists('save_user_label_field')): function save_user_label_field($user_id) { // nonceチェック if (!isset($_POST['profiles_list_nonce']) || !wp_verify_nonce($_POST['profiles_list_nonce'], 'profiles_list_action')) { return; } // 権限チェック if (!current_user_can('edit_user', $user_id)) { return; } if (!isset($_POST['user_label'])) { return; } update_user_meta($user_id, 'my_user_label', sanitize_text_field($_POST['user_label'])); } endif; // プロフィールデータを更新 add_action('personal_options_update', 'save_user_label_field'); add_action('edit_user_profile_update', 'save_user_label_field'); - ラベルPHPを追加(ユーザー一覧)
以下のコードをfunctions.phpに追加します。
// 管理画面一覧にカラムを追加 add_filter('manage_users_columns', function ($columns) { $columns['user_label'] = '肩書'; $columns['user_visible'] = '表示'; return $columns; }); // 管理画面一覧のカラムにデータを表示 add_filter('manage_users_custom_column', function ($value, $column_name, $user_id) { switch ($column_name) { case 'user_label': $value = esc_html(get_user_meta($user_id, 'my_user_label', true)); break; case 'user_visible': $checked = get_user_meta($user_id, 'my_user_visible', true) ? 'checked' : ''; $value = '<input type="checkbox" class="user-visible-checkbox" data-user-id="' . esc_attr($user_id) . '" ' . $checked . ' />'; break; } return $value; }, 10, 3); // 対象の処理を実行 add_action('admin_footer-users.php', function () { ?> <script> jQuery(function ($) { $(document).on('change', '.user-visible-checkbox', function () { var userId = $(this).data('user-id'); var checked = $(this).is(':checked') ? 1 : 0; $.post(ajaxurl, { action: 'save_user_visible', user_id: userId, visible: checked, profiles_list_nonce: '<?= wp_create_nonce("profiles_list_action"); ?>' }); }); }); </script> <?php }); // Ajaxアクションを追加 add_action('wp_ajax_save_user_visible', function () { check_ajax_referer('profiles_list_action', 'profiles_list_nonce'); $user_id = isset($_POST['user_id']) ? intval($_POST['user_id']) : 0; $visible = isset($_POST['visible']) ? intval($_POST['visible']) : 0; if ($user_id) { update_user_meta($user_id, 'my_user_visible', $visible); } wp_send_json_success(); }); - ラベルPHPを追加(プロフィール一覧)
以下のコードをfunctions.phpに追加します。
// フロントエンド表示への反映 add_filter('widget_display_callback', function ($instance, $widget, $args) { if ($widget->id_base !== 'author_box') { return $instance; } $user_id = get_sns_default_follow_user(); if (is_singular()) { $user_id = get_post()->post_author; } if ($user_id) { $label = get_user_meta($user_id, 'my_user_label', true); if ($label) { $instance['label'] = $label; } } return $instance; }, 10, 3); // ショートコードを追加 add_shortcode('my_profiles_list', function ($atts) { $atts = shortcode_atts([ 'orderby' => 'ID', 'order' => 'ASC', ], $atts); // ユーザー情報を取得 $args = [ 'order' => $atts['order'], 'orderby' => $atts['orderby'], 'meta_key' => 'my_user_visible', 'meta_value' => '1', ]; $users = get_users($args); if (empty($users)) { return '<p>ユーザーが見つかりません。</p>'; } ob_start(); echo '<div class="profiles-list">'; foreach ($users as $user) { $label = get_user_meta($user->ID, 'my_user_label', true); $label = $label ? $label : ''; echo do_shortcode('[author_box id="' . esc_attr($user->ID) . '" label="' . esc_attr($label) . '"]'); } echo '</div>'; return ob_get_clean(); });
さいごに
今回紹介した方法を使えば、Cocoonに標準で備わっている「プロフィール」ショートコードを活用しつつ、肩書フィールドを追加してプロフィール一覧を表示できます。
プラグインを使わずに、シンプルなコードで拡張できるので、管理も容易になります。
必要に応じて並び替えや役割での絞り込みもできるため、メンバーページや運営者紹介ページなどに応用可能です。

