【WordPress】新規記事に指定の期間「New」をつける方法

2020/02/08

ごきげんよう。
綾崎です。

WordPressで記事の一覧、アーカイブで新着の記事にアイコンをつけるの、本サイトでもトップページとブログ記事の一覧で行なっています。

PHPの記述は、コピペで実装できると思うので、よかったら参考にしてください。

今回は、PHPの記述と、私が本サイトで当てているスタイルをご紹介します。

PHPの記述

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

$daysが、NEWを表示させたい期間の日数です。

私は7日、１週間にしています。

$nowが現在の日時、$entryが記事の投稿の日時を取得しています。

$termは、(今日の日時 – 投稿した日時)÷1日の秒数です。

1日の秒数ってのは、１日=60秒×60分×24時間=86400秒です。

そして、この$termが$daysよりも大きい場合のみ「New」を表示させる、ということです。

日数を変更したい場合は、$daysの数字を編集してください。

もしこれを時間単位に場合は、例えばこんな感じでしょうか。

$hours = 5;
$now = date_i18n('U');
$entry = get_the_time('U');
$term = date('U',($now - $entry)) / 3600;
if( $hours > $term ){
  echo 'NEW';
}

上記は、５時間だけ「New」がつきます。

3600は、１時間の秒数です。

そして、if文の中のechoに、出力したいhtmlを記述します。

「New」マークのスタイル例

トップページ

トップページ(https://tomoeayasaki.net)での「NEW」の表示です。

ギャラリーの新規投稿と、ブログの新規投稿につくようになっています。

下記のHTMLは、ギャラリーの方です。

「NEW」の表示自体は、同じスタイルが当たっていて、要素の右上に表示されるようになっています。

<ul>
  <li>
  <span class="new">NEW</span>
  <a href="#">
    <div class="img-space"><img src="" alt=""></div>
  </a>
  </li>
</ul>

<span class=”new”>NEW</span>が、上記で紹介したPHPのechoで出力しているHTMLです。

liを、ループで回しています。

li {
  position: relative;
}

li .new {
	font-size: 12px;
	color: #e91e50;
	position: absolute;
	top: -17px;
	right: 0;
}

positionでtop: -17px;を指定することで、枠の外に飛び出させています。

記事一覧ページ

記事一覧ページ(https://tomoeayasaki.net/blog)の「New」の表示です。

サムネイルの左上に、三角のマークがつくようになっています。

<div class="pbox-index">
  <a href="#">
    <div class="date"><time datetime="20xx-01-01">20xx/01/01</time></div>
    <div class="pbox-thumb">
      <span class="new">NEW</span>
      <div class="imgSpace" style="background-image: url('')"></div>
      <span class="category">（カテゴリー）</span>
    </div>
    <div class="pbox-text">
      <h2>（タイトル）</h2>
      <p>（本文抜粋）</p>
    </div>
  </a>
</div>

pbox-index が、ループ回して出力している部分です。

.pbox-index .pbox-thumb {
  position: relative;
}
.pbox-index .new {
	position: absolute;
	top: -5px;
	left: -5px;
	padding-top: 7px;
	transform: rotate(-45deg);
	color: #fff;
	font-size: 14px;
	letter-spacing: 2px;
}

.pbox-index .new::before {
	content: "";
	border-top: 40px solid #e91e50;
	border-right: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 40px solid #e91e50;
	position: absolute;
	top: 0;
	left: -24px;
	transform: rotate(45deg);
	z-index: -1;
}

サムネイルを囲うdivの中に、NEWのspanタグを入れて、positionで配置しています。

スタイル自体は、NEWのテキストのspanのbeforeで三角形を作り、transformで回転させています。

温泉むすめ　お誕生日イラストまとめ　2020年1月

手軽に読めるおすすめファンタジー小説7作品

Blog 好きなことを好きなだけ。

【WordPress】新規記事に指定の期間「New」をつける方法

PHPの記述

「New」マークのスタイル例

トップページ

記事一覧ページ

Pick up

Plofile

Categories

Key words

ads

New articles

Wish list

LINE stamp

Blog 好きなことを好きなだけ。

【WordPress】新規記事に指定の期間「New」をつける方法

PHPの記述

「New」マークのスタイル例

トップページ

記事一覧ページ

Pick up

【css】レスポンシブ対応！サムネイル画像のアス比を固定して表示する方法

【CSS】ブログの見出しスタイルを変更しました

【HTML】ファビコンを設定するための記述

【CSS】特定の文字列を含むセレクタを指定するスタイル

Plofile

Categories

Key words

ads

New articles

Wish list

LINE stamp