Cocoonでカスタム投稿タイプのパンくずリストとカテゴリ表示する方法

Cocoonでカスタム投稿タイプのパンくずリストとカテゴリ表示

今回、Cocoonでサイト作成する機会があり、詰まったところがあったので備忘録として残しておきます。

やりたいことは

  • Cocoonでカスタム投稿タイプの追加
  • ターム別(カテゴリ)の一覧ページを作成
  • パンくずリスト、タームを表示

今回の問題は、カスタム投稿タイプを追加しただけでは、パンくずリストは表示されず、カテゴリラベルも表示されなかった点。

プラグインは「Custom Post Type UI」を利用しました。

目次

まず完成形がこちら

カスタム投稿タイプのアーカイブページで、パンくずリスト、ターム(カテゴリ)のラベルが問題なく表示されています。

デザインはCSSで独自のカードタイプに調整しました。

ターム別に分けて表示することも可能です。

新規をクリックした状態
その他をクリックした状態

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

前提条件

前提条件として以下の構成で作成しています。

カスタム投稿タイプの設定

Custom Post Type UIで「制作実績」というカスタム投稿タイプを作り、「制作ジャンル」というタクソノミーを作りました。

  • 「制作実績」の投稿タイプスラッグはworks
  • 「制作ジャンル」のタクソノミースラッグはgenre

プラグインの使い方は省略しますが、投稿タイプの追加と編集で「アーカイブあり」が“偽”になっていると一覧は表示されませんので“真”にしておきます

その他

  • パンくずリストの配置は、「メインカラム手前」に設定
  • コード・ファイル名を編集するのは全て子テーマの方
  • コードの行数は目安

便宜上、以下のように表記揺れがあることにご了承ください。

  • 一覧ページ=アーカイブページ
  • ターム別一覧ページ=カスタムタクソノミーのアーカイブページ

WordPressのテンプレート階層

WordPressの決まり事として、テンプレートファイルの命名規則と読み込むための優先順位があります。

投稿ページ

命名規則と優先順位

  1. single-〇〇(投稿タイプスラッグ).php
  2. single.php
  3. singular.php
  4. index.php

通常の投稿ではsingle.phpが読み込まれ、カスタム投稿タイプではsingle-〇〇.phpが読み込まれます。

カスタム投稿タイプの投稿ページを表示させたい時にsingle-〇〇.phpがない場合、次の優先順位であるsingle.phpが読み込まれます。

つまり、この場合は「通常の投稿」も「カスタム投稿タイプ」も同じsingle.phpを参照することになります。

一覧ページ

命名規則と優先順位

  1. archive-〇〇(投稿タイプスラッグ).php
  2. archive.php
  3. index.php

通常の投稿一覧ページではarchive.phpが読み込まれ、カスタム投稿タイプではarchive-〇〇.phpが読みこまれます。

こちらも同じく、カスタム投稿タイプの一覧ページを表示させたい場合にarchive-〇〇.phpが存在しなければarchive.phpを読み込むことになります。

同じテンプレートファイルを参照する事で問題になるのは、カスタム投稿タイプにだけ反映させたいコードがあるのに実装できないといったことになります。

それぞれの命名規則に則ったファイルの作成することで、各ページ自由にカスタマイズ出来るという訳です。

カスタム投稿タイプのページ作成

ページ作成のざっくりとした流れは以下の通り。

  1. single.phpをコピーして、個別ページの作成
  2. index.phpをコピーして、一覧ページの作成
  3. index.phpをコピーして、ターム別一覧ページの作成
  4. ターム別に振り分けるリンクを作成
  5. ページタイトルの変更

Cocoonではarchive.phpは存在せず、index.phpで一覧ページを表示しているためindex.phpをコピー元としています。

「個別ページ」を作成

カスタム投稿タイプの個別ページ

手順

  1. 親テーマのsingle.phpを子テーマにコピー
  2. コピーしたsingle.phpsingle-works.phpに名称変更
補足

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

以上で、カスタム投稿タイプの個別ページはsingle-works.phpで表示されるようになりました。

「一覧ページ」と「ターム別の一覧ページ」を作成

カスタム投稿タイプの一覧ページ
ターム別の一覧ページ

「一覧ページ」と「ターム別の一覧ページ」を作成します。
※カスタムタクソノミーのアーカイブページと同義

手順

  1. 親テーマのindex.phpを子テーマにコピーし、archive-works.phpに名称変更
  2. もう一度index.phpを子テーマにコピーし、taxonomy-genre.phpに名称変更
補足

archive-〇〇(投稿タイプスラッグ).php、taxonomy-〇〇(タクソノミースラッグ).php

これで、カスタム投稿タイプの一覧ページはarchive-works.phpで、ターム別一覧ページはtaxonomy-genre.phpで表示されるようになりました。

同じようなデザインになっているため分かりにくいですが、それぞれ独立した別のページとなります。

ターム別に振り分けるリンクを作成

ターム別の一覧ページに飛ぶためのリンクを作成します。

手順

  1. 子テーマにtmpディレクトリを作成
  2. 親テーマの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.phptmp/breadcrumbs.phptmp/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"));
	  }
  }

カスタム投稿タイプの関連ページでは$catget_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コード内のlabelnameに変更すれば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()) {
少し解説

カスタム投稿タイプでは$catget_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つのカスタム投稿タイプのページを作成し、パンくずリストとターム(カテゴリ)表示させる方法を解説しました。

もしテーマの大型アップデートで、構造が変われば見直す必要があります。

もし、これよりも簡単簡潔に実装できる方法があれば共有していただければ幸いです…!

ブログのカスタマイズでお困りではないですか?

CSSの設定やWordPressの設定、もっと好みにカスタマイズしたいと思ったら「Web制作のスクール」がおすすめです!

おすすめするのは業界最安値、SNSでも話題のデイトラ

私はWebデザインとWeb制作の2コースを受講して、現在フリーランスとして活動中。
どんなデザインも自由にカスタマイズできるようになりました。

その他にも動画作成、ドローン、Webマーケティングなどさまざまなコースがありサポートも充実。気になった方は是非アクセスしてみてください!

>>Web制作コースを見てみる
Cocoonでカスタム投稿タイプのパンくずリストとカテゴリ表示

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次