ブログ記事を読む際、記事の情報鮮度はとても気になりますよね。
最終更新日があるかないかで、ブログの信頼度は変わってきます。
最終更新日は表示しましょう(^^)v
PHPを直接編集する方法なので、少しハードルが高く感じるかもしれません。
ですが、重要ですので、チャレンジです(≧◇≦)
本記事の例は、WordPress(ワードプレス)のLION MEDIA（ライオン メディア）というテーマになります。
更新日の表示場所
更新日を表示させた場所は、公開日が表示されている場所の横です。
私が運営しているブログでは、4カ所に公開日があったので、その横に全て更新日を表示させました。
＜更新日の表示場所＞
①記事一覧ページ：アイキャッチ画像下
②記事ページ上部：タイトル下
③記事ページ下部：関連する記事のタイトル下
④サイドバー：ランキング上位記事のタイトル下
イメージ画像は以下になります。
①記事一覧ページ：アイキャッチ画像下
②記事ページ上部：タイトル下
③記事ページ下部：関連する記事のタイトル下
④サイドバー：ランキング上位記事のタイトル下
修正方法
更新日を表示させるには、PHPファイルを直接編集します。
修正前にバックアップを(´・ω・)
それでは、具体的修正方法に入っていきます。
WordPressのダッシュボード「外観」→「テーマエディター」
テーマエディターを表示させたら、
右側にある「編集するテーマを選択」→「LION MEDIA」
以下、更新日を掲載したい、4つの場所について。
それぞれ、修正方法をまとめていきます。
①記事一覧ページ：アイキャッチ画像下の更新日を表示
PHPファイルの「loop.php」をクリック。
「loop.php」(20行目あたり)
次の6〜8行目(クリーム色ライン)を追加。
<?php if (get_post_type($post->ID) == 'post') :
if (get_option('fit_post_time') != 'value2' || has_tag() == true ) : ?>
<ul class="dateList dateList-archive">
<?php if (get_option('fit_post_time') != 'value2' ) : ?>
<li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<li class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d') ?></li>
<?php endif; ?>
<?php endif; ?>
<?php if(has_tag()==true) : ?>
<li class="dateList__item icon-tag"><?php
if (get_option('fit_theme_tagNumber')){
$number = get_option('fit_theme_tagNumber');
}else{
$number = '5';
}
追加したコード7行目に「loop2」という記載があります。
「loop2」はこんなアイコン。
PHPファイルを直接変更すると、更新日は表示することができます。
しかし、アイコンは、画像ファイルをアップロードしなければ表示されません。
なので、ステップとしては、PHPファイルを変更する→アイコンをアップロードする流れになります。
(アイコンのアップロード方法は別記事で紹介します)
他の更新マークのアイコンが良ければ、こちらの「loop2」部分を、アップロードする別のアイコン名に変更してください。
以下、3か所のPHPファイルの修正も、本記事では「loop2」を使用しますが、同様になります。
②記事ページ上部：タイトル下の更新日を表示
PHPファイルの「個別投稿(single.php)」をクリック。
「個別投稿(single.php)」(50行目あたり)
次の6〜8行目(クリーム色ライン)を追加。
<!-- タイトル -->
<div class="singleTitle__heading">
<h1 class="heading heading-singleTitle u-txtShdw"><?php the_title(); ?></h1>
<ul class="dateList dateList-singleTitle">
<li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<li class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d') ?></li>
<?php endif; ?>
<li class="dateList__item icon-folder"><a class="hc<?php if (isset($cat_meta[$cat_id])) { echo esc_html($cat_meta[$cat_id]);} ?>" href="<?php echo $cat_link; ?>" rel="category"><?php echo $cat_name; ?></a></li>
<?php if(has_tag() == true) : ?><li class="dateList__item icon-tag"><?php the_tags(''); ?></li><?php endif; ?></ul>
③記事ページ下部：関連する記事のタイトル下の更新日を表示
PHPファイルの「個別投稿(single.php)」をクリック。
「個別投稿(single.php)」(360行目あたり)
次の19〜23行目(クリーム色ライン)を修正。
ここだけ、追加ではなく、修正になります。
<h3 class="related__title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php if (get_option('fit_post_time') != 'value2' ) : ?>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
<span class="icon-calendar"><?php the_time('Y.m.d'); ?> <li class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d') ?></li></span>
<?php else :?>
<span class="icon-calendar"><?php the_time('Y.m.d'); ?></span>
<?php endif; ?>
<?php endif; ?>
</h3>
<p class="related__contents"><?php echo mb_substr(get_the_excerpt(), 0, 75); ?>[…]</p>
</li>
<?php }
④サイドバー：ランキング上位記事のタイトル下の更新日を表示
PHPファイルの「テーマのための関数 (functions.php)」をクリック。
「テーマのための関数 (functions.php)」(5120行目あたり)
次の6行目(クリーム色ライン)を追加。
<?php endif; ?>
<h3 class="rankListWidget__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="dateList dateList-widget<?php if ( get_option('fit_post_eyecatch') == 'value2' ) : ?> dateList-noeye<?php endif; ?>">
<?php if(!empty($instance['time'])) :?>
<span class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></span>
<span class="dateList__item icon-loop2"><?php the_modified_date('Y.m.d'); ?></span>
<?php endif; ?>
<span class="dateList__item icon-folder"><?php the_category(' ');?></span>
</div>
</li>
お疲れ様でした(´▽｀)
これで、公開日と共に、更新日も表示できました。
いえ～い！
さらに「更新日だよ！」とアイコンの設定を行うと、さらに分かりやすいです。
アイコン設定の記事はこちら
》LIONMEDIAをカスタマイズして更新マークのアイコン追加する方法【WordPress】
それではこの辺で。
まったね！
