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

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

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

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

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

「中部」「岐阜」とかかれている箇所がカスタムタクソノミーの表示になります。

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

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

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

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

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

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

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

Custom Post Type UIのプラグインが一番簡単なので、こちらをインストールして、カスタムタクソノミーを作成しましょう。

プラグインを有効後、エリア(area)というカスタムタクソノミーを作成します。

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

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

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

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

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

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

テキストエディタで開いて、下記のコードを挿入します。

<?php
$area_terms = get_the_terms(get_the_ID(), 'area');
if (!empty($area_terms) && !is_wp_error($area_terms)) :
?>
	<div class="p-articleMetas__termList c-taxList">
		<?php foreach ($area_terms as $term) : ?>
			<a class="c-taxList__link hov-flash-up" href="<?php echo esc_url(get_term_link($term)); ?>" 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を追加してみます。

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

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

以上です。

まとめ

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

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

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

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

  • URLをコピーしました!
目次