カテゴリー・固定ページ毎にサイドバーを変更する方法|WordPressプラグインやPHPの条件分岐は必要なし!

カスタムフィールド値をそのまま記事一覧テンプレートに表示させる方法
初心者

カテゴリーごとにサイドバーの表示内容を変えたい
カテゴリーの人気記事をカテゴリーページに表示したい
固定ページのサイドバーを専用のものにしたい

そんな場合のカスタマイズテクニックを紹介します。

サイドバーをカテゴリーや固定ページごとに変更するカスタマイズって難しそうですよね?

本記事ではWordPress初心者向けにPHPやプラグインを一切使用せず、カテゴリーごとにサイドバーの表示内容をカスタマイズする方法をサンプルコード付きで紹介します。

この記事で紹介するカスタマイズ方法の特徴

  • プラグイン不要(テーマとの互換性は気にする必要ありません)
  • テーマの編集なし(PHPコードは触りません)

人気WordPress「SWELL」とその他のテーマを例に解説します。本カスタマイズはWordPressの標準的な出力コードとCSSのみを使いますのでどんなテーマにも対応しています

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【概要】サイドバーの表示をページごとに変更するカスタマイズ

【概要】サイドバーの表示をページごとに変更するカスタマイズ

今回のカスタマイズの概要です。

かんた

テーマファイルを編集しないで済むCSSコードでカテゴリーごとにサイドバーを変更するテクニックを紹介します。

カスタマイズの概要

  1. サイドバーに表示させる要素を作る(ブログパーツ、ウィジェット)
  2. CSSでいったん非表示にする(display:none)
  3. カテゴリーアーカイブページのみCSSで表示する(disply:block)

カテゴリー以外にも固定ページごとにサイドバーを切り替えることが可能です。

【SWELL】カテゴリー・ページ毎にサイドバーを変更するカスタマイズ

SWELLでページごとにサイドバーを変更するカスタマイズ
かんた

まずはWordPressテーマ「SWELL」のカスタマイズ方法を紹介します。

SWELLのカスタマイズ

  1. カテゴリーごとにサイドバーを変更する方法
  2. 記事ページごとにサイドバーを変更する方法
  3. 固定ページごとにサイドバーを変更する方法

①【SWELL】カテゴリーごとにサイドバーを変更する方法

初心者

カメラカテゴリーページにはカメラの人気ランキングを表示したい
スマホカテゴリーペーにはスマホの人気ランキング記事を表示したい

かんた

そんな場合のカスタマイズ方法を紹介します。

カテゴリーの構成
STEP
カテゴリーの人気記事ランキングを作る

ブログパーツ機能でサイドバーに表示するカテゴリーごとの人気記事パーツを作ります。

かんた

カテゴリーごとのランキングを作成する方法は以下の記事で詳しく手順を解説しています。

カテゴリーごとのランキング記事を作る方法

サイドバーに表示させる要素を「ブログパーツ」で作成するのがポイントです。バナー画像、テキストなど表示させたい内容をブログパーツで作りましょう!

STEP
ブログパーツにクラスを設定する

ブログパーツで作成した人気ランキングに任意のクラスを付けます。ブログパーツ内のブロックを選択し、右側に表示されるブロックオプションから「高度な設定」→「追加CSSクラス」に適当なクラスを設定します。

今回の例では「sidebar-camera」と設定しました。

STEP
ブログパーツをウィジェットに設置する

作成したブログパーツの「呼び出しコード」をコピーします。

ブログパーツの呼び出しコード

ウィジェットの設定画面に移動し、「カスタムHTML」を選択し「共通のサイドバー」に設置します。

カスタムHTMLウィジェットの中に先程コピーした「呼び出しコード」を貼り付けます。

カスタムHTMLウィジェット

貼り付けるのは「呼び出しコード」です。ID番号だけでなくコピーしたコードをそのまま貼り付けましょう!

STEP
CSSコードを追加する

追加CSSに以下のコードを追加します。

.sidebar-camera{
display: none;
}

追加CSSは「外観」→「カスタマイザー」の順にクリックすると表示されます!

