プラグインなしでプロフィール一覧を表示する方法

Cocoonカスタマイズ集
この記事は約8分で読めます。
記事内に広告が含まれています。

はじめに

プラグイン「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に標準で備わっている「プロフィール」ショートコードを活用しつつ、肩書フィールドを追加してプロフィール一覧を表示できます。
プラグインを使わずに、シンプルなコードで拡張できるので、管理も容易になります。
必要に応じて並び替えや役割での絞り込みもできるため、メンバーページや運営者紹介ページなどに応用可能です。

タイトルとURLをコピーしました