目次
目次

独自設定画面にカラーピッカーなどを追加する方法

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

はじめに

独自の設定画面を作成し、管理画面から色や選択肢を使って設定値を保存・管理できる仕組みは非常に便利です。

そこで、管理画面にカラーピッカーやセレクトボックスを設置し、保存された値をフロントで利用する方法について簡単なコードを作成します。

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

完成イメージ

独自の設定画面
フロント表示

実装手順

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

// 設定項目（Option）を設定APIに登録
add_action('admin_init', function () {
  register_setting(
    'my_box_demo',
    'my_box_demo',
    [
      'sanitize_callback' => function ($input) {
        $defaults = [
          'bg_color' => '#ff0000',
          'position' => 'top',
        ];

        $output = wp_parse_args($input ?? [], $defaults);

        // 背景色が空なら初期値へ戻す
        if (empty($output['bg_color'])) {
          $output['bg_color'] = $defaults['bg_color'];
        }

        return $output;
      }
    ]
  );
});


// 管理画面にメニューを追加
add_action('admin_menu', function () {
  add_options_page(
    'Box Demo 設定',
    'Box Demo 設定',
    'manage_options',
    'box-demo',
    'render_box_demo'
  );
});


/**
 * 管理画面ページを出力
 *
 * @return void
 */
if (!function_exists('render_box_demo')):
function render_box_demo() {

  // 設定を取得
  $opt = get_option('my_box_demo', []);

  ?>
  <div class="wrap">
    <h1>Box Demo設定</h1>
    <form method="post" action="options.php">
      <?php settings_fields('my_box_demo'); ?>

      <table class="form-table">
        <tr>
          <th>背景色</th>
          <td>
            <!-- カラーピッカー -->
            <input class="color-field" name="my_box_demo[bg_color]" value="<?= esc_attr($opt['bg_color'] ?? '#ff0000') ?>">
          </td>
        </tr>

        <tr>
          <th>表示位置</th>
          <td>
            <!-- 表示位置 -->
            <select name="my_box_demo[position]">
              <?php
              $positions = ['top' => '上', 'center' => '中央', 'bottom' => '下'];
              foreach ($positions as $k => $v):
                $selected = ($opt['position'] ?? 'top') === $k ? 'selected' : '';
              ?>
                <option value="<?= $k ?>" <?= $selected ?>><?= $v ?></option>
              <?php endforeach; ?>
            </select>
          </td>
        </tr>

      </table>
      <?php submit_button(); ?>
    </form>
  </div>
  <?php
}
endif;


// 管理画面用JS・CSSを追加
add_action('admin_enqueue_scripts', function () {
  if (($_GET['page'] ?? '') !== 'box-demo') {
    return;
  }

  // WP標準のカラーピッカーCSS・JS
  wp_enqueue_style('wp-color-picker');
  wp_enqueue_script('wp-color-picker');
  wp_add_inline_script('wp-color-picker', "jQuery(function ($) { $('.color-field').wpColorPicker(); });");
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  // 設定を取得
  $opt = get_option('my_box_demo', []);

  // 背景色
  $bg_color = esc_attr($opt['bg_color'] ?? '#ff0000');

  // 表示位置
  $position = $opt['position'] ?? 'top';

  // 表示位置をCSSに変換
  $css_pos = match ($position) {
    'top'    => 'top:20px;',
    'bottom' => 'bottom:20px;',
    default  => 'top:50%; transform:translateY(-50%);',
  };

  ob_start();
  ?>
  .box-demo {
    align-items: center;
    background-color: <?= $bg_color; ?>;
    display: flex;
    font-weight: bold;
    height: 100px;
    justify-content: center;
    position: fixed;
    <?= $css_pos; ?>
    width: 200px;
    z-index: 9999;
  }
  <?php

  $handle = 'box-demo';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());
});


// フッターに追加
add_action('wp_footer', function () {
  echo '<div class="box-demo">BOX DEMO</div>';
});

補足

カラーピッカーを使う上での方法

WordPressには標準でカラーピッカー（WP Color Picker）が用意されています。
管理画面で色を選択させたい場合、以下の手順で実装します。

  1. 設定画面にinputを追加
    class="color-field"を付与することで、後からJavaScriptでカラーピッカーに変換できます。
<input class="color-field" name="box_demo[bg_color]" value="<?= esc_attr($opt['bg_color'] ?? '#ff0000') ?>">
  1. 管理画面でカラーピッカー用のスクリプト・CSSを読み込む
wp_enqueue_style('wp-color-picker');
wp_enqueue_script('wp-color-picker');
wp_add_inline_script('wp-color-picker', "jQuery(function($){ $('.color-field').wpColorPicker(); });");
  1. 保存された値はget_option()で取得
    カラーピッカーで選択された値は通常のオプション配列に保存されるため、フロントや他の処理で簡単に取得可能です。

保存先

上記コードでは、独自の設定を1つの配列として保存しています。

register_setting('my_box_demo', 'my_box_demo');

保存先は wp_optionsテーブル です（表1参照）。
従来のようにupdate_option('bg_color', ...)など個別に保存する方法もありますが、このコードでは配列形式でまとめて保存するため、複数の設定項目（背景色や表示位置など）を1つのオプション名my_box_demoに集約できます。

保存例
option_nameoption_value
my_box_demoa:2:{s:8:”bg_color”;s:7:”#ff0000″;s:8:”position”;s:3:”top”;}

この方法により、不要な個別オプションを増やすことなく、機能単位で設定を管理できます。

フロントで利用する場合は、get_option('my_box_demo', [])で配列を取得し、$opt['bg_color']や$opt['position']として使用できます。

プラグインなしで古い投稿を自動で更新する方法
「WordPressで古い投稿を自動的に再更新する方法」を解説。指定した期間更新されていない投稿からランダムに1件を選び、設定した時刻に更新日時を自動変更する方法や、Cocoonで更新日順に表示する仕組み、WP-Cronのスケジュール解除に関する注意点を分かりやすく紹介します。
chuya.s239.xrea.com

さいごに

今回紹介した方法を使えば、独自設定画面にカラーピッカーやセレクトボックスを設置し、設定値を安全に保存・管理する仕組みを簡単に構築できます。
保存された値はフロント側でも利用可能で、背景色や表示位置などのスタイル調整に活用できます。
管理画面からの操作でサイト表示を柔軟に変更できるため、通知や簡易メニューなどの実装例にも応用可能です。

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