WordPressでパンくずリストを出す方法

TwitterFacebookHatena
  • 公開：2018-2-19
  • 更新：2023-09-22
  • 文章量：2807
  • WordPress

TL;DR

パンくずリストとは、サイトのどの階層にいるのか表示したもので、主にファーストビュー内に表示します。簡単に階層の移動ができるように現在位置以外はリンクで表示されます。今回は WordPress でパンくずリストを出す方法をご紹介します。 WordPress4.4 以降から非推奨になった wp_title を辞めて、「wp_get_document_title」関数を使ってパンくずリストにページタイトルのリンクを表示します。

functions.php

// WordPress4.4以降のtitleの記述方法
// <title>タグを自動出力
add_theme_support( 'title-tag' );
// <title>タグのセパレーターを変更
add_filter( 'document_title_separator', 'my_document_title_separator' );
function my_document_title_separator( $sep ) {
  $sep = '｜';
  return $sep;
}
// titleのDescription削除
add_filter( 'document_title_parts', 'remove_title_description', 10, 1 );
function remove_title_description ( $title ) {
  if ( is_home() || is_front_page() ) {
    unset( $title['tagline'] );
  }
  return $title;
}
// head 以外はタイトルのみを出力
function nohead_document_title($title){
  if(!doing_action('wp_head')){
    //doing_actionで、wp_headから呼ばれていない場合を判別
    unset( $title['site'] ); //サイトタイトルを削除
  }
  return $title;
}
add_filter('document_title_parts','nohead_document_title');

head 内はサイトタイトルとセパレーターを表示して、head 以外はサイトタイトルを削除します。これでパンくずリストの部分にはページタイトルのみ表示されるようになります。

インクルード

// パンくずリスト出力
<section class="breadcrumb">
  <?php if(is_home()) : ?>
  <?php elseif (is_page()) :?>
    <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; <?php echo wp_get_document_title(); ?>
  <?php elseif (is_category()) :?>
    <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; 「<?php single_cat_title(); ?>」カテゴリー
  <?php elseif (is_month()) :?>
    <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; 「<?php the_time('Y年m月'); ?>」月別アーカイブ
  <?php elseif (is_singular( 'news' )) :?>
    <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; <a href="<?php echo esc_url( home_url( '/news' ) ); ?>">新着ニュース</a> &gt; <?php echo wp_get_document_title(); ?>
  <?php elseif (is_single()) :?>
    <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; <?php $c = get_the_category(); echo '<a href="' . get_category_link( $c[0]->term_id ) . '">' . $c[0]->name . '</a>'; ?> &gt; <?php echo wp_get_document_title(); ?>
    <?php elseif (is_search()) :?>
      <a href="<?php echo esc_url( home_url() ); ?>">HOME</a> &gt; <?php echo wp_get_document_title(); ?>
  <?php else : ?>
  <?php endif; ?>
</section>

あとは、パンくずリストを表示させたいページにインクルードさせれば OK です。

Jamstack での制作を依頼する

WordPressでパンくずリストを出す方法