投稿タイトルの先頭に自動で「NEW」「更新」ラベルを表示する方法

この記事では、どんなWordPressテーマでもJavaScriptを使って本文タイトルだけに「NEW」「更新」ラベルを付ける方法を解説します。LightningやCocoon以外のテーマでもコピペで簡単に利用可能です。

1 function.phpにコードを追加

//----------------------------------------------
// 投稿ページ本文タイトルにNEW/更新ラベルをCSSで付与（SEO安全版）
//----------------------------------------------
function add_post_title_label_script() {
    if (is_single() && get_post_type() === 'post') {
        global $post;
        $post_time = get_the_time('U', $post);
        $updated_time = get_the_modified_time('U', $post);
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const titleEl = document.querySelector('article h1') || document.querySelector('h1');
    if (!titleEl) return;

    const now = Math.floor(Date.now() / 1000);
    const postTime = <?php echo $post_time; ?>;
    const updatedTime = <?php echo $updated_time; ?>;

    const newLabelDays = 7;      // NEWラベル期間（日）
    const updatedLabelDays = 7;  // 更新ラベル期間（日）

    if ((now - postTime) <= newLabelDays * 86400) {
        titleEl.classList.add('is-new');
    } else if ((now - updatedTime) <= updatedLabelDays * 86400) {
        titleEl.classList.add('is-updated');
    }
});
</script>
<?php
    }
}
add_action('wp_footer', 'add_post_title_label_script');


//----------------------------------------------
// NEW/更新ラベル用CSS（疑似要素で表示）
//----------------------------------------------
function add_post_title_label_css() {
    if (is_single() && get_post_type() === 'post') {
?>
<style>
/* NEWラベル */
h1.is-new::before {
    content: "NEW ";
    background-color: #ff5e5e;
    color: #fff;
    padding: 2px 6px;
    font-size: 0.8em;
    border-radius: 3px;
    margin-right: 5px;
}

/* 更新ラベル */
h1.is-updated::before {
    content: "更新 ";
    background-color: #00bcd4;
    color: #fff;
    padding: 2px 6px;
    font-size: 0.8em;
    border-radius: 3px;
    margin-right: 5px;
}
</style>
<?php
    }
}
add_action('wp_head', 'add_post_title_label_css');

2 ポイント解説

• let titleEl = document.querySelector('article h1') || document.querySelector('h1');
  - まず記事本文内の <article><h1> を取得
  - なければページ上の最初の <h1> を取得
  - これでテーマに依存せず、タイトルを取得できます
• 投稿ページのみ対象なので、固定ページやアーカイブには影響しません
• NEW/更新ラベルの期間は newLabelDays / updatedLabelDays で簡単に変更可能

3 表示確認

投稿一覧ページ・記事ページのタイトルに、以下のように自動でラベルが付きます。

<span class="label-new">NEW</span> 新しいお知らせ
<span class="label-updated">更新</span> サービス内容を変更しました

4 ラベルの表示期間を変更したい場合

たとえば「3日以内をNEWにしたい」場合は、以下の部分を変更します。

4.1 NEW

// 変更前
const newLabelDays = 7;      // NEWラベル期間（日）

// 変更後（3日以内）
const newLabelDays = 3;      // NEWラベル期間（日）
  

4.2 更新

// 変更前
const updatedLabelDays = 7;  // 更新ラベル期間（日）

// 変更後（3日以内）
const updatedLabelDays = 3;  // 更新ラベル期間（日）
  

数字を変更することで自由に設定できます。

5 代用プラグイン

コードを書かずに「NEW／更新」ラベルを表示したい場合、以下のようなプラグインを使うことで同様の機能を実装できます。

6 まとめ

• テーマに依存せず本文タイトルにラベルを自動で付与
• NEWは投稿後○日、更新は更新後○日で表示可能
• 固定ページ、アーカイブ、ウィジェット、関連記事には影響なし
• 既存記事も自動で反映されるので、多数の記事でもコピペだけでOK

7 (重要)後日談

このコードを使って「NEW」、「更新」を表示すると、グーグル検索結果のタイトルにも「NEW」、「更新」が付いてしまいましたので、付かないように修正してあります。