WordPressの記事やアーカイブページにパンくずリストをプラグインなしで追加する

|

パンくずリストを、TOPページ以外の記事やカテゴリページなどの一覧ページに設置することで、ユーザーがサイトのどの位置にいるのかを視覚的にわかりやすくし、内部リンクによるSEO的な効果も期待できます。

今回は、WordPressのテーマにプラグインなしでパンくずリストを設置する方法を各ページごとにご紹介します。

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

各ページごとのパンくずリストは、『TOPページ＞各ページごとの内容＞現在のページ』という構成で作成していきます。ページによって出力する内容が違うので、一つ一つ作成し・設置していきましょう。

記事の投稿ページのパンくずリスト

まずは、ユーザーに一番見られる投稿記事のパンくずリストを作成・設置しましょう。

パンくずリストを投稿記事に追加するためのコードは下記の通りです。

single.phpに追加 
<div id="breadcrumb" class="bread">
  <ol>
    <li>
      <a href="<?php echo home_url(); ?>">
        <i class="fa fa-home"></i><span>TOP</span>
      </a>
    </li>
    <li>
      <?php if( has_category() ): ?>
        <?php $postcat=get_the_category();
          echo get_category_parents( $postcat[0],true, '</li><li>' ); ?>
      <?php endif; ?>
      <a>
        <?php the_title(); ?>
      </a>
    </li>
  </ol>
</div>

上記のコードをパンくずリストを出力したい箇所に挿入することで、パンくずリストを出力することができます。

上記のコードでは、記事に設定されているカテゴリを、階層ごと取得し『TOP>親カテゴリ>子カテゴリ>現在のページ』という形で出力します。カテゴリは下記の箇所で出力しています。

<?php if( has_category() ): ?>
  <?php $postcat=get_the_category();
    echo get_category_parents( $postcat[0],true, '</li><li>' ); ?>
<?php endif; ?>

上記の記述では記事に設定されているカテゴリを、親カテゴリを含めて取得し、すべて出力します。また、パラメーターで各カテゴリを区切る文字列を『</li><li>』とし、リスト形式で出力されるように設定しましょう。

カテゴリではなくタグを出力する

パンくずリストにカテゴリではなく、タグを出力したい場合は、下記のように書き換えることで変更することができます。

<li>
<?php if( has_category() ): ?>
  <?php $postcat=get_the_category();
   echo get_category_parents( $postcat[0], true, '</li><li>' ); ?>
<?php endif; ?>


ソースコードの上記の部分を下記のソースに変更


<?php the_tags('<li>','</li><li>','</li>'); ?><li>

固定ページのパンくずリスト

固定ページに出力するパンくずリストでは、親ページがある場合には親ページを出力し、ない場合はそのまま現在のページを出力します。

親ページがある場合
TOP > 親ページ > 現在のページ

親ページがない場合
TOP > 現在のページ

page.phpに追加 
<div id="breadcrumb" class="bread">
  <ol>
    <li>
      <a href="<?php echo home_url(); ?>">
        <i class="fa fa-home"></i><span>TOP</span>
      </a>
    </li>
    <?php
    $page_obj = get_queried_object();
    if($page_obj->post_parent != 0){
      $page_ancestors = array_reverse( $post->ancestors );
      foreach ($page_ancestors as $page_ancestor) {
        echo '<li><a href="',esc_url(get_permalink($page_ancestor)),'">',esc_html(get_the_title($page_ancestor)),'</a></li>'.PHP_EOL;
      }
    }
    ?>
    <li>
      <a>
        <?php the_title(); ?>
      </a>
    </li>
  </ol>
</div>

アーカイブページ(index・category・tagなどの一覧ページ)のパンくずリスト

アーカイブページとは、index.phpやarchive.php・category.phpなどによって出力される、記事一覧を出力するためのテンプレートです。アーカイブページを出力するテンプレートは、お使いのテーマによって様々です。ご自身のWordPressで利用しているテーマをしっかりチェックしてから追加してください。

