不要なSNSフォロー入力項目を非表示・無効化する方法

はじめに

Cocoonには、多くのSNSフォローボタン用に入力欄が最初から用意されています。

しかし、サイトの運営方針によっては「使わないSNSの項目が多すぎて、プロフィールの編集画面がごちゃついてしまう」というケースも少なくありません。

そこで、Cocoon設定→SNSフォローから、不要なSNS項目を非表示にします。
なお、非表示（チェック外）にした項目は、過去に入力したデータが残っていてもフォローボタンとして表示されなります。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

/**
 * SNSサービスのラベルを取得
 *
 * @param mixed $data SNSサービスデータ
 * @return string SNSサービスのラベル
 */
if (!function_exists('get_sns_service_label')):
function get_sns_service_label($data) {
  $label = $data;

  if (is_array($data)) {
    $label = $data['name'] ?? reset($data) ?? '';
  }

  return (string) $label;
}
endif;


/**
 * 「SNSサービスのURL」欄のHTMLを生成
 *
 * @return string HTML文字列
 */
if (!function_exists('get_sns_visibility_list_inner_html')):
function get_sns_visibility_list_inner_html() {
  $sns_visibility = (array) get_theme_option('my_sns_visibility', []);

  ob_start();
  ?>
  <li><?php _e('ウェブサイト', THEME_NAME); ?></li>
  <?php foreach ((array) get_theme_sns_follow_services() as $key => $data): ?>
    <li>
      <label>
        <input type="checkbox" name="my_sns_visibility[<?php echo esc_attr($key); ?>]" value="1" <?php checked(in_array($key, $sns_visibility, true)); ?>>
        <?php echo esc_html(get_sns_service_label($data)); ?>
      </label>
    </li>
  <?php endforeach; ?>
  <?php
  return ob_get_clean();
}
endif;


/**
 * Cocoon設定（SNSフォロー）にメニューを追加
 *
 * @return void
 */
if (!function_exists('add_sns_visibility_fields')):
function add_sns_visibility_fields() {
  ?>
  <script>
  jQuery(function ($) {
    var $list = $('#sns-follow ul.list-style-disc');
    if ($list.length) {
      $list
        .removeClass('list-style-disc')
        .html(<?php echo wp_json_encode(get_sns_visibility_list_inner_html()); ?>);
    }
  });
  </script>
  <?php
}
endif;


// 管理画面にメニューを追加
add_action('admin_menu', function () {
  $page_hook = get_plugin_page_hookname('theme-settings', '');

  if ($page_hook) {
    add_action($page_hook, 'add_sns_visibility_fields');
  }
}, 99);


// Cocoon設定値を保存
add_action('cocoon_settings_after_save', function () {
  if (!current_user_can('manage_options')) {
    return;
  }

  $all_sns = array_keys((array) get_theme_sns_follow_services());
  $posted_raw = (isset($_POST['my_sns_visibility']) && is_array($_POST['my_sns_visibility']))
    ? wp_unslash($_POST['my_sns_visibility'])
    : [];

  $_POST['my_sns_visibility'] = array_values(array_intersect($all_sns, array_keys($posted_raw)));

  update_theme_option('my_sns_visibility');
});


// プロフィール編集画面のSNS項目を設定
add_filter('user_contactmethods', function ($profile_items) {
  $all_sns = array_keys((array) get_theme_sns_follow_services());
  $sns_visibility = (array) get_theme_option('my_sns_visibility', []);

  // 非表示に設定されたSNS項目を除外
  return array_diff_key($profile_items, array_flip(array_diff($all_sns, $sns_visibility)));
}, 999);


// 対象の処理を実行
add_action('init', function () {
  add_filter('get_user_metadata', function ($value, $object_id, $meta_key, $single) {
    $service_keys = array_keys((array) get_theme_sns_follow_services());

    // CocoonのSNS項目以外は処理終了
    if (empty($meta_key) || !in_array($meta_key, $service_keys, true)) {
      return $value;
    }

    $sns_visibility = (array) get_theme_option('my_sns_visibility', []);

    // 非表示に設定されたSNS項目の値を空に設定
    if (!in_array($meta_key, $sns_visibility, true)) {
      return $single ? '' : [''];
    }

    return $value;
  }, 999, 4);
});

さいごに

今回紹介した方法を使えば、Cocoon標準の豊富なSNS項目を、サイトの規模や運営方針に合わせて完全にコントロールできるようになります。
管理画面の見た目をすっきりと整理できます。