ウィジェット画面の特定ウィジェットエリアだけを自動で開く方法

はじめに

管理画面でウィジェットを操作する際、初期状態では1番目のウィジェットエリアだけが開き、それ以外は閉じています。

しかし、作業に応じて別のエリアを初期状態で開きたいこともあります。

そこで、特定のウィジェットエリアだけを開くようにします。

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

完成イメージ

実装手順

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

add_action('admin_enqueue_scripts', function ($hook_suffix) {
  if ($hook_suffix !== 'widgets.php') {
    return;
  }

  ob_start();
  ?>
  jQuery(function ($) {
    // 開くウィジェットエリア（0から数える）
    const openIndex = 1;

    $('#widgets-right .widgets-holder-wrap').addClass('closed');
    $('#widgets-right .widgets-holder-wrap').eq(openIndex).removeClass('closed');
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});

拡張：管理画面からウィジェットエリアを選択して初期表示する方法

先ほど紹介したコードでは、functions.php内の配列を書き換えることで初期表示のウィジェットエリアを指定できます。
しかし、管理者がその都度コードを編集するのは手間がかかります。

そこで、管理画面のヘルプタブから特定のウィジェットエリアを選択するだけで、初期状態を自動的に設定する方法もあります。
この方法を使えば、よく使うウィジェットエリアを簡単に初期表示に設定でき、作業効率が向上します。

完成イメージ

実装手順

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

// ウィジェットページに追加
add_action('load-widgets.php', function () {
  global $wp_registered_sidebars;

  // 現在の画面情報を取得
  $screen = get_current_screen();

  if (!$screen || $screen->id !== 'widgets') {
    return;
  }

  // 登録されているウィジェットエリア情報を取得
  $areas = array_values($wp_registered_sidebars);

  // 保存済みインデックスを取得
  $saved_index = get_option('my_open_widget_area', 0);

  ob_start();
  ?>
  <p>ウィジェット画面を開いたときに、初期表示するウィジェットエリアを選択できます。</p>
  <div id="open-widget-area-selector">
    <?php foreach ($areas as $i => $area) :
      $checked = ($i === (int) $saved_index) ? 'checked' : '';
    ?>
      <label>
        <input type="radio" name="open_widget_area" value="<?php echo esc_attr($i); ?>" <?php echo $checked; ?>>
        <span><?php echo esc_html($area['name']); ?></span>
      </label>
    <?php endforeach; ?>
  </div>
  <?php
  $html = ob_get_clean();

  // ヘルプタブを追加
  $screen->add_help_tab([
    'id'      => 'open_widget_area_help_tab',
    'title'   => '初期表示ウィジェット設定',
    'content' => $html,
  ]);
});


// Ajaxアクションを追加
add_action('wp_ajax_open_widget_area', function () {
  check_ajax_referer('open_widget_area_action', 'open_widget_area_nonce');

  $index = isset($_POST['index']) ? intval($_POST['index']) : 0;
  update_option('my_open_widget_area', $index);

  wp_send_json_success();
});


// 管理画面用JS・CSSを追加
add_action('admin_enqueue_scripts', function ($hook_suffix) {
  if ($hook_suffix !== 'widgets.php') {
    return;
  }

  // ウィジェットインデックスを取得
  $saved_index = get_option('my_open_widget_area', 0);

  // JS側に渡すデータ設定
  $localized = [
    'savedIndex' => (int) $saved_index,
    'ajaxUrl'    => admin_url('admin-ajax.php'),
    'nonce'      => wp_create_nonce('open_widget_area_action'),
  ];

  wp_add_inline_script(
    'jquery',
    'const open_widget_area_settings = ' . wp_json_encode($localized) . ';',
    'before'
  );

  ob_start();
  ?>
  #open-widget-area-selector {
    column-count: 2;
    column-gap: 15px;
    max-width: 500px;
  }

  #open-widget-area-selector label {
    display: block;
  }
  <?php
  wp_add_inline_style('wp-admin', ob_get_clean());

  ob_start();
  ?>
  jQuery(function ($) {
    const data = open_widget_area_settings;
    const wrap = $('#widgets-right .widgets-holder-wrap');

    // 選択済みのエリアだけ開く
    wrap.addClass('closed').eq(data.savedIndex).removeClass('closed');

    // ラジオボタン選択時の処理
    $(document).on('change', 'input[name="open_widget_area"]', function () {
      const newIndex = parseInt($(this).val(), 10);
      wrap.addClass('closed').eq(newIndex).removeClass('closed');

      // 管理画面からの設定データ更新
      $.post(data.ajaxUrl, {
        action: 'open_widget_area',
        index: newIndex,
        open_widget_area_nonce: data.nonce
      });
    });
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});

さいごに

今回紹介した方法を使えば、管理画面でウィジェットを開く際に、任意のエリアを初期状態で開いたままに設定できます。
これにより、作業効率が向上し、目的のウィジェットを素早く編集できるようになります。