【コピペOK】WordPressでNEWマークを簡単＆シンプル＆カッコよく表示

NEWマークのCSSをGoogle検索で探していて、分かりやすくで良いサイトがあったので備忘録的な記事です。
WordPressでも簡単に導入できるPHPと、マークを表示するCSSのコード付き。

NEWマークを簡単＆シンプル＆カッコよく表示する

WordPressでプラグインを使ったり、はじめから表示する機能が付いたテーマを使う事で手間を掛けないでNEWマークを表示する事は簡単です。Wordpress運用上、個人的にはプラグインは必要最低限を推奨してますので、NEWマークの為にプラグインは入れたくないです。

下記の様な方にはオススメ

• プラグインをあまり入れたくない。
• テーマにNEWマーク機能がない。もしくは機能があるテーマへの変更が難しい。
• プログラマーがいない。もしくがプログラマー発注が難しい。

NEWマークを表示したい場所に記載するPHP

以下のコードをNEWマークを表示したいWordpressのPHPに記載します。

$daysにNEWマークを表示したい期間を設定します。以下では「10」となっているので、公開してから10日間はNEWマークが表示されると言う設定です。

echoの’　’シングルクォーテーションないのhtmlコードはサイトに合わせて自由に変更します。
CSSのクラス名（new_bgやnew）は次に紹介する内容と名称を合わせます。

<?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>';
  }
?>

NEWマークのデザインをCSSで設定する

NEWマークはいろいろとありますが、CSSのみでシンプル＆カッコよく表示します。NEWマークは記事の更新で使い、記事も画像のアイキャッチがあるものが多いです。テキストで入れると場所を取り、記事のNEWマークのありなしで表示枠の大きさも変わってしまいます。

アイキャッチの画像に邪魔にならない様なCSSです。（CSSだけでももちろん使えます！）

最後に

以下の「Special Thanks」にあるサイトの内容が凄く分かりやすくて簡単でしたので備忘録として記載しました。ネット上には多くの有用な記事がありますが、気が付いたときにはサイトが閉じてしまったりするので、良いと思ったものはコツコツと溜めていきたいと思います。