今回、Cocoonでサイト作成する機会があり、詰まったところがあったので備忘録として残しておきます。
やりたいことは
- Cocoonでカスタム投稿タイプの追加
- ターム(カテゴリ)別の一覧ページを作成
- パンくずリスト、ターム(カテゴリ)を表示
今回の問題は、カスタム投稿タイプを追加しただけでは、パンくずリストは表示されず、カテゴリラベルも表示されなかった点。
プラグインは「Custom Post Type UI」を利用しました。
まず完成形がこちら

カスタム投稿タイプのアーカイブページで、パンくずリスト、記事上にターム(カテゴリ)が問題なく表示されています。
デザインはCSSで独自のカードタイプに調整しました。
ターム(カテゴリ)別に分けて表示することも可能です。


個別ページのパンくずリスト、ターム表示も完璧です。

前提条件
前提条件として以下の構成で作成しています。
Custom Post Type UIで「制作実績」というカスタム投稿タイプを作り、「制作ジャンル」というタクソノミーを作りました。
- 「制作実績」の投稿タイプスラッグは
works
- 「制作ジャンル」のタクソノミースラッグは
genre
プラグインの使い方は省略しますが、投稿タイプの追加と編集で「アーカイブあり」が“偽”になっていると一覧は表示されませんので“真”にしておきます。
パンくずリストの配置は、「メインカラム手前」に設定。
コード・ファイル名を編集するのは全て子テーマの方です。
コードの行数は目安です。
便宜上、以下のように表記揺れがあることにご了承ください。
- 一覧ページ=アーカイブページ
- ターム別一覧ページ=カスタムタクソノミーのアーカイブページ
WordPressのテンプレート階層
WordPressの決まり事として、phpファイルの命名規則と読み込むための優先順位があります。
個別ページの命名規則
- 個別ページは
single.php
- カスタム投稿タイプの個別ページは
single-〇〇(投稿タイプスラッグ).php
カスタム投稿タイプの個別ページでは、以下の優先順位で読み込みます。
single-〇〇.php
single.php
index.php
もしsingle-〇〇.php
が存在しないならsingle.php
を読み込むといった具合。
つまり、この場合は「個別ページ」も「カスタム投稿タイプの個別ページ」も同じphpファイルを参照することになります。
一覧ページの命名規則
- 一覧ページは
archive.php
- カスタム投稿タイプの一覧ページは
archive-〇〇(投稿タイプスラッグ).php
カスタム投稿タイプの一覧ページでは、以下の優先順位で読み込みます。
archive-〇〇.php
archive.php
index.php
こちらも同じく、カスタム投稿タイプの一覧ページを表示させたい場合にarchive-〇〇.php
が存在しなければarchive.php
を読み込むことになります。
同じphpファイルを参照する事で問題になるのは、「カスタム投稿タイプにだけ反映させたいコードがあるのに実装できない」といったことになります。
それぞれの命名規則に則ったファイルの作成することで、各ページ自由にカスタマイズ出来るという訳です。
カスタム投稿タイプのページ作成
カスタム投稿タイプのページ作成手順
single.php
をコピーして、個別ページの作成index.php
をコピーして、一覧ページの作成index.php
をコピーして、ターム別一覧ページの作成
Cocoonではarchive.php
は存在せずindex.php
で一覧ページを表示しているため、index.php
をコピー元としています。
ついでに設定
- ターム別に振り分けるリンクを作成
- ページタイトルの変更
「個別ページ」を作成

- 親テーマの
single.php
を子テーマにコピー - コピーした
single.php
をsingle-works.php
に名称変更
single-〇〇(投稿タイプスラッグ).php
以上で、カスタム投稿タイプの個別ページはsingle-works.php
で表示されるようになりました。
「一覧ページ」と「ターム別の一覧ページ」を作成


