WordPressの人気テーマCocoonで、通常の投稿だと本文の下や上にカテゴリーやタグを表示できます。カスタム投稿タイプでも同じようにカスタムタクソノミーを表示させる方法を解説します。
カスタマイズ手順
テーマのカスタマイズをする場合、以下のような手順を踏みます。
- 親テーマのファイルからカスタマイズ元のコード(関数)を探す。
- 子テーマのfunctions.phpにコードをコピーし、書き換え
元のコードを探す
今回は個別ページに表示されるカテゴリーとタグをカスタムタクソノミーに対応させるのでまずはテンプレート階層に従い、single.phpを見ていきます。
<?php //投稿ページ内容
get_template_part('tmp/single-contents'); ?>
テンプレートを読み込んでいるため、tmp/single-contentsを見ていきます。
<?php //本文テンプレート
get_template_part('tmp/content') ?>
ここでもテンプレートを呼び出しているので、tmp/contentを見ていきます。
<?php //タイトル上のカテゴリー・タグ
if (is_category_tag_display_position_title_top() && is_single()) {
get_template_part('tmp/categories-tags');
} ?>
カテゴリー・タグはテンプレートtmp/categories-tagsから呼び出されているので見に行きます。
<div class="entry-categories-tags<?php echo get_additional_categories_tags_area_classes(); ?>">
<div class="entry-categories"><?php the_category_links() ?></div>
<?php if (get_the_tags()): ?>
<div class="entry-tags"><?php the_tag_links() ?></div>
<?php endif; ?>
</div>
ここでやっとカテゴリーとタグの出力コードが出てきました。カテゴリー出力がthe_category_links()で、タグ出力はthe_tag_links()を使っていることがわかります。
テンプレートのコピー
ただ、if (get_the_tags()):でタグがある場合にのみタグ出力関数を呼んでいます。これだとカスタムタクソノミーをタグとして出力したい場合に、タグが付いていない投稿ですと関数自体が呼び出されずカスタムタクソノミーも表示されなくなるため、このtmp/categories-tagsを子テーマにコピーしてif文を取り除きます。
子テーマのcocoon-child-masterディレクトリ内にtmpディレクトリを作成し、categories-tags.phpを親テーマからコピーして配置します。
12行目、14行目のif文とendifを削除して、常にthe_tag_links()を呼び出すように変更します。
<?php //カテゴリタグの取得
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
*/
if ( !defined( 'ABSPATH' ) ) exit; ?>
<div class="entry-categories-tags<?php echo get_additional_categories_tags_area_classes(); ?>">
<div class="entry-categories"><?php the_category_links() ?></div>
<!--この行を削除//-->
<div class="entry-tags"><?php the_tag_links() ?></div>
<!--この行を削除//-->
</div>
このように、子テーマに親テーマと同じ名前のファイルがある場合WordPressでは子テーマのファイルが呼び出されて、親テーマに記述された内容を上書きします。
カテゴリーリンク出力関数
さて、the_category_links()とthe_tag_links()がどこにあるかを次に探します。一つ一つ見ていくのは骨なので、ファイルからthe_category_linksで全文検索をします。そうすると、/lib/utils.phpの中にその関数があることがわかります。
//カテゴリリンクの出力
if ( !function_exists( 'the_category_links' ) ):
function the_category_links(){
echo get_the_category_links();
}
endif;
the_category_links()関数の中ではget_the_category_links()関数を呼び出しその結果を表示しています。get_the_category_links()関数はすぐ上にあります。
//カテゴリリンクの取得
if ( !function_exists( 'get_the_category_links' ) ):
function get_the_category_links(){
$categories = null;
foreach((get_the_category()) as $category){
$style = null;
$categories .= '<a class="cat-link cat-link-'.$category->cat_ID.'" href="'.get_category_link( $category->cat_ID ).'"'.$style.'><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>'.$category->cat_name.'</a>';
}
return $categories;
}
endif;
子テーマのfunctions.phpにこの部分を追加し、この関数を元にカスタマイズしていきます。変更するコードはこのようになります。
//カテゴリーリンクの取得
if ( !function_exists( 'get_the_category_links' ) ):
function get_the_category_links(){
// 取得するタクソノミー(デフォルトのカテゴリーに加えて、カスタムタクソノミーをカテゴリーとして表示したい場合にタクソノミースラッグを追加)
$taxonomies = [ 'category', 'size' ];
$categories = null;
foreach ( $taxonomies as $taxonomy_slug ){ // 取得するタクソノミーをひとつずつ見ていく
$terms = get_the_terms( get_the_ID(), $taxonomy_slug ); //現在の投稿に関連付けられている、該当するタクソノミーのタームを取得
if(!empty($terms) && !is_wp_error($terms)){ //タームが付いているか、エラー出ないかをチェック
foreach($terms as $term){ //付けられているタームをひとつずつ見ていき、リンク作成
$style = null;
$categories .= '<a class="cat-link cat-link-'.$term->term_id.'" href="'.get_term_link( $term->slug, $taxonomy_slug ).'"'.$style.'><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>'.$term->name.'</a>';
}
}
}
return $categories;
}
endif;
$taxonomies = [ ‘category’, ‘size’ ];この部分でカテゴリーリンクとして表示させるタクソノミーを指定します。デフォルトのカテゴリースラッグ categoryに加えて、カスタムタクソノミースラッグを指定します。例ではsizeというカスタムタクソノミースラッグを表示させています。
タグ出力
次に、タグ出力関数のthe_tag_links()をカスタムします。同様に子テーマのfunctions.phpへこの部分を追加します。
//タグリンクの取得
if ( !function_exists( 'get_the_tag_links' ) ):
function get_the_tag_links(){
// 取得するタクソノミー(デフォルトのタグに加えて、カスタムタクソノミーをタグとして表示したい場合にタクソノミースラッグを追加)
$taxonomies = [ 'post_tag', 'sale' ];
$tags = null;
foreach ( $taxonomies as $taxonomy_slug ){ // 取得するタクソノミーをひとつずつ見ていく
$terms = get_the_terms( get_the_ID(), $taxonomy_slug ) ; //現在の投稿に関連付けられている、該当するタクソノミーのタームを取得
if ( !empty($terms) && !is_wp_error($terms) ) { //タームが付いているか、エラー出ないかをチェック
foreach($terms as $term){//付けられているタームをひとつずつ見ていき、リンク作成
$tags .= '<a class="tag-link tag-link-'.$term->term_id.' border-element" href="'.get_term_link( $term->slug, $taxonomy_slug ).'"><span class="fa fa-tag tag-icon tax-icon" aria-hidden="true"></span>'.$term->name.'</a>';
}
}
}
return $tags;
}
endif;
ここでも同じように$taxonomies = [ ‘post_tag’, ‘sale’ ];この部分でタグとして表示させるタクソノミーを指定します。デフォルトのタグスラッグpost_tagに加えて、カスタムタクソノミースラッグを指定します。例では‘sale’というカスタムタクソノミースラッグを表示させています。
表示例
トップスがカテゴリ、Lがサイズ(size)という名前で登録しているカスタムタクソノミー、セールがタグとして付けられているカスタム投稿タイプの投稿を表示した場合の表示です。
Comments
テーマにCocoonを使っていてカスタム投稿を使うと色々とカスタマイズしないといけないと悩んでいて
検索していたら、ここを見つけて大変助かりました。
ただ、カテゴリー(タクソノミー)に親子関係があると逆に表示され機能的には問題はありませんが
見た目的には修正したいと悩んでいます。