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.

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

関連記事

no image

X SERVERにa-blog cmsをインストールしてみた。

この記事は約 1 分で読めます。 先日「「AMPPS」にa-blog cmsのローカル環境を作ってみる」でローカル環境にa-blog cmsをインストールしてみました。 今回、a-blog cmsの勉 …

no image

ライセンスについて考えてみた。

この記事は約 1 分で読めます。Webサイトを作っていて、素材だったり、ライブラリだったり・・・いろいろ利用しまくってます。 ・・・で、利用する際にいろいろ利用範囲や使い方について気になったりします。 …

no image

フォントサイズの単位変換が楽に出来る「PXtoEM.com」

この記事は約 1 分で読めます。 Webサイト制作で、コーディングをしていく時に、フォントサイズを計算しなくちゃいけない事があります。 単位が違う(px、em、ptなど)場合、なかなか計算が面倒くさい …

no image

日本語文章校正ツールを使ってみた。

この記事は約 1 分で読めます。 今回は、Yahoo!Japan校正支援Webサービスを利用した校正支援ツールを試してみました。 誰かに伝える文章を書く時に使えそうな、Webツール「日本語文章校正ツー …

no image

scroller.jsで「するするスクロール」にチャレンジ♪

この記事は約 1 分で読めます。以前、yuga.jsを使ってページ内リンクを「するするスクロール」にチャレンジしました。 今回は、scroller.jsを使って同じような事をやってみたいと思います。 …