ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【WordPress】サイドバーを切り替えるカスタマイズ方法

【WordPress】サイドバーを切り替えるカスタマイズ方法

WordPressでウィジェットやプラグインを使わずにサイドバーをカスタマイズする方法を紹介します。

この記事の内容は、直接、functions.phpを編集して失敗すると画面が真っ白になる可能性があるので、多少のPHPと知識はあるけどWordPressのカスタマイズはあまりしたことがない人に役に立つと思います。

目次
  1. サイドバーをページごとに切り替える方法
    1. sidebar.phpの中で分岐タグを書き加える
    2. sidebar-●●.phpを追加する
    3. さらに効率的なサイドバーの追加のしかた
  2. まとめ

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

sidebar.phpの中で分岐タグを書き加える

以下の手順でsidebar.phpを編集します。

  1. 管理画面にログインする
  2. 管理画面左サイドバー「外観」→「テーマエディタ」をクリックする
  3. 「テーマ編集」画面で右サイドバー「テーマファイル」から「サイドバー(sidebar.php)」をさがす
  4. 中央のエディタで編集する

ローカルでファイルを編集してる場合は、編集したいテーマのルートフォルダでsidebar.phpをさがして編集します。

if( is_front_page() ){

  //ここにトップページだけで表示させたい内容を書きます。

}else{
  
  //ここにトップページ意外で表示させたい内容を書きます。

}	

このPHPのif文を使った書き方はサイドバーだけに限らず、ヘッダーやフッター、その他のテンプレートファイルでも同様に使えます。

sidebar-●●.phpを追加する

サイドバーの内容のほとんどが入れ替わってしまう場合、if文を使った分岐だとわかりにくくなってきます。
そんな場合はsidebar.phpを複製してもうひとつのサイドバー「sidebar-●●.php」をつくります。

  1. FTPソフトで「sidebar.php」をパソコンにダウンロードする
  2. 「sidebar.php」を複製する
  3. 複製したファイル名を「sidebar-1.php」に変更する
  4. FTPソフトで「sidebar-1.php」を元のディレクトリに再アップロードする

ローカルでファイルを編集してる場合は、編集したいテーマのルートフォルダでsidebar.phpをさがして編集します。

トップページはこう書かれています。

//front_page.php か index.php
get_sidebar();

変更したいページのテンプレートを以下のように変更します。
get_sidebar()の括弧の中に、複製したサイドバーの後ろにつけた名前を入れます。

//single.php 、 archive.php 、 page.php 等
get_sidebar("1");

さらに効率的なサイドバーの追加のしかた

カスタム投稿やカテゴリが増えてそれぞれにサイドバーを切り替える場合はスラッグを使った方法が効率的です。

例えば、カスタム投稿に「voice」「work」「staff」をつくり、それぞれに別のサイドバーを作る場合です。ahchive.php、single.phpは同じものをつくものとします。

  1. カスタム投稿をつくる
  2. それぞれの投稿タイプスラッグをつけたサイドバーをつくる
     (「sidebar-voice.php」「sidebar-work.php」「sidebar-staff.php」)
  3. 複製したファイル名を「sidebar-1.php」に変更する
  4. FTPソフトで「sidebar-1.php」を元のディレクトリに再アップロードする
get_sidebar( get_post_type() );

get_post_type()で投稿タイプのスラッグを取得できます。
archive.php、single.phpのget_sidebarの中に書き込みむことで動的にスラッグを取得でき、読み込むサイドバーもそれぞれに変更されます。

これはテンプレート内でif文の変わりとしても使えます。

POINT
サイドバーを複製する場合は、中身のわからない名前をつけず、どこで使用されているか具体的な名前をつけるほうが管理しやすいです。

まとめ

ページ数が増えて投稿タイプが複数あるサイト等ではサイドバーを内容ごとに切り替えることはよくあります。
都度、追加していくよりコーディング前にしっかりサイト構成を設計することで効率よくサイトをつくっていくことができます。
闇雲にテンプレートファイルを増やすことを避けることで公開後の管理がしやすくなります。