Webの記録

WordPress 複数のサイドバーを使い分ける方法。

投稿日:2013年3月19日 更新日:

この記事は約 6 分で読めます。

lwordpress_logo_w200

WordPressのテーマを独自で作っていて、どのページも同じサイドバーでは面白くないなぁと思い…。
記事のページ(index.phpやsingle.php等)と固定ページ(page.php)とでは、サイドバーの表示を変えたいと思い、自分なりにいろいろいじっています。

多分、こういう事はよくあると思うので、メモとしてココに残す事にします。

やり方はいろいろあると思いますが、とりあえず今回はサイトバー用のphpを2つ使い、ウィジェットを2種類作ります。サイドバー用のphpファイルを使うことで、phpの分岐を使わず簡単に出来る方法で作ってみました。

もし、この方がいいよ!って方法がありましたら、コメントなど頂けると嬉しいです♪



やってみた手順。

  1. サイドバーを2種類にする為、「sidebar.php」と「sidebar-page.php」を準備
  2. 上記ファイルにそれぞれ記述。
  3. WordPressのテーマフォルダーに上記phpを入れる
  4. 「functions.php」にウィジェットの設定を記述
  5. ウィジェットの設定を2種類作れるようになるので、ここで表示したいものを設定
  6. 記事のページ(index.phpやsingle.php等)と固定ページ(page.php)等でどのサイドバーを表示するかを指定


記述方法など。

2種類の「sidebar.php」を準備する

サイドバーを2種類にする為、「sidebar.php」(主に使うサイドバー)と「sidebar-page.php」(お問い合せなどの固定ページに使うサイドバー)で、2種類のphpファイルを準備します。
「sidebar-page.php」のpage部分は今回page.phpの時に使うサイドバーなので、このように命名。命名は自由です。

2種類のサイドバーの記述。

今回は、2種類ともウィジェットを利用します。しかし、ウィジェットの表示内容を変えたいので、ウィジェットの方で「サイドバー1」「サイトバー2」と2種類登録する方法にします。
そんなワケで、ここで記述するのはウィジェットでどちらの「サイドバー」を表示するか・・・だけの違いで記述します。記述例は以下・・・。

<!-- Side -->				
<div id="side">
  <div class="widget-area">
    <ul>
        //Side Widget 1を表示させる
	  <?php dynamic_sidebar( 'Side Widget 1'); ?>
	</ul>
  </div><!-- /.widget-area -->		  			  
</div><!-- /#side -->
<br class="clear" />

「Side Widget 1」を表示させる場合(固定ページ以外の時で使用の「sidebar.php」)は上記で、もう1つのサイドバーではこの部分が「Side Widget 2」(固定ページの時だけ使用の「sidebar-page.php」)と記述。

この状態で、WordPressのテーマフォルダに2つのphpを入れ込みます。(先に空のファイルを作って、後で上記を記述してもOK)


「functions.php」にウィジェットの設定を記述

2種類のサイドバーを作るので、「register_sidebars」の後に「2」が入ります。あとは、サイドバーの名前に数字を入れるようにしました。「’name’ => __( ‘Side Widget %d’ ),」の部分。以下は記述例です。
【補足】「register_sidebars」は、複数系なので「sidebar」の後に「s」が入ってます。1つの時は「s」が入りません。

register_sidebars(  2, array(
	'name' => __( 'Side Widget %d' ),
	'id' => 'side-widget',
	'before_widget' => '<li class="widget-container">',
	'after_widget' => '</li>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
) );


ウィジェットの設定

side_img

ダッシュボードからウィジェットの画面「外観→ウィジェット」で開くと、先程作った「Side Widget ●」で2つ分表示されるようになります。

あとは、ウィジェットの中をそれぞれ設定します!
ここまで出来たら、あと少しです!!


記事のページ(index.phpやsingle.php等)と固定ページ(page.php)等の記述

どちらのサイドバーを表示するか、それぞれのテンプレートの記述をします。

固定ページでは「sidebar-page.php」のサイドバーを読み込みたいので、以下のように記述。

<?php get_sidebar("page"); ?>

それ以外のページでは、通常のサイドバーを使用するので以下のように記述。
()の中に”page”があるかないか、だけの違いです。

<?php get_sidebar(); ?>

ここまで出来たら、表示確認!2通りのサイドバーの表示が出来るようになっていると思います。


参考サイト

今回参考にさせて頂いたサイトを紹介します。


良かったらコチラもどうぞ

WordPressのウィジェットに表示した「タグクラウド」をカスタマイズしてみる」という記事を書きました(2014.11.3)

-Webの記録
-, ,

執筆者:


  1. […] 参考:WordPress 複数のサイドバーを使い分ける方法 http://motoshige.net/blog/archives/4418 […]

comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

jquery.gmap3.jsを使って、Googlemapを簡単にカスタマイズ♪

この記事は約 1 分で読めます。 今回は、GoogleMapを埋め込んで、カスタマイズ出来るjQuery プラグイン「jquery.gmap3.js」。使ってみたら楽に出来たので、メモです。 配布元: …

no image

Facebookページで「30いいね!」を獲得したら出てくる「インサイト」画面。

この記事は約 1 分で読めます。 ゆるゆると更新していたFacebookページ。 ようやく「いいね!」の数が30を超えました。 すると、今まで見る事が出来なかった「インサイト」という項目が表示されるよ …

no image

ファビコンにチャレンジ。

この記事は約 1 分で読めます。前々から気になっていた「ファビコン」。 いろんなサイトのロゴとか何かのイラストとか・・、ブラウザのタブに小さなアイコンとして付いてるアレ・・。 せっかく自分のサイトを作 …

no image

WordPress記事中の文章をコピーしたら管理者にお知らせしてくれるプラグイン「Check Copy Contents(CCC)」を試してみた

この記事は約 2 分で読めます。 私の過去記事で人気なのが、「画像のコピーガード」。画像を盗用されることに対して対策を打ちたい方がたくさんいらっしゃるのでしょう。 もしこれが記事中の文章においても、コ …

no image

lang属性に指定できる言語コード

この記事は約 1 分で読めます。 忘れた頃に海外向けの小規模な案件で、外国語のページ制作のお話があったりします。 そんな時に「lang属性に指定できる言語コード」を毎回調べるのが面倒なので、自分用のメ …