Cocoon設定画面の一部項目だけを選択不可にする方法

はじめに

Cocoonのスキン制御は、Cocoon設定画面の各項目値を1つに固定する機能です。

しかし、センターロゴだけを有効にし、トップメニューだけを選択不可にするといった部分的な制御はできません。

そこで、トップメニューだけを選択不可とします。

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

完成イメージ

実装手順

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

複数選択可能な各設定項目の<input>タグ（selectやradio）ごとに、除外するHTMLタグと何番目の項目かを指定します。

add_filter('admin_input_form_tag', function ($res, $name) {

  // nameごとに「親タグ」「子タグ」「削除する位置」を定義
  $rules = [
    'front_page_type' => [
      'parent' => 'ul',      // 全体を囲む親タグ
      'child'  => 'li',      // 削除対象となる子タグ
      'remove' => [1, 2],    // 削除する項目番号（1始まり）
    ],
    'header_layout_type' => [
      'parent' => 'select',
      'child'  => 'option',
      'remove' => [5, 6, 7, 8],
    ],
  ];

  // 対象外のnameは処理対象外
  if (!isset($rules[$name])) {
    return $res;
  }

  $rule = $rules[$name];

  // HTMLパース時の警告を抑制
  libxml_use_internal_errors(true);

  // HTMLをDOMとして取得
  $dom = new DOMDocument();
  $dom->loadHTML('<?xml encoding="utf-8" ?>' . $res);

  // 指定タグを取得
  $children = $dom->getElementsByTagName($rule['child']);

  // 指定項目を後ろから削除
  foreach (array_reverse($rule['remove']) as $n) {
    $i = $n - 1;
    if ($children->item($i)) {
      $children->item($i)->parentNode->removeChild($children->item($i));
    }
  }

  // checkedの有無を確認
  if ($rule['child'] === 'li') {
    $inputs     = $dom->getElementsByTagName('input');
    $hasChecked = false;

    foreach ($inputs as $input) {
      if ($input->hasAttribute('checked')) {
        $hasChecked = true;
        break;
      }
    }

    // checkedがなければ先頭のinputを選択
    if (!$hasChecked && $inputs->length > 0) {
      $inputs->item(0)->setAttribute('checked', 'checked');
    }
  }

  // 指定タグをHTMLとして取得
  $res = $dom->saveHTML($dom->getElementsByTagName($rule['parent'])->item(0));

  return $res;
}, 10, 2);

さいごに

今回紹介した方法を使えば、Cocoonの設定画面に表示されるselectやradio項目を、設定値ごとに柔軟に制御できるようになります。
スキンの仕様に合わせて不要な選択肢だけを非表示にできるため、設定ミスの防止や管理画面の簡素化にも役立ちます。
用途に応じてルールを追加し、快適なカスタマイズ環境を構築してみてください。