Cocoon設定のタブを非表示にする方法

はじめに

Cocoonには多くの設定項目が用意されていますが、使用しない設定タブまで表示されていると、目的の設定を探しにくくなることがあります。

そこで、Cocoon設定に独自の「メニュー管理」タブを追加し、不要な設定タブを選択して非表示にします。

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

完成イメージ

実装手順

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

// Cocoon設定に独自タブを追加
add_filter('cocoon_settings_tabs', function ($definitions) {
  // 「メニュー管理」タブを先頭に追加
  return array('menu-management' => array('label' => 'メニュー管理')) + $definitions;
});


// 独自タブ内のコンテンツを出力
add_action('cocoon_settings_tab_content_menu-management', function () {
  // Cocoonの設定タブ一覧を取得
  $tabs = cocoon_get_settings_tabs();

  // 保存されている非表示タブのIDを取得
  $hidden = (array) get_option('my_hidden_settings_tabs', []);

  ?>
  <div id="menu-management-page" class="postbox">
    <h2 class="hndle">メニュー管理設定</h2>
    <div class="inside">
      <p>使用しない設定タブを表示しないようにする設定です。</p>
      <table class="form-table"><tbody><tr>
        <th scope="row"><?php generate_label_tag('my_hidden_settings_tabs', '非表示タブ'); ?></th>
        <td><ul>
          <?php foreach ($tabs as $id => $tab) : ?>
            <?php
            // 「メニュー管理」タブ自身は処理対象外
            if ($id === 'menu-management') {
              continue;
            }
            ?>
            <li><?php generate_checkbox_tag('my_hidden_settings_tabs[]', $hidden, '<b>' . esc_html($tab['label']) . '</b>', $id); ?></li>
          <?php endforeach; ?>
        </ul></td>
      </tr></tbody></table>
    </div>
  </div>
  <?php
});


// 独自タブのデータを保存
add_action('cocoon_settings_save_menu-management', function () {
  $raw = $_POST['my_hidden_settings_tabs'] ?? [];
  $posted = array_map('sanitize_text_field', (array) $raw);

  update_option('my_hidden_settings_tabs', $posted);
});


// 対象の処理を実行
add_action('admin_footer', function () {
  $hidden = (array) get_option('my_hidden_settings_tabs', []);

  if (empty($hidden)) {
    return;
  }

  // 非表示対象タブに対応するCSSセレクターを生成
  $selectors = [];

  foreach ($hidden as $id) {
    $selectors[] = "#tabs > #tab-{$id}-input, #tabs > #tab-{$id}-label, #tabs > #tab-{$id}-content";
  }

  echo '<style id="hidden-tabs-style">' . implode(',', $selectors) . '{display:none !important;}</style>';
});

さいごに

今回紹介した方法を使えば、Cocoon設定に独自の管理タブを追加し、使用しない設定タブを任意に非表示にできます。

Cocoon設定の項目が多く、普段使用する設定を見つけにくい場合は、不要なタブを整理することで設定画面をすっきりさせることができます。