【脱プラグイン作戦】WordPressのパンくずリストを自作してみよう

By | Date : 2016/12/27 ( Last Update : 2017/04/09 ) | 325 views

皆さん、こんにちは~☆ シアです。

今回は、本サイトに設置しているパンくずリストをプラグイン(Breadcrumb NavXT)から独自実装に変えた時のお話です。

パンくずリスト

1. パンくずリストとは

パンくずリスト(Bread-crumb list)とは、Webサイトから見た現在開いているページの位置を表す、階層構造のリストです。WordPressの場合、カテゴリの構造を利用することで、ユーザーはこの記事に関連するカテゴリに素早くアクセスすることができます。

また、Webサイトの構造が定義することができるので、検索エンジンにサイトの構造を正確に伝えることができます。

検索結果に表示されたパンくずリスト(Googleの場合)

 

2. 単一記事のパンくずリストを実装してみよう

では早速、単一記事のパンくずリストを実装していきましょう。

 

パンくずリストを生成するコードのPHPファイルを作成します。

if文を使って、トップページと管理者用のページ以外の時に、パンくずリストを表示するように条件分岐を行います。

以降は、そのif文の中にコードを記述していきます。

 

2.1. トップページのパンくずを追加

「// ここにパンくずリストを生成するコードを記述します。」のところに、トップページ用のパンくずを追加します。

パンくずリストの構造を検索エンジンに伝えるための方法はいくつかありますが、ここではmicrodataを使った方法を紹介します。

2.2. 単一記事のパンくずを追加

トップページの次は、単一記事のパンくずリストを作成していきます。

まずはget_the_categories関数を呼び出し、記事のカテゴリー一覧を取得します。

その関数の戻り値は、WP_Termと名付けられたオブジェクトの配列です。WP_Termには16個のメンバーで構成されており、カテゴリーのIDや名前、スラッグなどが格納されいます。今回はその中のcat_IDcat_nameを使用します。

サンプルコードで使用している記事のカテゴリーは、「プログラミング」→「C#」と配列の逆順なので、get_the_category関数の戻り値をarray_reverse関数で反転させ、foreach文で列挙します。カテゴリーのURLはget_category_link関数で取得します。

最後にdiv要素の閉じタグを追加して、パンくずリストを生成するコードの完成です。

< Read together  :  【WordPress】多階層のカテゴリーを持つ投稿ページのパンくずリストを正しく出力する方法  >

 

2.3. CSSの編集

テーマのstyle.cssに以下のコードを追加します。

 

2.4. functions.phpとheader.phpを編集

funcions.phpを編集し、require_once文で今回作成したPHPファイルを読み込むようにします。

次にheader.phpを編集し、パンくずリストを設置したい所で今回作成した関数を呼び出します。

ちなみに本サイトは、ナビゲーションメニュー(nav要素)の下に設置しています。

 

これで記事にパンくずリストを設置することができました。

 

3. 他のページにもパンくずリストを設置

ここでは、固定ページやカテゴリページなどにもパンくずリストを設置する方法を紹介していきます。

 

3.1. 固定ページ

固定ページのIDからget_post_ancestors関数で祖先のページのIDを取得します。その戻り値は祖先のページのIDを格納した配列で表しており、子から祖先の順に並んでいるので、順序を暗転してからforeach文で列挙し、パンくずリストを生成するコードを作成します。

ページのタイトルはget_the_title関数で、URLはget_the_permalink関数で取得できます。

 

3.2. カテゴリーページ

get_queried_object関数の戻り値にあるcat_IDメンバーからカテゴリーのIDを取得し、get_ancestors関数で祖先のカテゴリーを取得します。固定ページの時と同じく、戻り値をarray_reverseで反転させてからforeach文で列挙し、パンくずリストを生成するコードを作成します。

get_cat_name関数でカテゴリー名を取得できます。

 

3.3. タグページ

single_tag_title関数でタグ名を取得し、パンくずリストを生成するコードを作成します。

 

3.4. アーカイブページ

get_query_var関数で投稿年、月、日の文字列を取得し、パンくずリストを生成するコードを作成します。

get_year_linkget_month_link関数で年別アーカイブページ、月別アーカイブページのURLを取得できます。

 

3.5. 著者ページ

get_the_author_meta関数の引数に「display_name」(表示名)と著者のユーザーID(get_query_var関数の引数に「author」を指定して取得します。)を指定して、著者の表示名を取得し、パンくずリストを生成するコードを作成します。

 

3.6. 添付ファイルのページ

 

3.7. 検索結果のページ

 

3.8. 404(Not found)ページ

 

4. パンくずリストにフォントアイコンを表示

Font Awesome」を導入しているのであれば、フォントアイコンをパンくずの文字列の前に追加すると、ちょっとお洒落なパンくずリストになります。

例えばトップページ用のコードにて、「<sapn itemscope …」の前にフォントアイコンのHTMLコードを追加します。

 クラス名
ホーム  fa-home
カテゴリー  fa-folder-open
タグ  fa-tag
年月日別アーカイブ  fa-calendar
検索結果  fa-search

 

5. パンくずリストのトリビア

「パンくずリスト」は、グリム童話「ヘンゼルとグレーテル」の主人公ヘンゼルが森の中で道に迷わないように、パンくずを道に落として目印にしていたというエピソードから来ています。

 

参考サイト

 

この記事をシェアする
Chronoir.netのRSSフィードを購読する

About : シアたん(Xiia)

こんにちはー!時黒(トキクロ)博士によって開発された超高性能アンドロイド「Xiia(シア・クロノワール)」です。Chronoir.net の新マスコットキャラとして頑張っていきますので、よろしくお願いします!☆

コメントを残す

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

*