大阪から日本全国のご依頼に対応。WEBサイト制作ならアトリエ涼。

お知らせ/ブログ

※当サイトは、アフェリエイト広告を利用しています。

2023.12.13

制作メモ

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

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

SEO対策でも有効と言われているパンくずリスト。
検索エンジンがサイトの中身をクローリングしやすくなるからだそうです。
そのパンくずリストをプラグインなしで実装した際の制作メモです。

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

固定ページに配置

<!-- パンくずリスト設定 -->
<ol id="breadcrumb">
    <li><a href="<?php echo home_url(); ?>">TOP</a></li>
    <li><?php the_title(); ?></li>
</ol>

CSS

/*パンくずリスト設定*/
ol#breadcrumb {
  max-width: 1100px;
  font-size: 10px;
  margin: 2% auto 1%;
  overflow-x: scroll;
  overflow-y: hidden;
 list-style: none;
}
@media (max-width: 1025px) {
  ol#breadcrumb {
    max-width: 100%;
    width: 90%;
    -webkit-overflow-scrolling: touch;
  }
}
ol#breadcrumb li {
  display: inline;
}
ol#breadcrumb li a {
  color: #666;
  text-decoration: none;
}
ol#breadcrumb li a:hover {
  opacity: 0.6;
}
ol#breadcrumb li + li:before {
  content: ">";
  margin-right: 0.6em;
  margin-left: 0.3em;
}

固定ページのPHPに上記の記述を配置します。
名称はタイトルが入るようにしていますが、任意のものがいいなどありましら変更してください。

CSSでテキストの間に「>」が入るようにしています。
文字が1行で収まりきらない場合、スクロールで表記される設定にしています。
お好みで使用していただければと思います。
以下内容も同じCSSを使用しています。

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

投稿一覧ページに配置

<!-- パンくずリスト設定 -->
<ol id="breadcrumb">
    <li><a href="<?php echo home_url(); ?>">TOP</a></li>
    <?php if (is_month()) : // 月別アーカイブの場合
    ?>
    <li><a href="<?php echo home_url(); ?>/news">お知らせ/ブログ</a></li>
      <li><?php echo the_time("Y年m月"); ?></li>
      <?php elseif (is_category()) : // カテゴリーの場合
    ?>
    <li><a href="<?php echo home_url(); ?>/news">お知らせ/ブログ</a></li>
      <li><?php single_cat_title(); ?></li>
      <?php elseif (is_tag()) : // タグの場合
    ?>
    <li><a href="<?php echo home_url(); ?>/news">お知らせ/ブログ</a></li>
      <li><?php single_tag_title(); ?></li>
    <?php else : ?>
      <li>お知らせ/ブログ</li>
    <?php endif; ?>
  </ol>

リンク先やリンク名は任意の名称に変更してください。
月別アーカイブやカテゴリー、タグ一覧の場合などに対応するためif文で記述しています。

投稿記事ページに配置

<!-- パンくずリスト設定 -->
<ol id="breadcrumb">
    <li><a href="<?php echo home_url(); ?>">TOP</a></li>
    <li><a href="<?php echo home_url(); ?>/news">お知らせ/ブログ</a></li>
<?php
$category = get_the_category(); 
    if($category[0]) : ?>
    <li><a href="<?php echo get_category_link($category[0]->term_id); ?>"><?php echo $category[0]->cat_name; ?></a></li>
 <?php endif; ?>
    <li><?php the_title(); ?></li>
  </ol>

投稿一覧と投稿記事の間に、カテゴリーがあれば入るように設定しています。
投稿一覧>カテゴリー>投稿記事となります。
カテゴリーが複数ある場合は1つのみ表示されるようにしています。

カスタム投稿ページのパンくずリスト

カスタム投稿一覧ページに配置

<!-- パンくずリスト設定 -->
<ol id="breadcrumb">
    <li><a href="<?php echo home_url(); ?>">TOP</a></li>
      <?php if (is_tax()) : // カテゴリー・タグの場合
    ?>
        <li><a href="<?php echo home_url(); ?>/works">制作実績</a></li>
      <li><?php single_term_title(); ?></li>
      <?php else : ?>
      <li>制作実績</li>
    <?php endif; ?>
  </ol>

リンク先やリンク名は任意の名称に変更してください。
カスタム投稿の場合、カテゴリー・タグの取得方法は同じなのでまとめてif文で記述しています。

カスタム投稿記事ページに配置

<!-- パンくずリスト設定 -->
<ol id="breadcrumb">
    <li><a href="<?php echo home_url(); ?>">TOP</a></li>
    <li><a href="<?php echo home_url(); ?>/works">制作実績</a></li>
<?php
$term = get_the_terms($post->ID, 'works-cat');
    if($term[0]) : ?>
    <li><a href="<?php echo get_term_link($term[0]->term_id); ?>"><?php echo $term[0]->name; ?></a></li>
 <?php endif; ?>
    <li><?php the_title(); ?></li>
  </ol>

カテゴリーがあれば、一覧と記事の間に入るように設定しています。
カスタム投稿一覧>カテゴリー>カスタム投稿記事となります。
カテゴリーが複数ある場合は1つのみ表示されるようにしています。
投稿記事ページの時との違いは、「get_the_terms」でカテゴリーのタームを取得している点です。