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

お知らせ/ブログ

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

2024.02.13

制作メモ

【WordPress】テンプレートパーツでパンくずリストを設置する方法

【WordPress】テンプレートパーツでパンくずリストを設置する方法

以前、【WordPress】パンくずリストをプラグインなしで設置する方法
パンくずリストの作成方法をご紹介させていただきましたが、
今回はそのパンくずリストを「テンプレートパーツ」で呼び出す方法で作成してみました。
以下参考になりましたら幸いです。

breadcrumbs.phpファイルを作成

まず、breadcrumbs.phpというテンプレートパーツ(phpファイル)を作成します。
名称は何でも大丈夫です。
CSSは【WordPress】パンくずリストをプラグインなしで設置する方法と同じものを使用していますので割愛します。

breadcrumbs.php

<ol id="breadcrumb">
        <li><a href="<?php echo home_url(); ?>">TOP</a></li>

        <!-- 固定ページの子ページの場合 -->
        <?php if (is_page() && $post->post_parent) : ?>
            <li><a href="<?php echo get_page_link($post->post_parent); ?>"><?php echo get_the_title($post->post_parent); ?></a></li>
            <li><?php echo get_the_title(); ?></li>

            <!-- 固定ページの場合 -->
        <?php elseif (is_page()) : ?>
            <li><?php echo get_the_title(); ?></li>

            <!-- 月別アーカイブページの場合 -->
        <?php elseif (is_month()) : ?>
            <li><a href="<?php echo get_post_type_archive_link(get_post_type()); ?>"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a></li>
            <li><a href="<?php echo get_year_link(get_query_var("year")); ?>?post_type=<?php echo esc_html(get_post_type_object(get_post_type())->name); ?>"><?php echo get_query_var('year'); ?>年</a></li>
            <li><?php echo the_time("Y年m月"); ?></li>

            <!-- カテゴリーのアーカイブページの場合 -->
        <?php elseif (is_category()) : ?>
            <li><a href="<?php echo get_post_type_archive_link(get_post_type()); ?>"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a></li>
            <li><?php single_cat_title(); ?></li>

             <!-- タグのアーカイブページの場合 -->
        <?php elseif (is_tag()) : ?>
            <li><a href="<?php echo get_post_type_archive_link(get_post_type()); ?>"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a></li>
            <li><?php single_tag_title(); ?></li>

            <!-- タクソノミーのアーカイブページの場合 -->
        <?php elseif (is_tax()) : ?>
            <li><a href="<?php echo get_post_type_archive_link(get_post_type()); ?>"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a></li>
            <li><?php single_term_title(); ?></li>

            <!-- アーカイブページの場合 -->
        <?php elseif (is_post_type_archive()) : ?>
            <li><?php post_type_archive_title(); ?></li>

            <!-- 記事ページの場合 -->
        <?php elseif (is_single()) : ?>
            <li><a href="<?php echo get_post_type_archive_link(get_post_type()); ?>"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a></li>
            <?php
            $category = get_the_category();
            $term = get_the_terms($post->ID, 'works-cat');
            if ($category[0]) {
                $idurl = get_category_link($category[0]->term_id);
                $name = $category[0]->cat_name;
            } elseif ($term[0]) {
                $idurl = get_term_link($term[0]->term_id);
                $name = $term[0]->name;
            }
            if ($category[0] || $term[0]) : ?>
                <li><a href="<?php echo esc_html($idurl); ?>"><?php echo $name; ?></a></li>
            <?php endif; ?>
            <li><?php single_post_title(); ?></li>

            <!--  404エラーページの場合 -->
        <?php elseif (is_404()) : ?>
            <li>404</li>

        <?php endif; ?>
    </ol>

TOPのリンク以下をif文(条件分岐)で分岐するようにしています。
名称部分はHOMEなど、好きに変更していただければと思います。

アーカイブページの場合

            <!-- アーカイブページの場合 -->
        <?php elseif (is_post_type_archive()) : ?>
            <li><?php post_type_archive_title(); ?></li>

アーカイブページの場合の名称置き換え

            <!-- アーカイブページの場合 -->
        <?php elseif (is_post_type_archive('post')) : ?>
            <li>お知らせ</li>

            <!-- カスタム投稿のアーカイブページの場合 -->
        <?php elseif (is_post_type_archive('works')) : ?>
            <li>制作実績</li>

「アーカイブページの場合」の箇所ですが、このままでは名称がデフォルトである「投稿」になってしまうので
<?php post_type_archive_title(); ?>の部分を任意の名称に置き換えます。
カスタム投稿のあるサイトの場合は、カスタム投稿のアーカイブの分岐を追加で作成します。

もしくはfunction.phpで名称変更の設定をしていただければと思います。
自サイトでは名称変更の設定で対応しています。
参考:【WordPress】投稿アーカイブを任意のスラッグ・名称にする方法

設定を変更するとカスタム投稿分の記述追加も必要なく、
名称を置き換える必要もなく、<?php post_type_archive_title(); ?>のまま使用することができます。

記事ページの場合

<!-- 記事ページの場合 -->
        <?php elseif (is_single()) : ?>
            <li><a href="<?php echo get_post_type_archive_link(get_post_type()); ?>"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a></li>
            <?php
            $category = get_the_category();
            $term = get_the_terms($post->ID, 'works-cat');
            if ($category[0]) {
                $idurl = get_category_link($category[0]->term_id);
                $name = $category[0]->cat_name;
            } elseif ($term[0]) {
                $idurl = get_term_link($term[0]->term_id);
                $name = $term[0]->name;
            }
            if ($category[0] || $term[0]) : ?>
                <li><a href="<?php echo esc_html($idurl); ?>"><?php echo $name; ?></a></li>
            <?php endif; ?>
            <li><?php single_post_title(); ?></li>

今回、カスタム投稿がある設定にしていますので、
「記事ページの場合」のところの、$term = get_the_terms($post->ID, ‘works-cat’);に記述されている
「works-cat」は対応したタームに変更していただければと思います。

テンプレートパーツを実装

breadcrumb.php作成後、パンくずリストを実装したいページに配置していきます。
今回はアーカイブページ(投稿一覧ページ)に配置します。

投稿一覧ページに配置

<?php get_header(); ?>
<article class="news">

  <div class="news-main">
    <h2 class="topic">お知らせ</h2>
  </div>

  <?php get_template_part('breadcrumb'); //パンくず設定
    ?>

<!-- 投稿一覧の詳細内容が入ります -->

</article>

<?php get_footer(); ?>

get_template_part();関数を使用します。
パンくずリスト実装とは別の話になりますが、headerやfooterもテンプレートパーツで呼び出しています。

パンくずリスト設置方法は、テンプレートパーツで呼び出しをしても直書きをしても
好きな方で実装していいと思います。
テンプレートパーツの方が管理はしやすいかと思いますが、
SEO対策のためにも配置することそのものが大事なのではと思います。
より良いサイト作りを目指していきたいですね。