WordPressでパンくずリストを自作する方法

2023.12.14
WordPress

WordPressでプラグインを使用せずに、シンプルなパンくずリストを表示する方法の備忘録です。

トップページ以外のページに、下記のようなリンク付きのパンくずリストを表示させます。

HOME
カテゴリー名
記事ページ

上記の例では左から、トップページの「HOME」、カテゴリーやタグの名称、現在のページタイトルを表示しています。

カテゴリーやタグが設定されていない場合は、２番目のリンクは表示されません。さらに、検索結果のページでは検索したワードが表示されるような仕様にしています。

パンくずリストの関数を作成する

functions.phpにパンくずリストを生成する関数を作成します。

function custom_breadcrumb() {
  echo '<ol><li><a href="'.esc_url( home_url() ).'" >HOME</a></li>';
  echo '</ol>';
}

パンくずリストを生成するためのcustom_breadcrumb()という関数を新たに作成しました。
この関数を表示させたいページに記入することで、パンくずリストが表示されます。

パンくずリストの部分は、今回のサンプルでは<ol>タグを使用して作成しています。

esc_url( home_url() )の部分で、トップページのURLを設定しています。

ページのタイトルを取得する

続いて、現在表示しているページのタイトルを取得するコードを追加します。

function custom_breadcrumb() {
  echo '<ol><li><a href="'.esc_url( home_url() ).'" >HOME</a></li>';
  if (is_singular()):
    the_title('<li>', '</li>');
  endif;
  echo '</ol>';
}

if文にis_singular()を設定して、固定ページ、個別投稿ページの時に、現在のページタイトルを取得しています。

the_title()で、取得したページタイトルを<li>タグで囲んで出力します。

パンくずリストを表示する

テンプレートファイルに、作成した関数を設定してパンくずリストを表示します。

<?php if(!is_home() && !is_front_page()): ?>
  <div class="breadcrumb"><?php custom_breadcrumb(); ?></div>
<?php endif; ?>

if文で、トップページにパンくずリストが表示されないように設定しています。

CSSを設定する

パンくずリストのCSSを設定してリストのデザインを変更します。

.breadcrumb ol li {
  display: inline;
}
.breadcrumb ol li + li::before {
  content: ">";
  margin: 0 12px;
}

display: inline;を使用して、リストを横並びにしています。

ページ間の「>」は、疑似要素で実装しています。

トップページと、現在のページのタイトルが表示されるシンプルなパンくずリストができました。

HOME
ページタイトル

アーカイブを取得する

続いて、カテゴリーやタグなどを表示するアーカイブを設定します。

アーカイブを設定している場合に、現在のページの前に表示します。

例えば、投稿にカテゴリーを設定している場合、トップページと現在の記事ページの間に表示して、クリックするとそのカテゴリーに属する記事の一覧ページに遷移させます。

コードは、HOMEとページのタイトルの間に追加します。

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

「親カテゴリー」が存在する場合も、順に表示できるように設定しています。

アーカイブページの表示

カテゴリーやタグなどのアーカイブページでタイトルを表示するためのコードをパンくずリストに追加します。

if (is_singular()) {
  the_title('<li>', '</li>');
} elseif (is_archive()) {
  the_archive_title( '<li>', '</li>' );
}

先ほど作成した、ページタイトルを表示する部分に追加しました。is_archive()で、アーカイブページか判別しています。

表示されるテキストを変更する

そのままでは、「カテゴリー: 」や「タグ: 」など、不要なテキストも表示されてしまうのでフィルターフックを設定して削除します。

下記のコードを、上記のif文if (is_singular()) {　}の上に追加します。

add_filter( 'get_the_archive_title', function ($title) {
  if (is_category()) {
    $title = single_cat_title('',false);
  } elseif (is_tag()) {
    $title = single_tag_title('',false);
  } elseif (is_tax()) {
    $title = single_term_title('',false);
  }
  return $title;
});

the_archive_titleの「カテゴリー:」や「タグ:」など不要なテキストを削除しています。

検索結果を表示する

検索結果ページでは、検索にしようした文字列も合せて表示することができます。

下記のコードをif (is_singular()) {　}のif文に追加します。

elseif (is_search()) {
  echo '<li>検索結果 : '.get_search_query().'</li>';
}

get_search_query()で、検索した文字列を取得しています。

例えば、「お知らせ」で検索した結果の画面では、「検索結果 :お知らせ」のテキストが表示されます。

HOME
検索結果 :お知らせ

「検索結果 :」のテキストを変更または削除したい場合は、上記のコードのテキスト部分を修正します。

404ページで任意の文字を表示する

404ページでは、そのままではページタイトルが表示されるので、任意のテキストを表示したい場合は下記のコードを追加します。

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

404エラーページが表示されたとき、設定したテキストが表示されます。

HOME
ページが見つかりません

完成コード

下記が、今までの設定をまとめたコード全体です。

function custom_breadcrumb() {
  echo '<ol><li><a href="'.esc_url( home_url() ).'" >HOME</a></li>';

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

  add_filter( 'get_the_archive_title', function ($title) {
    if (is_category()) {
      $title = single_cat_title('',false);
    } elseif (is_tag()) {
      $title = single_tag_title('',false);
    } elseif (is_tax()) {
      $title = single_term_title('',false);
    }
    return $title;
  });

  if (is_singular()) {
    the_title('<li>', '</li>');
  } elseif (is_archive()) {
    the_archive_title( '<li>', '</li>' );
  } elseif (is_search()) {
    echo '<li>検索結果 : '.get_search_query().'</li>';
  } elseif (is_404()) {
    echo '<li>ページが見つかりません</li>';
  }

  echo '</ol>';
}

シンプルな構造のサイト向けの設定なので、カスタム投稿のページでうまく表示できない場合は、プラグインの使用もご検討ください。