【Xeory Base】記事内に最終更新日を表示させる方法

「Xeory Base」のテーマでは、デフォルトで記事の投稿日を表示してくれるようになっています。

しかし情報のアップデートなどにより記事の内容をリライトしても、更新日は表示されません。
更新日が表示されていないと、場合によっては記事の日付だけで古い情報と認識させることもあるでしょう。

そこで今回は記事内に更新日を表示させる方法について解説していきます。




更新日を表示させる方法

今回の更新日の表示ですが、記事内に最終更新日を追加するものです。
カスタマイズイメージはこのような感じになります。

更新日は投稿日と日付が異なる場合のみ表示されるようになっていますので、更新がない場合は投稿日のみの表示となるようになっています。
それでは早速カスタマイズしていきましょう。

まずは変更場所を確認

今回は記事内に更新日を追加するので、投稿記事の表示に影響する「個別投稿(single.php)」を変更していきます。

①ワードプレス管理画面から「外観」>「テーマの編集」を選択。
②テーマファイルの中から「個別投稿(single.php)」を選択。

single.phpに移動したらこの中から下記のコードを探します。

<header class=”post-header”>
<ul class=”post-meta list-inline”>
<li class=”date updated” itemprop=”datePublished” datetime=”<?php the_time(‘c’);?>”><i class=”fa fa-clock-o”></i> <?php the_time(‘Y.m.d’);?></li>
</ul>
<h1 class=”post-title” itemprop=”headline”><?php the_title(); ?></h1>
<div class=”post-header-meta”>
<?php bzb_social_buttons();?>
</div>
</header>

ここが変更場所となるので実際に手を加えていきます。

コードの書き換え

先ほど確認した<header class=”post-header”>〜</header>までのコードを下記のコードに置き換えます。
※変更前はバックアップを取るようにして下さい。

<header class=”post-header”>
<ul class=”post-meta list-inline”>
<li class=”date updated” itemprop=”datePublished” datetime=”<?php the_time(‘c’);?>”><i class=”fa fa-clock-o”></i> 投稿:<?php the_time(‘Y.m.d’);?><?php if (get_the_modified_date(‘Y.n.j’) > get_the_time(‘Y.n.j’)) : ?> | <i class=”fa fa-clock-o”></i> 更新:<?php the_modified_date(‘Y.m.d’) ?><?php endif; ?></li>
</ul>
<h1 class=”post-title” itemprop=”headline”><?php the_title(); ?></h1>
<div class=”post-header-meta”>
<?php bzb_social_buttons();?>
</div>
</header>

コードの置き換えたら「ファイルを更新」ボタンをクリックして完了です。
これで更新のあった記事の最終更新日が表示されるようになりました。

表示の変更

今回記事の投稿日と更新日の表示させるカスタマイズを行いましたが、表示方法を変えたいという方のために表示の変更についてお伝えします。

名称の変更

「●投稿:〇〇更新:〇〇」という表示の名称を変えたい場合についてです。
下記のコードのオレンジになっている部分が対象の場所となります。

<header class=”post-header”>
<ul class=”post-meta list-inline”>
<li class=”date updated” itemprop=”datePublished” datetime=”<?php the_time(‘c’);?>”><i class=”fa fa-clock-o”></i> 投稿:<?php the_time(‘Y.m.d’);?><?php if (get_the_modified_date(‘Y.n.j’) > get_the_time(‘Y.n.j’)) : ?> <i class=”fa fa-clock-o”></i> 更新:<?php the_modified_date(‘Y.m.d’) ?><?php endif; ?></li>
</ul>
<h1 class=”post-title” itemprop=”headline”><?php the_title(); ?></h1>
<div class=”post-header-meta”>
<?php bzb_social_buttons();?>
</div>
</header>

この部分を好きな名称に変更することで日付の頭にくる部分の変更ができます。

日付の表示の変更

現在日付の表示は「〇〇◯〇.〇〇.〇〇」となっているため、「.」で区切られた日付表示となっています。
この部分の変更は下記のコードのオレンジになっている部分が対象の場所となります。

<header class=”post-header”>
<ul class=”post-meta list-inline”>
<li class=”date updated” itemprop=”datePublished” datetime=”<?php the_time(‘c’);?>”><i class=”fa fa-clock-o”></i> 投稿:<?php the_time(‘Y.m.d’);?><?php if (get_the_modified_date(‘Y.n.j’) > get_the_time(‘Y.n.j’)) : ?> | <i class=”fa fa-clock-o”></i> 更新:<?php the_modified_date(‘Y.m.d’) ?><?php endif; ?></li>
</ul>
<h1 class=”post-title” itemprop=”headline”><?php the_title(); ?></h1>
<div class=”post-header-meta”>
<?php bzb_social_buttons();?>
</div>
</header>

この「.」を変更することで表示が変更できます。

例)

●(‘Y/m/d’)→〇〇〇〇/〇〇/〇〇
●(‘Y-m-d’)→〇〇〇〇-〇〇-〇〇
●(‘Y年m月d日’)→〇〇〇〇年〇〇月〇〇日

今回は「更新日の表示」と「表示の変更」についてお伝えしました。
これは新しく更新した記事内の情報をより分かりやすく伝えるための手段となるので、ぜひチャレンジしてみて下さい。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA