It's my pc life…

ふと気がつけばいつの間にやら PC と出会い20年超の、初級者以上中級者未満の徒然 PC 生活記録

WordPressのパンくずリスト手動設置について

  1. WebDesign ・ Coding

 ナビゲーション性能の向上やSEO対策、あるいは単純にデザイン面に対しての考慮など理由は多々あるが、ここ近年の主流としてWordPressに限らず、どんなサイトやブログにでも大抵の場合パンくずリスト(Breadcrumb List)が設置されている。

 WordPressにパンくずリストを設置する場合、主にふたつの方法がある。

  • プラグインとして導入する
  • 手動でテーマにタグを挿入する

 今回はプラグインでの導入については控えるが、有名なプラグインには「Breadcrumb NavXT」等があり、もし手軽にパンくずリストを導入したい場合にはこうしたプラグインを利用するのが最もメジャーかつベターな方法となる。
 が、もしパンくずリストの詳細なデザインカスタマイズや、機能面でプラグインでは再現できない機能を求めることがあるのなら、方法はテーマテンプレートへのタグ挿入による手動でのパンくずリスト導入一択となる。

 しかし手動でパンくずリストを設置する場合、その記述方法には単純にindex.php等に書き込むだけのものや、function.phpへの記述を用いるものなどいくつかの方法がある。
 今回WordPressへパンくずリストを設置するに当たって試してみたそれらの方法の中で、当ブログで最終的に採用した方法について紹介したい。

パンくずリスト(Breadcrumb List)とは

 取りあえず「パンくずリスト」が何か分からないという人のために、簡単におさらいから。パンくずリストとは当ブログ記事のタイトル下部にある、「ホーム > Web > HTML / CSS / PHP」のようなリスト形式のリンクで、当ブログの場合、記事がどのカテゴリに属しているかを示している。Wikipediaでは下記のように説明されている。

 パンくずリスト(breadcrumb list)は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。

~ 中略 ~

 ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

引用 – Wikipedia – パンくずリスト

 要はユーザーに現ページ及びその前後位置等を分かりやすく明示するためのリンクリストがいわゆる「パンくずリスト」となる。
 元々はユーザビリティ配慮のためのものだったが、最近ではGoogleなどの検索エンジンの評価にも関わるということで、SEO対策の観点からも多数のサイトやブログで導入されている。

 Wikipediaによればパンくずリストには何を示すリストかにより「パス型」「位置型」「属性型」の3種類に分類されるが、今回紹介するのはその記事がどのカテゴリに属しているかを明示する「属性型」の設置方法となる。

テンプレートタグ「get_the_category()」で簡単にパンくずリスト設置

 WordPressにパンくずリストの機能を再現するために必要になるのは、その記事が属するカテゴリを取得するテンプレートタグ。
 この条件を満たすタグの記述方法にはいくつかの種類があるが、最も単純かつ簡単なのが以下のテンプレートタグ。

 上記は実際に当ブログで使用しているタグ記述で、これをパンくずリストを表示させたい場所に挿入するだけで、その場所にパンくずリストを表示させることが可能(変数「$cat」の部分は「$category」等、任意の文字列に変更可能)。
 上記テンプレートタグが使用できるのは基本的にループ内(<?php while( have_posts() ) : the_post(); ?>~<?php endwhile; ?>)のみだが、記事IDを指定すればループ外での使用も可能。

テンプレートタグに使用している関数・変数や構造の簡単な説明

 1行目の get_the_category() は現在の記事カテゴリIDやその親カテゴリーのIDの情報を配列として取得し、2行目の get_category_parents() は指定カテゴリの親カテゴリをパンくずリスト形式で取得する。

 配列取得のための変数として、まず以下を記述。

 これで変数 $cat に get_the_category() の戻り値が格納、つまり現在の記事のカテゴリID等の情報が代入される。
 次はそこから必要とするカテゴリID、今回の場合は現在の記事のカテゴリーだけでなく、もしそれが子カテゴリの場合は親カテゴリのIDも取得・出力したいので、以下のように記述する。

 $cat[0]->term_id で配列の1番目の値を取得、echo get_category_parents でそれを出力する。配列の1番目の値とは、つまり「一番最初のカテゴリID」のことを指す。
 この際 $cat[0] の数値は配列内の順番を表しているので、これを変更することで配列内から任意のカテゴリ情報を取得できる([1]なら2番目、[2]なら3番目のカテゴリ情報)。

 今回 get_category_parents に使用したパラメータは以下の通り。

  • $id : 記事の所属するカテゴリのID
  • $link : 各カテゴリへのリンクを出力するか否か(true/false(初期値:false))
  • $separator : 区切り文字(シングルクォーテーション(’)で囲む(初期値:’/’))

