○年前といったような、相対的経過年を表示するyagoショートコードの使い方

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

以前、相対的経過時間を表示するagoショートコードを作成しました。

〇年前、〇ヶ月前といった相対的時間経過を表現するagoショートコードの使い方
〇年前、〇ヶ月前、〇週間前、○日前、といった感じの人間感覚的な相対的時間経過を表現するためのショートコードです。記事修正の手間を省けます。

ただこれは、相対的時間を表すショートコードだったため、○日前、○ヶ月前、○年前といった複数の単位があったため、単位変更はできませんでした。

けれど今回、agoショートコードの機能を「年」のみに絞ったyagoショートコードを作成したことにより、単位を自由に変更できるようになりました。

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

yagoショートコード

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

[yago from="日にち"]

例えばこんな使い方ができます。

あの日から26年が経ってしまった。

上記は以下のように記入しています。

あの日から[yago from="1998-05-18"]年が経ってしまった。

yagoは、デフォルトでは単位が入りません。ですので、自由な単位をつけて利用することが可能です。

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

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

過去の年を取得するショートコード

fromオプション

fromオプションは、相対年を表示したい元となる「日にち」を入力します。

入力例:from=”1993/12/11″

入力例:from=”1763-03-02″

入力例:from=”20140428″

デフォルト値:(空欄)

オプションが未入力の場合は、エラーメッセージが表示されます。

unitオプション

unitオプションは、表示する単位を入力します。

入力例:unit="年前"

入力例:unit="才"

入力例:unit=""(単位を表示させたくない場合)

デフォルト値:(空欄)

デフォルトで単位は表示されません。ですので、本文中に直接単位を入力した方が楽に使えるかと思います。

入力例

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

[yago from="1954-03-27"] 

[yago from="1999-12-31" unit="年"] 

[yago from="1966-11-22" unit=""] 

君が生まれてもう[yago from="2011-01-20"]年が経つ

表示例

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

  • 70
  • 25年
  • 58
  • 君が生まれてもう13年が経つ
タイトルと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);