Single Post
アイキャッチ画像上に新着【NEW】表示
WordPressサイト制作案件で新着記事のアイキャッチ画像上に【NEW】を表示してほしいというご要望を頂きました。「オシャレに表示させたい」と思い、何パターンか作りましたので掲載しておきます。コードは、コピペで自由に使用してください。
新着記事内に【NEW】を表示
WordPressサイト内の【NEW】を表示したい場所【front-page.phpやindex.phpなど】に下記のコードをコピペして下さい。
<?php
$days = 10;
$today = date_i18n('U');
$entry = get_the_time('U');
$elapsed = date('U',($today - $entry)) / 86400;
if ( $days > $elapsed ) {
echo '<div class="new_bg"><span class="new">New</span></div>';
}
?>
上記のコードは2行目に10とある様に投稿から10日間【NEW】表示するという指定になっています。ここは、ご自由に変更下さい。下の方にdivとspanが記載されています。こちらも任意のタグに変更して頂いて構いません。
今回は「左上三角」「左上円」「リボン」の上に【NEW】を表示させる素材を制作しています。コードの掲載はcodepenを使用しておりますので、ご確認てください。
See the Pen OjOQWy by mitsuox (@puzz) on CodePen.
この様な素材は、目立ちはしませんがワンポイントのアクセントとして効果を発揮してくれます。新着記事の【NEW】表示は、ネットユーザーから見ても新着記事が一目でわかって良いと思います。
まとめ
クライアント様からのご要望で素材を制作しましたが、良い機会だったので数種類作りました。技術的にそんなに難しくはありませんが、いざ作るとなると若干の労力が必要です。必要があれば使って頂けると嬉しいです。
リボンCSSはこちらのサイトを参照させて頂きました。
