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

• 作成：2018/02/19
• 更新：2019/03/12
• WordPress >

パンくずリストとは、サイトのどの階層にいるのか表示したもので、主にファーストビュー内に表示します。簡単に階層の移動ができるように現在位置以外はリンクで表示されます。今回はWordPressでパンくずリストを出す方法をご紹介します。

エンジニア速報は Twitter の@commteで配信しています。

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です。

WordPressカスタマイズに便利なテクニック一覧

• [開発環境] WordPressをコマンドでインストールする
• [開発環境] Vagrant+Virturlbox+VCCWの使い方
• [雛形] WordPressのif文（条件分岐）
• [雛形] 便利なテンプレートタグ
• [構築] functions.phpに書いておくべきこと
• [構築] パンくずリストを出す方法
• [構築] コメントを設置する簡単な方法
• [管理画面] プラグインの自動更新通知メールを停止させる
• [管理画面] 管理画面のユーザーページに項目を追加する
• [管理画面] カスタムポストを追加する
• [翻訳] 多言語サイトを作るプラグイン「bogo」の使い方
• [フォーム] 「MW WP Form」の使い方と住所自動入力
• [関連記事] プラグインを使わずにWordPressで関連記事を出す方法
• [SEO] タイトルのカスタマイズ
• [pre_get_posts] カテゴリページや検索結果の表示を調整