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_single()) {
if (is_active_sidebar('sidebar-post')) {
dynamic_sidebar('sidebar-post');
}
} elseif (is_page()) {
if (is_active_sidebar('sidebar-page')) {
dynamic_sidebar('sidebar-page');
}
}
?>
このように記述することで、それぞれのページタイプに応じて表示するウィジェットを切り替えられます。
より細かく出し分けたい場合
特定の固定ページのみ別のサイドバーを表示したい場合は、is_page('スラッグ')
やis_page(ID)
を使って条件分岐を追加します。
elseif (is_page('contact')) {
if (is_active_sidebar('sidebar-contact')) {
dynamic_sidebar('sidebar-contact');
}
}
このようにすれば、問い合わせページだけ異なるウィジェット構成にするといった柔軟な対応が可能です。
まとめ
WordPressではregister_sidebar()
で複数のウィジェットエリアを定義し、is_front_page()
やis_single()
などの条件分岐を活用することで、ページごとに最適なサイドバー表示が実現できます。ユーザーの目的や導線に合わせてウィジェットを最適化することで、サイト全体の利便性を向上させましょう。