「一覧ページ」と「ターム別の一覧ページ※」を作成します。
※カスタムタクソノミーのアーカイブページと同義
- 親テーマの
index.php
を子テーマにコピーし、archive-works.php
に名称変更 - もう一度
index.php
を子テーマにコピーし、taxonomy-genre.php
に名称変更
archive-〇〇(投稿タイプスラッグ).php、taxonomy-〇〇(タクソノミースラッグ).php
これで、カスタム投稿タイプの一覧ページはarchive-works.php
で、ターム別一覧ページはtaxonomy-genre.php
で表示されるようになりました。
同じようなデザインになっているため分かりにくいですが、それぞれ独立した別のページとなります。
ターム別に振り分けるリンクを作成
ターム別の一覧ページに飛ぶためのリンクを作成します。
- 子テーマに
tmp
ディレクトリを作成 - 親テーマの
tmp/list.php
を子テーマのtmp
の中にコピーします。
tmp/list.php
は、headerやfooterを除いたコンテンツ全体のファイル。
コピーしてきたtmp/list.php
の「インデックストップ広告」の上に、以下のようにコードを追加。
(最初の?>
から<?php
まで)
?><!-- カスタム投稿アーカイブのジャンルナビ -->
<?php if (is_post_type_archive('works')) : ?>
<div class="genre-nav">
<div class="genre-nav-link"><a class="is-active" href="<?php echo esc_url( get_post_type_archive_link( 'works' ) ); ?>">すべて</a></div><!-- /.genre-nav-link -->
<?php
$genre_terms = get_terms( 'genre', array( 'hide_empty' => false, 'orderby'=> 'id') );
foreach ( $genre_terms as $genre_term ) :
?>
<div class="genre-nav-link"><a href="<?php echo esc_url( get_term_link( $genre_term, 'genre' ) ); ?>"><?php echo esc_html( $genre_term->name ); ?></a></div><!-- /.genre-nav-link -->
<?php
endforeach;
?>
</div><!-- /.genre-nav -->
<?php endif; ?>
<!-- カスタムタクソノミーアーカイブのジャンルナビ -->
<?php if (is_tax('genre')) : ?>
<div class="genre-nav">
<div class="genre-nav-link"><a href="<?php echo esc_url( get_post_type_archive_link( 'works' ) ); ?>">すべて</a></div><!-- /.genre-nav-link -->
<?php $cat = get_queried_object();
$cat_name = $cat -> name;
?>
<?php
$genre_terms = get_terms( 'genre', array( 'hide_empty' => false, 'orderby'=> 'id') );
foreach ( $genre_terms as $genre_term ) :
?>
<div class="genre-nav-link">
<a class="<?php if( $cat_name == esc_html( $genre_term->name )) { echo "is-active";
} ?>" href="<?php echo esc_url( get_term_link( $genre_term, 'genre' ) ); ?>"><?php echo esc_html( $genre_term->name ); ?></a></div><!-- /.genre-nav-link -->
<?php
endforeach;
?>
</div><!-- /.genre-nav -->
<?php endif; ?><?php
////////////////////////////
//インデックストップ広告
////////////////////////////
ここに設置することで、タイトル下にジャンルナビを追加することが出来ました。
テキストのみの出力なので、デザインはcssで要カスタマイズ。
コードを簡単に解説すると、今回は仮に作った3つのターム「新規」「リニューアル」「その他」が全て自動で出力されるようにしています。
1つ目(上)のコードは最初の要素にis-active
を付与、2つ目(下)のコードは選択したタームとページとが一致場合にis-active
を付与するようにしています。
一覧ページのタイトルを変更
デフォルトの状態だと、アーカイブページのタイトルは「Archive」に、タクソノミーのアーカイブページは「ターム名」がタイトルになっています。
どちらのページも「Works」というタイトルに統一したいため、functions.php
に以下のコードで書き換えます。
////////////////////////////
//アーカイブタイトル
////////////////////////////
function custom_archive_title( $title ){
if ( is_post_type_archive('works') || is_tax('genre')) {
// ラベルを出力する場合
// $title = (get_post_type_object(get_post_type())->label);
// スラッグを出力する場合
// $title = (get_post_type_object(get_post_type())->name);
// 任意のタイトル
$title = 'Works';
}
return $title;
}
add_filter( 'get_archive_chapter_title', 'custom_archive_title', 10 );
どちらも同じタイトルが適用されるようになりました。
今回は任意のタイトルを適用していますが、「制作実績」というタイトルにしたければラベルを出力すればOKです。
次にパンくずリストとカテゴリータグを表示させるため、ページの構造について解説していきます。
アーカイブページの構造の説明
Cocoonでは細かくパーツ化されており、それぞれのファイルをいじる必要があります。

出来ればフックなどで簡単に変更できるのかもしれませんが、構造を理解し最適化するのに時間がかかるためほぼ直書きで対応します。
親テーマからtmp/body-top.php
、tmp/breadcrumbs.php
、tmp/entry-card.php
を、子テーマのtmp
にコピーします。
親テーマのように、おおよそ以下の構造になっていればOKです。
(今回解説するファイル以外もありますが気にしないでください)

パンくずリストを作成
パンくずリストを「メインカラム手前」に設定しているので、body-top.php
を編集します。
もし「メインカラムトップ」「メインカラムボトム」に表示したければtmp/list.php
、フッター手前に表示したければfooter.php
に同じように分岐を追加するだけです。
body-top.phpを編集
body-top.php
の「投稿パンくずリストがメイン手前の場合」の分岐(50行目)に、is_tax()
,is_post_type_archive()
を追加。
<?php //投稿パンくずリストがメイン手前の場合
if ((is_single() || is_category() || is_tax() || is_post_type_archive()) && is_single_breadcrumbs_position_main_before()){
get_template_part('tmp/breadcrumbs');
} ?>
これで、「メインカラム手前」にカスタム投稿タイプの分岐が追加されました。
breadcrumbs.phpを編集
まずコード全体を囲っている分岐に、カスタム投稿タイプの分岐タグを追加します。
breadcrumbs.php
の最初の分岐(10行目)にis_tax()
,is_post_type_archive()
を書き加えます。
if (is_single_breadcrumbs_visible() && (is_single() || is_category() || is_tax() || is_post_type_archive())){
$cat = null;
//投稿ページの場合
これで、コード全体がカスタム投稿タイプに反映されるようになりました。
$catsの定義の変更
次に、$cats
の定義の変更です。
「投稿ページの場合」の分岐の下(21行目)に、「カスタム投稿タイプの場合」のコードを追加。
//投稿ページの場合
if (is_single()) {
$cats = get_the_category();
//メインカテゴリが指定してある場合は該当カテゴリーを適用
$main_cat_id = get_the_page_main_category();
if ($main_cat_id && in_category($main_cat_id)) {
$cat = get_category($main_cat_id);
}
}
//カスタム投稿タイプの場合
if ( is_tax() || is_post_type_archive() || is_singular('works')) {
$cats = get_the_terms($post->ID,'genre');
}
カスタム投稿タイプの関連ページでは$cats
でタームが取得できるようになりました。
通常の個別ページと分岐するために、is_singular()
の中に「カスタム投稿タイプスラッグ」を入れています。
$catの定義の変更
次は、$cat
の定義の変更です。
if(!$cat){}
の中身(28行目)を以下のコードで分岐します。
//メインカテゴリがない場合は先頭のカテゴリを適用
if (!$cat) {
if(is_tax() || is_post_type_archive() || is_singular('works')) {
$cat = (is_single() && isset($cats[0])) ? $cats[0] : get_queried_object();
} else {
$cat = (is_single() && isset($cats[0])) ? $cats[0] : get_category(get_query_var("cat"));
}
}
カスタム投稿タイプの関連ページでは$cat
にget_queried_object()
が適用されるようになりました。
カスタム投稿タイプのパンくずを追加
この時点でパンくずリストは機能するようになっていますが、「ホーム」から「ターム」にいきなり飛んでいるため、階層が分かりづらいです。

「ホーム > 制作実績 > 新規」 となるようにするためには、間に「パンくず」を追加する必要があります。
「先祖カテゴリの出力」の前に、「カスタム投稿タイプのパンくずを追加」のコードを直書きします。
//カテゴリの順番入れ替え
$cats = array_reverse($cats);
//カスタム投稿タイプのパンくずを追加
if(is_tax() || is_singular('works')) {
++$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())->label).'</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) {
これで、カスタムタクソノミーのアーカイブページと、個別ページのパンくずリストには「制作実績」が入るようになりました。
もし、「制作実績」を「works」に変更したければ、esc_htmlコード内のlabel
をname
に変更すればOK。
WorksやWORKSなど、大文字の指定はCSSで変更可能です。
アーカイブページのパンくずの表示名を変更
まだカスタム投稿タイプのアーカイブページのパンくずリストが、「ホーム > works」となっているはずです。
ここを「ホーム > 制作実績」としたい場合は、元々書かれている$cat->name
から$cat->label
となるようにアーカイブページと分岐します。
// 現カテゴリの出力
++$count;
if(is_post_type_archive()){ //カスタム投稿タイプのアーカイブページの場合
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(get_category_link($cat->term_id)).'" itemprop="item"><span itemprop="name" class="breadcrumb-caption">'.esc_html($cat->label).'</span></a><meta itemprop="position" content="'.$count.'" />';
} else { //それ以外
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(get_category_link($cat->term_id)).'" 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()) {
カスタム投稿タイプでは$cat
にget_queried_object()
を定義しているため、$cat->name
で出力できる値は、「works(スラッグ)」となります。
$cat->label
にすることで「制作実績(カスタム投稿タイプ名)」が出力出来ます。
以上で、パンくずリストが全て完成しました。
パンくずリストの課題
課題といえば、先祖カテゴリで出力されている$par
は定義していませんので、カスタム投稿タイプでの親ターム子タームの階層表示には対応していません。
例えば親タームが「新規」、子タームが「デザイン」とした場合、
「ホーム > 制作実績 > 新規 > デザイン」となるのが理想ですが、
「ホーム > 制作実績 > デザイン」となります。
このような使い方をしなければ特に問題ありませんが、どうしても階層の表示をしたい場合は編集が必要です。
ターム(カテゴリ)を表示させる
記事一覧ページにタームを表示
記事一覧のサムネの上にターム(カテゴリ)を表示させます。
tmp/entry-card.php
の「カテゴリラベルの取得」(35行目)に「カスタム投稿タイプでタームラベルを表示」のコードのように編集します。
// サムネイルを持っているとき
if ( has_post_thumbnail() && $thumbnail_tag ): ?>
<?php echo $thumbnail_tag; ?>
<?php else: // サムネイルを持っていないとき ?>
<?php echo get_entry_card_no_image_tag($count); ?>
<?php endif; ?>
<?php // カスタム投稿タイプでタームラベルを表示
if (has_term('','genre') && (is_tax() || is_post_type_archive())): ?>
<span class="cat-label cat-label-<?php echo get_the_terms( get_the_ID(), 'genre' )[0]->term_id; ?>"><?php echo esc_html( get_the_terms( get_the_ID(), 'genre' )[0]->name ); ?></span>
<?php else: ?>
<?php the_nolink_category(null, apply_filters('is_entry_card_category_label_visible', true)); //カテゴリラベルの取得 ?>
<?php endif ?>
Cocoonで定義されているthe_nolink_category
ではカスタムタクソノミーのタームは取得出来ないため、htmlを直書きし先頭のタームを出力するようにしました。
通常の記事一覧ページではカテゴリを取得、カスタム投稿タイプの記事一覧ページでは特定のタクソノミーを持っている時にタームを表示するように分岐しています。
has_term()
は第2因数であるタクソノミースラッグが必須なので、「genre」を入れています。
以上で、サムネの上にタームを表示することが出来ました。
個別ページにタームを表示

カテゴリ表示位置はデフォルトの「本文下」に設定。
function.php
に以下のコードを書き加えます。
////////////////////////////
//ターム(カテゴリ)リンクの取得
////////////////////////////
//カテゴリリンクの取得
if ( !function_exists( 'get_the_category_links' ) ):
function get_the_category_links(){
$categories = null;
foreach((array)(get_the_terms( false, [ 'category', 'genre' ] )) as $category){
$style = null;
$categories .= '<a class="cat-link cat-link-'.$category->term_id.'" href="'.get_category_link( $category->term_id ).'"'.$style.'>'.$category->name.'</a>';
}
return $categories;
}
endif;
get_the_category_links
でカテゴリーのみの取得しかしていなかったものを、カテゴリーとタクソノミーの両方を取得できるよう編集にしました。
追加したいタクソノミーがあれば、[ 'category', 'genre' ]
の中に付け加えます。
以上で、通常の投稿ページと同様、タームリンクを表示をさせることが出来ました。
カスタム投稿タイプのページ作成まとめ
Cocoonは元々カスタム投稿タイプの利用は想定されていないため、自身でカスタマイズする他ありません。
ググっても詳しいコードが出てこなかったために、自分で作成した次第です。
今回は
- 個別ページ→
single-works.php
- 一覧ページ→
archive-works.php
- ターム別一覧ページ→
taxonomy-genre.php
と3つのカスタム投稿タイプのページを作成し、パンくずリストとターム(カテゴリ)表示させる方法を解説しました。
もしテーマの大型アップデートで、構造が変われば見直す必要があります。
もし、これよりも簡単簡潔に実装できる方法があれば共有していただければ幸いです…!
Web制作ならデイトラがおすすめ
cssの設定やWordPressの設定、もっと自由にカスタマイズしたいと思ったらWeb制作のスクールがおすすめです!
おすすめのスクールはSNSで話題のデイトラ。
業界最安値でWeb制作のコースを受けられます。(安かったので私は2コース受講しました!)
Web制作以外にも、Webデザイン、動画作成、Webマーケティングなどさまざまなコースがあり、サポートも充実。気になった方は是非アクセスしてみてください!
>>Web制作コースを見てみる
コメント