次にカメラカテゴリーページだけで表示させる下記のコードを追加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】記事ページでカテゴリースラッグを表示する方法

記事のサイドバーのカスタマイズについてです。

初心者

「カテゴリーページ」と「記事ページ」って何が違うの?

例えばカメラのカテゴリーに属する記事を一覧表示するのがカテゴリーページです。別名でカテゴリーアーカイブページとも言います。

当ブログだとカテゴリーアーカイブページはこちらです。記事ページは今見ているこのページのことです。

カメラカテゴリーの記事のサイドバーにもカメラのランキング記事を表示したい場合はテーマのカスタマイズが必要です。

このステップではテーマフィルを編集します。子テーマを用意しましょう。

STEP
fucntions.php

外観」→「テーマエディター」と進み、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部分にカテゴリー情報を加える役割です。

カテゴリーページごとにサイドバーの表示を変える作業をしている場合は次のステップは不要です。記事ページ上で指定のサイドバーが表示されているかを確認しましょう。

STEP
ブログパーツを作る

サイドバーに表示させるパーツを「ブログパーツ」で作成しましょう。

STEP
ブログパーツにクラスを設定する

ブログパーツ内のブロックにクラスを付けます。ブログパーツ内のブロックを選択し、右側に表示されるブロックオプションから「高度な設定」→「追加CSSクラス」に適当なクラスを設定します。

今回の例では「sidebar-camera」と設定しました。

STEP
ウィジェットにブログパーツを設置する

作成したブログパーツの「呼び出しコード」をコピーします。

ウィジェットの設定画面に移動し、「カスタムHTML」を選択し「共通のサイドバー」に設置します。

カスタムHTMLウィジェットの中に先程コピーした「呼び出しコード」を貼り付けます。

STEP
CSSコードを追加する

外観」→「カスタマイズ」の順でクリックし「追加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は固定ページの一覧画面で確認できるよ!

固定ページの構成

※タイトル、スラッグは任意の名称を設定できます。
「ID」はシステムから自動的に割り当てられる数字です。

かんた

固定ページごとにサイドバーの表示内容を変える方法は記事ページと全く同じです。

STEP
ブログパーツでサイドバーを作る

サイドバーに表示する内容をブログパーツで作成します。

かんた

画像、テキストなんでもOKです。

STEP
ブログパーツにクラスを設定する

ブログパーツで作成したブロックに任意のクラスを付けます。

高度な設定」→「追加CSSクラス」に適当なクラスを設定します。

今回の例では「sidebar-company」と設定しました。

STEP
ブログパーツをウィジェットに設置する

作成したブログパーツの「呼び出しコード」をコピーします。

ブログパーツの呼び出しコード

ウィジェットで「カスタムHTML」を選択し「共通のサイドバー」に設置します。

カスタムHTMLウィジェットの中に、先程コピーした「呼び出しコード」を貼り付けます。

カスタムHTMLウィジェット
STEP
CSSコードを追加する

カスタマイザーの追加CSSに以下のコードを追加します。

#body_wrap:not(.page-id-19) .sidebar-company{
display:none;
}
かんた

以上で作業完了です。
指定の固定ページだけでブログパーツが表示されているかを確認しましょう。


【SWELL以外】カテゴリーごとにサイドバーを変更する方法

SWELL以外のWordPressテーマを使っている場合のカスタマイズ方法です。

無料テーマ「Cocoon」を例に、カテゴリーごとにサイドバーの表示を変更するカスタマイズ方法解説します。

カスタマイズの概要

  1. サイドバーに表示させる要素を作る(ウィジェット)
  2. ウィジェットIDを確認する
  3. CSSコードを追加する
かんた

順番に解説していきます。

カテゴリーごとにサイドバーの表示を変えるカスタマイズ

Cocoonを有効化したサイトで、お知らせカテゴリーページのサイドバーにだけカレンダーを表示させます。

お知らせカテゴリーページにだけ表示

今回の例ではカテゴリー名は「お知らせ」、スラッグは「information」です。

