【WordPress】プラグインなしでパンくずリストを自作する方法

パンくずリストは内部SEOに有効とされています。

また、ユーザーにとってもパンくずリストは有効です。記事コンテンツなどを発信しているサイトでは、基本的にユーザーは下層ページのコンテンツからサイトに流入します。その際に、今自分がサイトのどこにいるのかを把握しやすくなりますし、カテゴリーからその他のコンテンツに誘導できるので回遊性を上げることもできます。

WordPressでは多くのテーマでパンくずリストが用意されていますが、今回は私が自作したソースとその仕組みを解説します。

ソースコード

まず結論から知りたい方のために全体のソースコードから紹介します。仕組みとしてはfunctions.phpに出力用のメソッドを定義しておいて、テンプレートで呼び出すイメージです。

function output_breadcrumb(){
  $home = '<li><a href="'.get_bloginfo('url').'">トップ</a></li>';
  echo '<ul class="breadcrumb">';

  // トップページの場合
  if ( is_front_page() ) {

  // カテゴリーページの場合
  } else if ( is_category() ) {
  $cat = get_queried_object();
  $cat_id = $cat->parent;
  $cat_list = array();
  while($cat_id != 0) {
    $cat = get_category( $cat_id );
    $cat_link = get_category_link( $cat_id );
    array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
    $cat_id = $cat->parent;
  }
  echo $home;
  foreach ($cat_list as $value) {
    echo $value;
  }
  the_archive_title('<li>', '</li>');

  // アーカイブページの場合
  } else if ( is_archive() ) {
  echo $home;
  the_archive_title('<li>', '</li>');

  // 投稿ページの場合
  } else if ( is_single() ) {
  $cat = get_the_category();
  if( isset( $cat[0]->cat_ID ) ) $cat_id = $cat[0]->cat_ID;
  $cat_list = array();
  while( $cat_id != 0 ) {
    $cat = get_category( $cat_id );
    $cat_link = get_category_link( $cat_id );
    array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
    $cat_id = $cat->parent;
  }
  echo $home;
  foreach($cat_list as $value) {
    echo $value;
  }
  the_title('<li>', '</li>');

  // 固定ページの場合
  } else if ( is_page() ) {
  echo $home;
  the_title('<li>', '</li>');

  // 検索結果の場合
  } else if ( is_search() ) {
  echo $home;
  echo '<li>「'.get_search_query().'」の検索結果</li>';

  // 404ページの場合
  } else if ( is_404() ) {
  echo $home;
  echo '<li>ページが見つかりません</li>';
  }
  echo '</ul>';
}

長く見えますが、基本的には現在のページのステータスを判定して、ページ種別に応じて出力する内容を変更しているだけなので難しい処理はありません。

テンプレート内でパンくずを出力する際には下記の記述で画像のように出力されます。(CSSは各自調整してください)

<?php output_breadcrumb(); ?>

解説

ここからは、そのような仕組みでパンくずリストを出力しているかを解説します。処理順を整理すれば後はWordPressの関数を使用して出力するだけです。

処理順

1.リスト用のulタグを出力
2.トップページのリンクを変数に格納
3.現在のページがどのページに属するか(固定ページ or 投稿ページ or カテゴリー)条件分岐で判定
4.判定したページ別に出力処理を記述
5.リストの閉じタグを出力

1.リスト用のulタグを出力

echo '<ul class="breadcrumb">';

2.トップページのリンクを変数に格納

$home = '<li><a href="'.get_bloginfo('url').'">トップ</a></li>';

TOPページのパスはget_bloginfo(‘url’)で取得することができます。TOPページ以外のページでは出力するように設定します。

3.現在のページがどのページに属するか(固定ページ or 投稿ページ or カテゴリー)条件分岐で判定

if ( is_front_page() ) {
} else if ( is_category() ) {
} else if ( is_archive() ) {
} else if ( is_single() ) {
} else if ( is_page() ) {
} else if ( is_search() ) {
} else if ( is_404() ) {
}

4.判定したページ別に出力処理を記述

トップページの場合

if ( is_front_page() ) {

}

フロントページの場合は、パンくずリストの出力は必要ないので空にします。

カテゴリーページの場合

else if ( is_category() ) {
  $cat = get_queried_object();
  $cat_id = $cat->parent;
  $cat_list = array();
  while($cat_id != 0) {
    $cat = get_category( $cat_id );
    $cat_link = get_category_link( $cat_id );
    array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
    $cat_id = $cat->parent;
  }
  echo $home;
  foreach ($cat_list as $value) {
    echo $value;
  }
  the_archive_title('<li>', '</li>');
}

get_queried_object()は表示中のページ情報を取得することができます。取得情報を変数に格納した後は$cat->parentで親階層にアクセスすることができます。

親カテゴリーが存在する場合は、array_unshift関数を使用して先頭から要素を追加し、表示順が親カテゴリー > 現在のページとなるようにします。

アーカイブページの場合

else if ( is_archive() ) {
  echo $home;
  the_archive_title('<li>', '</li>');
}

アーカイブページも特に階層分けの処理は必要なさそうです。

投稿ページの場合

else if ( is_single() ) {
  $cat = get_the_category();
  if( isset( $cat[0]->cat_ID ) ) $cat_id = $cat[0]->cat_ID;
  $cat_list = array();
  while( $cat_id != 0 ) {
    $cat = get_category( $cat_id );
    $cat_link = get_category_link( $cat_id );
    array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
    $cat_id = $cat->parent;
  }
  echo $home;
  foreach($cat_list as $value) {
    echo $value;
  }
  the_title('<li>', '</li>');
}

カテゴリーページと同様の処理になります。

固定ページの場合

else if ( is_page() ) {
 echo $home;
 the_title('<li>', '</li>');
}

固定ページの場合は基本的にTOPページ直下に配置するので、ページ名の出力のみでOKそうです。

検索結果の場合

else if ( is_search() ) {
 echo $home;
 echo '<li>「'.get_search_query().'」の検索結果</li>';
}

get_search_query()で検索窓に入力した値が取得できるので、表示させています。

404ページの場合

else if ( is_404() ) {
 echo $home;
 echo '<li>ページが見つかりません</li>';
}

特にリンクは必要ないので、ページが見つかりませんを出力します。

5.リストの閉じタグを出力

echo '</ul>';

階層情報を取得 公式

関連記事

コメント

この記事へのコメントはありません。