先日、WordPress を導入したウェブサイトの新着記事に “NEWマーク” を表示させたので、その備忘録です。
- WordPress を導入している
- 新着記事 UP のタイミングで自動で NEW マークを表示させたい
- 数日間だけ表示させたあとは自動で消えるようにしたい
- カスタマイズ方法も知りたい
- プラグインには頼りたくない
そんな方向けの記事になっているので、ぜひ参考にしてみて下さい。
目次
NEW マークを表示するためのコード
NEW マークを表示させたい箇所に下記のコードを追加します。
記事一覧であれば index.php や archive.php、記事内であれば single.php といった感じになりますが、使っているテーマにより異なりますので phpファイルをご確認下さい。
<?php
$days = 3;
$now = date_i18n('U');
$entry = get_the_time('U');
$term = date('U',($now - $entry)) / 86400;
if( $days > $term ) {
echo '<span class="new">NEW</span>';
}
?>
基本はこれだけで OK！
$days = 3;の数字が表示される日数になるので、上記のコードでは「記事公開から 3日間マークが表示される」ようになります。
一週間表示させたい場合は$days = 7;として下さい。
上記のコードを追加した phpファイルをアップロードして「NEW」と表示されれば完成です。
NEW マークのカスタマイズ方法
前述のコードを追加するだけで NEW マークは表示されるようになりますが、ここからはカスタマイズ方法と併せて紹介します。
お使いのテーマに合わせてお試し下さい。
記事のタイトル横に並べて表示する
マークの表示位置：記事タイトル右側
マークの表示期間：7日間
▼ 完成イメージ
▼ index.php や archive.php などに追加
<h1><?php the_title(); ?><?php
$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>';
}
?></h1>
<?php the_title(); ?>がタイトルのテンプレートタグになるので、この後ろにコードを追加します。
▼ style.css に追加
span.newMark {
color: #ffffff; // フォント色
font-size: 10px; // フォントサイズ
background: #f35b69; // 背景色
position: relative;
top: -2px;
display: inline-block;
margin-left: 8px;
padding: 2px 5px;
}
アイキャッチ画像に重ねて表示する
マークの表示位置：アイキャッチ画像の右上に重ねて表示
マークの表示期間：7日間
▼ 完成イメージ
▼ index.php や archive.php などに追加
<ul class="archive">
<li>
<a href="<?php the_permalink() ?>">
<?php
$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>';
}
?>
<figure>
<?php if (has_post_thumbnail()) { the_post_thumbnail(); } ?>
</figure>
<h1 class="title"><?php the_title(); ?></h1>
</a>
</li>
</ul>
▼ style.css に追加
ul.archive li {
position: relative;
}
span.newMark {
color: #ffffff; // フォント色
font-size: 12px; // フォントサイズ
background: #f35b69; // 背景色
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 5px 8px;
z-index: 1;
}
左上に表示したいときはright: 0;を削除して、left: 0;を追加して下さい。