”本日の記事投稿時点”のテキストに更新日を追加表示させるやり方

当ページの一部リンクにはプロモーションが含まれてます。
アイキャッチ画像

一度書いた記事を後日修正したり追加記事を書いたりする際、価格などの内容の一部が記事公開時点のそれと異なってる場合は往々にしてあるものです。

そんなときは”記事更新時点では◯◯”とか”記事執筆時点では◯◯”といった書き方をするでしょう。
その時サイト訪問者は通常は記事タイトルの下あたりに表示される記事更新日(もしくは記事公開日)を確認しに行ったりします。

この時、”記事更新時点”のあとに(インラインテキストで)半自動で記事更新日を表示できたら、訪問者がいちいち確認する手間を省けるというものです。

この親切設計はショートコードで対応できます。
そのやり方の一例をご紹介します。

ショートコードとは

ショートコードとは[sample]のように半角の『[』と『]』で囲まれたコードのこと。
このコードを編集画面に書き込むことで様々な処理が実行されます。
たとえば”目次を表示する”とか”問い合わせフォームを表示する”など。

ワードプレス(や各テーマ)にはあらかじめいくつか便利なショートコードが登録されているものです。
(テーマSWELLならツールバーの『</>』をクリックすると表示されます)

ただし登録されてないショートコードは利用不可なので、テーマを変更したりすると使えなくなる場合もあります。(ショートコード名がそのまま表示されてしまう)

ショートコードには2種類あります。
1つのコードで完結するタイプ→[sample]
開始タグと終了タグの2つが必要なタイプ→[sample]テキストなど[/sample]

こちらはブロックエディター汎用カスタマイズ記事です。

もくじ

更新日の自動表示

今回のやり方はChatGPTなどの生成AIを利用して排出されたコードに若干の手直しを加えてまとめたものです。

筆者のようなプログラム初心者でも割と簡単にできちゃうんですからホントに便利というか末恐ろしいというか。

使い勝手設置レベル
あれば便利オリジナルファィルやコードをいじるので
作業工程・やや難
カスタマイズレベル

使い方としては編集画面でたとえば更新日を表示させたい箇所に『koshinbi』というショートコードを埋め込むと、ブラウザ上では実際の更新日が表示されるというものです。
(※下の日付は自動反映ではなくあくまでサンプルの日付です)

本日の記事執筆時点[koshinbi]での価格は1,200円です。

本日の記事執筆時点(2050/8/10)での価格は1,200円です。

記事が更新された場合は記事更新日が、記事公開日しかない場合は記事公開日が表示されます。

これ以降の内容に関してはご利用の環境や使い方次第で「サイトが正常に表示されなくなった」などの障害が生じる可能性もありますため、ご利用に際しては自己責任にてお願い申し上げます。

またトラブルが生じても元の状態に戻せるようテーマのオリジナルファイルをカスタマイズする際は事前にバックアップ(コピー等)しておくことをおススメします。

特にfunctions.phpの編集は一文字でも間違えるとサイトが表示されなくなり、ワードプレスの管理画面も正常に表示されなくなります。
その場合はサーバー上のfunctions.phpをトラブル前の状態に戻すことでサイトも管理画面も正常に表示されるようになります。

なおテーマ内包のオリジナルファイルに加えた変更(カスタマイズデータ)はテーマのアップデートで元に戻ってしまいますため、カスタマイズ内容も併せてコピーするなどしておくといいでしょう。
(子テーマであればその心配はありません)

ショートコードの作成

記事更新日表示用のショートコードを登録するためにfunctions.phpに以下のコードをコピー&ペーストします。

//記事更新日を表示するショートコード(2025/5/8)
function koshinbi_shortcode() {
	global $post;
	$updated_date = get_the_modified_date('Y/n/j');
	return '<span class="inline-koshinbi">(' . esc_html($updated_date) . ')</span>';
}
add_shortcode('koshinbi', 'koshinbi_shortcode');
  • ショートコード名の『koshinbi』を別の名称に変更したい場合は上のコード3ヵ所(2行目&7行目)の『koshinbi』を別名に変更します。
  • 4行目の『Y/n/j』は『2025/4/1』という表記方なので、『2025年4月1日』という表示にしたい場合は『Y年n月j日』と修正します。
  • 5行目の『inline-koshinbi』というのは専用のクラス名です。(別のクラス名にしたい場合はここを変更します)
    たとえば更新日のテキストは若干文字サイズを小さくしたいなどという場合には「.inline-koshinbi」というクラス名で装飾要素を書き込み、追加CSSなどに保存します。

使い方は記事更新日を表示したい箇所に[koshinbi]と打ち込むだけです。
(Windowsの単語登録などに登録しておくと入力がラクです)

記事更新しても記事公開日を表示する方法

ワードプレスというのは記事を公開したあと数日後に誤字脱字等の軽微な修正をしただけでも、内部的には記事を更新(修正)したとして記事の更新日が記録されます。

そのためブラウザ上で記事公開日だけを表示しておく設定の場合、仮に1年後に誤字を見つけて修正したとすると[koshinbi]と書いてある場所は記事公開日ではなく1年後の記事更新日が表示されてしまい間違った情報が表示されてしまいます。

こういったトラブル防止用に、記事公開日を表示するショートコード『kokaibi』も用意してみました。

//記事公開日を表示するショートコード(2025/5/8)
function kokaibi_shortcode() {
	global $post;
	$published_date = get_the_date('Y/n/j');
	return '<span class="inline-kokaibi">(' . esc_html($published_date) . ')</span>';
}
add_shortcode('kokaibi', 'kokaibi_shortcode');

使い方としては記事公開日を表示させたい箇所に[kokaibi]というショートコードを埋め込むと、たとえ記事更新があったとしてもブラウザ上では常に記事公開日が表示されるというものです。

アイキャッチ画像

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA

もくじ