【WordPress】簡易的なぱんくずリスト実装

どうも、くまだです。

WordPressでぱんくずリストを実装するとき、プラグインを使うことが多いですが、プラグインを使わない場合での実装方法。(あくまでも簡易的なもの)

プラグインなしでぱんくずリスト実装

コードとしては下記のようになります。

<?php
  $title = get_the_title();
  // //アーカイブページの場合
  if(is_post_type_archive('news')) {
    $title = 'ニュース';
  }

  //投稿ページの場合
  if(is_single()) {
    $archive_title = 'NEWS';
    $archive_link = home_url('news/');
  }
?>
<?php if(is_page() || is_archive(): ?>
<div class="p-breadcrumb">
  <div class="l-inner">
    <ul itemscope itemtype="https://schema.org/BreadcrumbList">
      <li 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>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/Listitem">
        <span itemprop="name"><?php echo $title; ?></span>
        <meta itemprop="position" content="2" />
      </li>
    </ul>
  </div>
</div>
<?php elseif(is_single()): ?>
<div class="p-breadcrumb">
  <div class="l-inner">
    <ul itemscope itemtype="https://schema.org/BreadcrumbList">
      <li 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>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/Listitem">
        <a itemprop="item" href="<?php echo $archive_link; ?>"><span
            itemprop="name"><?php echo $archive_title; ?></span></a>
        <meta itemprop="position" content="2" />
      </li>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/Listitem">
        <span itemprop="name"><?php echo $title; ?></span>
        <meta itemprop="position" content="3" />
      </li>
    </ul>
  </div>
</div>

<?php endif; ?>

get_the_title();はタイトルを取得します。the_title();との違いは、the_title();はループの中で使って、get_the_title();はループの外で使う感じです。

下記if文で出力を出しわけ。

<?php if(is_page() || is_archive()): ?>
<!-- 固定ページかアーカイブページだったらこちらを出力 ->
<?php elseif(is_single()): ?>
 <!-- シングルページだったら(記事詳細ページ)こちらを出力 ->

<?php endif; ?>

ぱんくずリストの部分は、構造化マークアップ対応(クライアント様に言われることが多いので)(itemscopeやらitemtypeなど)。

    <ul itemscope itemtype="https://schema.org/BreadcrumbList">
      <li 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>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/Listitem">
        <span itemprop="name"><?php echo $title; ?></span>
        <meta itemprop="position" content="2" />
      </li>
    </ul>

固定ページやアーカイブページだったら下記のような出力で、

  • TOP > 固定ページのslug名(例:about、serviceなど)
  • TOP > ニュース(アーカイブページ)

詳細ページになると、以下のような出力になります。(矢印などはCSSで対応)

  • TOP > ニュース >記事詳細タイトル

基本的に3階層までしか対応していないので、それ以降の階層にもいれるとなるとカスタマイズが必要。(だから簡易的)

固定ページやアーカイブページ以外にも出力させたい、というのであれば例えば、

<!-- 固定ページかアーカイブページかタクソノミーページだったら -->
<?php if(is_page() || is_archive() || is_tax()): ?>

のように記述を追加すればいいかと。

なお、プラグイン使ったほうが楽なような気がします笑

ここまで読んでくださりありがとうございました。

この記事を書いた人