「$id」には「$cat[0]->term_id」を記述し、最初のカテゴリIDを指定。パンくずリストの役目を果たすために各カテゴリへのリンク出力も行うため、「$link」は「true」に指定。
 「$separator」は表示するカテゴリー間を区切る文字列を指定でき、初期値では「’/’」が設定されている。これを任意の文字列あるいは画像等に変更可能なので、今回は「’ > ‘」に変更した(文字間隔を考慮し、前後に半角スペースも挿入)。ちなみに区切り文字を英数字にする場合、シングルクォーテーションで囲む必要はない。

get_the_category() を使用した上記方法のメリットとデメリット

 色々と説明したが、要約するとパンくずリストを設置したい場所に、

 上記2行を挿入するだけでいいので、手動でパンくずリストを設置する方法としては非常に簡単な部類に入るが、多少のデメリットというか不便な点も存在し、それらをまとめてみると、

  • テンプレートタグが短く、設置も簡単
  • function.phpに余計な記述をしなくても良い
  • プラグインを使用しないので、WordPressの動作が不要に遅くならない
  • 使用できるのは一覧ページや投稿記事ページなどで、固定ページには使用できない
  • 上記コードのみだとトップページへのリンクは出力されない
  • $separatorで設定した区切り文字が、一番最後に必ず付いてしまう

 などがあり、特に区切り文字が一番最後に付いてしまうのはデザイン上少し悩んでしまうところ。だが記述次第で上記の多くを解決することもできる。

実際に記述・パンくずリストを設置してみる

 ループ内に上記タグをそのままコピペするだけでもパンくずリストは設置可能だが、CSSでデザインを調整しやすくするため以下のように記述した。

 上記を記述したのは、記事一覧ページとなるindex.phpの、ループ内記事タイトル(<h2>~</h2>)直下。

 タグを<ol>~</ol>で順序付きリスト形式とし、classを設定してCSSで体裁を整えることでデザインを調整。リストタグ全体を<div>で囲み、それをCSSで調整してもOK。
 また3行目に<a href=”<?php echo home_url(); ?>”>Home</a>を挿入してトップページへのリンクを設置、5行目には<?php the_title(); ?>を挿入して現在の記事タイトルが出力されるようにすることで、

  • 上記コードのみだとトップページへのリンクは出力されない
  • $separatorで設定した区切り文字が、一番最後に必ず付いてしまう

 デメリットに挙げたこのふたつも一応は解消可能。当ブログの場合は記事更新日表示との兼ね合い等からあえて最後の記事タイトル表示は外して使用している。

あらゆるタイプのパンくずリストに使える万能のタグはない

 上記タグで一応パンくずリストは設置可能だが、ひと言にパンくずリストと言ってもどのような情報を出力したいかは人それぞれとなる。

 例えば上記で紹介したタグでは、その記事が属するカテゴリとその親カテゴリ(もし記事が孫カテゴリの場合、親だけでなく祖先となるカテゴリ全て)は出力可能だが、もしひとつの記事にカテゴリをふたつ以上設定していた場合、同階層カテゴリの内出力されるのは取得配列内のIDが若い方のカテゴリーのみとなり、所属するカテゴリ全部は出力されない。
 こうした要求を function.php への記述で可能とする方法もネット上ではいくつも紹介されているが、これ以上複雑なのは WordPress 初心者の手には負えないのでここでの紹介は割愛する。

 最近はパンくずリストの設置が基本となり、そして WordPress ではせっかくひとつの記事に複数のカテゴリを設定できる使用なのだから、そこら辺もう少し WordPress の基本機能で融通を利かせてくれてもいいんじゃないかと思うのだがどうだろうか……

参考サイト・ブログ

 パンくずリスト作成のため参考にさせていただいたのは、以下のサイトやブログになる。

 参考にさせていただいた上記では、当記事ではその多くを簡略化あるいは省いて紹介している配列や変数といったPHPの専門知識について詳細に説明されているので、是非一度参照していただければと。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメント更新情報

トラックバック

トラックバックURL: http://itsmy.first-pclife.com/web-wordpress/webdesign-coding/post-85/trackback