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

2022.11.062026.10.13

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

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

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

TCDのテーマ等はできるのですが、SWELLでは設定がないのでカスタマイズしてみました。

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

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

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

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

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

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

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

既存の登録コードやCustom Post Type UIなどを使い、areaを対象の投稿タイプへ登録します。すでに登録済みなら、新しい登録機能を追加する必要はありません。

この例は通常投稿（post）に登録したareaを表示します。既存の登録コードやCPT UIでareaを登録し、投稿へ地域タームを割り当てます。登録済みなら、別のプラグインで同じタクソノミーを重ねて作成する必要はありません。

あとはエリア名のカスタムタクソノミーを作成しておきましょう。

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

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

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

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

wp-content/themes/swell/parts/single/item/term_list.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; ?>

※areaと書かれている場所にカスタムタクソノミーのスラッグを入れれば他のカスタムタクソノミーも表示できます。

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

コードを追加して保存。

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

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

※親テーマと同じ階層にしてくこと！（フォルダも作成する）

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

確認

テンプレートをアップしたら、カスタムタクソノミーを適応している記事を確認しましょう。

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

最後に少しだけ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でリンクを開けることを確認してください。

まとめ

SWELLのカスタマイズはフックを使うものが良く紹介されますが、基本的なテンプレート上書きももちろん可能です。

ですので、投稿記事に情報を追加したい場合はwp-content/themes/swell/parts/single/のテンプレートを取得してコードを追加してあげましょう。

カスタムタクソノミーはあたらしいカテゴライズができるので、ユーザーの検索意図をより見やしやすくなります。

是非参考にしてみてください。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。

areaタクソノミーを対象の投稿タイプへ登録し、記事へタームを割り当ててから確認します。親テーマのファイルは直接編集せず、既存の子テーマ側ファイルがあれば先にバックアップします。CSSは追加CSSか子テーマのstyle.cssへ追加し、この例のwaza-area-termsだけに適用します。戻すときは追記箇所とCSSを削除し、変更前の子テーマファイルへ戻します。テーマ更新後は親テーマとの差分も確認してください。リンク生成がWP_Errorの場合はそのタームを表示しません。

よくある質問：SWELLでタイトル下にカスタムタクソノミーを表示するとき

SWELLのタイトル下に、カスタムタクソノミーを表示できますか？

記事では、SWELLにはその設定がないため、カスタマイズで表示します。コードを追記したテンプレートパーツを子テーマにアップロードします。例では、地域名のカスタムタクソノミーを、記事タイトル下に表示しています。

事前に何を用意しますか？

記事では、既存の登録コードやCustom Post Type UIなどで、areaを対象の投稿タイプへ登録し、投稿へ地域タームを割り当てます。すでに登録済みなら、新しい登録機能を追加する必要はありません。記事編集画面からカスタムタクソノミーの紐づけができます。

どのファイルを編集しますか？

記事では、親テーマの中にあるterm_list.phpをダウンロードして、コードを追記します。子テーマには、parts/single/item/term_list.phpの配置で置き、途中のフォルダー名も親と一致させます。子テーマ側にすでに同名ファイルがある場合は、親のファイルで丸ごと置き換えず、保存した子側ファイルに今回の追記を加えます。

通常投稿とカスタム投稿で、使い分けは必要ですか？

必要です。記事では、SWELL 2.19.0ではカスタム投稿の分類を標準のterm_list.phpでも出力するため、カスタム投稿に今回の追記をそのまま適用すると、同じ地域がタイトル下へ2回出ました。修正版はget_post_type()がpostのときだけ追記を表示し、カスタム投稿の標準出力を残します。

タイトル下だけに表示できますか？

できません。記事では、このterm_list.phpは記事末尾の分類表示でも使われます。タイトル下だけに限定する実装ではないため、追記後は記事末尾も確認します。

表示される位置は、変えられますか？

記事では、カテゴリーとタグの間に表示したい場合は、既存のカテゴリー出力の後、タグ出力の前へ置きます。見た目は、少しだけCSSを追加して、カテゴリーと同じような見た目にしています。

エリア名が表示されないときは、何を確認しますか？

記事では、すべての記事で出ない場合は、有効な子テーマとterm_list.phpの配置を確認します。一部の記事だけ出ない場合は、その投稿へareaのタームが割り当てられているかを確認します。リンク先が404になる場合は、登録時の公開設定・URL設定と分類アーカイブを確認します（CSSでは直せません）。