【SWELL】記事タイトルの一部分の色を変更するカスタマイズ

記事タイトルの「【】」や「！」など特定のテキストの色のみを変更するカスタマイズになります。

このカスタマイズにより、サイトの独自性や、目立たせたい記事を意図的に主張する事ができます。

またWordPressテーマ「SWELL」に対応したCSSと変数を使用しているので、サイトに馴染むデザインになると思います。

「【～】」で囲まれた部分の色を変更

【SWELL】記事タイトルのカスタマイズというタイトルの場合、

【SWELL】記事タイトルのカスタマイズになります。

コード

// 「【～】」で囲まれた部分を変更する
function nmrk_change_title_color($title) {
	if (!is_admin()) {
		$title = preg_replace('/(【[^】]+】)/u', '<span style="color: var(--color_main);">$1</span>', $title, 1);
	}
	return $title;
}
add_filter('the_title', 'nmrk_change_title_color');

上記のコードをSWELL子テーマの「functions.php」に張り付けてください。

実例

上図はカスタマイズ後のデザインになります。

【と】の間だけの色を変更

【SWELL】記事タイトルのカスタマイズというタイトルの場合、

【SWELL】記事タイトルのカスタマイズになります。

コード

// 【と】の間だけ色を変更する
function nmrk_change_title_color($title) {
	if (!is_admin()) {
		$title = preg_replace_callback(
			'/【([^】]+)】/u',
			function($matches) {
				return '【<span style="color: var(--color_main);">' . $matches[1] . '</span>】';
			},
			$title,
			1
		);
	}
	return $title;
}
add_filter('the_title', 'nmrk_change_title_color');

上記のコードをSWELL子テーマの「functions.php」に張り付けてください。

実例

上図はカスタマイズ後のデザインになります。

★の部分だけの色を変更

【SWELL】記事タイトル★のカスタマイズというタイトルの場合、

【SWELL】記事タイトル★のカスタマイズになります。

コード

// ★のみ色を変更する
function nmrk_change_title_color($title) {
	if (!is_admin()) {
		$title = str_replace('★', '<span style="color: var(--color_main);">★</span>', $title);
	}
	return $title;
}
add_filter('the_title', 'nmrk_change_title_color');

上記のコードをSWELL子テーマの「functions.php」に張り付けてください。