wordpressで古くなった記事に自動で警告文を表示させる方法

この記事は2016年4月12日に更新しました。
情報が古くなっている可能性があるのでご注意ください。

この記事の読了時間は約4分です。

wordpressで古くなった記事タイトル前後に、警告文を付けたい。

こんなやつ。

注意書きがあった方が親切。

記事の通りにやっても上手くいかないという読者の混乱を避けることができる。

その実装方法を調べました。

目次(クリックでワープ)

1 更新日から1年経過した記事に表示させる

更新日から1年経過した記事に表示させる

更新日を基準にする

投稿日ではなく更新日を基準にする。

投稿日から1年たっていても、途中更新すれば、その記事は古くないから。

更新日から1年たった記事に表示させたい。

「こたらずのーと」で紹介されていたコード一部改変

詳しい説明は→WordPressで情報が古くなっている過去記事に自動で注意書きを表示させる方法で。

<?php
$days = (date('U') - get_the_modified_date('U'))/(24*60*60);
$term = 365;
if ($days >= $term ) {
?>
<div class="oneyearsago">
<p>この記事は<span class="b"><?php modified_date('Y年n月j日') ?></span>に更新しました。
情報が古くなっている可能性があるのでご注意ください。</p>
</div>
<?php } ?>

<?php

$days = (date('U') - get_the_modified_date('U'))/(24*60*60);

$term = 365;

if ($days >= $term ) {

<p>この記事は<span class="b"><?php modified_date('Y年n月j日') ?></span>に更新しました。

情報が古くなっている可能性があるのでご注意ください。</p>

</div>

<?php } ?>

このコード（①）を記事本文の表示させたい所にコピペする。

貼り付ける場所はentry-body.php

僕は本文のタイトル、アイキャッチ画像の下に警告文を表示させたかったので子テーマsimplicity child「entry-body.php」内の<div id=”the-content” class=”entry-content”>上に貼り付けた。

ここに①のコードを貼り付ける。

<div id="the-content" class="entry-content">
  <?php //記事本文の表示
    the_content( get_theme_text_read_more() ); //デフォルト：続きを読む?>
  </div>

ここに①のコードを貼り付ける。

<?php //記事本文の表示

the_content( get_theme_text_read_more() ); //デフォルト：続きを読む?>

</div>

※使用しているテンプレート、表示したい場所によってどこに貼ればいいかが変わる。

<?php the_content(); ?>の直前やsingle.php内などが候補か。

子テーマにentry-body.phpがない場合

親テーマのentry-body.phpに書き込むと、テーマを更新した時に適用されなくなる。

なので子テーマにentry-body.phpファイルをFFFTPなどを使ってコピペして、そのファイルに①のコードを追加する必要がある。

格納されている場所

/wordpressをアップロードした場所/public_html/wp-content/themes/simplicity

にentry-body.phpがあるのでコピーする（できなければダウンロード）。

アップロードする場所

/wordpressをアップロードした場所/public_html/wp-content/themes/simplicity-child

にコピー（ダウンロード）したentry-body.phpをアップロードする。

すると、外観＞テーマの編集＞simplicity childを選択すればentry-body.phpが表示されているのでクリックすればOK

警告文のCSS

このままでは文字が表示されるだけで、背景や空白の設定などが何も設定されていないので、CSSを書く。

子テーマのstyle.cssに以下のようなコードを書く。

.oneyearsago p{
        font-size: 16px;
	text-align: center;
	background-color: #f3f3f3;
	border: 1px solid #ccc;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 10px;
}