Cocoon設定画面に独自設定を追加して保存・取得する方法

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

Cocoon設定での設定値を取得・保存するにあたり、独自設定（my_comment_toggle_enableなど）の設定キーと初期値を配列として定義します。

/**
 * カスタム設定一覧（設定キー => デフォルト値）を定義
 *
 * @return array 設定キーとデフォルト値の配列
 */
if (!function_exists('my_cocoon_options')):
function my_cocoon_options() {
  return [
    'my_comment_toggle_enable' => 0,
  ];
}
endif;

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

前述のコードで定義した設定一覧（my_cocoon_options）をもとに、指定したキーの設定値を取得する関数を作成します。

/**
 * カスタム設定を取得
 *
 * @param string $key 設定キー名
 * @return mixed 設定値（未設定の場合はデフォルト値）
 */
if (!function_exists('my_get_cocoon_options')):
function get_my_cocoon_options($key) {
  $options = my_cocoon_options();

  return get_theme_option($key, $options[$key]);
}
endif;

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

前述のコードで定義した設定をもとに、フォーム送信時に値を一括保存する処理を作成します。
Cocoonの保存フック（cocoon_settings_after_save）を利用することで、各設定値の保存処理をテーマ側に委ねす。

// Cocoon設定値を保存
add_action('cocoon_settings_after_save', function () {
  foreach (array_keys(my_cocoon_options()) as $key) {
    update_theme_option($key);
  }
});

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

前述のDOM挿入処理（add_comment_field）を、Cocoon設定ページ（theme-settings）が読み込まれたタイミング限定で実行されるようフックへ登録します。

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

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

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

関数（get_comment_field_html）で生成したHTMLを、JavaScriptを使ってCocoon設定画面の目的の位置へDOM 挿入します。

/**
 * Cocoon設定（投稿）にメニュー項目を追加
 *
 * @return void
 */
if (!function_exists('add_comment_field')):
function add_comment_field() {
  $html = get_comment_field_html();

  ?>
  <script>
  // 既存の「送信ボタンラベル」設定行の前に追加
  jQuery(function ($) {
    const $target = $('#comment_submit_label').closest('tr');
    if ($target.length) {
      $target.before(<?= wp_json_encode($html); ?>);
    }
  });
  </script>
  <?php
}
endif;

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

Cocoonの設定画面に追加表示するフォームのHTMLを生成する関数を作成します。
前述の取得関数（my_get_cocoon_option）を使って現在の設定値を呼び出し、Cocoon標準の関数でUIを出力します。

/**
 * Cocoon設定項目のHTMLを取得
 *
 * @return string 設定項目のHTML
 */
if (!function_exists('get_comment_field_html')):
function get_comment_field_html() {
  ob_start();
  ?>
  <tr>
    <th scope="row">
      <label>コメントを短縮表示</label>
    </th>
    <td>
      <?php generate_checkbox_tag('my_comment_toggle_enable', get_my_cocoon_options('my_comment_toggle_enable'), 'コメントを短縮表示する'); ?>
      <?php generate_tips_tag('コメントを折りたたみ表示に切り替えます。'); ?>
    </td>
  </tr>
  <?php
  return ob_get_clean();
}
endif;