記事一覧のカードやタイルに設定した日数だけNEWやUPマークを表示する

トップページやアーカイブページでの記事一覧で、新着記事に「Newマーク」を表示します。

そもそもは、当サイトに

「あるサイトで紹介されている方法で、記事一覧のサムネイルに【NEW】を表示したい」

というご相談を頂き、そちらに対応した際に、もう少しシンプルに自分用にカスタマイズしてみたので、この記事が派生しています。

そもそもの記事にはデザインパターンが６種類ありますので、よければ以下をご覧ください。

記事一覧のアイキャッチ画像にNEWマークを表示する

当サイトにご質問があった以下の件についての記事になります。アイキャッチ画像上部に「NEW」を表示したい。参考にさせて頂いたサイト様は以下です。アイキャッチ画像上に新着【NEW】表示ルクセリタスでのカスタマイズ方法になります。お使いの...

サンプル
手順
CSS記述
- カラー変更
PHP記述
番外編：更新日により「UPマーク」も付けたい場合

サンプル

タイル型の記事一覧

カード型の記事一覧

手順

スタイルシートにCSSを記述する
FTPでPHPファイルをダウンロード
PHPファイルにコードを追記
FTPでPHPファイルをアップロード

CSS記述

Luxeritas→子テーマの編集→style.css

/**********************
/* 新着記事にNEWマーク
* ********************/
.new_ribbon {
display: inline-block;
position: absolute;
top: -6px;
left: 10px;
margin: 0;
padding: 10px 0 7px;
z-index: 2;
width: 50px;
text-align: center;
color: white;
font-size: 15px;
background-color: #ff7abc; /*リボンの背景色*/
border-radius: 2px 0 0 0;
}
.new_ribbon:before{
position: absolute;
content: '';
top: 0;
right: -5px;
border: none;
border-bottom: solid 6px #f2b3d3; /*リボンの裏側の色*/
border-right: solid 5px transparent;
}
.new_ribbon:after{
content: '';
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 10px solid #ff7abc; /*リボンの下部の色*/
}

カード型の場合は、メタ情報の位置が「Newマーク」にかぶるので以下を追記します。

/**********************
/*記事一覧カード
* ********************/
#list .meta { /*メタ情報を右寄せに*/
text-align: right;
font-size: 14px;
padding: 0;
border:none;
}

カラー変更

リボンのカラーを変更する場合は、追記するCSSの以下の部分のカラーコードを変更する事で簡単に行えます。

「リボン裏側の色」は、ひっかかっている所のほんの少し裏側が見えている部分の色になるので、同系色の薄い色にすると良いかもしれません。

background-color: #ff7abc; /*リボンの背景色*/
border-bottom: solid 6px #f2b3d3; /*リボンの裏側の色*/
border-top: 10px solid #ff7abc; /*リボンの下部の色*/

色の変更には以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名赤桃青紫黄橙緑茶黒

PHP記述

PHPファイルのダウンロード

記事一覧のスタイル（カード型orタイル型）に合ったPHPファイルを親テーマからダウンロード（コピー）します。

PHPファイルはエラーになるとワードプレスが動作しなくなる場合もあるので、必ずコピーして子テーマに入れたものに編集を行い、万一不具合が発生した場合は、子テーマ内にアップロードしたPHPファイルを削除して下さい。

ダウンロードする場所（親テーマ）
/wp-content/themes/luxeritas

カード型の場合　list-excerpt-card.php

タイル型の場合　list-excerpt-tile.php

ファイルをサーバーへアップロード、ダウンロードする為のFTP操作については以下を参考にして下さい。

FTPクライアントの使い方（FFFTP）とワードプレスのファイル構成

今回は、私が何十年も変わらず使っているソフト「FFFTP」でFTPクライアントの使い方と、ワードプレスでのファイル構成を紹介します。既にワードプレスが稼働している方向けの説明になっています。ワードプレスをこれからインストールされる方は以...

コードを記述する

以下のコードを、カード型かタイル型のファイルに記述します。

PHP

<?php
  if ( time() - get_the_time('U') < 432000 ) {
    echo '<span class="new_ribbon">NEW</span>';
  }
?>

Newマークを付ける日数を設定

上記コードでは、５日間「Newマーク」が付きます。

432000（５日間の秒数（60x60x24x5日））の部分の数字を変える事で日数を変更出来ます。

例

３日　259200
５日　432000
10日　864000

記述する場所は以下をご覧ください。

カード型の場合

list-excerpt-card.php

33行目（バージョンによる異なる場合もあります）の以下を探し、その下にコードを記述します。「?>」の下から

<?php
  if( $post_thumbnail === true ) {	// サムネイル
		$thumb = $luxe['thumbnail_is_size_card'];
?>

タイル型の場合

list-excerpt-tile.php

39行目（バージョンによる異なる場合もあります）の以下を探し、その下にコードを記述します。

<?php
  	if( $post_thumbnail === true ) {	// サムネイル
		$thumb = $luxe['thumbnail_is_size_tile'];
?>

PHPファイルをアップロード

編集後のPHPファイルをサーバーにアップロードします。

アップロードする場所（子テーマ）
/wp-content/themes/luxech

以上で完了です。

番外編：更新日により「UPマーク」も付けたい場合

サンプル

いずれ時間があれば、別記事にまとめてきちんと記載しますが、とりあえず、PHP部分は以下のように条件分岐し、

UPマーク用のCSSを用意すればOKです。

※UPマークをNEWマークと同じデザイン・色で利用するならCSSは不要

PHP

<?php
$days=3; //UPをつける日数
$today=date_i18n('U');
$entry=get_the_modified_date('U');
$sa=date('U',($today - $entry))/86400;
if ( time() - get_the_time('U') < 432000 ) {
echo '<span class="new_ribbon">NEW</span>';
} elseif ( $days > $sa ){
echo '<span class="up_ribbon">UP!</span>';
}
?>

上記コードの例では、NEWマークを付ける条件に当てはまらない場合には、UPマーク条件を見て、当てはまれば処理するという流れです。

NEWマーク　＝５日間
UPマーク　＝３日間