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

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

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

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

はじめに

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

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

サイドバーを追加する

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

まず、サイドバーがどこで定義されているかを見てみます。親テーマの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' );

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

1つ目の定義をコピーして「子テーマ」の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で行うことができます。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください