ウィジェット、ウィジェットエリア一覧を表示、除外する方法

はじめに

Cocoonでは、登録されているウィジェットやウィジェットエリアを一覧表示し、特定のウィジェットやエリアを除外することができます。

そこで、管理画面のダッシュボードにウィジェットやウィジェットエリアの一覧を表示し、チェックボックスで除外設定を保存できる機能を追加します。

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

ウィジェット一覧を表示、除外

完成イメージ

実装手順

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

// ダッシュボードウィジェットを追加
add_action('wp_dashboard_setup', function () {
  wp_add_dashboard_widget(
    'exclude-widget-area',
    '登録済みウィジェットエリア一覧',
    'render_exclude_widget_area'
  );
});


/**
 * ダッシュボードにウィジェットを出力
 *
 * @return void
 */
if (!function_exists('render_exclude_widget_area')):
function render_exclude_widget_area() {
  global $wp_registered_sidebars;

  // 現在登録されているウィジェットエリアを取得
  $sidebars = $wp_registered_sidebars;

  // 除外ウィジェットエリアを取得
  $exclude = get_exclude_widget_area();

  // 除外ウィジェットエリアを最後に追加
  foreach ($exclude as $sidebar_id => $sidebar_name) {
    if (!isset($sidebars[$sidebar_id])) {
      $sidebars[$sidebar_id] = [
        'name' => $sidebar_name,
        'id'   => $sidebar_id,
      ];
    }
  }
  ?>
  <form method="post">
    <?php wp_nonce_field('exclude_widget_area_action', 'exclude_widget_area_nonce'); ?>

    <table class="widefat fixed striped">
      <thead>
        <tr>
          <th class="manage-column column-cb check-column"></th>
          <th>ウィジェットエリア名</th>
          <th>ID</th>
        </tr>
      </thead>
      <tbody>
      <?php foreach ($sidebars as $sidebar_id => $sidebar): ?>
        <?php
        $checked = isset($exclude[$sidebar_id]) ? 'checked' : '';
        ?>
        <tr>
          <td>
            <input type="checkbox" name="exclude_widget_area[<?= esc_attr($sidebar_id); ?>]" value="<?= esc_attr($sidebar['name']); ?>" <?= $checked; ?>>
          </td>
          <td><?= esc_html($sidebar['name']); ?></td>
          <td><?= esc_html($sidebar_id); ?></td>
        </tr>
      <?php endforeach; ?>
      </tbody>
    </table>

    <p>
      <button type="submit" name="save_exclude_widget_area" class="button button-primary">設定を保存</button>
    </p>
  </form>
  <?php
}
endif;


// 管理画面からの設定データ更新
add_action('admin_init', function () {
  if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    return;
  }

  if (!isset($_POST['save_exclude_widget_area'])) {
    return;
  }

  // nonceチェック
  if (!isset($_POST['exclude_widget_area_nonce']) || !wp_verify_nonce($_POST['exclude_widget_area_nonce'], 'exclude_widget_area_action')) {
    return;
  }

  // 権限チェック
  if (!current_user_can('manage_options')) {
    return;
  }

  $exclude = isset($_POST['exclude_widget_area']) ? array_map('sanitize_text_field', $_POST['exclude_widget_area']) : [];

  update_option('my_exclude_widget_area', $exclude);

  set_transient('my_admin_notice', '設定を保存しました。', 30);

  wp_safe_redirect(admin_url());
  exit;
});


// ウィジェットエリアを除外
add_action('widgets_init', function () {
  $exclude = get_exclude_widget_area();

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

  foreach (array_keys($exclude) as $sidebar_id) {
    unregister_sidebar($sidebar_id);
  }
}, 20);


/**
 * 保存済み除外ウィジェットエリアを取得
 *
 * @return array 除外ウィジェットエリアの配列（id => ウィジェットエリア名）
 */
if (!function_exists('get_exclude_widget_area')):
function get_exclude_widget_area() {
  $sidebars = get_option('my_exclude_widget_area', []);

  if (!is_array($sidebars)) {
    return [];
  }

  return $sidebars;
}
endif;


// 通知メッセージを出力
add_action('admin_notices', function () {
  if ($notice = get_transient('my_admin_notice')) {
    echo '<div class="notice notice-success is-dismissible"><p>' . esc_html($notice) . '</p></div>';
    delete_transient('my_admin_notice');
  }
});

