1. ホーム
  2. WordPress
  3. 【WordPress】プラグインなしでパンくずリストを作成する方法

2023.03.27

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

前職はトヨタ自動車株式会社、現在は複数のweb制作会社のパートナーとしてCMS・ECサイト構築を担当しております。

  • CMS・ECサイト構築歴2年以上
  • 制作実績件数70件以上
  • 15以上のキーワードで検索結果の10位以内を獲得

 

  • wordpressでプラグインなしでパンくずリストを作成する方法を知りたいな

  • 構造化データでマークアップされたコードをコピペで今すぐに使いたいな！

  • オリジナルテーマを作成しているCMS構築者は、パンくずリストをどこのテンプレートファイルで管理しているのか気になるな！

 

と疑問を抱えている方の悩みを解決できる記事になってます。

 

なぜなら、これから紹介する『パンくずリスト』は、実案件で使用しているからです。

 

この記事を読み終えることで、『プラグインなしでパンくずリストを作成する方法』を理解することができます。

 

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

＊１）構造化データ（microdata）のマークアップで作成しております。

 

＊２）今回ご紹介するコードでは、下記ページの条件分岐のif文があります。

  • 固定ページの子ページ：is_page() && $post->post_parent
  • 固定ページ：is_page()
  • 年別アーカイブページ：is_year()
  • 月別アーカイブページ：is_month()
  • タクソノミーのアーカイブページ：is_tax()
  • カスタム投稿のアーカイブページ：is_post_type_archive()
  • 記事ページの場合：is_single()
  • 404エラーページ：is_404()

ですので、上記以外のページ、例えばカテゴリーページやタグページなどでパンくずリスト表示させたい場合は、ご自身で対応させたい条件分岐を追加して下さい。

 

まずは『functions.php』に下記のコードを記述してください。

function breadcrumb() {
  ?>
    <div class="breadcrumb">
      <ol class="breadcrumb__list" itemscope itemtype="https://schema.org/BreadcrumbList">
        <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
          <a itemprop="item" href="<?php echo esc_url(home_url()); ?>">
            <span itemprop="name">HOME</span>
          </a>
          <meta itemprop="position" content="1">
        </li>

        <!-- 固定ページの子ページの場合 -->
        <?php if(is_page() && $post->post_parent): ?>
          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="<?php echo get_page_link($post->post_parent); ?>" href="<?php echo get_page_link($post->post_parent); ?>">
              <span itemprop="name"><?php echo get_the_title($post->post_parent); ?></span>
            </a>
            <meta itemprop="position" content="2">
          </li>

          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <span itemprop="name"><?php echo get_the_title(); ?></span>
            <meta itemprop="position" content="3">
          </li>

        <!-- 固定ページの場合 -->
        <?php elseif(is_page()): ?>
          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <span itemprop="name"><?php echo get_the_title(); ?></span>
            <meta itemprop="position" content="2">
          </li>

        <!-- 年別アーカイブページの場合 -->
        <?php elseif(is_year()): ?>
          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="<?php echo get_post_type_archive_link(get_post_type()); ?>" href="<?php echo get_post_type_archive_link(get_post_type()); ?>">
              <span itemprop="name"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></span>
            </a>
            <meta itemprop="position" content="2">
          </li>

          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <span itemprop="name"><?php echo get_query_var('year'); ?>年</span>
            <meta itemprop="position" content="3">
          </li>

        <!-- 月別アーカイブページの場合 -->
        <?php elseif(is_month()): ?>
          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="<?php echo get_post_type_archive_link(get_post_type()); ?>" href="<?php echo get_post_type_archive_link(get_post_type()); ?>">
              <span itemprop="name"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></span>
            </a>
            <meta itemprop="position" content="2">
          </li>

          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="<?php echo get_year_link(get_query_var("year")); ?>?post_type=<?php echo esc_html(get_post_type_object(get_post_type())->name); ?>" href="<?php echo get_year_link(get_query_var("year")); ?>?post_type=<?php echo esc_html(get_post_type_object(get_post_type())->name); ?>">
              <span itemprop="name"><?php echo get_query_var('year');?>年</span>
            </a>
            <meta itemprop="position" content="3">
          </li>

          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <span itemprop="name"><?php echo get_query_var('monthnum'); ?>月</span>
            <meta itemprop="position" content="4">
          </li>

        <!-- タクソノミーのアーカイブページの場合 -->
        <?php elseif(is_tax()): ?>
          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="<?php echo get_post_type_archive_link(get_post_type()); ?>" href="<?php echo get_post_type_archive_link(get_post_type()); ?>">
              <span itemprop="name"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></span>
            </a>
            <meta itemprop="position" content="2">
          </li>

          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <span itemprop="name"><?php single_term_title(); ?></span>
            <meta itemprop="position" content="3">
          </li>

        <!-- カスタム投稿のアーカイブページの場合 -->
        <?php elseif(is_post_type_archive()): ?>
          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <span itemprop="name"><?php post_type_archive_title(); ?></span>
            <meta itemprop="position" content="2">
          </li>

        <!-- 記事ページの場合 -->
        <?php elseif(is_single()): ?>
          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="<?php echo get_post_type_archive_link(get_post_type()); ?>" href="<?php echo get_post_type_archive_link(get_post_type()); ?>">
              <span itemprop="name"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></span>
            </a>
            <meta itemprop="position" content="2">
          </li>

          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <span itemprop="name"><?php single_post_title(); ?></span>
            <meta itemprop="position" content="3">
          </li>

        <!--  404エラーページの場合 -->
        <?php elseif(is_404()): ?>
          <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
            <span itemprop="name">404</span>
            <meta itemprop="position" content="2">
          </li>

        <?php endif; ?>
      </ol>
    </div>
  <?php
}

 

