WordPressで複数サイドバーを設置

By | 2016/10/10

WordPressでページによってサイドバーを変えたかったのでいろいろ調べました。
下記サイトが非常に参考になりました。

参考サイト:複数のサイドバーを使い分ける方法。

ざっくり流れを列挙すると

  • sidebar.phpのほかにsidebar2.phpのような名前のファイルを作る
  • functions.phpにウィジェットを設置するコードを追記、ウィジェットの設定
  • 投稿ページsingle.phpや固定ページpage.phpに使うサイドバーについてコードを修正

のような感じですが私の場合は固定ページごとにサイドバーを分けたかったのでそれについて説明します。
最終的にはタグでサイドバーを切り替える、ということをやるので固定ページとか投稿ページとか関係なく切り替えることができます。

 


 

とりあえずざっくりやったこと

  • サイドバーを複数設置できるようにする
  • 固定ページにもタグを追加できるようにする
  • タグによってサイドバーを切り替えるようにする

 


サイドバーを複数設置できるようにする

まずサイドバーを複数設定できるようにします。wp-content/themes/[テーマ名]/functions.phpを変更します。
functions.phpの中でregister_sidebarという記述があると思うので探します。私の使っているテーマはサイドバーが1つしかなかったのですがtwenty tenなどは複数あります。それに習って同じようなコードを追加します。

functions.php

register_sidebar( array(
        'name' => __( 'Primary Widget Area', 'twentyten' ),
        'id' => 'primary-widget-area',
        'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyten' ),
        'before_widget' => '
<li id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</li>

',
        'before_title' => '
<h3 class="widget-title">',
        'after_title' => '</h3>

',
) );

上記はtwentytenのサイドバーを追加する部分ですが、これに習ってサイドバーを作りたい数だけ追記します。ただ一つ注意点として ‘id’ を一つ一つ違うものにしてあげる必要があります。Wordpressがサイドバーを区別するidだと思われますので変えましょう、これが同じだと多分バグります。
ファイルを保存して「ダッシュボード」ー「外観」ー「ウィジェット」の項目を見てみてください。多分設置した分だけサイドバーの設定箇所が増えていると思います。あとは好きなようにウィジェットを設定しておきましょう。

 


固定ページにもタグを追加できるようにする

これはこちらのサイトを参考にしました。

参考サイト:固定ページでタグを設定できるようにし、タグクラウド(TagCloud)にも追加する方法

これもfunctions.phpに以下のコードを追記します。

functions.php

//固定ページでタグ設定欄を表示
function add_tag_to_page() {
    register_taxonomy_for_object_type('post_tag', 'page'); }
add_action('init', 'add_tag_to_page');
 
//固定ページで設定したタグをタグクラウドに含める
function add_page_to_tag_archive( $obj ) {
    if ( is_tag() ) {
        $obj->query_vars['post_type'] = array( 'post', 'page' );
    }
}
add_action( 'pre_get_posts', 'add_page_to_tag_archive' );

どこに追記すればいいのかわからなかったのでとりあえず一番下に追記しました。
ファイルを保存したら固定ページの記事の編集ページを見てみてください。タグを追加できるようになっていると思います。

 


タグによってサイドバーを切り替えるようにする

これはsidebar.phpを編集します。ただしこれはテーマによってかなり違いがあるのでポイントだけ説明します。
サイドバーを指定するところはdynamic_sidebarという関数なので、この関数の引数に先ほど設定したサイドバーのidを設定してあげます。試しにdynamic_sidebarの引数に自分で作ったサイドバーのidを設定してみてください。サイトのサイドバーが変化すると思います。
あとは条件によってサイドバーを変更させてやります。今回の場合はタグで変更したのでhas_tag関数を使います。引数にキーとなるタグを設定して、それがあるかないかでサイドバーを切り替えます。以下のような感じになります。

sidebar.php

// 元のコード
dynamic_sidebar( 'sidebar1' );

↓変更後

if( has_tag('tag_php') ){
    dynamic_sidebar( 'sidebar1' );
}
else{
    dynamic_sidebar( 'sidebar2' );
}

あとはページによってタグを設定してあげればサイドバーが変化すると思います。
条件はいろいろ設定できると思うのでWordpressの関数レファレンスから使えそうなものを探してもいいと思います。

関数リファレンス

 

以上です。長くなってしまいましたが最後まで読んでいただきありがとうございます!

 

 


コメントを残す

メールアドレスが公開されることはありません。