WordPress個別サポート

「ページごとにサイドバーの表示内容を切り替えたい」

これは西沢直木のIT講座にもよく持ち込まれる相談です。

その解決策はテーマによって異なります。BizVektorのように何種類かサイドバーを設定できるテーマではメニュー操作だけで実現できます。以下のページも参考にしてください。

BizVektorのサイドバーのカスタマイズ

BizVektorと違ってサイドバーが1種類のみのシンプルなテーマでは、サイドバーを表示している部分のPHPスクリプトを自力で編集する必要があります。

プラグインを使ってサイドバーを切り替えたい場合は、WooSidebarsプラグインが役立ちます。詳しくは以下のページも参考にしてください。
投稿と固定ページで別々のサイドバーを表示する

ここでは、「簡単にできそうなら自力でサイドバーの切り替えにチャレンジしたい」と思っている方のために、サイドバー表示の仕組みから、ページごとにサイドバーを切り替えるためのコードの例まで紹介していきます。

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

画面にサイドバーが表示される仕組み

WordPressでサイドバーを表示する命令は、テンプレートに記述されています。たとえば、Twenty Twelveでは、page.php(固定ページ)やsingle.php(投稿)の中に次のように記述されています。

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

このget_sidebar関数によってsidebar.phpというファイルが読み込まれます。つまり、sidebar.phpに記述されたサイドバーの内容が表示されます。

sidebar.phpにはサイドバーに表示したい内容を自由に入力できますが、インストール直後のsidebar.phpには「ウィジェット」メニューで設定したウィジェットを表示するための命令が記述されているのが一般的です。

表示されるサイドバー

表示されるサイドバー

特定のページでサイドバーを非表示にする

ページごとにサイドバーを切り替えたい場合は、get_sidebar関数に対して条件を付加する方法があります。

たとえば、問い合わせページではサイドバーを非表示にしたい場合、get_sidebarの行をif … endifのif文で囲み「!is_page('contact')」(スラッグがcontactの固定ページ以外は)という条件を記述します。

※先頭の「!」を忘れないようにしてください。これは、「以外は」として機能します。

<?php if(!is_page('contact')) : ?>
<?php get_sidebar(); ?>
<?php endif ?>
問い合わせページではサイドバーを非表示に

問い合わせページではサイドバーを非表示に

少しわかりづらいかもしれませんが、「問い合わせページでは非表示」を「問い合わせページ以外では表示」と表現しています。

ページごとにサイドバーを切り替える

単に非表示にするだけではなく、問い合わせページのサイドバーに画像を表示するなど、簡易的に切り替えたい場合は、次のようにif … else … endifという構文の中に、表示したい内容を記述します。

<?php if(is_page('contact')) : ?>
<img src="http:// … xxxxx.gif" />
<?php else : ?>
<?php get_sidebar(); ?>
<?php endif ?>

if(is_page('contact'))が、問い合わせページのときに表示される内容、else以降が、それ以外のページ(通常の固定ページ)で表示される内容です。

問い合わせページのサイドバーに画像を表示

問い合わせページのサイドバーに画像を表示

サイドバーをテンプレートファイルから読み込む

これでも問題ありませんが、サイドバーをカスタマイズする場合に、毎回page.phpを直接修正するのはベストの方法とは言えません。

そこで、サイドバーの内容をsidebar-contact.phpなどというテンプレートファイルに記述しておいてpage.phpで読み込ませる方法も紹介します。

手順は次のようになります。

  1. テンプレートのsidebar.phpをコピーしてsidebar-contact.phpとして保存する
    ファイル名の「contact」は任意の名前で大丈夫ですが、次のステップで編集するpage.phpと連動します。

  2. sidebar-contact.phpを編集する(サイドバーに表示したい内容に変更する)
    sidebar-contact.phpの内容は自由ですが、ここでは次のように記述します。

    ...略...
    これは問い合わせページのサイドバーのテストです。
    <img src="http:// … xxxxx.gif" />
    
  3. page.phpを編集する
    page.phpを編集してget_sidebar関数で読み込むサイドバー用のテンプレートファイルを指定します。これにより、スラッグがcontactのページではサイドバーにsidebar-contact.phpが読み込まれるようになります。

    <?php if(is_page('contact')) : ?>
    <?php get_sidebar('contact'); ?>
    <?php else : ?>
    <?php get_sidebar(); ?>
    <?php endif ?>
    
サイドバーをテンプレートから読み込む

サイドバーをテンプレートから読み込む

カテゴリごとにサイドバーを切り替える

投稿カテゴリごとに別々のサイドバーを表示したい場合、投稿ページ用のテンプレートを編集します。

Twenty Twelveでは、投稿用のテンプレートsingle.phpにも上記で紹介したget_sidebarが記述されているので、if文で「カテゴリごとに」を表現すれば実現できます。

たとえば、「千駄木」(sendagi)、「谷中」(yanaka)というカテゴリごとに別々のサイドバーテンプレートを読み込ませるコードは次のようになります。

<?php if(in_category('sendagi')) : ?>
<?php get_sidebar('sendagi'); ?>
<?php elseif(in_category('yanaka')) : ?>
<?php get_sidebar('yanaka'); ?>
<?php else : ?>
<?php get_sidebar(); ?>
<?php endif ?>
<?php get_footer(); ?>

in_category関数は、その投稿が指定カテゴリかどうかを調べる関数で、in_category('カテゴリ名')のように記述します。if文と組み合わせることで、カテゴリAの場合はサイドバーA、カテゴリBの場合はサイドバーBのようにサイドバーを切り替えることができます。

※ここで使ったのがis_categoryではなくin_categoryということに注意してください。is_categoryは後で紹介します。

PHPスクリプトの開始、終了タグが多くなって見づらく感じる場合は、次のように開始、終了を1つにまとめることもできます。

<?php
if(in_category('sendagi')) :
    get_sidebar('sendagi');
elseif(in_category('yanaka')) :
    get_sidebar('yanaka');
else :
    get_sidebar();
endif
?>

これにより、カテゴリに応じたサイドバーが表示されるようになります。

カテゴリごとにサイドバーを切り替える

カテゴリごとにサイドバーを切り替える

念のため、まとめておきます。
get_sidebar('xxxxx') → sidebar-xxxxx.phpというテンプレートを読み込む

(例:get_sidebar('yanaka') → sidebar-yanaka.phpを読み込む)

カテゴリアーカイブでサイドバーを切り替える

少しまぎらわしいのですが、投稿が特定のカテゴリかどうか調べるにはin_categoryを使いますが、カテゴリアーカイブではis_categoryを使います。つまり、カテゴリアーカイブでカテゴリごとにサイドバーを切り替えるには、テンプレート(category.php)に次のように記述します。

<?php
if(is_category('sendagi')) :
    get_sidebar('sendagi');
elseif(is_category('yanaka')) :
    get_sidebar('yanaka');
else :
    get_sidebar();
endif
?>
カテゴリアーカイブでサイドバーを切り替える

カテゴリアーカイブでサイドバーを切り替える

カスタマイズのためにPHPをマスターしようと思った方へ

WordPressカスタマイズのため少しずつでもPHPをマスターしていこうという方は、この本などを参考にしてください。私が書いた本なので個別サポートに持ち込んでいただければPHPの基礎から詳しく説明します。

「PHPプログラミングの教科書」について詳しくはこちら

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート