SWELL│タイトル下にカスタムタクソノミーを表示する方法

2022.11.062026.10.31

SWELLのタイトル下にはカテゴリーやタグ等が表示できますが、

独自に設定したカスタムタクソノミーを表示したいと思うことはないでしょうか？

例えば、地域名のカスタムタクソノミーを設定した場合に記事タイトル下に表示したい等。

この記事ではSWELL 2.19.0の通常投稿に、登録済みの地域分類を追加する例を扱います。

カスタム投稿には標準の分類表示があるため、後述の使い分けを確認してください。

記事タイトル下にカスタムタクソノミーの「中部」「岐阜」が表示されている様子。 — 「中部」「岐阜」とかかれている箇所がカスタムタクソノミーの表示になります。

本記事では自作したカスタムタクソノミーを表示する方法を紹介します。

SWELLでタイトル下にカスタムタクソノミーを表示する方法

通常投稿のタイトル下と記事末尾に、カスタムタクソノミーのリンクを追加します。

コードを追記したテンプレートパーツを子テーマにアップロードするだけです。

以下、わかりやすく説明いたします。

カスタムタクソノミーの設定

既存の登録コードやCustom Post Type UIなどを使い、areaを対象の投稿タイプへ登録します。

すでに登録済みなら、新しい登録機能を追加する必要はありません。

Custom Post Type UIプラグインを用いたカスタムタクソノミーの設定画面。

この例は通常投稿（post）に登録したareaを表示します。

既存の登録コードやCPT UIでareaを登録し、投稿へ地域タームを割り当てます。

登録済みなら、別のプラグインで同じタクソノミーを重ねて作成する必要はありません。

登録したareaの中へ、岐阜などの地域名をタームとして追加します。

記事編集画面からカスタムタクソノミーの紐づけができます。

投稿記事のテンプレートを編集する

FTPまたはFile Managerのプラグインを使って、WordPressのデータにアクセスします。

SWELLのテーマの階層までアクセスして、親テーマの中にあるterm_list.phpをダウンロードします。

wp-content/themes/swell/parts/single/item/term_list.php

変更前のファイルを保存してから、テキストエディターで下記のコードを挿入します。

このコードはファイル全体の置換用ではありません。

既存のカテゴリー表示を閉じた後、タグ表示のPHP開始タグより前に置き、PHP開始タグを二重にしないでください。

<?php
$area_terms = 'post' === get_post_type() ? get_the_terms(get_the_ID(), 'area') : [];
if (!empty($area_terms) && !is_wp_error($area_terms)) :
?>
	<div class="p-articleMetas__termList c-taxList waza-area-terms">
		<?php foreach ($area_terms as $term) :
            $term_url = get_term_link( $term );
            if ( is_wp_error( $term_url ) ) { continue; }
        ?>
			<a class="c-taxList__link hov-flash-up" href="<?php echo esc_url($term_url); ?>" data-area-id="<?php echo esc_attr($term->term_id); ?>">
				<?php echo esc_html($term->name); ?>
			</a>
		<?php endforeach; ?>
	</div>
<?php endif; ?>

get_the_terms()の第2引数のareaはタクソノミーの登録内部名です。

各地域タームのスラッグやrewriteのURLスラッグではありません。

別の分類へ変更する場合も通常投稿postへ登録・割当済みの内部名を指定します。

get_the_terms()の公式資料も参照してください。

※場所はカテゴリーとタグのコードの間に挿入しています。

コードを追加して保存。

このterm_list.phpをSWELLの子テーマにアップロードします。

wp-content/themes/swell_child/parts/single/item/term_list.php

子テーマ内にもparts/single/itemのフォルダーを作ります。

swell_childは例なので、有効な子テーマの実際のフォルダー名へ読み替えてください。

※子テーマにあるテンプレートが優先して読み込まれます。

確認

テンプレートをアップしたら、地域タームを割り当てた記事を確認しましょう。

しっかりエリア名が表示されていました。

最後に少しだけCSSを追加してみます。

.waza-area-terms .c-taxList__link {
    background-color: var(--color_main);
    color: #fff;
}
.waza-area-terms:before {
    color: var(--color_main);
}

カテゴリ―と同じような見た目にしました。

CSSを適用してカテゴリーと同様の見た目に調整されたカスタムタクソノミーの表示。

以上です。

通常投稿とカスタム投稿を使い分ける

SWELL 2.19.0では、カスタム投稿の分類を標準のterm_list.phpでも出力します。

検証用のworksに今回の追記をそのまま適用すると、同じ地域がタイトル下へ2回出ました。

修正版はget_post_type()がpostのときだけ追記を表示し、カスタム投稿の標準出力を残します。

通常投稿では、地域なし・1件・複数の表示を確認しました。

子テーマ側のterm_list.phpを読み込んだ実画面で、元のカテゴリーとタグを残したまま地域2件が並び、スマホ幅385pxでも横にはみ出しませんでした。

地域リンクはEnterでアーカイブを開き、割り当てた記事が並ぶことを確認しました。

このterm_list.phpは記事末尾の分類表示でも使われます。

タイトル下だけに限定する実装ではないため、追記後は記事末尾も確認してください。

カスタム投稿へ適用したい場合は、まず標準の分類表示で目的のタームが出るかを確認します。

SWELL子テーマのスマホ表示でカテゴリー・地域2件・タグが並ぶ様子 — カテゴリー・地域2件・タグを残したSWELL子テーマの実表示。Customizer Mobileの本文幅385px、2026年10月3日撮影。

表示されない場合は登録・割り当て・配置を分けて確認する

状態	確認する場所
すべての記事でエリア名が出ない	有効な子テーマとparts/single/item/term_list.phpの配置。途中のフォルダー名も親と一致させる
一部の記事だけ出ない	その投稿へareaのタームが割り当てられているか
エリア名は出るがリンク先が404	登録時の公開設定・URL設定と分類アーカイブ。CSSでは直せない
テーマ更新後に元のカテゴリーやタグが変わる	現行の親テンプレートと子側との差分。今回の追記以外の変更も保持する

子テーマ側にすでに同名ファイルがある場合は、親のファイルで丸ごと置き換えず、保存した子側ファイルに今回の追記を加えます。

カテゴリーとタグの間に表示したい場合は、既存のカテゴリー出力の後、タグ出力の前へ置いてください。

確認対象は、areaあり・areaなし・area複数の3投稿です。

元のカテゴリーとタグが消えていないこと、表示された地域のリンク先にその地域の記事が並ぶことを確認します。

スマホでもタイトル下に収まり、TabとEnterでリンクを開けることを確認してください。