まずは、お使いのテーマをチェックし、下記のテンプレートがあるかをチェックしてみてください。

  • index.php
  • archive.php
  • category.php
  • tag.php
  • date.php
  • author.php

上記のテンプレートの中で、『index.php』しかない場合は、『index.php』で一覧ページすべてが出力されます。

『index.php』と『archive.php』の2つのテンプレートがある場合は、『archive.php』で一覧ページすべてが出力されます。

もし、『index.php』と『archive.php』以外のテンプレートがある場合は、それぞれ設定されているテンプレートで一覧ページが出力されます。
※それぞれのテンプレートはあっても『archive.php』がない場合もあります。

アーカイブページは、テンプレートがあるかないかによって出力先が変わるのです。

各テンプレートの優先順位は下記の通りです。

優先度高　>　優先度低
カテゴリアーカイブ category.php archive.php index.php
タグアーカイブ tag.php archive.php index.php
日付別アーカイブ date.php archive.php index.php
著者アーカイブ author.php archive.php index.php

テンプレートがテーマ内にあるかないかを判別し、優先順位の高い順に適応されます。基本的には、archive.phpもしくは、index.pheにまとめられているテーマが多いので、そちらから順に解説していきます。

index.phpもしくは、arcive.phpに記述する場合

index.phpもしくはarchive.phpに記述する場合は、出力しているのがアーカイブの種類を条件分岐で判別して出力します。

archive.php(ない場合はindex.php)に追加 
<div id="breadcrumb" class="bread">
  <ol>
    <li>
      <a href="<?php echo home_url(); ?>">
        <i class="fa fa-home"></i><span>TOP</span>
      </a>
    </li>
    <li>
      <?php
        if(is_category() || is_tag() ) {
          if( $cat ) {
            $catdata = get_category( $cat );
            if( $catdata->parent ) {
              echo get_category_parents( $catdata->parent, true, '</li><li>' );
            }
          }
          echo '<a>',single_term_title(),'</a>';
        } elseif(is_year()) {
          echo '<a>',get_query_var('year'),'年</a>';
        } elseif(is_month()) {
          $year = get_query_var('year');
          echo '<a href="',get_year_link( $year ),'">',$year,'年</a></li>';
          echo '<li><a>',get_query_var('monthnum'),'月</a>';
        } elseif(is_day()) {
          $year = get_query_var('year');
          $month = get_query_var('monthnum');
          echo '<a href="',get_year_link( $year ),'">',$year,'年</a></li>';
          echo '<li><a href="',get_month_link( $year,$month ),'">',$month,'月</a></li>';
          echo '<li><a>',get_query_var('day'),'日</a>';
        } elseif(is_author()) {
          echo '<a>';
          $author_id = get_query_var('author');
          $author_name = get_the_author_meta( 'display_name', $author_id );
          echo $author_name,'が投稿した記事一覧</a>';
        }
        ?>
    </li>
  </ol>
</div>

上記のソースコードを追加することで、アーカイブページを出力するときに、自動的にページを判別してパンくずリストを出力するようになります。

各ページの判別は、以下のコードで行っています。

条件分岐 適応されるアーカイブ
is_category() || is_tag() カテゴリまたはタグアーカイブ
is_year() 年別記事アーカイブ
is_month() 月別記事アーカイブ
is_day() 日別記事アーカイブ
is_author() 著者アーカイブ

※除外したい項目がある場合は、追加したソースコードの『elseif(is_〇〇()) {』から『}』までを削除することで除外できます。

WordPressテーマ内にアーカイブ用のテンプレートが『index.php』しか無く、『home.php』や『front-page.php』もない場合は、index.phpの上記のソースコードの最初と最後に、条件分岐を追加することで、TOPページ以外の一覧ページにパンくずリストを出力することができます。

<?php if(!is_home()): ?>
    パンくずリストを追加するためのソースコード
  <?php endif; ?>

