WordPressでカテゴリーごとにヘッダーウィジェットを作成する方法

WordPress

カテゴリごとにサイドバーを変更する方法を紹介します。
カテゴリー以外にもタグやページなどにも応用可能です。

まずは、管理画面のウィジェット編集のウィジェットエリアを追加します。
そのためのコードを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設定のウィジェットエリアに新しいエリアが登録され、外観ウィジェットにも追加されているのを確認できます。
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-slug1category-1-sidebarcategory-slug2category-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>
タイトルとURLをコピーしました