BLOGブログ

WordPressカスタマイズ

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

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

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

パンくずリストの要素を各テンプレートを追加する

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

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

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

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

single.phpのパンくずリストを出力したい箇所に追加

<div id="breadcrumb" class="bread">
  <ol>
    <li>
      <a href="<?php echo home_url(); ?>">
        <span>TOP</span>
      </a>
    </li>
    <li>
      <?php
      if(has_category()) {
        $postcat = get_the_category();
        echo get_category_parents($postcat[0], true, '</li><li>');
      }
      ?>
      <a>
        <?php the_title(); ?>
      </a>
    </li>
  </ol>
</div>

上記のコードをsingle.phpのパンくずリストを出力したい箇所に挿入してください。

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

カテゴリは下記の箇所で出力しています。

<?php
if(has_category()) {

  $postcat = get_the_category();

  echo get_category_parents($postcat[0], true, '</li><li>');

}
?>

上記の記述では、Wordpress関数『get_the_category()』で現在記事に設定されているカテゴリ情報を取得し、関数『get_category_parents()』で親カテゴリを含めてすべてをリスト形式で取得します。

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

パンくずリストにカテゴリではなくタグを出力したい場合は、下記のように関数『the_tags()』を使用します。

<div id="breadcrumb" class="bread">
  <ol>
    <li>
      <a href="<?php echo home_url(); ?>">
        <span>TOP</span>
      </a>
    </li>
    <?php
    if(has_tag()) {
      the_tags('<li>','</li><li>','</li>'); 
    }
    ?>
    <li>
      <a>
        <?php the_title(); ?>
      </a>
    </li>
  </ol>
</div>

カテゴリを出力する場合と、『li』タグを記述する箇所が違うため注意してください。

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

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

page.phpに追加

<div id="breadcrumb" class="bread">
  <ol>
    <li>
      <a href="<?php echo home_url(); ?>">
        <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>

上記のコードをpage.phpのパンくずリストを出力したい箇所に挿入してください。

上記のコードでは、

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

という形で出力します。

WordPress関数『get_queried_object()』を使用してページの親ページを取得し、親ページがある場合のみ出力します。親要素は下の階層から順に取得されるため、php関数『array_reverse($配列)』で配列の順番をひっくり返して上の階層から出力されるようにしてください。

アーカイブページ(カテゴリ・タグ・日付などの一覧ページ)のパンくずリスト

アーカイブページとは、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(); ?>">
        <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()) {
          
          $author_id = get_query_var('author');
          $author_name = get_the_author_meta('display_name', $author_id);

          echo '<a>'.$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(); ?>">
        <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>');
        }

      }

      echo '<a>'.single_term_title().'</a>';
      ?>
    </li>
  </ol>
</div>

date.phpに追加

<div id="breadcrumb" class="bread">
  <ol>
    <li>
      <a href="<?php echo home_url(); ?>">
        <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(); ?>">
        <span>TOP</span>
      </a>
    </li>
    <li>
      <?php
      $author_id = get_query_var('author');
      $author_name = get_the_author_meta('display_name', $author_id);

      echo '<a>'.$author_name.'が投稿した記事一覧</a>';
      ?>
    </li>
  </ol>
</div>

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

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

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

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

style.cssに記述

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

.bread li {
  display: inline-block;
}

.bread li a {
  font-size: .75em;
  padding: .375em;
  text-decoration: none;
  color: #888;
}

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

.bread li:after {
  content: "\003e";
  vertical-align: middle;
  color: #888;
}

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

デモのCSSをそのまま記述すると、上記の画像のように表示されます。各テーマごとにサイズ感や配色等違うかと思いますので、上記をベースに調整していただければと思います。

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

SERVICE

CONTACTお問い合わせ

様々な制作経験から得たノウハウを活かし、ご予算・ご要望に合わせたお客様のビジネスのお手伝いができるかと思います。
福岡を中心に事業を行っておりますが、ZOOMやChatwork、LINE等のツールを利用して遠距離のお客様との打ち合わせも行っております。
WEB関連でお困りの際はお気軽にご相談ください。