STEP
サイドバーに表示させる要素を作る(ウィジェット)

ウィジェット機能でサイドバーに表示させるパーツを自由に作りましょう!

今回は「カレンダーウィジェット」をサイドバーに設置しました。

かんた

このステップで特別な設定はありません。


STEP
ウィジェットIDを確認する

サイトを表示し、ブラウザのデベロッパーツールを使いカレンダーウィジェットのIDを調べます。

HTMLをチェックする

HTMLのコードから「#calendar-2」がIDだとわかりました。

かんた

IDはウィジェット毎に異なります。
デベロッパーツールでしっかり確認しましょう。

STEP
CSSコードを追加する


任意のカテゴリーだけで指定のウィジェットが表示させる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点です。

カスタマイズのポイント

  1. body_classによるクラス属性の出力
  2. 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コードを追加したい時に使える出力です。記事テンプレートではその記事が属するカテゴリー情報が出力されないのがポイントです

本記事で紹介したコードをfunctions.phpに加えると記事ページにカテゴリースラッグが追加表示されます。

投稿記事で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.phpsingle
single-post
postid-ID
固定ページpage.phppage
page-id-ID
body_classテンプレートタグによるクラス名の一例
かんた

これらのクラス名を使いテンプレートごとのCSSを設定しているのが今回の仕組みです。

②CSS疑似クラス「:not()」によるセレクタの指定

:not()はCSS否定疑似セレクタです。

指定の要素以外なら」という指定が可能な便利な存在です。以下が:notセレクタの基本的な書き方です。

:not(test) {
  プロパティ: 値;
}

今回のカスタマイズでは「指定のカテゴリー以外なら非表示」という使い方をしました。

例えばカメラアーカイブページ以外ならsidebar-cameraは非表示にする(カメラアーカイブだけ表示)という場合は次のような書き方をします。

#body_wrap:not(.category-camera) .sidebar-camera{
display:none;
}

#body_wrap部分は有料テーマSWELL固有の出力に合わせた書き方です。
一般的なテーマの場合、セレクタはbody:not()です。

【おまけ】PHP条件分岐でサイドバーの表示を変える方法

【おまけ】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; ?>

サンプルコード内「1」の部分が固定ページのIDです。

かんた

特定のページが複数ある場合は次のように記述します。

<?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; ?>

1」部分が投稿IDです。

【PHP】カテゴリーページの表示内容を変える

カテゴリーアーカイブページだけで表示したい場合のコードです。

<?php if ( is_category() ) : ?>

出力したい内容を記述

<?php endif; ?>

上記のコードは全カテゴリーアーカイブページを対象にしています。

特定のカテゴリーアーカイブページだけで表示させる場合は次のように書きます。

<?php if ( is_category('camera') ) : ?>

出力したい内容を記述

<?php endif; ?>

サンプルコード内「camera」はカテゴリースラッグ名です。任意のスラッグ名に変更してください。

「カメラカテゴリーの場合はコレ」、「スマホカテゴリーの場合はコレ」、「それ以外はコレ」といった場合は次のようにまとめることができます。

<?php if ( is_category('camera') ) : ?>

カメラカテゴリーの場合

<?php elseif(is_category('sp')):?>

スマホカテゴリーの場合

<?php else:?>

それ以外の場合

<?php endif;?>

サンプルコードの「それ以外の場合」はカテゴリー以外も対象です。上のサンプルコードの場合の「それ以外」はカメラ、スマホカテゴリー以外の全ページが対象です。固定ページや記事ページも含まれます。

まとめ

WordPressサイトでサイドバーの表示をページやカテゴリーごとに変更する方法を紹介しました。

テーマを編集する方法以外にもCSSだけで実装する方法があります。

ぜひチャレンジしてみてください。

今回のカスタマイズに関連してグロナビやスマホのメニューを、ページごとに変更する方法があります。こちらはフックを使うことでテーマファイルやCSSの変更なしで実現できます。

かんた

次の記事で解説しています。

よかったらシェアしてね!
  • URLをコピーしました!
目次