WordPressでは、ページの種類(トップページ、投稿、固定ページなど)ごとにサイドバーの内容を出し分けることで、より柔軟でユーザビリティの高いレイアウトを実現できます。本記事では、register_sidebar()と条件分岐タグを使った実装方法を解説します。
サイドバーを複数登録する方法
まず、functions.phpに複数のサイドバーを定義します。たとえば「トップページ用」「投稿用」「固定ページ用」の3種類を想定します。
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や任意のテンプレートファイルで、条件に応じて表示するサイドバーを切り替えます。
<?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()は固定ページ・添付ファイル以外のあらゆる投稿タイプの単一表示で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)
まとめ
WordPressではregister_sidebar()で複数のウィジェットエリアを定義し、is_front_page()やis_singular()などの条件分岐を活用することで、ページごとに最適なサイドバー表示が実現できます。条件分岐を追加する際は、より限定的な条件を先に書く順序に注意しましょう。ユーザーの目的や導線に合わせてウィジェットを最適化することで、サイト全体の利便性を向上させましょう。