category.phpやtag.phpなどの専用テンプレートに記述する場合

wordpressのテンプレート内に、『category.php』『tag.php』『date.php』『author.php』がある場合は、それぞれのテンプレートに下記の記述を追加します。

category.phpとtag.phpに追加 
<div id="breadcrumb" class="bread">
  <ol>
    <li>
      <a href="<?php echo home_url(); ?>">
        <i class="fa fa-home"></i><span>TOP</span>
      </a>
    </li>
    <li>
      <?php
        if( $cat ) {
          $catdata = get_category( $cat );
          if( $catdata->parent ) {
            echo get_category_parents( $catdata->parent, true, '</li><li>' );
          }
        } ?>
      <a><?php single_term_title(); ?></a>
    </li>
  </ol>
</div>
date.phpに追加 
<div id="breadcrumb" class="bread">
  <ol>
    <li>
      <a href="<?php echo home_url(); ?>">
        <i class="fa fa-home"></i><span>TOP</span>
      </a>
    </li>
    <li>
      <?php
        if(is_year()) {
          echo '<a>',get_query_var('year'),'年</a>';
        } elseif(is_month()) {
          $year = get_query_var('year');
          echo '<a href="',get_year_link( $year ),'">',$year,'年</a></li>';
          echo '<li><a>',get_query_var('monthnum'),'月</a>';
        } elseif(is_day()) {
          $year = get_query_var('year');
          $month = get_query_var('monthnum');
          echo '<a href="',get_year_link( $year ),'">',$year,'年</a></li>';
          echo '<li><a href="',get_month_link( $year,$month ),'">',$month,'月</a></li>';
          echo '<li><a>',get_query_var('day'),'日</a>';
        }
        ?>
    </li>
  </ol>
</div>
author.phpに追加 
<div id="breadcrumb" class="bread">
  <ol>
    <li>
      <a href="<?php echo home_url(); ?>">
        <i class="fa fa-home"></i><span>TOP</span>
      </a>
    <li>
      <a>
        <?php
        $author_id = get_query_var('author');
        $author_name = get_the_author_meta( 'display_name', $author_id );
        ?>
        <?php echo $author_name; ?>が投稿した記事一覧
      </a>
    </li>
  </ol>
</div>

それぞれのテンプレートに各項目を追加することで、各アーカイブページでパンくずリストが出力されるようになります。

上記のソースコードを設置した場合は、該当のパンくずリストを『index.php』や『arcive.php』に記述する必要はありませんが、上記の説明でよくわからないという場合は、設置しておいても問題ありません。

CSSでパンくずリストのデザインを整える

パンくずリストが、出力されているのを確認したら、CSSでデザインを整えていきましょう。下記にデモCSSを載せておきますので、自分好みにカスタムして使用してください。

style.cssに記述

※@mediaを使用してCSSをレスポンシブデザインにCSSを調整する場合は、headタグでviewportの設定を行なってください

/*パンくずリスト*/

.bread ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bread li {
  display: inline-block;
}

.bread li a {
  font-size: .7em;
  padding: 5px;
  text-decoration: none;
  color: #888;
}

.bread li a[href]:hover {
  background-color: #eee;
}

.bread li:after {
  content: '\003e';
  color: #888;
}

.bread li:last-child:after {
  content: none;
}

.bread i {
  font-size: 1em;
}

.bread span {
  display: inline-block;
  text-indent: -9999px;
}


/*スマートフォン表示のときは一番最後の記事タイトルが表示されないように設定*/

@media (max-width: 599px) {
  .bread li:last-child {
    display: none;
  }
}

でものCSSをそのまま記述すると、上記の画像のように表示されます。上記のCSSをに加えてテンプレートに合わせて、全体の配置などを調整してください。

以上で、パンくずリスト作成は完了です。各ページごとに適切にパンくずリストを設置し、ユーザービリティを向上させましょう。