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

カスタマイズ

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

そもそもは、当サイトに

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

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

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

 

サンプル

タイル型の記事一覧

 

アイキャッチにNEWを付ける:タイル型

カード型の記事一覧

 

アイキャッチにNEWを付ける:カード型

 

手順

  1. スタイルシートにCSSを記述する
  2. FTPでPHPファイルをダウンロード
  3. PHPファイルにコードを追記
  4. 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の以下の部分のカラーコードを変更する事で簡単に行えます。

アイキャッチにNEWを付ける

 

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

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操作については以下を参考にして下さい。

 

コードを記述する

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

PHP

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

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

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

432000(5日間の秒数(60x60x24x5日))の部分の数字を変える事で日数を変更出来ます。

3日 259200
5日 432000
10日 864000

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

カード型の場合

list-excerpt-card.php

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

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

 

アイキャッチにNEWを付ける:PHP

 

タイル型の場合

list-excerpt-tile.php

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

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

 

アイキャッチにNEWを付ける:PHP

 

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

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

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

 

以上で完了です。