WordPress – サイドバーの数を増やしてページごとに切り替える方法

WordPressのカスタマイズをしているとサイドバーをページ毎に切り替えたい場合がありませんか？

例えば、記事ページでは「最近の投稿」を表示したいけど、トップページではそもそも記事一覧が表示されているので「最近の投稿」は不要だったりすることがあると思います。

今回はサイドバーをページごとに切り替える方法を紹介します。

はじめに

テーマはWordPress公式のTwentySeventeenで説明します。
テーマをカスタマイズする際は「子テーマ」を作成して行いましょう。
編集ファイルはfunction.phpとsidebar.phpの２つです。

テーマのカスタマイズを快適に行う方法も紹介しています。宜しければこちらの記事もどうぞ。

サイドバーを追加する

TwentySeventeenのデフォルトではサイドバーは１つしか用意されていません。そのため、ページごとに切り替えるためにサイドバーを追加しましょう。

まず、サイドバーがどこで定義されているかを見てみます。親テーマのfunction.phpを見てみると下記の部分でサイドバーが定義されています。

/*
 親テーマのfunction.php
*/

function twentyseventeen_widgets_init() {
  // ------- ここから
  register_sidebar( array(
    'name'          => __( 'Sidebar', 'twentyseventeen' ),
    'id'            => 'sidebar-1',
    '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>',
  ) );
  // ------- ここまでコピー

  register_sidebar( array(
    'name'          => __( 'Footer 1', 'twentyseventeen' ),
    'id'            => 'sidebar-2',
    'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );

  register_sidebar( array(
    'name'          => __( 'Footer 2', 'twentyseventeen' ),
    'id'            => 'sidebar-3',
    'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),
    'before_widget' => '<section id="%1$s" class="widget %2$s">',
    'after_widget'  => '</section>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}

add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

サイドバーが１つとフッターが２つデフォルトで用意されていることが分かります。

１つ目の定義をコピーして「子テーマ」のfunction.phpでサイドバーを追加していきます。

ここではextra_sidebarsという関数を作って、その中に先ほどコピーした定義を貼り付けて編集しています。

/*
 子テーマのfunction.php
*/

function extra_sidebars () {
  register_sidebar( array(
    'name'          => __( 'シングルページ用サイドバー', 'twentyseventeen' ),  // 外観 > ウィジェットで表示される名前
    'id'            => 'sidebar-single', // 親テーマの定義と重複しないid名を設定
    '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>',
  ) );
}

add_action( 'widgets_init', 'extra_sidebars' );

編集しているのは’name’プロパティと’id’プロパティの部分です。

‘name’プロパティにはウィジェット画面に表示される名前を設定します（ここでは、’シングルページ用サイドバー’としています）。‘id’プロパティには親テーマと重複しないid名を設定しておけばOKです（ここでは’sidebar-single’と設定しています）。

ここまでの編集で、WordPress管理画面の「外観 > ウィジェット」を見ると追加したサイドバーが表示されているはずです。

ページごとに切り替える

追加したサイドバーを使ってページごとにサイドバーを切り替えてみましょう。

ここでは記事ページとそれ以外のページでサイドバーを切り替える方法を紹介します。

まず、親テーマでサイドバー表示をしている部分を見てみます。ファイルはsidebar.phpです。

/*
　親テーマのsidebar.php
*/

<aside id="secondary" class="widget-area" role="complementary">
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

ポイントは6行目のdynamic_sidebar( ‘sidebar-1’)で、この部分で’sidebar-1’のidのサイドバーを表示しています。

この部分を条件によって切り替えば良い訳です。子テーマで実装していきましょう。

/*
 子テーマのsidebar.php
*/

<aside id="secondary" class="widget-area" role="complementary">

  <?php
    if ( is_single() ) {  // 記事ページの場合
      dynamic_sidebar( 'sidebar-single' ); // 追加したサイドバーを表示
    } else {　// それ以外の場合
      dynamic_sidebar( 'sidebar-1' ); // デフォルトのサイドバーを表示
    }
  ?>

</aside>

8行目のis_single ( ) で記事ページかどうかを判定しています。記事ページであれば’sidebar-single’のidのサイドバー（今回追加したサイドバー）を、それ以外のページの場合は’sideba-1’のidのサイドバー（デフォルトのサイドバー）を表示するように条件分岐させています。

たったこれだけで、サイドバーの表示を切り替えることができるようになります。

まとめ

サイドバーの追加はfunction.php、ページごとの切り替えはsidebar.phpで行うことができます。

目的に合わせて、サイドバーの数を更に増やしたり、表示の切り替え条件をカスタイズしてみて下さい。

はじめに

サイドバーを追加する

ページごとに切り替える

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル