〇年前、〇ヶ月前といった相対的時間経過を表現するagoショートコードの使い方

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

例えば、「2013/05/05」にあったことを、WordPress記事で「12年前」と書いたとします。

すると、今から1年後になると、時間経過により「13年前」と記事を修正する必要が出てくる場合があります。

もちろん、日付で書いても意味は同じなのですが、ニュアンスは変わってくるので、相対的時間経過で書きたいときはあると思います。けれど、修正するのは面倒くさい。

そんな時に利用すると便利なのが以下で紹介するagoショートコードです。

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

agoショートコード

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

[ago from="日にち"]

例えば、以下のような相対的経過時間を表現したいのであれば、

Googleが設立されてから27年が経つ。

以下のように記入します。

Googleが設立されてから[ago from="1998/09/04"]が経つ。

ビジュアルエディターから使う

ショートコードは、ビジュアルエディターのショートコードドロップダウンリストから雛型を取得することができます。

相対的時間経過ショートコードの雛形取得

雛形を取得後、fromオプションに日付形式を入力してください。

日にちを入力してからドロップダウンを選択すると、ショートコードが完成します。

日付を選択してから相対的経過時間取得ショートコードの選択

fromオプション

agoショートコードのオプションはfromだけです。

fromに「相対時間を表示させたい日にち」を記入してください。

入力例:from="1993/12/11"

入力例:from="1763-03-02"

入力例:from="20140428"

デフォルト値:(空欄)

fromが未入力の場合は、エラーメッセージが表示されます。
あくまで、作者基準の相対的時間経過を表現するものなので、キッチリ正確に表示するものではないのでご了承ください。

入力例

利用するための入力例はこんな感じ。

あなたは[ago from="2011/11/07"]間、毎日ブログを書き続けた。

ちょうど[ago from="1993-01-21"]前、この道を通った夜。昨日の事のように今はっきりと思い出す。

日本で気象観測が始まってから、[ago from="1883.3.1"]が経つ。

息子がアメリカに移住してから、もう[ago from="20000101"]にもなる。

[ago from="10 September 1995"]前のあの日に事件の真相がある。

岐阜県不破郡関ケ原町で、[ago from="1600/10/21"]前に天下分け目の決戦が開かれた。

今年は、西郷隆盛生誕[ago from="18280123"]、没後148年になる。

寝ログを運営しだしてから、もう[ago from="2014-01-01"]になる。

この記事は、[ago from="20180914"]前に書かれました。

ある程度の表示形式には対応していますが、明らかにおかしい結果が出る場合は、入力形式を変更してください。

表示例

入力例を実際に表示させると、こんな感じになります。

  • あなたは14年間、毎日ブログを書き続けた。
  • ちょうど33年前、この道を通った夜。昨日の事のように今はっきりと思い出す。
  • 日本で気象観測が始まってから、143年が経つ。
  • 息子がアメリカに移住してから、もう26年にもなる。
  • 30年前のあの日に事件の真相がある。
  • 岐阜県不破郡関ケ原町で、425年前に天下分け目の決戦が開かれた。
  • 今年は、西郷隆盛生誕198年、没後148年になる。
  • 寝ログを運営しだしてから、もう12年になる。
  • この記事は、7年前に書かれました。

まとめ

「2008年」と書くのと「18年前」と書くのでは、読み手の受け取り方が微妙ながらも変わってきます。

前者はその年にあった出来事を思い出す人が多いでしょうし、後者は自分の年齢を基準に過去の出来事を思い出す人が多いのではないかと思います。

どちらの表記が良い、悪いとかではなくて、適切に文章に使えればということで、作成してみました。

コメント テーマの質問はフォーラムへ

  1. 相対的な時間経過を表記できる機能が、ニュース記事の紹介やプロフィールなどで今年で何年めと言った表記するときに非常に役立っています。使う頻度も、想定より高く経過年数を自動計算してくれることが、これほどまでにありがたい機能であることを改めて感じています。

    さて、ここに書くべきかどうか迷ったのですが、今年で「**才」とか「〇〇歳」と言った「年齢」表記にも応用できたらいいなぁと思っています。おそらく単位表記だけの問題なのですぐに実装できると思い、こちらにて言及しました。

    よろしくご検討ください

タイトルと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);