コピペでOK！新着記事に「NEW」をつける方法！

WordPressでサイトやブログを制作していると、カスタマイズ要件として「新着記事にNEWアイコンを付けたい！」という要望がよくあります。一言で新着といっても判別する方法は1つではありません。なので今回はその辺も踏まえて解説していきます。

Contents

新着記事の判別
function.phpで関数化
「New」を表示したいところに関数をコピペ
- 該当ファイル
まとめ

新着記事の判別

まずは新着記事の判別ですが、何を基準に新着記事とするかを考えます。これには大きく3つのパターンがありますので3つそれぞれでコードを作成していきましょう。

時間で判別
件数で判別
時間＋件数

1.時間で判別

記事が投稿されてからの時間で判別するパターンです。一番馴染みやすい判別ですね。

PHP

$days = 3;
$today = date_i18n('U');
$entry_day = get_the_time('U');
$keika = date('U',($today - $entry_day)) / 86400;
if ( $days > $keika ):
    echo 'new';
endif;

1行目　$days = 3で「New」をつける期間を3日以内にします。

2行目　date_i18n('U');はWordPressの日付取得関数です。

3行目　get_the_time('U');はその記事の投稿日時を取得する関数です。

4行目　86400は1日の秒数です。（60秒×60分×24時間=86400）
$today - $entry_dayで経過した秒数を1日の秒数で割ることで経過した日数にしています。

5行目　if ( $days > $keika ):の条件判定で、指定した日数より経過した日数が低い場合は「New」をつける処理をします。

2.件数で判別

時間ではなく一番新しい記事からn個目までを判別するパターンです。時間に限らないので投稿した日時が古くても、n個以内であれば新着とするパターンです。あまり使うシーンはないかもしれませんがパターンとしてはありえます。

PHP

$limit = 5;
$num = $wp_query->current_post;
if ( $limit > $num ):
    echo 'New';
endif;

1行目　$limit = 5として最新5件に「New」をつけます。

2行目　$wp_query->current_postはその記事が何件目なのか取得できます。

ループ内以外で$wp_query->current_postを使う場合は、その前にglobal $wp_queryの宣言が必要なので注意しましょう。

3.時間＋件数

1と2の合わせ技です。

3日以内、かつ3件以内の記事に「New」をつける

投稿するペースが早いブログなどの場合は、「New」ばかりでうっとうしくなるので有効な判別です。

PHP

$days = 3;
$today = date_i18n('U');
$entry_day = get_the_time('U');
$keika = date('U',($today - $entry_day)) / 86400;
if ( $days > $keika ):
    $limit = 3;
    $num = $wp_query->current_post;
    if ( $limit > $num ):
        echo 'New';
    endif;  
endif;

3件以内かつ3日以内の記事に「New」をつける

次は逆に投稿するペースが遅いブログなどの場合は、件数以内でも古い記事は「New」つけないようにします。

PHP

$days = 3;
$today = date_i18n('U');
$entry_day = get_the_time('U');
$keika = date('U',($today - $entry_day)) / 86400;
if ( $days > $keika ):
    $limit = 3;
    $num = $wp_query->current_post;
    if ( $limit > $num ):
        echo 'New';
    endif;  
endif;

function.phpで関数化

上記のコードを「New」をつけたい箇所に直接書いてもいいですが、関数化して使いやすくしましょう。

function.phpに以下のコードをコピペします。

Danger

function.phpはとても重要なファイルです。ここでエラーが起こるとサイト自体が表示できなくなる可能性がありますので、必ずバックアップを取ってから作業しましょう！

function keika_time($days){
    $today = date_i18n('U');
    $entry_day = get_the_time('U');
    $keika = date('U',($today - $entry_day)) / 86400;
    if ( $days > $keika ):
        echo '<div class="entry-icon-new">new</div>';
    endif;
}
 
function keika_num($limit){
    global $wp_query;
    $num = $wp_query->current_post;
    echo $num;
    if ( $limit > $num ):
        echo '<div class="entry-icon-new">new</div>';
    endif;
}
 
function keika_awase($day,$limit){
    global $wp_query;
    $days = 3;
    $today = date_i18n('U');
    $entry_day = get_the_time('U');
    $keika = date('U',($today - $entry_day)) / 86400;
    if ( $days > $keika ):
        $limit = 3;
        $num = $wp_query->current_post;
        if ( $limit > $num ):
            echo '<div class="entry-icon-new">new</div>';
        endif;  
    endif;  
}

11,20行目　function.phpで$wp_query->current_postを使う場合はglobal $wp_queryの宣言が必要なので注意しましょう。

このあとスタイルシートで装飾するので「New」をdivでラップしました。

「New」を表示したいところに関数をコピペ

関数化したら「New」を表示したいところに関数をコピペします。今回は「Twenty Seventeen」のテーマでやっていきます。下図の位置に入れていきます。

該当ファイル

「Twenty Seventeen」の場合は少しわかりづらいのですが、「template-parts」フォルダの中の「post」の中、content.phpが該当ファイルになります。

<header class="entry-header">
    <?php keika_time(3);?>
    <?php
    if ( 'post' === get_post_type() ) {
        echo '<div class="entry-meta">';
            if ( is_single() ) {
                twentyseventeen_posted_on();
            } else {
                echo twentyseventeen_time_link();
                twentyseventeen_edit_link();
            };
        echo '</div><!-- .entry-meta -->';
    };
    以下省略

2行目　entry-metaの上に入れたいのでこちらに先ほど関数化したものを入れました。関数化すればコードも短く、引数を変えれば色々な値で判別できるので便利ですね。

CSS

.entry-icon-new{
    background: #333;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 80%;
    margin-bottom: 10px;
    padding: 3px 20px;
    text-align: center;
}