WordPressの新着記事に「NEW」をつける方法

WEB開発 | 03, 03, 2019

WordPressの新着記事に「NEW」をつける方法

WordPressの新着記事に「NEW」をつけるサンプルコード

<?php
$post_time = get_the_time('U');
$days = 7; //Newを表示させる日数なので任意の日数に変更してください
$last = time() - ($days * 24 * 60 * 60);
if ($post_time > $last) {
echo '<span class="new-txt">NEW</span>';
}
?>

上記コードをWordPressテーマの任意の場所にコピペしてください。

例えば、新着記事のサムネイルの上に設置したい場合は

<?php the_post_thumbnail_url(); ?>

などのサムネイルを取得するコードの上に上記コードを張り付けてください。

CSSで装飾するサンプルコード

CSSで装飾しないと、

上記の画像のようにただサムネイルの上部にNEWが表示されるだけなので、これをサムネイルの上に重なるようにCSSで装飾していきたいと思います。

span.new-txt {
    position: absolute;
    color: #fff;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    background: #FF0000;
}

上記のCSSをあてると、

このようにサムネイルの上にタグが収まり、見やすくなると思います。

まとめ

いかがでしたでしょうか。

今回もコピペだけでいい感じに新着記事に「NEW」をつけられたと思います。

ではでは。

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)
石川栄和 大串 肇 星野邦敏
インプレス (2017-02-24)
売り上げランキング: 996

Writer

フクチ

フクチ| CEO


代表の福知です。 よろしくお願いします。






こちらの記事もおすすめ

Related Posts