COCOONでカスタム投稿タイプで作ったカテゴリー・ページにパンくずを表示させる方法

COCOONでカスタム投稿タイプで作ったカテゴリー・ページにパンくずを表示させる方法 静岡県のホームページ制作・WEB制作
2024.03.11

COCOONでカスタム投稿タイプで作ったカテゴリー・ページにパンくずを表示させる方法

WPのテンプレートである「COCOON」でカスタム投稿タイプで作ったカテゴリーやページにパンくずを表示させる方法を紹介します。

どうやら「COCOON」は、カスタム投稿タイプで作ったカテゴリーやページにはパンくずを表示させることができないようです。

そのためいろいろ試行錯誤しましたが、これから紹介する方法で実現させることができました。

ちなみに1つ目の方法は【完全版】です。思っていたような感じになりました。しかしプラグインを使用します。

2つ目の方法は【未完全版】です。一部思っていたような感じにはなりませんでした。こちらはプラグインを使用していません。

※弊社の場合は成功しましたが、必ずうまく行くとは限らない可能性があります。必ずバックアップを取ったうえで行ってください。万が一のときは一切の責任を負うことはできませんのでご了承ください。

そもそもパンくず表示部分が存在しない

「COCOON」でサイトを作成すると、どのページいったとしてもパンくずは表示されています。

ところが、「CPT UI」で作成した「カスタム投稿タイプ」のカテゴリーページや記事ページでは、パンくず自体が存在していません。

どうしても他のページと同じようにしたいと考え、今回の施策を行うことにしました。

1つ目の方法　YOAST SEOを使用する

1つ目の方法は「YOAST SEO」というプラグインを使用する方法です。

元々「YOAST SEO」はよく利用しているプラグインでした。数ある機能の1つとしてパンくずを作成することができるのです。

それを「COCOON」でパンくずを表示している位置に設置すれば、カスタム投稿ページにもパンくずが表示されるようになります。

COCOONのパンくずを非表示　body-top.phpにタグ設置

まず「COCOON設定」の「投稿」と「固定ページ」で既存のパンくずリストを「表示しない」にします。

これによりサイト上からパンくずが表示されなくなります。

次に親テーマの「tmp」のフォルダ中（もしtmpが無かったら作ってアップ）「body-top.php」をその中に入れます。

「body-top.php」は親テーマのの「tmp」のフォルダ中にあるため、それをそのままコピーで使用してOKです。

そして以下のコードをbody-top.phpの中から見つけます。

<div id="content" class="content cf">

<div id="content-in" class="content-in wrap">

そして見つけたコードの上に「YOAST SEO」専用のパンくずリストのコードを入れます。

すると以下のようになります。

<?php if ( !is_home() && !is_front_page() ) : ?>
<div id="breadcrumb" class="breadcrumb breadcrumb-page pbp-main-before wrap">
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
</div>
<?php endif; ?>

<div id="content" class="content cf">

<div id="content-in" class="content-in wrap">

若干手を加えてあります。

まずサイトのTOPにはパンくずは必要なかったため、「TOPページでは非表示にする」という条件分岐タグを使用しました。

<?php if ( !is_home() && !is_front_page() ) : ?>
<?php endif; ?>

次に「COCOON」のもともとのパンくずの装飾を使用したかったため、既存のタグを使用しました。

<div id="breadcrumb" class="breadcrumb breadcrumb-page pbp-main-before wrap">
</div>

このあたりはお好みで。

2つ目　プラグインなし　でも若干不満

2つ目の方法としてはプラグインを使用せずに、「COCOON」のテンプレートをいじって実装する方法です。

あらかじめ言っておきますが、この方法では思い描いている完全な状態にはなりませんでした。

ただもう一歩というところまで来ているかと思います。あくまでも参考程度にしてください。少し改造すればよい感じになるかもしれません。

正直、1つ目の「YOAST SEO」のプラグインを使用するタイプの方が全然簡単です。

カスタム投稿タイプの受け皿を作る

カスタム投稿タイプの受け皿を作る

まず以下を用意します。

archive-(投稿タイプスラッグ).php
single-(投稿タイプスラッグ).php

これを「子テーマ」にアップします。

これらは作成したカスタム投稿タイプが反映されるテンプレートとなります。

WPの管理画面の「外観」→「テーマファイルエディター」の「テーマファイル」の中にあればよいです。

「functions.php」に必要コードを追加

次に「functions.php」に以下のコードを記述します。

// カスタム投稿タイプのアーカイブにパンくずリスト追加
function custom_breadcrumbs() {
if ( is_tax() || is_post_type_archive()){
get_template_part('tmp/breadcrumbs');
}
}
add_action( 'get_template_part_tmp-user/main-before', 'custom_breadcrumbs' );

「breadcrumbs.php」を親テーマから子テーマへ持ってくる

次に「親テーマ」から「breadcrumbs.php」をコピーして持ってきます。

つまり「子テーマ」の中に「tmp」をいうフォルダを作成し、その中にコピーした「breadcrumbs.php」を入れます。

