[試] パンくずリスト表示カテゴリの悩み解決!カテゴリ選択式パンくずリストの設置方法

[試] パンくずリスト表示カテゴリの悩み解決!カテゴリ選択式パンくずリストの設置方法
photo credit: bredgur via photopin cc

記事を複数のカテゴリに所属させた時に、パンくずリストに最も表示させたいカテゴリが表示されず、やきもきした経験はないでしょうか。

このエントリでは、WordPressにおいて所属カテゴリの中から著者が最も適切と考える(意図した)カテゴリをパンくずリストに反映する方法を紹介します。

SPONSORED LINK

アウトライン

パンくずリストとは

method-add-breadcrumbs-having-ability-to-select-category-to-display-02

パンくずリストとは、一種のサイト内のナビゲーションの事です。サイト内のページの階層構造(ページの位置)をハイパーリンクのツリー構造で表します。

サイト内の現在位置を把握することができユーザにとって非常にわかりやすいですし、ハイパーリンクから移動ができるのでサイト内移動の利便性を向上させることができます。

またアンカーテキストによる内部リンク増強により、SEO対策にも少なからず効果があると言われています。リッチスニペットに対応したパンくずリストを設置すれば、以下の様にGoogleの検索結果にも階層構造を表示し、ユーザをガイドすることもできます。

method-add-breadcrumbs-having-ability-to-select-category-to-display-03

一般的なパンくずリストの実装の課題

記事を複数のカテゴリに所属させた場合、パンくずリストに著者が意図したカテゴリが表示されないケースが発生します。

これは、一般的に紹介されているパンくずリスト出力コードが、複数の所属カテゴリの中から最初のカテゴリを表示するようコーディングされているためです。

この仕様は、実装する側にとってはシンプルであり、著者が所属カテゴリを選んでいる以上、全くの的外れではないのですが、以下の点で100点満点とは言えません。

Google検索結果に筆者が最も適切と考える階層構造(カテゴリ)を表示できていない
リッチスニペットに対応している場合は、Googleの検索結果においてユーザのナビゲーションリンクの一つとして表示されます。筆者が最も適切と考えるカテゴリへのリンクが表示されていないのは、ユーザをガイドする意味でよいとは言えません。
内部リンクを構成するキーワードとして最適ではない
パンくずリストは、SEO上重要な内部リンクを構成するキーワードの一つになります。よって、筆者が最も重要と考えるカテゴリがアンカーテキストとして出力されないのは、SEO内部施策の観点で理想とは言えません。

筆者による表示対象カテゴリの選択(筆者の意図の反映)

記事の所属カテゴリを必ず一つに制限するポリシーで運用するば上記課題を解決可能ですが、本エントリでは表示対象カテゴリを選択する方式を改善策として提案したいと思います。

理由は、現実問題として記事を複数のカテゴリに所属させたい場合が多々あり、選択式にする方がサイト運営を行う上で柔軟だからです。

イメージとしては以下の通りとなります。

“投稿の編集”画面で、複数ある所属カテゴリの中から筆者がパンくずリストとして表示させたいカテゴリを選択するためのフィールドを設置します。

筆者は、表示させたいカテゴリをチェックします。

method-add-breadcrumbs-having-ability-to-select-category-to-display-04

上記フィールドでチェックされたカテゴリがパンくずリストに表示されます。

method-add-breadcrumbs-having-ability-to-select-category-to-display-05

表示対象カテゴリ選択式パンくずリストの設置方法

実装するための方法を解説します。尚、ここで紹介するコードは、表示カテゴリを選択できるよう以下エントリのコードを改修したものになります。

[試] リッチスニペット対応パンくずリストを簡単に設置する方法 | パンくずリストでユーザ利便性向上とSEO対策を

表示カテゴリ選択式のパンくずリストを設置するためには、大きく分けて3つの対応を行う必要があります。

  1. 表示カテゴリ選択用フィールドを設置するコードの追加
  2. パンくずリストを生成するコード(関数)の追加
  3. パンくずリストを出力するコードの追加

尚、1と2は使用中のWordPressテーマのfunctions.phpを編集する必要があります。編集内容に不備があると、画面が真っ白になり管理画面からの操作ができなくなります。編集する前に必ずバックアップを取得し、いつでも復旧できるように準備をして下さい。

表示カテゴリ選択用フィールドを設置するコード

以下は、パンくずリストに表示させるカテゴリを選択するためのカスタムフィールドを追加するコードです。

このコードにより、”投稿の編集”画面で表示対象カテゴリを選択できるようになります。使用しているWordPressテーマのfunctions.phpに追記します。

このコードは、選択されたカテゴリを「_organizer_breadcrumbs_category」というIDでカスタムフィールドとしてデータベースに保存します。

当サイトのテーマ用にorganizerという接頭辞がついていますが、必要があれば適宜修正して下さい。修正する場合は、後述するパンくずリストを生成する関数内の同IDも修正するようにして下さい。保存時と参照時のIDが合っていないと正しく表示されません。

パンくずリストを生成するコード(関数)

以下は、パンくずリストを生成するためのコード(関数)です。

この関数がパンくずリストを作成するメインの処理になります。”投稿の編集”画面(上記カスタムフィールド)で選択したカテゴリを元にパンくずリストを生成します。

上記コードと同様、functions.phpに追記します。

このコードでは、上述したカスタムフィールド値を取得することで、ユーザが選択したカテゴリを取得し、パンくずリストに組み込むようにしています。選択されていない場合は、最初のカテゴリをパンくずリストに使用します。

パンくずリストを出力するコード

以下は、上記関数を呼び出してパンくずリストを実際に出力するコードです。

テーマのパンくずリストを表示したい位置に以下のコードを追記します。ページの種類に応じたパンくずリストが出力されます。

まとめ

筆者が本当に表示させたいカテゴリを用いたパンくずリストを表示する方法を紹介しました。

Webサイトの改善は小さなことの積み重ねです。気になった方は試してみて下さい。

重要なので何度も書きますが、functions.phpの編集が必要なので事前に必ずバックアップ、復旧の準備を行ってから作業を行うようにして下さい。