WordPress 最新の投稿に新しいラベルを表示する

WordPress 最新の記事のリストで、最近発行された記事のタイトルの横に新しいラベルを表示したい場合があります。 そのような場合 the_title フックを使用して、最新の投稿タイトルに新しいラベルまたはアイコンを表示できます。

[この記事は2025年3月3日に最終更新されました。 ]

WordPress 最新の投稿に新しいラベルを表示する

一部の記事スキンでは、最新の記事リストで最近発行された記事のタイトルに新しいラベルまたはアイコンを表示することがあります。

WordPressでは、いくつかの方法で可能です。

WordPress フックを使用して最新の投稿タイトルに新しいラベルを追加する

最新の記事一覧ページで、最近3日以内に発行された投稿にNewラベルを表示させてみました。 このように新しいラベルを表示したい場合は、テーマの関数ファイルに次のコードを追加できます。

// 전면 페이지와 아카이브 페이지에서 최신 글에 New 라벨 표시하기 

add_filter('the_title', 'my_new_icon_title', 10, 2);
function my_new_icon_title($title, $id){
    // If it's not the front page or an archive page, return the original title.
   // 전면 페이지 또는 아카이브 페이지(카테고리, 태그 페이지 등)가 아닌 경우 원래 제목을 반환
    if (!is_front_page() && !is_archive()) {
        return $title;
    }

    // If it's not a post, return the original title.
    // 포스트가 아닌 경우 본래 제목 표시
    if (get_post_type($id) !== 'post') {
        return $title;
    }

    $date = get_post_time('U', true);
    // Check if the post was published within the last 259200 seconds (3 days).
    // 글이 발행된지 3일(259200초) 이내인지 체크
    if ((current_time('timestamp') - $date) <= 259200) {
       return $title . ' <span class="new-label">New</span>';
    }

    return $title;
}

24時間以内に発行された投稿のタイトルにのみラベルを表示するには、上記のコードで数字「259200」を「86400」に変更します。 数字は秒を意味し、1日の場合 60x60x24=86400になります。 2日または7日などに変更する場合は、この数値を適切に変更できます。

上記のコード チャイルドテーマ 内の関数ファイル（functions.php）に追加してください。 チャイルドテーマを作成せずに親テーマの関数ファイルに直接コードを追加すると、今後のテーマの更新時に追加されたコードは消えます。

時間が合わない場合

たとえば、2日間にNewラベルを表示するように設定しましたが、実際にはXNUMX日が経過する前に消える可能性があります。この場合、上記のコードの中から次のコードを見つけます。

$date = get_post_time('U', true);

このコード行を以下のように true を false に変更するようにします。

$date = get_post_time('U', false);

このように修正すると、タイムゾーンが WordPressで設定したローカルタイムゾーンに合わせて正しく機能します。

WordPressでget_post_time（）関数を使用するときのtrueとfalseオプションの主な違い：

1. $date = get_post_time('U', true);
   • このオプション（true）は、グリニッジ平均時（GMT）基準のUnixタイムスタンプを返します。
   • 世界的に同じ時間を表し、タイムゾーン（標準タイムゾーン）の影響を受けません。
2. $date = get_post_time('U', false);
   • このオプション（false）は、ローカルタイムゾーンベースのUnixタイムスタンプを返します。
   • WordPress 設定で指定したサイトのローカルタイムゾーンが適用されます。

したがって、 get_post_time('U', true); を使用すると WordPress 管理者ページ » 設定 » タイムゾーン 設定が「ソウル」に設定されていると、9時間程度ずれが発生することがあります。

Newラベルのスタイルを設定する

Newラベルのスタイルは CSSで調整できます。例:

/* new 라벨 */

.new-label {
  color: red;
  font-size: 0.5em;
  margin-left: 5px;
}

GeneratePress テーマでは、上の図のNewラベルと同様に表示されます。 他のテーマでも同様に適用が可能です。 （テーマによって文字サイズなどが少し変わることがあります。）

JavaScriptを使用して新しいラベルを追加する

エレメンプロPostsウィジェットや直接コードを作成して記事のリストを表示するなど、the_titleフィルタを使用してポストタイトルを制御できない場合は、JavaScriptを使用して新しいラベルまたはアイコンを表示することを検討してください。

たとえば、以下は、最新の記事のリストから最初のページのページの記事のリストでのみ、最新の記事のタイトルの横に新しいラベルを追加する機能です。

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Check if the URL has the pagination pattern
    if (!window.location.href.match(/page\/\d+/)) {
        // 1. Get all articles from the page
        const articles = document.querySelectorAll('article');

        articles.forEach(article => {
            // 2. For each article, fetch the published date
            const publishedDateElem = article.querySelector('.entry-date.published');
            
            // Check if the publishedDateElem exists
            if (publishedDateElem) {
                const publishedDate = new Date(publishedDateElem.getAttribute('datetime'));
                
                // 3. Get the current date and calculate the difference in days
                const currentDate = new Date();
                const timeDiff = currentDate - publishedDate;
                const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

                // 4. If the difference is less than or equal to 2 days, append "New" label to the title
                if (dayDiff <= 2) {
                    const entryTitle = article.querySelector('.entry-title');
                    const newLabel = document.createElement('span');
                    newLabel.textContent = " New";
                    
                    // Add the 'new-label' class to the element
                    newLabel.classList.add('new-label');

                    entryTitle.appendChild(newLabel);
                }
            }
        });
    }
});
</script>

コードは状況に応じて適切に変更してください。 上記のコードは、発行日と現在の日付を比較して2日以内に発行された場合は、Newラベルが表示されます。

PHPコードを使用するとサーバーサイドで動作しますが、JavaScriptを使用するとサーバーサイドのレンダリング後にレンダリングされるため、少し遅れてラベルが追加されるように見える場合があります。

参照

• WordPressで簡単にランディングページを作成する（feat。エレメント、 GeneratePress, Divi)
• WooCommerce リアルタイム販売通知プラグインで売上を増やす
• エレメンタプロプラグインとクラウドウェブサイト商品の違い
• クラウドウェイへ WordPress はじめにとドメインを接続する