カテゴリごとにサイドバーを変更する方法を紹介します。
カテゴリー以外にもタグやページなどにも応用可能です。
まずは、管理画面のウィジェット編集のウィジェットエリアを追加します。
そのためのコードをfunctions.php
に記述します。
//サイドバーウィジェットの追加
function my_custom_sidebar() {
register_sidebar( array(
'name' => __( 'Category 1 Sidebar', 'your-theme-textdomain' ),
'id' => 'category-1-sidebar',
'description' => __( 'Widgets in this area will be shown on category 1.', 'your-theme-textdomain' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => __( 'Category 2 Sidebar', 'your-theme-textdomain' ),
'id' => 'category-2-sidebar',
'description' => __( 'Widgets in this area will be shown on category 2.', 'your-theme-textdomain' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_custom_sidebar' );
これを保存すると、例えば、Cocoonテーマを使っている場合は、
Cocoon設定のウィジェットエリアに新しいエリアが登録され、外観のウィジェットにも追加されているのを確認できます。
外観のウィジェットで表示したいウィジェットを設定します。
sidebar.phpの編集
次に、カテゴリーに応じて、表示するサイドバーウィジェットを変更していきたいと思います。
そのためにはsidebar.php
を変更します。
Cocoonの場合、子テーマにこのファイルは存在しないので、親テーマからコピーしてきます。
以下の部分がサイドバーを表示しているコードになります。
<?php dynamic_sidebar( 'sidebar' ); ?>
この部分を
<?php //カテゴリーごとのサイドバー設定
if (in_category('category-slug1')) {
if (is_active_sidebar('category-1-sidebar')) {
dynamic_sidebar('category-1-sidebar');
}
} elseif (in_category('category-slug2')) {
if (is_active_sidebar('category-2-sidebar')) {
dynamic_sidebar('category-2-sidebar');
}
} else {
if (is_active_sidebar('sidebar')) {
dynamic_sidebar('sidebar');
}
}
?>
のようにすることで、category-slug1
はcategory-1-sidebar
、category-slug2
はcategory-2-sidebar
を表示できます。
category-slugはカテゴリごとに決まっているスラッグで、投稿のカテゴリーから確認できます。
これを保存すると、カテゴリーに応じて異なるサイドバーを表示できるようになります。
サイドバースクロール追従
サイドバースクロール追従の部分は今回は変更していないため、この部分はすべてのカテゴリーで表示されます。
不要な場合はこの部分を消すか、ここもカテゴリーごとに変更したい場合には、別途さらにウィジェットエリアを追加してください。
こちらにウィジェットを設定したい場合は以下のようにして可能です。
<?php
////////////////////////////
//サイドバー追従領域
////////////////////////////
if ( is_active_sidebar( 'sidebar-scroll' ) ) : ?>
<div id="sidebar-scroll" class="sidebar-scroll">
<?php //カテゴリーごとのサイドバー設定
if (in_category('investment')) {
if (is_active_sidebar('category-1-sidebar')) {
dynamic_sidebar('category-1-sidebar');
}
} elseif (in_category('python')) {
if (is_active_sidebar('category-2-sidebar')) {
dynamic_sidebar('category-2-sidebar');
}
} else {
if (is_active_sidebar('sidebar')) {
dynamic_sidebar( 'sidebar-scroll' );
}
}
?>
</div>