『functions.php』に『breadcrumb（管理しやすい名前）』という関数を作ります。

 

次に、パンくずリストを表示させたい箇所に、以下のコードを記述します。

<?php breadcrumb(); ?>

 

cssのコードを記述しますね！

.breadcrumb__item {
  display: inline;
}

.breadcrumb__item:nth-last-child(n + 2):after {
  display: inline-block;
  transform: rotate(45deg);
  width: 5px;
  height: 5px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  vertical-align: 3px;
}

.breadcrumb__item a {
  color: #000;
  transition: opacity .6s;
}

.breadcrumb__item a:hover {
  opacity: .6;
}

 

プラグインなしでパンくずリストを作成する方法は以上となります。

 

パンくずリストを下層ページのみに表示させる方法

基本的には、トップページにパンくずリストを表示させることは少ないかと思いますので、条件分岐で下層ページのみに表示させてあげてください。
（＊コーポレートサイトを前提としております。）

 

トップページは非表示、下層ページは表示させるための条件分岐を含めたコードは以下のようになります。

<?php if(!(is_home() || is_front_page())): ?>
  <?php breadcrumb(); ?>
<?php endif; ?>

 

パンくずリストをテンプレートファイルで一元管理する方法

先程、パンくずリストを表示させたい箇所に『<?php breadcrumb(); ?>』を記述すれば良いとご説明しましたが、どこのテンプレートファイルに記述すれば良いのかが分からない方もいるかと思います。

そのような疑問を持たれる方に向けて書いております。

 

オススメは、『header.php』もしくは、『footer.php』のどちらかに書くことをオススメします。
（＊コーポレートサイトを前提にしております。）

 

実際にはこのような感じです。

 

header.phpにパンくずリストを設置する場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <?php wp_head(); ?>
</head>
<body>
  <header class="header"><!-- ヘッダーの内容 --></header>

  <?php if(!(is_home() || is_front_page())): ?>
    <!-- 下層ページで表示させるメイン画像 -->
  <?php endif; ?>

  <?php if(!(is_home() || is_front_page())): ?>
    <?php breadcrumb(); ?>
  <?php endif; ?>

 

footer.phpにパンくずリストを設置する場合

  <?php if(!(is_home() || is_front_page())): ?>
    <?php breadcrumb(); ?>
  <?php endif; ?>

  <footer class="footer">
    <!-- フッターの内容 -->
  </footer>

<?php wp_footer(); ?>
</body>
</html>

 

このような感じで記述します。

 

『header.php』もしくは、『footer.php』にパンくずリストが設置する理由としては、『管理がしやすいこと』です。

 

一般的なコーポレートサイトであれば、下層ページのメイン画像の下辺りか、フッターの上辺りに、パンくずリストが設置されているかと思います。

 

初学者（過去にボクも経験あり）にありがちなこととして、『page.php』や『single.php』のテンプレートファイルにパンくずリストを設置してしまうことです。

 

別にそのような書き方（設置の仕方）でも問題ないのですが、今後、例えばメイン画像の下辺りに設置したパンくずリストをクライアントがフッターの上辺りに移動したいとなった時を考えてますか？

 

5ページ程度の小規模なサイトならまだしも、20・30ページ以上の中規模のサイトであれば、コードを移動するだけで半日時間がかかりますよね！

 

当たり前のことを言っておりますが、他の方が触ったコードを見る機会もあるボク自身、結構これをやっている方がいることも事実です…..

 

長くなりましたが、パンくずリストを設置する際は、将来的な管理のことを踏まえて、『header.php』もしくは、『footer.php』のどちらかに書くことをオススメします。

SNSでもご購読できます。

コメントを残す

関連する記事

前の記事

次の記事