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

WordPressでオリジナルテーマ作りにチャレンジ【準備編】

この記事は約 1 分で読めます。WordPressに少し慣れてきたので、そろそろオリジナルテーマ作りにチャレンジしようと思います。 今までのテーマは、デフォルトであった「twentyten」や「cor …

no image

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

この記事は約 2 分で読めます。 Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。 特にWebサイト1ページ全体 …

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

検索エンジンに登録する方法。

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 いくつもあると思うのですが、今回は検索エンジンに登録する方法にチャレンジしたいと思います。 いろいろ方法をググっていたら、「Goo …

no image

レスポンシブ対応ナビゲーションを簡単に付けられる「SlickNav」

この記事は約 1 分で読めます。 レスポンシブサイトで、PCとスマホではメニューの見せ方を変えたいもの。 画面の幅が狭くなった時はハンバーガーボタンと言われる三本線のボタンを表示をすることができる、j …