プログラミング等の技術的な情報の鮮度はとても重要で、少しバージョンが古いとエラーとなる事がしばしばあります。
このブログも個人ブログとはいえ、技術的な情報を載せているので、鮮度には気をつけているつもりです。
とはいえ、記事公開当時は最新の情報でも、時間が経てばその情報は古くなってしまいます。
そのような場合に読者にわかるように、「この記事は公開から少し時間が経っています」という注意書きを表示したく、カスタマイズしたので、シェアします。
やりたい事
例えば僕がよく利用するQiitaでは、記事の最終更新日が古い場合、以下のような注意書きが表示されます。
Qiitaより画像引用
こんな感じに記事の最終更新日と現在日付を比較して、指定期間が経過している場合、注意書きを表示したいと思います。
カスタマイズ方法
PHPの修正
個別投稿(single.php)
※僕が使用しているテーマ「LION MEDIA」の場合single.phpですが、テーマによってはファイル名が異なる可能性があります。
以下のように、記事本文の内容をthe_content()で表示している部分があります。
<section class="content"> <?php the_content(); ?> </section>
上記、記事本文表示処理部分のthe_content()の前に注意書き表示処理を追加します。
<section class="content"> <?php if (time() - get_the_modified_time('U') > 60*60*24*90 ) { ?> <div class="released-alert">最終更新日から90日以上経過しています。</div> <?php } ?> <?php the_content(); ?> </section>
CSSの修正
style.css
上記で修正したPHPで、注意書き表示エリアにreleased-alertクラスを付与しています。ここでは、released-alertクラスに対してスタイルシートを設定します。
といっても、CSSに関しては各々の好みで問題無いかと思います。
参考までに今回僕が適用したCSSは以下の通りです。
.released-alert { text-align: center; background-color: #ffff80; width: 100%; margin: auto; padding: 6px 0px; border: 1px dotted #a2a2a2; }
結果
上記カスタマイズを行い、当ブログの少し古めの記事を確認します。
例えば以下の記事。
ちゃんと注意書きが表示されていました。