ウィジェットエリア一覧を表示、除外

完成イメージ

実装手順

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

// ダッシュボードウィジェットを追加
add_action('wp_dashboard_setup', function () {
  wp_add_dashboard_widget(
    'exclude-widget-area',
    '登録済みウィジェットエリア一覧',
    'render_exclude_widget_area'
  );
});


/**
 * ダッシュボードにウィジェットを出力
 *
 * @return void
 */
if (!function_exists('render_exclude_widget_area')):
function render_exclude_widget_area() {
  global $wp_registered_sidebars;

  // 現在登録されているウィジェットエリアを取得
  $sidebars = $wp_registered_sidebars;

  // 除外ウィジェットエリアを取得
  $exclude = get_exclude_widget_area();

  // 除外ウィジェットエリアを最後に追加
  foreach ($exclude as $sidebar_id => $sidebar_name) {
    if (!isset($sidebars[$sidebar_id])) {
      $sidebars[$sidebar_id] = [
        'name' => $sidebar_name,
        'id'   => $sidebar_id,
      ];
    }
  }
  ?>
  <form method="post">
    <?php wp_nonce_field('exclude_widget_area_action', 'exclude_widget_area_nonce'); ?>

    <table class="widefat fixed striped">
      <thead>
        <tr>
          <th class="manage-column column-cb check-column"></th>
          <th>ウィジェットエリア名</th>
          <th>ID</th>
        </tr>
      </thead>
      <tbody>
      <?php foreach ($sidebars as $sidebar_id => $sidebar): ?>
        <?php
        $checked = isset($exclude[$sidebar_id]) ? 'checked' : '';
        ?>
        <tr>
          <td>
            <input type="checkbox" name="exclude_widget_area[<?= esc_attr($sidebar_id); ?>]" value="<?= esc_attr($sidebar['name']); ?>" <?= $checked; ?>>
          </td>
          <td><?= esc_html($sidebar['name']); ?></td>
          <td><?= esc_html($sidebar_id); ?></td>
        </tr>
      <?php endforeach; ?>
      </tbody>
    </table>

    <p>
      <button type="submit" name="save_exclude_widget_area" class="button button-primary">設定を保存</button>
    </p>
  </form>
  <?php
}
endif;


// 管理画面からの設定データ更新
add_action('admin_init', function () {
  if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    return;
  }

  if (!isset($_POST['save_exclude_widget_area'])) {
    return;
  }

  // nonceチェック
  if (!isset($_POST['exclude_widget_area_nonce']) || !wp_verify_nonce($_POST['exclude_widget_area_nonce'], 'exclude_widget_area_action')) {
    return;
  }

  // 権限チェック
  if (!current_user_can('manage_options')) {
    return;
  }

  $exclude = isset($_POST['exclude_widget_area']) ? array_map('sanitize_text_field', $_POST['exclude_widget_area']) : [];

  update_option('my_exclude_widget_area', $exclude);

  set_transient('my_admin_notice', '設定を保存しました。', 30);

  wp_safe_redirect(admin_url());
  exit;
});


// ウィジェットエリアを除外
add_action('widgets_init', function () {
  $exclude = get_exclude_widget_area();

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

  foreach (array_keys($exclude) as $sidebar_id) {
    unregister_sidebar($sidebar_id);
  }
}, 20);


/**
 * 保存済み除外ウィジェットエリアを取得
 *
 * @return array 除外ウィジェットエリアの配列（id => ウィジェットエリア名）
 */
if (!function_exists('get_exclude_widget_area')):
function get_exclude_widget_area() {
  $sidebars = get_option('my_exclude_widget_area', []);

  if (!is_array($sidebars)) {
    return [];
  }

  return $sidebars;
}
endif;


// 通知メッセージを出力
add_action('admin_notices', function () {
  if ($notice = get_transient('my_admin_notice')) {
    echo '<div class="notice notice-success is-dismissible"><p>' . esc_html($notice) . '</p></div>';
    delete_transient('my_admin_notice');
  }
});

さいごに

今回紹介した方法を使えば、ダッシュボードに登録済みウィジェットやウィジェットエリアを一覧表示し、不要なものを簡単に除外できるようになります。
チェックボックスで除外設定を保存できるため、管理画面の整理やカスタマイズが効率的に行えます。
Cocoonに限らず、テーマやプラグインで追加されたウィジェットも含めて管理可能です。