【WordPress】サイドバーウィジェットをページごとに出し分ける方法|条件分岐とregister_sidebar活用

【WordPress】サイドバーウィジェットをページごとに出し分ける方法|条件分岐とregister_sidebar活用 WordPress

WordPressでは、ページの種類(トップページ、投稿、固定ページなど)ごとにサイドバーの内容を出し分けることで、より柔軟でユーザビリティの高いレイアウトを実現できます。本記事では、register_sidebar()と条件分岐タグを使った実装方法を解説します。

スポンサーリンク

サイドバーを複数登録する方法

まず、functions.phpに複数のサイドバーを定義します。たとえば「トップページ用」「投稿用」「固定ページ用」の3種類を想定します。

functions.php:複数のサイドバーを登録
function my_register_sidebars() {
  register_sidebar(array(
    'name' => 'トップページ用サイドバー',
    'id' => 'sidebar-front',
    'before_widget' => '<div class="widget">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
  ));

  register_sidebar(array(
    'name' => '投稿用サイドバー',
    'id' => 'sidebar-post',
    'before_widget' => '<div class="widget">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
  ));

  register_sidebar(array(
    'name' => '固定ページ用サイドバー',
    'id' => 'sidebar-page',
    'before_widget' => '<div class="widget">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
  ));
}
add_action('widgets_init', 'my_register_sidebars');

条件分岐でサイドバーを出し分ける

sidebar.phpや任意のテンプレートファイルで、条件に応じて表示するサイドバーを切り替えます。

sidebar.php:ページ種別ごとの切り替え
<?php
if (is_front_page()) {
  if (is_active_sidebar('sidebar-front')) {
    dynamic_sidebar('sidebar-front');
  }
} elseif (is_singular('post')) {
  if (is_active_sidebar('sidebar-post')) {
    dynamic_sidebar('sidebar-post');
  }
} elseif (is_page()) {
  if (is_active_sidebar('sidebar-page')) {
    dynamic_sidebar('sidebar-page');
  }
}
?>

このように記述することで、それぞれのページタイプに応じて表示するウィジェットを切り替えられます。

is_single()ではなくis_singular(‘post’)を使う
is_single()は固定ページ・添付ファイル以外のあらゆる投稿タイプの単一表示でtrueになります。サイトにカスタム投稿タイプがある場合、意図せず「投稿用サイドバー」がそちらにも適用されてしまいます。「post」タイプだけに限定したい場合はis_singular('post')を使いましょう。

より細かく出し分けたい場合

特定の固定ページのみ別のサイドバーを表示したい場合は、is_page('スラッグ')is_page(ID)を使って条件分岐を追加します。

特定ページ(お問い合わせ)だけ別サイドバーにする
<?php
if (is_front_page()) {
  if (is_active_sidebar('sidebar-front')) {
    dynamic_sidebar('sidebar-front');
  }
} elseif (is_singular('post')) {
  if (is_active_sidebar('sidebar-post')) {
    dynamic_sidebar('sidebar-post');
  }
} elseif (is_page('contact')) {
  // is_page('contact')は「固定ページ全般」より限定的な条件のため、
  // 汎用のelseif (is_page())より必ず前に書く
  if (is_active_sidebar('sidebar-contact')) {
    dynamic_sidebar('sidebar-contact');
  }
} elseif (is_page()) {
  if (is_active_sidebar('sidebar-page')) {
    dynamic_sidebar('sidebar-page');
  }
}
?>
限定的な条件は汎用的な条件より前に書く
if/elseifは最初に真になった分岐で処理が打ち切られます。is_page('contact')is_page()(引数なし=すべての固定ページ)のサブセットの条件のため、汎用のelseif (is_page())よりに置いてしまうと、常に汎用分岐が先に成立してこの分岐が実行されることは永遠にありません。上記コードのように、限定的な条件を先に、汎用的な条件を後に置いてください。

このようにすれば、問い合わせページだけ異なるウィジェット構成にするといった柔軟な対応が可能です。

カスタム投稿タイプごとに切り替える

カスタム投稿タイプ(例:news、products)ごとにサイドバーを変えたい場合は、is_singular('投稿タイプ名')で判定します。

投稿タイプごとの切り替え
<?php
if (is_singular('news')) {
  if (is_active_sidebar('sidebar-news')) {
    dynamic_sidebar('sidebar-news');
  }
} elseif (is_singular('products')) {
  if (is_active_sidebar('sidebar-products')) {
    dynamic_sidebar('sidebar-products');
  }
} elseif (is_singular('post')) {
  if (is_active_sidebar('sidebar-post')) {
    dynamic_sidebar('sidebar-post');
  }
}
?>

投稿タイプの数だけregister_sidebar()でサイドバーを登録し、それぞれに対応するIDで分岐させれば、サイト全体で一貫した出し分けが行えます。

関連記事

よくある質問(FAQ)

Q特定のページにのみウィジェットを表示するには?
Awidget_display_callbackフィルターで条件判定し、表示しない場合はfalseを返します。または条件タグをテンプレート側に直接書き、register_sidebar()で用意した複数のサイドバーIDをdynamic_sidebar()で出し分けます。
Qregister_sidebar()を使って複数のサイドバーエリアを作成し、ページごとに切り替える方法は?
A複数のサイドバーをregister_sidebar()で登録し、テンプレートファイルでページ種別に応じてdynamic_sidebar()に異なるIDを渡します。固定ページとアーカイブで異なるサイドバーを使い分けられます。
QCocoonテーマでサイドバーを特定ページのみに表示するには?
A投稿編集画面の「ページ設定」メタボックスにある「ページタイプ」で「1カラム(狭い/広い/フルワイド)」を選択すると、そのページだけサイドバーが非表示になります。ウィジェットの内容そのものをコードで出し分けたい場合は、本記事のようにregister_sidebar()と条件タグを使う方法を併用します。

まとめ

WordPressではregister_sidebar()で複数のウィジェットエリアを定義し、is_front_page()is_singular()などの条件分岐を活用することで、ページごとに最適なサイドバー表示が実現できます。条件分岐を追加する際は、より限定的な条件を先に書く順序に注意しましょう。ユーザーの目的や導線に合わせてウィジェットを最適化することで、サイト全体の利便性を向上させましょう。