ウィジェット画面で未使用エリアを一括で非表示にする方法

はじめに

WordPressの管理画面で、テーマが提供するウィジェットエリアが多すぎて、画面が縦に長くスクロール操作が煩雑になってしまうことはありませんか？
特に開発者がテーマをカスタマイズする際や、特定のサイドバーのみを使用している環境では、ウィジェットが一つも配置されていない「未使用のエリア」が視覚的なノイズとなり、目的の作業場所を探す手間を生じさせます。

そこで、「ウィジェットが一つも配置されていないエリア」を一括で非表示に切り替えます。
チェックボックスのオン・オフだけで、必要なエリアだけに視界を絞り込むことができ、管理画面の視認性と操作性が劇的に向上します。

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

完成イメージ

実装手順

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

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

  ob_start();
  ?>
  .widget-area-hidden {
    display: none !important;
  }

  .page-title-action {
    margin-top: -3px;
  }
  <?php
  wp_add_inline_style('wp-admin', ob_get_clean());

  ob_start();
  ?>
  jQuery(function ($) {

    /**
     * 未使用のウィジェットエリアを表示・非表示にする
     *
     * @param {boolean} isHidden 未使用エリアを非表示にするか
     * @return {void}
     */
    function toggleUnusedAreas(isHidden) {
      $('#widgets-right .widgets-holder-wrap').each(function () {
        $(this).toggleClass(
          'widget-area-hidden',
          isHidden && $(this).find('.widgets-sortables .widget').length === 0
        );
      });
    }


    // チェックボックスを追加
    const $checkbox = $('<label class="page-title-action"><input type="checkbox" id="bulk-toggle-checkbox"> 未使用ウィジェットエリアを一括非表示</label>');

    $('h1.wp-heading-inline').after($checkbox);


    // 保存されている状態を読み込む
    const isHidden = localStorage.getItem('my_hide_unused_widgets') === 'true';

    $('#bulk-toggle-checkbox').prop('checked', isHidden);

    toggleUnusedAreas(isHidden);


    // チェックボックス変更時
    $('#bulk-toggle-checkbox').on('change', function () {
      const isHidden = this.checked;

      localStorage.setItem('my_hide_unused_widgets', isHidden);
      toggleUnusedAreas(isHidden);
    });

  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});

さいごに

今回紹介した方法を使えば、煩雑になりがちなウィジェット画面を、自分好みに整理された見やすいインターフェースへと最適化することができます。
不要な空白エリアを視界から排除するだけで、ウィジェットの配置や入れ替え作業が驚くほどスムーズになります。