WordPressの新着記事にNEWマークを付ける方法

Jun 12, 2020
Jun 19, 2020
- WordPress

こんにちは。今日のWordPressカスタマイズは新着記事にNEWマークを付ける方法についてです。トップページの記事一覧にNEWマークが付いているとちゃんと更新されているブログっていう雰囲気が醸し出されますので、積極的に実装したいと思います（笑）でも更新が滞ってくると逆にプレッシャーになるかもしれませんね。まぁそんなことのないように自分を戒めるためにも早速実装していきます。

全体の流れ
NEWの文字を出力する
1. PHP
CSSで見た目を装飾する
1. CSS
最後に

全体の流れ

今回のカスタマイズは比較的簡単にできると思います。

NEWの文字を出力する
CSSで見た目を装飾する

非常にシンプルな流れです。まずは指定した期間等に更新された記事を示すために「NEW」の文字を出力できるようにします。次にその文字をCSSで装飾するという流れになります。

NEWの文字を出力する

参考にした記事は以下です。

やり方はいくつかありますが、中でも今回はオーソドックスに日数で指定する方法を採用しました。

PHP

私の場合はトップページとカテゴリーアーカイブページの記事一覧に表示したかったので、それぞれ「index.php」と「archive.php」の中で出力したい箇所に以下のように記述しました。

<?php
    $days = 7;
    $today = date_i18n( 'U' );
    $entry_day = get_the_time( 'U' );
    $keika = date( 'U', ($today - $entry_day) ) / 86400;
    if ( $days > $keika ):
    echo '<small class="new"><span class="new_label">new</span></small>';
    endif;
?>

実際にHTMLで出力される内容はecho以下の部分なので、

<small class="new"><span class="new_label">new</span></small>

と出力されます。見た目にはただnewという文字が新着記事の上に表示されているだけの状態です。

こんな感じ。このecho以下のHTMLを自分好みに書き換えてください。ちなみに「$days = 7;」の数字部分を変更することでNEWマークを表示する日数を変えることができます。「$days = 14;」だと二週間で「$days = 3;」だと3日間という感じです。余談ですけどこういう場合にnewの文字をタグ付けする時に最適なタグって何なんでしょうかね。divが一番いいとは思いますが何だか芸がないというか安易すぎるというか。私はsmallを使いましたが間違っている気もします。

CSSで見た目を装飾する

ここからは出力したnewの文字に対してCSSで見た目を装飾していきます。私の場合、前後のHTMLも関連していますので一応掲載しておきます。

<a href="<?php the_permalink(); ?>">
    <figure class="post_thumbnail">
        <?php
            $days = 7;
            $today = date_i18n( 'U' );
            $entry_day = get_the_time( 'U' );
            $keika = date( 'U', ($today - $entry_day) ) / 86400;
            if ( $days > $keika ):
            echo '<small class="new"><span class="new_label">new</span></small>';
            endif;
        ?>
        <?php if ( has_post_thumbnail() ): ?><?php echo get_the_post_thumbnail(); ?><?php else: ?><img src="<?php echo get_template_directory_uri(); ?>/images/no_image.png"><?php endif; ?>
    </figure>
</a>

アイキャッチ画像の手前にnewマークが表示されるようにして画像の全体をfigureで囲み、さらに画像全体が個別記事へのリンクとなるようにしています。

CSS

上のHTMLに対してCSSを適用します。

.post_thumbnail {
    position: relative;
}

.new::before {
    position: absolute;
    border-width: 56px 56px 0 0;
    border-style: solid;
    border-color: #ff0000 transparent transparent transparent;
    content: "";
    opacity: 0.5;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
}

.new_label {
    position: absolute;
    top: 12px;
    left: 4px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .2rem;
    font-weight: 600;
    font-size: 1.2rem;
    transform: rotate(-45deg);
}

ポイントはいくつかありますが、個人的にお気に入りなのは透過している点です。透過しているだけでオシャレ感が出てきます（笑）あとは要素を傾ける「transform: rotate(-45deg)」の部分ですね。ここまでCSSだけで実現できるのがすごいです。

なお、これ以外にもあたっているCSSは存在しているのでこのままコピペしてもうまく表示されない場合があります。そんな時は数値の部分を色々と弄ってみてください。必ずしっくりくる数値が見付かるはずです。

ここで参考にした記事は以下です。

他にもいくつかのサンプルが掲載されていて、それぞれCODEPENで弄れるようにしてくれていますので、私は思う存分弄らせてもらって完成させました。ありがとうございます。

最後に

今回NEWマークを実装してみて、やっぱりオシャレな雰囲気になるのと我ながらちゃんと更新できているなって目で見えるので自分のモチベーションにも繋がるなと思いました。このNEWマークをたくさん見たいがためだけにこれからもブログの更新頑張ります（笑）