プラグインなしで、WordPressの新規記事や更新記事にNewMarkをつけるphpとcssのコードを見ていきます。

NEWマーク付与コード

下記コードを新着マークを表示したい箇所に挿入する。

$days = 7;
$now = date_i18n('U');
$entry = get_the_time('U');
$term = date('U', ($now - $entry)) / 86400;
if ($days > $term) {
　　echo '<span class="newMark">NEW</span>';
}

NEWマーク付与コードの解説

マークを表示する日数を変数$daysに代入する。

$days = 7;

現在の日時のタイムスタンプを取得するため、date_i18n()の第1引数を'U'とし、変数$nowに代入する。date_i18n()は、タイムスタンプに基づいて、ローカライズされた書式で日付をUNIX時間で取得する。第一引数には日時を表示するフォーマットを指定する。初期値は'U'(UNIX タイムスタンプ)。引数無しだとエラーになる。

$now = date_i18n('U');

• タイムスタンプ：ある出来事が発生した日時・日付・時刻などを示す文字列
• UNIX時間：協定世界時 (UTC) での1970年1月1日午前0時0分0秒から形式的な経過秒数

$entry = get_the_time('U');

投稿公開の日時を関数get_the_timeを使用しUNIX時間で取得して、変数$entryに代入する。

$term = date('U', ($now - $entry)) / 86400;

PHPのdate()関数で、date_i18n('U')で取得した現在UNIX時間とget_the_time('U')で取得した投稿公開UNIX時間の時間差（秒数）をUNIX時間で取得し、１日の秒数（24時間x60分x60秒=86400秒）で割る。つまり、投稿公開から現在までの経過期間が日数ででるということになる。

if ($days > $term) {
　　echo '<span class="newMark">NEW</span>';
}

もしも$daysで指定した「New」マークを表示する日数が、$term（投稿公開から現在までの経過日数）より大きい場合、「New」を表示する。

CSSコード

div.recent-content ul,
.contents-large ul {
  list-style-type: none;
  padding: 3px 15px;
}

div.recent-content li,
.contents-large li {
  line-height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;

}

div.recent-content li {
  padding-left: 7.5em;
  text-indent: -7.5em;
}

.contents-large li {
  padding-left: 7em;
  text-indent: -7em;
}

div.recent-content li a,
.contents-large li a {
  font-size: 16px;
}

span.newMark {
  color: #BF573F;
  font-size: 10px;
  background: #fff;
  margin-right: 8px;
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid #BF573F;
  margin-top: 3px;
  height: 20px;
  line-height: 20px;
}

li.content-info .pubdate {
  vertical-align: middle;
}

.home li.content-info .pubdate {
  vertical-align: middle;
  width: 120px;
}

div.recent-content .pubdate {
  margin-left: 8px;
  width: 120px;
}

参考資料

• 関数リファレンス/get post time
• 関数リファレンス/date i18n
• 日付と時刻の書式