ブログに来てもらったときにまず見てもらいたいのが新着記事ですね。
記事タイトルの前に、一目で新着記事と分かるようなNEW!をつけたいな。
と思ったけど、ワープレスの設定画面ではこの機能はついていないので、自分でカスタマイズしたいと思います。
新着表示NEW!をつけたい場所
すべての記事一覧の記事タイトル前に新着「NEW!」を表示させます。
- トップページ
- アーカイブページ
- 記事本文ページ
新着記事に一定期間だけ「NEW!」を表示するカスタマイズの手順
- Step1PHPコードの編集
ここで新着表示の設定をする(投稿日取得、表示する日数)
- Step2CSSの編集
NEW!のデザインを整える
- Complete完成
プレビューで動作確認
特にPHPファイルは余計なスペースが一文字入るだけでサイトが真っ白になることがあるので慎重に操作しましょう。
新着記事の判別の仕方
一言に新着記事といっても投稿をしてからいつまでの記事にNEWをつけたいのか?などを判別するためにいくつかの方法があります。
- 時間で判別(投稿してから何日か)
- 件数で判別(投稿記事の数)
- 時間+件数(上記の組み合わせ)
時間で判別する
このうち今回は
- 時間で判別 する方法
でカスタマイズしてみることにします。
投稿してから3日以内の記事にNEW!をつけるためには?
新着記事に一定期間だけ「NEW!」を表示するコードを記述する場所
テーマ「Cocoon」の場合。
貼り付ける場所は「外観」→「テーマファイルエディター」→「テーマのための関数(functions.php)」
新着記事に一定期間だけ「NEW!」を表示するPHP
次のコードは、Cocoonで使われる the_title
フィルターを利用して新着記事に”NEW!”の表示を追加するものです。
//新着記事にNEW
add_filter('the_title', function($title, $id) {
// 表示期間3日
$days = 3;
if (get_post_type($id) == 'post') {
// 現在の時刻取得
$now = date_i18n('U');
// 投稿ページの投稿日時取得
$post_time = get_the_time('U',$id);
// NEW表示期間
$last = $now - ($days * 24 * 60 * 60);
if ($post_time > $last) {
$title = '<span class="new-txt">NEW!</span>' . $title;
}
}
return $title;
}, 20, 2);
コードの意味
新着記事に”NEW!”の表示を追加するためのコードについて説明します。
- Step1フィルターの登録
add_filter('the_title', function($title, $id) {
add_filter
関数を使って、the_title
フィルターに新しいフィルター関数を登録しています。これにより、記事のタイトルが表示される前に特定の処理を行うことができます。 - Step2表示期間の設定
// 表示期間3日 $days = 3;
days
変数には新着記事として表示する期間(ここでは3日)が設定されています。 - Step3記事のタイプの確認
if (get_post_type($id) == 'post') {
get_post_type
関数を使って、対象の投稿が “post” タイプかどうかを確認しています。”post” タイプは通常のブログ記事を指します。 - Step4時刻の取得
// 現在の時刻取得 $now = date_i18n('U'); // 投稿ページの投稿日時取得 $post_time = get_the_time('U',$id);
date_i18n
関数を使って現在の時刻を取得し、get_the_time
関数で投稿の投稿日時を取得しています。両方ともUNIXタイムスタンプ形式で取得されます。 - Step5新着記事の条件判定
// NEW表示期間 $last = $now - ($days * 24 * 60 * 60); if ($post_time > $last) { $title = '<span class="new-txt">NEW!</span>' . $title; }
投稿の投稿日時が新着記事の表示期間内であるかどうかを判定しています。もし条件が満たされれば、記事のタイトルに”<span class=”new-txt”>NEW!</span>”を追加します。
- Step6変更されたタイトルの返却
最終的に、変更されたタイトルを返しています。
これにより、新着記事が条件を満たす場合には”NEW!”の表示が付加され、ウェブサイトの訪問者に新着記事であることが分かりやすく示されます。
NEW!のデザインを整える
最後にCSSでデザインを整えます。
このCSSではNEW!(文字色:赤、背景色:なし)になります。
/* 新着記事のNEW!---------------------------------------------- */
.new-txt{
color: #ff0000;/*文字色*/
margin-right:5px;/*NEW!右側の余白*/
}
点滅させるには
点滅してより目立たせるときはこちらのCSSを追加してください。
/* 点滅 */
.new-txt {
animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
完成/新着記事に一定期間だけ「NEW!」が表示されます
はい、完成です。
投稿してから3日以内の記事タイトル前にNEW!がついていますね。
Comment