新着記事に好きな日数だけ「NEWアイコン」を自動で出す方法を試したら案外簡単だった

2012/02/28 tips

こんにちは。井畑です。
今日はWebサイトでの新着記事や新商品のアピール方法の定番。「NEWマーク」のアイコンの実装をしてみたいと思います。
今回実装するのは記事をアップした日から好きな日数を設定して、NEWアイコンを自動で出すという優れもの。いちいちNEWマークを手動で付けたり外したりするのは手間ですし、人為的ミスもおこりやすいですからね。とってもステキです。しかも、loop.php内に数行コードを加えるだけなので、サイトに負荷をかけずに、手軽に実装する事ができました。

それでは、やり方をメモしておきます。どうぞ！

追記：2012.12.28
デザインリニューアルに伴い、現在は実装していません。

実装方法

WordPressテーマ内のloop.phpに「NEWアイコン」を出したい場所に以下のコードを書き足しました。

loop.php

<;?php
  $days=7; //NEWをつける日数
  $today=date_i18n('U');
  $entry=get_the_time('U');
  $sa=date('U',($today - $entry))/86400;
    if( $days >; $sa ){
    echo "\n" . '<;span class="ico_new">;<;/span>;' . "\n";
    } // '~'内にNEWアイコンの画像もしくはタグを入れる
?>;

これを付け足すだけです♪
NEWアイコンを出す日数を変えたければ、$days=以降の数字を帰ればOK!これも簡単に調整できていいですねー
後はCSSで場所や位置を調整すれば完成です！

NEWアイコンを出しているしくみ

phpの事はさっぱりよく分かりませんが、さわってみてなんとなくしくみが分かったので書いておきます。
要するにこの記述は、記事公開日を取得して記事公開日の○日以内ならecho内のコードを表示するよ！っていう事をしているのです。つまり、表示するものは画像でもテキストでもDIV要素でも何でもできるんですねー！あー何かに応用できそう…かな？

以下の記事を参考にしました。(というかほぼコピペ…)とっても分かりやすかったです！ありがとうございました！

参考記事

過去X日のニュースタイトルだけNEWアイコンの画像を表示させるには？ | WordPressフォーラム

記事の投稿日を取得して好きな日数だけnewアイコンを表示しておく方法 | ウェビメモ

CSS3を使ったNEWアイコンの作り方

NEWアイコンは画像でもいいのですが、今回はCSS3でNEWマーク作りに挑戦してみました！
作り方としては、echoで<;span class="ico_new">;<;/span>;を読み込ませてそれにCSSで装飾しました。
書いた記述は以下の通りです。

style.css

.ico_new {
  position: relative;
  left: -6PX;
  top: -156px;
  overflow: hidden; /* 不要部分を消す */
}

.ico_new:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100px;
  height: auto;
  background: #FF005A;
  content: "New!!"; /* 表示するテキストをここで変えます */
  text-align: center;
  color: #fff;
  font-family: 'Geo', sans-serif;/* Webフォント ※別途読み込みが必要です */
  font-size: 1.5em;
  padding: 12px 20px;
  left: -40px;
  top: 10px;
  -webkit-transform: rotate(-30deg);  /* Safari,Chrome用 */
  -moz-transform: rotate(-30deg); /* Firefox用 */
  -o-transform: rotate(-30deg);  /* Opea用 */
  transform: rotate(-30deg); /* CSS3 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ico_new:hover:after {
  filter: alpha(opacity=60); /* IE用 */
  -webkit-opacity:0.6; /* Safari,Chrome用 */
  -moz-opacity:0.6; /* Firefox用 */
  -o-opacity:0.6; /* Opea用 */
  opacity:0.6; /* Opea用 */
}

after擬似要素をを使って「new!!」を出し、それをCSS3のrotateで回転させ、不必要なところは非表示にしています。

完成はこんな感じで見えます。じゃーん!!

CSS3を使ったNEWアイコン完成図