ページ上部に該当記事のカテゴリー（タクソノミー）を表示したい

[morisac]

■ WordPress のバージョン
5.9.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning Pro

■ テーマのバージョン
8.15.1

■ スキンの種類
Origin II

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
添付画像のように、各記事に登録されているカテゴリーを表示したいのですが、何か良い方法がございませんか？
添付画像のページURL：https://culture-night.com/program/hakubutukan/

（可能であれば）カスタム投稿タイプで設定したカテゴリーの色を反映できるようにしたい。

■ 自分で試した事
プラグイン
・Cool Tag Cloudを使うも、旧ウィジェットにしか対応していない、表示させたくないページにも表示してしまうなどの問題から諦めました。

HTML
・添付画像のページからHTMLを拝借してコードで入れると、見た目はきちんと表示されたのですが、１つ１つ設定が必要なため、手間がかかってしまうため、こちらの方法もできれば避けたい。

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
表示ができません。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[石川＠Vektor,Inc.]

おそらく以下のような感じでいけると思います。

1. VK Blocks Pro を 1.34.0.0 にアップデート
2. 子テーマの functions.php などに

use VektorInc\VK_Term_Color\VkTermColor;

add_action(
	'lightning_entry_body_before', // 挿入したい場所のアクションフック名
	function() {
		$args = array(
			'outer_element'      => 'div',
			'outer_class'        => '',
			'single_element'     => '',
			'single_class'       => '',
			'single_inner_class' => 'btn btn-sm',
			'link'               => true,
			'color'              => true,
			'taxonomy'           => '', // 表示したいカスタム分類を指定 例） 'category' や 'post_tag' .
			'gap'                => '0.5rem',
			'separator'          => '',
		);
		echo VkTermColor::get_post_terms_html( '', $args );
	}
);

[morisac]

いつもありがとうございます！
ご教示いただいた方法で一度やってみました。
その上で、２点ほど確認させていただきたいです。

①
‘lightning_entry_body_before’, // 挿入したい場所のアクションフック名　
　こちらの部分の『lightning_entry_body_before』は変更しなければならないのでしょうか？
　変更する場合はどういう記述が良いのでしょうか？
　（変更しないで保存しようとすると『echo VkTermColor::get_post_terms_html( ”, $args );』の記述がエラーとなり、保存ができません）

②上記部分を変更し、保存はできたのですが、今度はページ上で呼び出す方法が不明です…。
　　　こちらもどういう記述（方法）で呼び出せるのでしょうか？

いずれもど素人な質問で申し訳ございません。
ご教示いただけますと幸いです。
何卒よろしくお願いいたします。

[石川＠Vektor,Inc.]

コードの範囲が間違ってました
以下でよろしくお願いいたします。

use VektorInc\VK_Term_Color\VkTermColor;

add_action(
	'lightning_entry_body_before', // 挿入したい場所のアクションフック名
	function() {
		$args = array(
			'outer_element'      => 'div',
			'outer_class'        => '',
			'single_element'     => '',
			'single_class'       => '',
			'single_inner_class' => 'btn btn-sm',
			'link'               => true,
			'color'              => true,
			'taxonomy'           => '', // 表示したいカスタム分類を指定 例） 'category' や 'post_tag' .
			'gap'                => '0.5rem',
			'separator'          => '',
		);
		echo VkTermColor::get_post_terms_html( '', $args );
	}
);

[石川＠Vektor,Inc.]

先のコードはアクションフックで挿入しています。

できる！WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦！

挿入したい場所はテーマファイル内ので do_action( という記述がある場所に挿入する事ができます。

それ以外の場所に挿入したい箇所のテーマファイルを子テーマに複製して、そのファイルに

use VektorInc\VK_Term_Color\VkTermColor;

$args = array(
	'outer_element'      => 'div',
	'outer_class'        => '',
	'single_element'     => '',
	'single_class'       => '',
	'single_inner_class' => 'btn btn-sm',
	'link'               => true,
	'color'              => true,
	'taxonomy'           => '', // 表示したいカスタム分類を指定 例） 'category' や 'post_tag' .
	'gap'                => '0.5rem',
	'separator'          => '',
);
echo VkTermColor::get_post_terms_html( '', $args );

を書く形になります。

[morisac]

ありがとうございます！
無事に設定、設置することができました！

ちなみにこの表示ですが、デフォルトの左寄せではなく、右寄せにすることは可能ですか？

• この返信は2年、 7ヶ月前にmorisacが編集しました。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

ここから先は CSS でなんとかなる分野なので

'outer_class' => 'my_category_list',

のような形で識別用の class を指定し、CSSで…
ご自身で頑張るか誰かバトンタッチよろしくお願いいたします。

できる！CSSカスタマイズ

CSS Flexbox 各プロパティの使い方を詳しく解説

たぶん

.my_category_list {
justify-content: flex-end;
}

みたいな感じだと思います。

[morisac]

何度もご丁寧にありがとうございます。
自分でも調べてみます。

一番の懸念箇所は解決できました！
ありがとうございました！

[投稿者]

投稿