初心者カテゴリーごとにサイドバーの表示内容を変えたい
カテゴリーの人気記事をカテゴリーページに表示したい
固定ページのサイドバーを専用のものにしたい
そんな場合のカスタマイズテクニックを紹介します。
サイドバーをカテゴリーや固定ページごとに変更するカスタマイズって難しそうですよね？
本記事ではWordPress初心者向けにPHPやプラグインを一切使用せず、カテゴリーごとにサイドバーの表示内容をカスタマイズする方法をサンプルコード付きで紹介します。
この記事で紹介するカスタマイズ方法の特徴
- プラグイン不要（テーマとの互換性は気にする必要ありません）
- テーマの編集なし（PHPコードは触りません）
人気WordPress「SWELL」とその他のテーマを例に解説します。本カスタマイズはWordPressの標準的な出力コードとCSSのみを使いますのでどんなテーマにも対応しています。
【概要】サイドバーの表示をページごとに変更するカスタマイズ
今回のカスタマイズの概要です。
かんたテーマファイルを編集しないで済むCSSコードでカテゴリーごとにサイドバーを変更するテクニックを紹介します。
カスタマイズの概要
- サイドバーに表示させる要素を作る（ブログパーツ、ウィジェット）
- CSSでいったん非表示にする（display:none）
- カテゴリーアーカイブページのみCSSで表示する（disply:block）
【SWELL】カテゴリー・ページ毎にサイドバーを変更するカスタマイズ
かんたまずはWordPressテーマ「SWELL」のカスタマイズ方法を紹介します。
SWELLのカスタマイズ
- カテゴリーごとにサイドバーを変更する方法
- 記事ページごとにサイドバーを変更する方法
- 固定ページごとにサイドバーを変更する方法
①【SWELL】カテゴリーごとにサイドバーを変更する方法
初心者カメラカテゴリーページにはカメラの人気ランキングを表示したい
スマホカテゴリーペーにはスマホの人気ランキング記事を表示したい
かんたそんな場合のカスタマイズ方法を紹介します。
ブログパーツ機能でサイドバーに表示するカテゴリーごとの人気記事パーツを作ります。
かんたカテゴリーごとのランキングを作成する方法は以下の記事で詳しく手順を解説しています。
ブログパーツで作成した人気ランキングに任意のクラスを付けます。ブログパーツ内のブロックを選択し、右側に表示されるブロックオプションから「高度な設定」→「追加CSSクラス」に適当なクラスを設定します。
作成したブログパーツの「呼び出しコード」をコピーします。
ウィジェットの設定画面に移動し、「カスタムHTML」を選択し「共通のサイドバー」に設置します。
カスタムHTMLウィジェットの中に先程コピーした「呼び出しコード」を貼り付けます。
貼り付けるのは「呼び出しコード」です。ID番号だけでなくコピーしたコードをそのまま貼り付けましょう！
追加CSSに以下のコードを追加します。
.sidebar-camera{
display: none;
}次にカメラカテゴリーページだけで表示させる下記のコードを追加CSSに記述します。
.category-camera .sidebar-camera{
display:block !important;
}これで作業完了です。
カメラカテゴリーだけで表示されることを確認しましょう。
上記コードは初心者でもカスタマイズの仕組みを理解しやすいようCSSコードを2つの構成に分けています。
できるだけCSSコードをシンプルにしたい場合は次のように記述してもOKです。
#body_wrap:not(.category-camera) .sidebar-camera{
display:none;
}こちらのコードはカメラカテゴリー以外なら非表示にするという記述です。
かんた自分の環境に置き換えたい人は、次のコードを参考にしてください。
#body_wrap:not(.category-カテゴリースラッグ) .高度な設定で追加したCSSクラス{
display:none;
}②【SWELL】記事ページでカテゴリースラッグを表示する方法
記事のサイドバーのカスタマイズについてです。
初心者「カテゴリーページ」と「記事ページ」って何が違うの？
例えばカメラのカテゴリーに属する記事を一覧表示するのがカテゴリーページです。別名でカテゴリーアーカイブページとも言います。
当ブログだとカテゴリーアーカイブページはこちらです。記事ページは今見ているこのページのことです。
カメラカテゴリーの記事のサイドバーにもカメラのランキング記事を表示したい場合はテーマのカスタマイズが必要です。
このステップではテーマフィルを編集します。子テーマを用意しましょう。
「外観」→「テーマエディター」と進み、functions.phpに次のコードを貼り付けましょう。
function add_cat($class) {
global $post;
if ( is_single() ) {
foreach((get_the_category($post->ID)) as $category)
$class[] = 'categoryid-'.$category->cat_ID;
}
return $class;
}
add_filter('body_class', 'add_cat');このコードは記事ページの出力コードのbody_wrap部分にカテゴリー情報を加える役割です。
サイドバーに表示させるパーツを「ブログパーツ」で作成しましょう。
ブログパーツ内のブロックにクラスを付けます。ブログパーツ内のブロックを選択し、右側に表示されるブロックオプションから「高度な設定」→「追加CSSクラス」に適当なクラスを設定します。
作成したブログパーツの「呼び出しコード」をコピーします。
ウィジェットの設定画面に移動し、「カスタムHTML」を選択し「共通のサイドバー」に設置します。
カスタムHTMLウィジェットの中に先程コピーした「呼び出しコード」を貼り付けます。
「外観」→「カスタマイズ」の順でクリックし「追加CSS」に以下のコードを追加します。
#body_wrap:not(.category-カテゴリースラッグ) .ブログパーツで追加したクラス名{
display:none;
}カテゴリーのスラッグ名がcamera、ブログパーツで追加したクラス名がsidebar-cameraの場合はコードは次のようになります。
#body_wrap:not(.category-camera) .sidebar-camera{
display:none;
}自分の環境に置き換えてコードをアレンジしてください！
以上で作業は終了です。サイドバーに指定のパーツが表示されているかを確認しましょう。
③【SWELL】固定ページごとにサイドバーを変更する方法
特定の固定ページだけに指定のサイドバーを表示するカスタマイズ方法を解説します。
サイドバーの構成案
| ページ名 | ページID | 指定のパーツ |
|---|---|---|
| トップページ | 1 | 非表示 |
| 会社案内 | 19 | 表示 |
初心者ページIDって何？
どこで確認できるの？
かんたページIDは固定ページの一覧画面で確認できるよ！
かんた固定ページごとにサイドバーの表示内容を変える方法は記事ページと全く同じです。
サイドバーに表示する内容をブログパーツで作成します。
かんた画像、テキストなんでもOKです。
ブログパーツで作成したブロックに任意のクラスを付けます。
「高度な設定」→「追加CSSクラス」に適当なクラスを設定します。
作成したブログパーツの「呼び出しコード」をコピーします。
ウィジェットで「カスタムHTML」を選択し「共通のサイドバー」に設置します。
カスタムHTMLウィジェットの中に、先程コピーした「呼び出しコード」を貼り付けます。
カスタマイザーの追加CSSに以下のコードを追加します。
#body_wrap:not(.page-id-19) .sidebar-company{
display:none;
}以上で作業完了です。
指定の固定ページだけでブログパーツが表示されているかを確認しましょう。
【SWELL以外】カテゴリーごとにサイドバーを変更する方法
SWELL以外のWordPressテーマを使っている場合のカスタマイズ方法です。
無料テーマ「Cocoon」を例に、カテゴリーごとにサイドバーの表示を変更するカスタマイズ方法解説します。
カスタマイズの概要
- サイドバーに表示させる要素を作る（ウィジェット）
- ウィジェットIDを確認する
- CSSコードを追加する
かんた順番に解説していきます。
カテゴリーごとにサイドバーの表示を変えるカスタマイズ
Cocoonを有効化したサイトで、お知らせカテゴリーページのサイドバーにだけカレンダーを表示させます。
ウィジェット機能でサイドバーに表示させるパーツを自由に作りましょう！
今回は「カレンダーウィジェット」をサイドバーに設置しました。
かんたこのステップで特別な設定はありません。
サイトを表示し、ブラウザのデベロッパーツールを使いカレンダーウィジェットのIDを調べます。
HTMLのコードから「#calendar-2」がIDだとわかりました。
かんたIDはウィジェット毎に異なります。
デベロッパーツールでしっかり確認しましょう。
任意のカテゴリーだけで指定のウィジェットが表示させるCSSコードを追加します。
「外観」→「カスタマイズ」→「追加CSS」に次のCSSコードを貼り付けてください。
body:not(.category-information) #calendar-2{
display:none;
}以上で作業は完了です。
指定のカテゴリーページだけでウィジェットが表示されているかを確認しましょう!
今回はお知らせカテゴリーだけで表示させるCSSコードを設置しました。
CSSコードの中身を解説します。コードの中身は次の通りです。カテゴリーのスラッグと、ウイジェットIDを自分の環境に合わせて書き換えることで、任意のカテゴリーだけで表示させるサイドバーを作成できます。
body:not(.category-カテゴリースラッグ) ウィジェットID{
display:none;
}おさらいに別の例とサンプルコードをもう一例。
「その他」カテゴリーページだけで表示させるコードです。その他カテゴリーのスラッグはotherです。
body:not(.category-other) #calendar-2{
display:none;
}カスタマイズの仕組み詳しく知りたい人向け
ここからはカスタマイズの理解を深めたい人向けの説明です。
カテゴリーごとにサイドバーを変更する仕組みとしてサイドバーの中身を指定のページ以外をCSSコード（display:none）で非表示にするという仕組みを紹介しました。
かんた今回のカスタマイズのポイントは次の2点です。
カスタマイズのポイント
- body_classによるクラス属性の出力
- CSS疑似クラス「:not()」によるセレクタの指定
①body_classによるクラス属性の出力
ほとんどのWordPressテーマはbody_classテンプレートタグにより出力テンプレートのクラス名をbodyに出力します。
以下はデフォルトテーマ有効時の出力コードです。
記事ページ（single.php）
<body class="post-template-default single single-post postid-53 single-format-standard logged-in admin-bar wp-embed-responsive is-light-theme singular customize-support">条件分岐として使えるユニークな値としてpostid-IDというコードが出力されています。特定の記事を対象にCSSコードを追加したい時に使える出力です。記事テンプレートではその記事が属するカテゴリー情報が出力されないのがポイントです。
投稿記事でIDが10の記事だけ.boxの背景を白にしたい場合は次のように指定できます。
.postid-10 .box{
background:white;
}固定ページ（page.php）
固定ページのHTML出力です。
<body class="page-template-default page page-id-19 logged-in admin-bar wp-embed-responsive is-light-theme singular customize-support">記事同様にpage-id-IDがページ固有の出力です。このコードをセレクタに加えることで特定の固定ページを指定したCSSを記述できます。
例えば投稿IDが10の会社案内のページ上だけ、.box要素の背景を黒くしたいという場合は次のように書きます。
.page-id-10 .box{
background:black;
}カテゴリーアーカイブページ（arcihve.php）
カテゴリーの記事一覧を表示するアーカイブページのHTML出力です。
<body class="archive category category-smartphone category-2 logged-in admin-bar wp-embed-responsive is-light-theme hfeed customize-support">カテゴリーアーカイブには「カテゴリーID」、「カテゴリースラッグ」が出力されます。特定のカテゴリーだけに適用したいCSSコードがある場合に使える出力です。
カテゴリースラッグがcameraのカメラアーカイブページだけ.box要素の色を青にしたい場合はCSSセレクタは次の通りです。
.category-camera .box{
background:blue;
}body_classテンプレートタグで出力するクラス属性の一例です。
| ページ | テンプレート | クラス名 |
|---|---|---|
| アーカイブページ | category.php archvie.php | archive category category-スラッグ category-* |
| 記事 | single.php | single single-post postid-ID |
| 固定ページ | page.php | page page-id-ID |
かんたこれらのクラス名を使いテンプレートごとのCSSを設定しているのが今回の仕組みです。
②CSS疑似クラス「:not()」によるセレクタの指定
:not()はCSS否定疑似セレクタです。
「指定の要素以外なら」という指定が可能な便利な存在です。以下が:notセレクタの基本的な書き方です。
:not(test) {
プロパティ: 値;
}今回のカスタマイズでは「指定のカテゴリー以外なら非表示」という使い方をしました。
例えばカメラアーカイブページ以外ならsidebar-cameraは非表示にする（カメラアーカイブだけ表示）という場合は次のような書き方をします。
#body_wrap:not(.category-camera) .sidebar-camera{
display:none;
}【おまけ】PHP条件分岐でサイドバーの表示を変える方法
テーマファイルを編集し、PHPでページごとに出力内容を変更するカスタマイズ方法を紹介します。
ほとんどのテーマの場合サイドバーの出力はsidebar.phpが担当しています。このファイルを直接編集し、ページごとに表示する内容を変更する方法を解説します。
かんたテーマファイルを編集できるスキルのある人向けテクニックです。
メリット
- 無駄なHTMLコードが出力されない
- HTMLやPHPコードで自由に表示したい内容をアレンジできる
デメリット
- うっかりミスでサイトが表示されなくなる
- テーマのアップデートでテンプレートファイルが上書きされる（子テーマ推奨）
【PHP】固定ページの表示内容を変える
固定ページを表示している場合のみ特定のサイドバーを表示させるコードです。
<?php if ( is_page() ) : ?>
出力したい内容を記述
<?php endif; ?>「出力したい内容を記述」部分に任意のコードを書きましょう。
HTMLだけでなく、PHPでもOKです！
全固定ページではなく、「特定の固定ページだけで表示したい！」なんて時ありますよね？
そんな場合は固定ページのIDを加えましょう。
<?php if ( is_page(’1’) ) : ?>
出力したい内容を記述
<?php endif; ?>特定のページが複数ある場合は次のように記述します。
<?php if(is_page( array(1,2,3,4,5 ) ) ): ?>
出力したい内容を記述
<?php endif; ?>【PHP】記事ページの表示内容を変える
記事ページだけサイドバーの表示を変えたい場合のコードです。
<?php if ( is_single() ) : ?>
出力したい内容を記述
<?php endif; ?>特定の記事だけを対象にしたい場合は次のコードです。
<?php if ( is_single('1') ) : ?>
出力したい内容を記述
<?php endif; ?>【PHP】カテゴリーページの表示内容を変える
カテゴリーアーカイブページだけで表示したい場合のコードです。
<?php if ( is_category() ) : ?>
出力したい内容を記述
<?php endif; ?>上記のコードは全カテゴリーアーカイブページを対象にしています。
特定のカテゴリーアーカイブページだけで表示させる場合は次のように書きます。
<?php if ( is_category('camera') ) : ?>
出力したい内容を記述
<?php endif; ?>「カメラカテゴリーの場合はコレ」、「スマホカテゴリーの場合はコレ」、「それ以外はコレ」といった場合は次のようにまとめることができます。
<?php if ( is_category('camera') ) : ?>
カメラカテゴリーの場合
<?php elseif(is_category('sp')):?>
スマホカテゴリーの場合
<?php else:?>
それ以外の場合
<?php endif;?>サンプルコードの「それ以外の場合」はカテゴリー以外も対象です。上のサンプルコードの場合の「それ以外」はカメラ、スマホカテゴリー以外の全ページが対象です。固定ページや記事ページも含まれます。
まとめ
WordPressサイトでサイドバーの表示をページやカテゴリーごとに変更する方法を紹介しました。
テーマを編集する方法以外にもCSSだけで実装する方法があります。
ぜひチャレンジしてみてください。
今回のカスタマイズに関連してグロナビやスマホのメニューを、ページごとに変更する方法があります。こちらはフックを使うことでテーマファイルやCSSの変更なしで実現できます。
かんた次の記事で解説しています。
