秋田のデザイン事務所 SeeVisionsのウェブチームがお送りする技術系ブログです。
基本的に業務内外で使用した技術や知識を備忘録的にまとめていきます。
だれかのお役に立てば幸いです。

WordPressでのページの種類によって処理を分岐する方法 その2【パンくずリスト編】

WordPressシリーズの第2弾【パンくずリスト編】を書きたいと思います。今回は【パンくずリスト編】として、各ページの上の方とかに表示される「ホーム>カテゴリ>○○」みたいなサブナビゲーション的なやつを自動表示させる方法です。前回の【タイトル編】では、各ページの判別の説明から行いましたが、今回は分岐処理に関しては極力省略して進めますので、よく覚えてないという方はコチラを参照ください。
なお、パンくずリストについてはいろいろご意見があると思いますが、僕は状況によって付けたり付けなかったりします。第2階層までしかないようなサイト構成だとメインナビゲーションで十分だったりしますし。ただサイト構造が複雑だったり、階層が深いサイトなどは、なにか特別な根拠やデザイン上の理由がない限りは表示するべきだと思います。というわけで、以下解説です。

ページごとに表示する内容を決める

まずは、パンくずリストでページごとに表示される内容とリンク先を決めます。
以下例。

・トップページ

パンくず無し

・固定ページ

トップ(トップページへ)>固定ページ

・カテゴリーアーカイブ

トップ(トップページへ)>カテゴリー

・月別アーカイブ

トップ(トップページへ)>○○年○○月

・個別記事

トップ(トップページへ)>所属カテゴリー(所属カテゴリーアーカイブへ)>記事タイトル

 

みたいな感じです。
変わったリスト作っても意味ないのでだいたいこんな感じになるんじゃないでしょうか。
ちなみにその他には、

・タグページ
・検索ページ
・404ページ

 

などあります。このサイトでは、上記の3ページではパンくずは基本使用してません。

パンくずリストの基本的なHTML記述

ページごとにそれぞれ専用の記述をしてもいいんですが、
あんまりきれいじゃないし、運用効率も悪いので、
どのページでも流用できるような記述が望ましいです。

基本的にHTMLは自由ですが、まぁULとLIでリスト表示が一般的ですかね。

<ul>
<li><a href="#"><img src="/images/pankuzu01.png" width="37" height="14" alt="トップページ"/></a></li>
<li><a href="#">カテゴリ</a></li>
<li><a href="#">タイトルタイトル</a></li>
</ul>
タグの使用方法によっては、HTMLの出力をカスタム出来ない場合があり、aタグが並んだパンくずリストになってしまうことがありますが、
HTML的にはリストタグなどで記述してやる方が良いと思います。この中にタグを使用して、パンくずリストを表示していきます。

phpタグでパンくずリストを記述

さて、ここまで書いておいてなんですが、実は紹介しようとしていた記述方法よりも
はるかに汎用性が高く、実用向きな記述を紹介されている記事を発見してしまいました。
なので、今回は具体的な解説はせず、記述の簡単な説明とサイトのご紹介をさせていただきます。

以下のサイト様にてパンくずリストの解説をされておりますので、まずはご覧ください。

WordPressにプラグインなしでパンくずリストを表示させる方法 «  Blog × Play Under World

http://blog.playunderworld.com/web/how-to-breadcrumbs-in-wordpress/

 

素晴らしいですね!
functions.phpに記述することで、どこからでも呼び出して使えるのは便利です。
なによりHTML出力をカスタムできるのが素晴らしい。テキストだけじゃなく画像などを表示することもできるので自由に設定できます。
初期でリスト表示になっているので、いじる必要もないですし。
以下、さらっと解説します。

簡単にさらっとパンくずリストを入れちゃう方法

1.funcitons.phpを編集。無い場合は、新規で作成。

 

2.Blog × Play Under World様のPHPコードをコピーして、funcitons.phpにペースト。

※functions.phpを変更する場合は、バックアップを取ったうえで作業を行ってください。 変更前の状態が分からないと誤作動を起こした場合、最悪戻せなくなります。バックアップ取っておけば、 おかしくなったら取りあえずバックアップで上書きすれば大抵戻ります!大丈夫!自己責任でどうぞ!

 

3.パンくずリストを表示したい場所に以下記述。

<?php get_breadcrumbs(); ?>

 

これだけです!
まぁ、この方法のキモはfuncitons.phpの記述なので、Blog × Play Under World様に感謝して使いましょう。
ほんとありがとうございます。こういう心優しいすごい人がいるおかげでwordpressがどんどん便利になっていくんですよね。

さらにカスタマイズ!!

上記の方法で、ほとんど対応できると思いますが、場合によってはカスタマイズが必要になります。
たとえば特定のページのみ出力を変えたい場合などは、elseif ( is_○○() )の判別部分を探して
その中を変更します。画像に差し替える場合も中をimgタグにすればOK!
以下、検索ページの出力変更。

elseif ( is_search() ) {
echo "<li><div>検索ページ<div><p>このページは検索結果を表示しています。</p></li>"; //この部分を変更!
}

また、初期だとタグページの記述が無いため、タグページ用の記述は以下を29~30行あたりに追加。

elseif ( is_tag() ) {
echo "<li> &raquo; Tags</li>"; //この部分を変更!
}

 

以上、WordPressでのページの種類によって処理を分岐する方法 その2【パンくずリスト編】でした!
最終的に、人様の素晴らしい情報に乗っかっただけの記事になってしまいましたが、まぁ皆さまのお役に立てれば幸いです。


参考ページ ///////////////
 WordPressにプラグインなしでパンくずリストを表示させる方法 «  Blog × Play Under World
 http://blog.playunderworld.com/web/how-to-breadcrumbs-in-wordpress/
  • このエントリーをはてなブックマークに追加