これはFTPソフトを使用して行ってください。

「breadcrumbs.php」の中身をすべて書き換え

最後に「breadcrumbs.php」の中身を以下にしてください。

<?php //カテゴリ用のパンくずリスト
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: https://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
*/
if ( !defined( 'ABSPATH' ) ) exit;

if (is_single_breadcrumbs_visible() && (is_single() || is_category() || is_tax() || is_post_type_archive())){
$cat = null;
//投稿ページの場合
if (is_single()) {
$cats = [];
$taxonomies = ['category', 'genre'];
foreach ($taxonomies as $taxonomy) {
$terms = get_the_terms($post->ID, $taxonomy);
if ($terms && !is_wp_error($terms)) {
$cats = array_merge($cats, $terms);
}
}
//メインカテゴリーが指定してある場合は該当カテゴリーを適用
$main_cat_id = get_the_page_main_category();
if ($main_cat_id && in_category($main_cat_id)) {
$cat = get_category($main_cat_id);
}
}

//メインカテゴリーがない場合は先頭のカテゴリーを適用
if (!$cat) {
$cat = (is_single() && isset($cats[0])) ? $cats[0] : get_queried_object();
}
if($cat && !is_wp_error($cat)){
$echo = null;
$root_text = __( 'ホーム', THEME_NAME );
$root_text = apply_filters('breadcrumbs_single_root_text', $root_text);
//var_dump($par);
echo '<div id="breadcrumb" class="breadcrumb breadcrumb-category'.get_additional_single_breadcrumbs_classes().'" itemscope itemtype="https://schema.org/BreadcrumbList">';
echo '<div class="breadcrumb-home" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-home fa-fw" aria-hidden="true"></span><a href="'.esc_url(get_home_url()).'" itemprop="item"><span itemprop="name" class="breadcrumb-caption">'.esc_html($root_text).'</span></a><meta itemprop="position" content="1" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>';
$count = 1;
//カテゴリ情報の取得
$cats = array();
if (!is_post_type_archive()) {
$par = get_term($cat->parent);
while($par && !is_wp_error($par) && $par->term_id != 0){
$cats[] = $par;
$par = get_term($par->parent);
}
//カテゴリーの順番入れ替え
$cats = array_reverse($cats);
}
//パンくずの間にカスタム投稿タイプの階層を追加
if(is_tax() || is_single() && !is_singular('post')) {
++$count;
$echo .= '<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-folder fa-fw" aria-hidden="true"></span><a href="'.esc_url(get_post_type_archive_link( get_post_type() )).'" itemprop="item"><span itemprop="name" class="breadcrumb-caption">'.esc_html(get_post_type_object(get_post_type())->name).'</span></a><meta itemprop="position" content="'.$count.'" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>';
}
//先祖カテゴリーの出力
foreach ($cats as $par) {
++$count;
//var_dump($par->name);
$echo .= '<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-folder fa-fw" aria-hidden="true"></span><a href="'.esc_url(get_category_link($par->term_id)).'" itemprop="item"><span itemprop="name" class="breadcrumb-caption">'.esc_html($par->name).'</span></a><meta itemprop="position" content="'.$count.'" /><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span></div>';
}
// 現カテゴリーの出力
// カスタム投稿タイプの出力
if(is_post_type_archive()){
$cat_link = get_post_type_archive_link( get_post_type() );
$cat_name = $cat->name;
} else {
// カスタム投稿タイプ以外の出力
$cat_link = get_category_link( $cat->term_id );
$cat_name = $cat->name;
}
++$count;
echo $echo.'<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-folder fa-fw" aria-hidden="true"></span><a href="'.esc_url($cat_link).'" itemprop="item"><span itemprop="name" class="breadcrumb-caption">'.esc_html($cat_name).'</span></a><meta itemprop="position" content="'.$count.'" />';
//ページタイトルを含める場合はセパレーターを表示
if (is_single_breadcrumbs_include_post() && is_singular()) {
echo '<span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span>';
}
echo '</div>';
//ページタイトルを含める場合
if (is_single_breadcrumbs_include_post() && is_singular()) {
//カウントを進める
++$count;
echo '<div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-file-o fa-fw" aria-hidden="true"></span><span class="breadcrumb-caption" itemprop="name">'.esc_html(get_the_title()).'</span><meta itemprop="position" content="'.$count.'" /></div>';
}

echo '</div><!– /#breadcrumb –>';
}
} //is_single_breadcrumbs_visible ?>

弊社のサイトは以上の施策を行うことで、ある程度のところまで実装されました。

ただし冒頭でもお話ししたように、弊社の思う理想形ではありませんでした。

自己責任でお願いします

今回はCocoonでカスタム投稿タイプのパンくずリストとカテゴリ表示する方法を参考にさせていただきました。

テーマファイルを触ってのカスタマイズになるため、行う際には必ずバックアップを取っておいた方がよいでしょう。

もし施策を行う際には、弊社では一切の責任を負うことができないためご了承ください。

タイトルとURLをコピーしました