投稿・固定ページの「更新日」を表示するupdatedショートコードの使い方

ショートコード
この記事は約3分で読めます。

この記事の内容は、「2024/12/08」時点の情報に基づいて書きました。

といったような、単に記事の「更新日」を表示するだけのショートコードを追加しました。

とはいえ、以下のような用途に向いているかと思います。

  • 記事の更新日を本文中で明確にしたい場合
  • 記事の更新時点での最新情報ということを明記したい場合
  • 商品価格の時価を確認した日付を明記したい場合

といったような、「毎回記事を更新した際に記入し直すのが面倒な日付」などの自動更新に適しているかと思います。

ページキャッシュプラグイン等を利用している場合は、キャッシュが表示されて現時点での日時が出ない可能性がありますのでご了承ください。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

updatedショートコード

updatedショートコードの基本的な使い方はこんな感じです。

この記事は、[updated]に更新されました。

こんな感じで表示されます。

この記事は、2024/12/08に更新されました。

formatオプション

formatオプションを利用することで、日時フォーマットを指定して表示させることもできます。

formatに「日付と日時の書式」を記入してください。

入力例:format="Y-m-d H:i:s"

入力例:format="Y年m月"

デフォルト値:Y/m/d

formatオプションで入力する日付と日時の書式は、日付と時刻の書式を参照してください。the_date関数などで利用する書式と同じです。

使用例

主な使用例はこちら。

日時の表示例
この記事の内容は、[updated format="Y年m月d日"]時点での情報に基づいて書かれています。

実際の表示はこんな感じ。

この記事の内容は、2024年12月08日時点での情報に基づいて書かれています。
年月だけの表示例

年と月だけの表示をしたり。

価格は、[updated format="Y年m月"]時点での値段です。

実際の表示はこちら。

価格は、2024年12月時点での値段です。
時間まで表示する表示例

できるだけ速報性を出したい場合とかに時間までも指定できます。

この内容は、2024-12-08 15:29:49時点での情報に基づいた内容です。

実際の表示はこちら。

この内容は、2024-12-08 15:29:49時点での情報に基づいた内容です。

こんな感じで利用します。

updatedショートコードは、当然記事を更新する毎に表示時間が変わります。

なので、記事の更新日が変わっているのに内容が変わっていないと、熱心な読者からは「日付しか変わってないじゃん」と失望される恐れもあります。

そこらへんを留意して使用する必要があるかと思います。ご注意ください。

タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);