【WordPress】新規記事に指定の期間「New」をつける方法
ごきげんよう。
綾崎です。
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で回転させています。
Pick up
Plofile
Categories
Key words
ともえの手
読書記録
遠征
声優
C103
温泉
ライブ
旅ログ
C102
イラストメイキング
お品書き
CUE!
コミケ
温むす
イベント
同人誌
イベントレポート
温むすbirthdayイラスト
イラスト
温泉むすめ
ads
New articles
- エイプリルフールってやつ
- 【定期報告#27】1月の振り返り！！
- 【定期報告#26】あけましておめでとうございます
- C103 お品書き
- お釣り入れの”最適解”！？ iPhoneの箱でバズったので色々まとめてみた
Wish list
LINE stamp
