全ウィジェットエリアを可視化する方法

はじめに

WordPressのサイト調整中、ウィジェットエリアの配置場所が分からず、編集作業が難航することがあります。特に空のエリアは表示されないため、全体のレイアウト構造を把握するのに手間がかかるのが難点です。

そこで、サイト上の全ウィジェットエリアを赤枠で囲み、エリア名を自動表示します。
ウィジェットの配置構造を即座に可視化し、編集効率を最大化させることが目的です。

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

完成イメージ

実装手順

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

// 全サイドバーを「有効」に変更
add_filter('is_active_sidebar', function ($is_active) {
  if (is_user_logged_in()) {
    return true;
  }

  return $is_active;
});


// ウィジェットエリア出力直前に実行
add_action('dynamic_sidebar_before', function ($index) {
  if (!is_user_logged_in()) {
    return;
  }

  global $wp_registered_sidebars;

  $name = isset($wp_registered_sidebars[$index]) ? $wp_registered_sidebars[$index]['name'] : $index;

  echo '<div class="debug-sidebar" style="border: 2px dashed red; min-height: 50px; margin: 15px 0; padding: 25px 10px 10px 10px; position: relative;">';
  echo '<span class="debug-sidebar__label" style="background: red; color: white; position: absolute; top: 0; left: 0; font-size: 11px; padding: 2px 5px; z-index: 9999;">' . esc_html($name) . '</span>';
});


// ウィジェットエリア出力直後に実行
add_action('dynamic_sidebar_after', function () {
  if (is_user_logged_in()) {
    echo '</div>';
  }
});

参考：ライブビュー機能による直感的なウィジェット管理

ウィジェットエリアは場所が把握しにくく、編集に戸惑うことがあります。
解決策として、外観→ウィジェット→ライブビューで管理をクリックします（図1参照）。

プレビュー画面を見ながら編集することで、配置や設定の変更結果をリアルタイムで確認できます（図2参照）。

さいごに

今回紹介した方法を使えば、WordPressの複雑なウィジェット配置を即座に可視化し、どこを編集すればよいか一目で把握できるようになります。
空のウィジェットエリアも見逃すことなく、サイトのレイアウト構造を正確に理解できるため、カスタマイズの効率が大幅に向上するはずです。