プラグインなしでパンくずリストを簡単に作成する方法【WordPressカスタマイズ】

2021 11/13

こんにちは！Weblattです。

今回は、パンくずリストをプラグインなしで簡単に実装する方法です。

以前プラグイン『Breadcrumb NavXT』を使ってパンくずリストを作成する方法をご紹介しました。

あわせて読みたい

Breadcrumb NavXTプラグインでパンくずリストを作成する方法【WordPressカスタマイズ】こんにちは！Weblattです。 Breadcrumb NavXT プラグインは WordPress を使ったブログにパンくずリストを表示してくれるプラグインです。パンくずリストはカテゴリ―や…

この方法が一番簡単ですが、中には「プラグインなしで実装したい」というマニアックな方もいることでしょう。

今回はプラグインなしでもコピペで簡単にパンくずリストを作成する方法をお伝えします！

まずはfunctions.phpに以下を記述してください。

// パンくずリスト
function breadcrumb(){
  $sep = '<li class="bc-sep">></li>';
  $home = '<li><a href="'.get_bloginfo('url').'">HOME</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;
  echo $sep;
  foreach ($cat_list as $value) {
    echo $value;
    echo $sep;
  }
  the_archive_title('<li>', '</li>');

  // アーカイブページの場合
  } else if ( is_archive() ) {
  echo $home;
  echo $sep;
  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;
  echo $sep;
  foreach($cat_list as $value) {
    echo $value;
    echo $sep;
  }
  the_title('<li>', '</li>');

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

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

まずはbreadcrumbという関数を作ります。

フロントページでは表示せず、カテゴリページ、アーカイブページ、投稿ページ、固定ページ、４０４ページとそれぞれの場合の処理を順番に分岐していくイメージですね。

カテゴリページ、投稿ページはカテゴリの階層を表示するため、カテゴリ名をforeachでループさせています。

ここまでできたら、パンくずリストを表示させたい箇所に以下を記述します。

<?php breadcrumb(); ?>

あとはCSSでスタイルを整えて完成です。どうです？簡単でしょ。

// パンくずリスト
.breadcrumb {
    display: flex;
    align-items: center;
}

.bc-sep {
    margin: 0 1rem;
}

パンくずリストをきちんと整えることで、訪問してくれたユーザーにとってわかりやすいWebサイトになります。また、SEO評価にも大切な要素です。

プラグインなしのパンくずリストの実装にぜひトライしてみてください。それでは！