【WordPress】特定のカテゴリー記事のサイドバーに任意の要素(目次や記事一覧)を表示させる方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

通常、WordPressのサイドバーというのは、
どのカテゴリー記事でも、サイト内のどのページでも同じものが表示されます。

しかし、カテゴリーによって閲覧ユーザー層が異なる場合、
カテゴリーごとにそれぞれサイドバーを設定したいと思うものです。

そこで今回、カテゴリーによって異なる要素をサイドバーに表示させる方法、
さらにカテゴリー内の回遊率を上げてくれる目次の設置方法について詳しく説明していきます。

カテゴリーごとではなく、記事ごとであったり、タグごとに切り替えたりもでき、
汎用性が非常に高いので、知っておいて損はないテクニックだと思います。

1:概要

今回は、特定のカテゴリー記事に目次を設置する方法を説明していきます。

例えば、この記事のサイドバーに以下の様な「アドセンス記事の目次」を表示しています。(スマホの場合はページ下部)

サイドバーの目次

これはカテゴリー「アドセンス」にのみに設置しているのです。(説明のために例外としてカテゴリー「アドセンス」ではないこの記事にも設置していますが)

そして、目次に表示しているリンクをクリックしたりしてアクセスすると、
下のように「←今ここ」など表示して今見ているページが分かるようになっています。

現在のページが分かる目次

さらに目につきやすいようにスクロールに伴い追尾するように設定しています。

これらを実現する方法です。

ちなみにこの目次を設置している理由は主に以下の2つです。

  • ユーザーが関連記事を遷移しやすくする
  • ブログの構成や、現在の記事がこのブログでどんな位置づけなのかなどを視覚的に伝える

2:特定のカテゴリに目次を設置する方法

では、実際に設置する方法を順序立てて説明していきます。

説明の流れとしてはこんな感じです。

  1. 特定のカテゴリー記事のサイドバーに任意の要素を表示させる方法について
  2. 現在のページが分かる目次の設置法について
  3. サイドバーの要素を追尾させる方法について

2.1:特定のカテゴリー記事のサイドバーに任意の要素を表示させる方法

まずは特定のカテゴリーのサイドバーに任意の要素を表示させる方法についてです。

WordPressの記事ページのサイドバーというのは、
「single.php」で「sidebar.php」を読み込んで表示させます。

single.php

sidebar.php

なので、カテゴリーによって違うサイドバーを表示させるなら、

  1. 「single.php」内で条件分岐を使ってカテゴリーごとに違うサイドバーのファイルを読み込ませる
  2. 「sidebar.php」内で条件分岐を使ってカテゴリーごとに違う要素を読みこませる

どちらかを行えばよいのです。

どちらでも良いのですが、今回は後者の方法を行いました。

「sidebar.php」のウィジェットに対応する部分の下に、
以下を追加します。

これは、
『カテゴリーのスラッグが「adsense」なら(2行目)、「sidebar-adsense.php」を読み込む(3行目)』
という意味です。

2行目のシングルクォーテーションの中は、
カテゴリーのスラッグを入力して下さい。

そして、さらに読み込ませたい要素を記した「sidebar-adsense.php」というファイルを
FTPソフトでテーマフォルダの階層にアップロードします。

例:/ad-note.jp/public_html/wp-content/themes/xeory_base

3行目のシングルクォーテーションの中や「sidebar-〇〇.php」はなんでもいいので、
分かりやすい文字列にしましょう。

また、わざわざ新たにファイルを作ってアップロードしなくても、
「get_sidebar(‘adsense’);」のところを直接書き込んでも良いのですが、
後から見た時に分かりやすく修正も楽そうなのでこのようにしました。

ちなみに、テンプレートパーツの読み込み方はこちらを参考にして下さい。

参考:【WordPress】任意のテンプレートパーツを読み込む関数[get_template_part() ;]の使い方。 – ONZE

2.2:現在のページ分かる目次を設置する方法

さて「sidebar-adsense.php」に書き込んだ内容が、
カテゴリー「アドセンス」の記事のサイドバーに表示されるようにしました。

なので、表示させたい内容を記述していきます。

普通の目次の場合だったら特に難しいこともないのですが、
現在見ているページに目印をつけるために以下のページを参考にしました。

参考:WordPressで現在表示しているページを判定しclass=”current”を追加する方法(カレント表示) : Glossy

例えば、次のように記述したとします。

2行目に見慣れない関数が含まれていると思いますが、
「スラッグ「179」の投稿ページを見ている場合、「class=”current-ad”」を出力する」
という意味です。

他のページを見ている場合は、クラスは何も出力されません。

実際に「https://ad-note.jp/179.html」のページを見た時、次のようになります。

あとはCSSで「current-ad」を装飾すれば良いのです。

例えば以下のようにすれば、
現在見ているページのリンクの右に「←今ここ」というのをつけ、
さらにそのリンクを解除することができます。

こちらを参考にしました。

参考:【CSS】知らなきゃまずい!?擬似要素「:before」「:after」の使い方の基本 | Web制作会社スタイル

その他にも枠線で囲ったり、上下の幅を調整したりしていますが、
ここでは説明を割愛します。

ちなみにですが、このブログでは「sidebar-adsense.php」を次のようにしています。
是非参考にして下さい。

2.3:サイドバーを追尾させる方法

サイドバーを追尾させるには、
プラグイン「Q2W3 Fixed Widget」またはプラグイン「standard Widget Extensions」を使うのが一般的です。

今回は楽そうだったので「Q2W3 Fixed Widget」を使いました。

【プラグイン】>【新規追加】から「Q2W3 Fixed Widget」を検索してインストール&有効化。

そして、【外観】>【Fixed Widget Options】から【Custom IDs】にて、
追尾させたいサイドバーの要素につけたid(ここでは「ad-rec」)を設定。

Fixed Widget Optionsの設定

以上でサイドバーの目次の部分が追尾されます。

画面のどこに固定するかなど細かい設定もできますが、
ここでは割愛します。

あとがき

カテゴリーによってサイドバーを切り替えるというと何となく難しそうですが、
意外と簡単にできることが分かってもらえたかと思います。

ただ、今では大抵のサイトはPCよりもスマホユーザーの方が多いものなので、
サイドバーではなく記事下に表示させるのもいいかもしれませんね。

今回の内容が理解できれば、
特定のカテゴリー記事における記事下部に目次を設置したり、
色々応用ができるかと思います。

また、現在見ているページに自動で目印が入る目次というのは結構便利なので、
CSSなど自分なりにアレンジして使っていただけたら幸いです。

torokuword1

ブログには書けない裏話をメール講座にてお伝えします。


・僕が月収170万円稼いだ裏話
・狙ったキーワードで上位表示させるための秘訣
・ゲームをしたり漫画を読んだり、好きなことをしてお金を稼ぐ方法
・ライバル不在のトレンドアフィリエイトの手法
・・・etc


また、メール講座の中では、僕がアドセンスで月160万円、総額1600万円以上稼いできたノウハウの全貌を記した、200P超えのPDFを無料でプレゼントします。


名前(苗字)
メールアドレス



コメントを残す