【SWELL】記事タイトルに「新着!」を付けるカスタマイズ

○○日以内の新着記事のみに「新着!」を付けるカスタマイズ方法をご紹介します。

「新着!」があれば、視覚的にも分かりやすくなり、ユーザーにとってもメリットになります。

今回のコードでは「表示する日数」や「テキスト」の変更、またCSSでデザインの変更も可能です。

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

記事タイトルに「新着!」を付けるコード

実例

上図は当記事で作成した新着ラベルのデザインになります。

functions.php

function nmrk_add_new_label_to_post_title($title, $post_id) {
	if (is_admin() || is_feed()) {
		return $title;
	}

	if (get_post_type($post_id) !== 'post') {
		return $title;
	}

	$days_limit = 3; // 新着とみなす日数
	$text = '新着!'; // 表示するテキスト

	$post_timestamp = get_post_time('U', true, $post_id);
	$current_time = current_time('timestamp');
	$days_since_post = ($current_time - $post_timestamp) / DAY_IN_SECONDS;

	if ($days_since_post <= $days_limit) {
		$label_html = '<span class="p-postList__newLabel">' . $text . '</span> ';
		return $label_html . $title;
	}


	return $title;
}
add_filter('the_title', 'nmrk_add_new_label_to_post_title', 1, 2);

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

「$days_limit」を変更する事で、表示する期間を変更できます。

「$text」を変更する事で、表示するテキストを変更できます。

style.css

.p-postList__newLabel {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-right: .25em;
	padding: .125em .25em;
	border-radius: .25em;
	background: var(--color_deep01);
	color: var(--color_pale01);
	font-size: 0.75em;
}

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