1. TOP
  2. wordpressテーマカスタマイズ
  3. WordPressの記事や一覧ページにパンくずリストをプラグインなしで追加

WordPressの記事や一覧ページにパンくずリストをプラグインなしで追加

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

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

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

今回は、できるだけシンプルにパンくずリストをリストタグを使って出力していきます。パンくずリストは『TOPページ>カテゴリ>現在のページ』という形で表示されるのをイメージして作成していきましょう。

パンくずリストを出力するために追加したコードは、下記の通りです。

<!--パンくずリスト-->
<div 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], ture, '</li><li>' ); ?>
    <?php endif; ?>
    <a>
      <?php the_title(); ?>
    </a>
  </li>
</ol>
</div>

上記のコードを追加することで、パンくずリストを追加することができます。

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

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

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

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

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

ソースコードをWordPrssテンプレートに追加する

ソースコードを作成したら、パンくずリストを挿入したいWordPressテンプレートに追加しましょう。

WordPressテーマのどのテンプレートに追加すれば良いのかわからない場合は、下記のリストを参考にしてください。

  • 投稿記事 → single.php
  • 固定ページ → page.php
  • 記事一覧ページ → index.php
    ※home.phpやfront-page.phpがWordPressテーマ内にない場合は、TOPページにも追加される場合があるので注意!
  • カテゴリ一覧ページ → category.php
  • タグ一覧ページ → tag.php
  • アーカイブページ → arcive.php

上記のWordPressテンプレート内に、ソースコードを追加することで、パンくずリストを出力することができます。

設置する場所は、『<?php get_header(); ?>』の直下やコンテンツエリアの開始タグの直下あたりが多いかと思いますが、テンプレートに実際に追加して位置を調整してください。

WordPressテーマ内に一覧ページが『index.php』しか無く、『home.php』や『front-page.php』もない場合は、下記のソースコードをindex.phpに追加することで、TOPページ以外の一覧ページにパンくずリストを出力することができます。

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

ソースコードを追加すると、上記の画像ようにリスト形式で『TOP→カテゴリ→現在の記事』の順番で出力されます。

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: '
/*パンくずリスト*/
.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;
}
}
3e'; 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をに加えてテンプレートに合わせて、全体の配置などを調整してください。

以上で、パンくずリスト作成は完了です。