WP twenty seventeen カテゴリー別専用サイドバーと投稿ページにウィジェットエリアを追加する
@inmycabカテゴリー別に専用サイドバーを追加する作法をメモしておきます。
お手軽にプラグイン「Custom Sidebars」をインストールするという方法もありますが、何故かウチのWP twenty seventeenテーマでは旨く動作してくれません。それにカスタム自体もカンタンなのでプラグイン不要とも言えます。
サイドバーを追加するにあたり、追加サイドバーに収納するウィジェットエリアも追加設定します。
※ ここではWP twenty seventeenの子テーマを使ってカスタムするのが前提で書いています。
ウィジェットエリアの追加
昔とやり方が変わっていますが、twenty seventeenテーマの作法に準じて追加設定してやります。オリジナルの function.phpに記載されているウィジェットエリアの記載に準じて、子テーマに function.phpを作って下記を追記します。
// ウィジェットエリア追加
register_sidebar( array(
'name' => __( 'Sidebar mac', 'twentyseventeen' ), // Sidebar mac名のウィジェットエリア追加
'id' => 'sidebar-4', // 4番目のウィジェットエリアとする
'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
これでウィジェット管理画面に「Sidebar mac」名のウィジェットエリアが追加されます。
カテゴリー専用サイドバーの追加〜
「Sidebar mac」名のウィジェットエリアを表示するサイドバーを追加して、mac関連カテゴリーのページでだけ表示されるようにします。
sidebar.phpをコピーして子テーマに下記の３書類を作成します。
- sidebar.php：カテゴリー別に表示するサイドバーの条件分岐を記載
- sidebar_mac.php：追加した「Sidebar mac」名のウィジェットエリアを表示するサイドバー
- sidebar_org.php：オリジナルのsidebar.phpと同じ内容
sidebar.php 記載内容
<?php $post = $wp_query->post;
if ( in_category('9','10','11')) {
include(STYLESHEETPATH . '/sidebar_mac.php');
} else {
include(STYLESHEETPATH . '/sidebar_org.php');
}
?>
※ページカテゴリーを取得して、mac関連のカテゴリーID：9,10,11の場合、サイドバーとして子テーマにある sidebar_mac.php を表示、その他のカテゴリーIDの場合は sidebar_org.phpを表示する。
※間違いやすいですが、親テーマ内のテンプレート書類を参照する場合は「TEMPLATEPATH」、子テーマ内のテンプレート書類を参照する場合は「STYLESHEETPATH」を使います。
sidebar-nac.php 記載内容
<?php
if ( ! is_active_sidebar( 'sidebar-4' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Sidebar nac', 'twentyseventeen' ); ?>">
<?php dynamic_sidebar( 'sidebar-4' ); ?>
</aside><!-- #secondary -->
sidebar-org.php 記載内容（元のsidebar.phpの内容）
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
これで、mac関連のカテゴリー記事を表示させた場合は、「Sidebar mac」名のウィジェットエリアに記載したサイドバーが表示されるようになります。
投稿ページにウィジェットエリアを追加する
Widget Shortcodeを使えば投稿ページや固定ページにウィジェットをショートコードで設置することができます。
投稿ページ（single.php）末尾にウィジェットエリアを追加設定したい場合は、single.phpの23行目あたりにある
get_template_part( 'template-parts/post/content', get_post_format() );
この後に追加したいウィジェットエリアを記載します
dynamic_sidebar('Page end');
※前述のウィジェットエリア追加の作法に習って「Page end」を追加作成、投稿ページの記事末尾（カテゴリー表示の下方）に「Page end」ウィジェットエリアが表示されるようになります。
