【SWELL】カスタム投稿タイプでサムネ上にタームを表示する方法

2025-03-27

SWELLのカスタム投稿タイプ一覧で、タームを通常投稿のカテゴリーと同じように表示する方法を解説しています。functions.phpにコードを追加するだけでとても簡単です！

「SWELLでカスタム投稿タイプ一覧のサムネにカスタムタクソノミーのタームを表示させたい！」
と思うことはありませんか？

そこでこの記事では、SWELLのカスタム投稿タイプの一覧にタームを表示する方法をご紹介します。

SWELLには、カスタム投稿タイプの一覧にターム表示する機能がありません。

完成例

アイキャッチ画像の右上に、カテゴリーと同様にタクソノミー（ターム）を表示する。

SWELLのデフォルトではタームが表示されない。 — SWELLのデフォルトではタームが表示されない

SWELLのデフォルトではタームが表示されないので表示処理を追加した結果。 — ターム表示処理を追加した結果

前提条件

お使いのバージョンやプラグインの相性、すでに適用している他のカスタマイズ等によっては動作しない可能性があります。

また、カスタム投稿タイプやタームはプラグイン「Custom Post Type UI」を使用する前提とします。
ただし、自作する場合でも同じはずです。

動作確認環境

【WordPress】6.7.2
【テーマ：SWELL】2.13.0
【プラグイン：Custom Post Type UI（CPTUI）】1.17.2

サンプル構成

以下のように、ワードプレスのデフォルトである投稿とカテゴリーの他に、CPTUIを使ってカスタム投稿とタクソノミーを２つずつ作成し、投稿タイプとタクソノミーが１対１に対応する構成で説明します。

投稿（post）

カテゴリー（category）

カスタム投稿1（custom1）

タクソノミー1（taxonomy1）

カスタム投稿2（custom2）

タクソノミー2（taxonomy2）

CPTUIの設定	カスタム投稿１	カスタム投稿２
カスタム投稿スラッグ	custom1	custom2
表示タクソノミースラッグ	taxonomy1	taxonomy2

functions.phpにコードを追加するだけ！

「外観」－「テーマファイルエディター」と進み、functions.phpに以下のコードを追加します。

//カスタム投稿タイプのカテゴリー表示
function swl_parts__post_list_category( $args ) {
	$the_id   = $args['post_id'] ?? get_the_ID();
	$class    = $args['class'] ?? 'p-postList__cat u-thin';

	//投稿にはカテゴリーを表示（デフォルト機能）
	if ( 'post' == get_post_type() ) {
		$cat_data = get_the_terms( $the_id, 'category' );
	}
	//カスタム投稿1にはタクソノミー1を表示
	else if ( 'custom1' == get_post_type() ) {
		$cat_data = get_the_terms( $the_id, 'taxonomy1' );
	}
	//カスタム投稿2にはタクソノミー2を表示
	else if ( 'custom2' == get_post_type() ) {
		$cat_data = get_the_terms( $the_id, 'taxonomy2' );
	}
	
	if ( empty( $cat_data ) ) {
		return;
	}

	// 表示するカテゴリー
	$display_cat = swl_get__a_catgory( $cat_data );

	$the_cat = apply_filters( 'swell_post_list_cat_data', [
		'id'   => $display_cat->term_id,
		'name' => $display_cat->name,
	], $the_id );
?>
	<span class="<?=esc_attr( $class )?> icon-folder" data-cat-id="<?=esc_attr( $the_cat['id'] )?>"><?=esc_html( $the_cat['name'] )?></span>
<?php
}

処理解説

処理①

//投稿にはカテゴリーを表示（デフォルト機能）
if ( 'post' == get_post_type() ) {
	$cat_data = get_the_terms( $the_id, 'category' );
}
//カスタム投稿1にはタクソノミー1を表示
else if ( 'custom1' == get_post_type() ) {
	$cat_data = get_the_terms( $the_id, 'taxonomy1' );
}
//カスタム投稿2にはタクソノミー2を表示
else if ( 'custom2' == get_post_type() ) {
	$cat_data = get_the_terms( $the_id, 'taxonomy2' );
}

投稿タイプがデフォルトの投稿（’post’）であればデフォルトのカテゴリー（’category’）を取得。
投稿タイプがカスタム投稿１（’custom1’）であればタクソノミー１（’taxonomy1’）を取得。
投稿タイプがカスタム投稿２（’custom2’）であればタクソノミー２（’taxonomy2’）を取得。

処理②

// 表示するカテゴリー
$display_cat = swl_get__a_catgory( $cat_data );

$the_cat = apply_filters( 'swell_post_list_cat_data', [
	'id'   => $display_cat->term_id,
	'name' => $display_cat->name,
], $the_id );
<span class="<?=esc_attr( $class )?> icon-folder" data-cat-id="<?=esc_attr( $the_cat['id'] )?>"><?=esc_html( $the_cat['name'] )?></span>

処理①で取得したカテゴリーまたはタクソノミーのタームをアイキャッチ画像右上に表示する。

【ついで】個別ページのタームを装飾する

SWELLでは上記の処理を書かなくても、カスタム投稿タイプの個別ページにはタームが自動で表示されます。
ただし、装飾はされません。
例えば、下図の広告横にある「ワードプレスニュース」はタクソノミーのタームです。

SWELLでは装飾されないタームが表示される — 装飾されないタームが表示される

これをついでに装飾してしまいましょう！
「外観」－「カスタマイズ」－「追加CSS」に以下のコードを追加します。

/* フォルダアイコンの装飾 */
.c-taxList {
	color: var(--color_main);
}
/* タームラベルの装飾 */
.c-taxList__link {
	background-color: var(--color_main);
	color: #fff; //※
	border-radius: 16px;
	padding: 6px 10px;
}

※部分は文字色です。当サイトはメインカラー紺のため白文字に設定していますが、メインカラーが白系の場合は#333など黒っぽい文字色の方が見やすくなります。

また、ここでは普通のカテゴリーラベルと同じように見せるため、タームの背景色にはcolor_mainを設定しています。
カスタム投稿タイプでは色を変えたい場合は、ここでredや#123456など色コードを指定しても良いでしょう。

border-radiusとpaddingは、丸みを持たせるための設定です。
四角でも良いなら不要なので削除しても問題ありません。