vier

Let's be more curious.

「JetTheme」の日付の書式変更と更新日の追加方法

日付の書式変更と更新日

はじめに

この記事は「JetTheme」の日付の書式と更新日を追加するカスタマイズ方法の説明です。

デフォルトの表示に不満を持っている方は参考にご覧ください。

なお、上手く行かなかったとき元に戻す為に、変更前に必ずxmlファイルのバックアップを取り保存しておいて下さい。


日付の書式を変更する方法

デフォルトでは日付の書式が「日 月,年」となっていて「5 9月, 2021」のように表示されますが、あまり馴染みがないので、一般的に使用されている書式に変えたいと思います。

日付の書式は管理画面の設定を弄っても反映されないので、xmlファイルのコードを直接修正します。

日付の書式を2021-09-052021/09/0或いは2021年09月05日のように表示するには、xmlファイル内のd MMM, yyyyを検索し、yyyy-MM-ddyyyy/MM/dd或いはyyyy年MM月dd日に置換して下さい。


記事の更新日を追加する方法

「JetTheme」はSEO対応で構造化データのJSON-LDコードがxmlファイルに記述されてます。

この中でdata:post.lastUpdated.iso8601を定義しているにも関わらず、更新日は表示はされません。

将来のアップデートで記事の更新日が表示される可能性がありますが、いつになるか分からないので自力での修正方法を説明します。

SVGアイコンの登録

「JetTheme」には時計のSVGアイコンは用意されてますが、更新のSVGアイコンはありません。

まず、更新を示すのSVGアイコンを登録します。


当ブログでは「ICONSVG」のフリーSVGアイコンを使ってみました。

「ICONSVG」のサイトに行き、お好みのアイコンを選択しコードをコピーして下さい。

ICONSVG

必要なデータはpath要素なので、size,width,colorは特に気にする必要はありません。


当ブログで登録したSVGアイコンのデータは下記になります。

コード
<symbol id="i-rotate-left" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 2v6h6M2.66 15.57a10 10 0 1 0 .57-8.38"></path></symbol>

同じものを使用する方はこのデータをコピーし、「レイアウト」の「SVG icons」を開き、登録済のデータの最後に追加保存下さい。

SVG icons


viewBoxの書式はviewbox="x y width height"なので時計のアイコンと同じviewbox="0 0 24 24"に合わせました。

ちなみにSVGアイコンのidi-rotate-leftにしました。


コードの修正

変更前のコードを変更後のコードに入替えて下さい。投稿日と更新日が違う場合に更新日も表示されます。

コード
<!-- 記事の更新日表示 v2.8.2 -->

<!-- 変更前 1511行,1660行,1739行 -->
<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><b:eval expr='data:post.date format &quot;d MMM, yyyy&quot;'/></small

<!-- 変更後 1511行,1660行,1739行 -->
<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><b:eval expr='data:post.date format &quot;yyyy-MM-dd&quot;'/><b:if cond='data:post.date != data:post.lastUpdated'>&amp;nbsp;&amp;nbsp;<svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-rotate-left'/></svg><b:eval expr='data:post.lastUpdated format &quot;yyyy-MM-dd&quot;'/></b:if></small>


<!-- 変更前 1966行 -->
<div class='me-3'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><b:eval expr='data:post.date format &quot;d MMM, yyyy&quot;'/></div>

<!-- 変更後 1966行 -->
<div class='me-3'><svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-clock'/></svg><b:eval expr='data:post.date format &quot;yyyy-MM-dd&quot;'/><b:if cond='data:post.date != data:post.lastUpdated'>&amp;nbsp;&amp;nbsp;<svg aria-hidden='true' class='me-1 jt-icon'><use xlink:href='#i-rotate-left'/></svg><b:eval expr='data:post.lastUpdated format &quot;yyyy-MM-dd&quot;'/></b:if></div>

なお「JetTheme」のバージョンによっては、変更前の行番号はズレるので、検索して確認しながら置換して下さい。



まとめ

以上の変更で今まで使用していたQooQと同じように記事の投稿日と更新日を表示できるようになりました。

なお、投稿日が古いままだと検索順位が下がってしまうことがあります。記事をリライトした際は、公開日を自動で更新すると、検索順位が改善される場合があるので、お試し下さい。


お詫び

RELATED POSTとRECENT POSTの日付の書式は上記の方法では修正できません。JavaSciriptで修正はできると思いますが、面倒臭いのでやってません。

そもそも日付を表示する必要性が低いと思うので、気になる方は非表示にするのがベターと思います。😅


気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

それでは今回の記事はこれでおしまい。

Next Post Previous Post
14 Comments
  • アタル
    アタル 11/28/2021

    アタルです。 おはようございます。

    「月日」先頭ZERO無しの yyyy年M月d日 形式指定も有効でした!

    きっと、 yyyy-M-d と yyyy/M/d も大丈夫なはず。

    • あトん
      あトん 11/28/2021

      アタルさん、日付の書式変更について情報提供ありがとうございます。

      結城永人さんのブログで詳細な解説があり参考になりますよ。

      https://www.nagahitoyuki.com/2018/09/customize-bloggers-time-format-to-sort-year-month-date-and-day-of-the-week-of-the-post.html

    • アタル
      アタル 11/28/2021

      あトんさん、こんにちは。 情報ありがとうございます。

      結城さんは QooQ では関係無い「新テーマ」に関して詳しいですよね!


      今まで(QooQ)は「新テーマ」の機能が利用できないので熟読していませんでしたが、
      JetTheme はもちろん「新テーマ」の機能をふんだんに使っているはずなので 再読しないと...

      どうしても JavaScript を使いたくないって方は別として、
      JavaScript 関数呼び出しにすれば 「パラメータ指定」だけで和暦(邦歴)表示まで可能です。

      個人的には JavaScript にした方が XMLファイル のコードが読みやすくなり、メンテしやすいと思います。 今日、関数化する予定 だったりします(笑)

    • あトん
      あトん 11/28/2021

      アタルさん、コードのJavaScript化応援してます。

      もし可能なら、RECENT POSTS、RELATED POST、COMMENTの日付書式変更ができるものを公開して頂けると助かります。

    • アタル
      アタル 11/28/2021

      RECENT POSTS、RELATED POST は 外部 JavaScript みたいなので、
      直接 修正できないような気がします!
      iso形式の「投稿日付と更新日付」が取得できれば、どうとでもなるのに...
      それより、QooQのパーツを改良して自前で widget を実装した方が早いかもしれません。

      JavaScript 関数は再利用か ほぼコピーで済むはずなので、ブログ正式移行後 地道に頑張ってみますね。

      あと なぜか、うちのコメントは 2021年11月28日 13:59 などと表示されています!
      「設定」条件とは異なるようで、よくわかりません。

      「設定」は以下の通りなのに...
      フォーマット
      タイムゾーン
      (GMT+09:00) 日本標準時 – 東京
      日付ヘッダーの形式
      2021/11/28
      アーカイブ インデックスの日付形式
      11月 2021
      タイムスタンプの形式
      11月 28, 2021
      コメントのタイムスタンプの形式
      11月 28, 2021、7:14 午前

      以上です!

    • あトん
      あトん 11/28/2021

      アタルさん、ご回答ありがとうございます。

      テストサイトのコメントの日付表示は、分かりやすいので現状のままでOKなのでは、と思います。

      それでは。

  • アタル
    アタル 11/29/2021

    アタルです。 お早うございます!
    QooQカスタマイズはきちんと関数化していないサンプルが多いようですが、
    今回は きっちり 関数化しました!
    デフォルトのパラメータ指定だと、2021年5月21日(金) フォーマットで表示!

    JetThemeデフォルトの <data:post.date> と <data:post.lastUpdated> は
    Dateオブジェクト生成時にエラー("Invalid Date")となるため、
    <data:post.date.iso8601/> と <data:post.lastUpdated.iso8601/> を
    利用しています。
    (iso8601日付フォーマットでなくても、中身が 2021/11/28 や 2021-11-28 フォーマットなら利用可能)



    ==== 関数の呼び出しサンプル ===================
    <b:if cond='data:jwidget.allBylineItems.timestamp'>
    <small class='me-2'> <!--.me-2 for margin-right: 0.5rem-->
    <script>document.currentScript.parentNode.insertAdjacentHTML('beforeend', convDateFormat2('<data:post.date.iso8601/>', '<data:post.lastUpdated.iso8601/>'));</script>
    </small>
    </b:if>



    ==== 以下の関数は、</head> 直前に追加 ========
    <script type='text/javascript'>
    //<![CDATA[
    // 2021/11/28 by Ataruchi デフォルト 2021年5月21日(金) の表示形式
    // 引数が日付として無効な場合(Dateオブジェクト生成失敗)、"Invalid …

    • アタル
      アタル 11/29/2021

      ==== 以下の関数は、</head> 直前に追加 ========
      <script type='text/javascript'>
      //<![CDATA[
      // 2021/11/28 by Ataruchi デフォルト 2021年5月21日(金) の表示形式
      // 引数が日付として無効な場合(Dateオブジェクト生成失敗)、"Invalid Date"が返される(ブラウザ毎で違う可能性あり)
      // month : "2-digit", day : "2-digit", に変更すれば、月日に前ZERO付加
      // https://mac-excel-vba.blogspot.com/2021/05/display-qooq-list-lastUpdatedDay-toLocaleDateString.html

      const date_options = { //変換形式の指定パラメータ
      year : "numeric", //年の形式 (この行削除で年を非表示)
      month : "long", //月の形式
      day : "numeric", //日の形式
      weekday : "short" //曜日の形式 (この行削除で曜日非表示)
      };

      function convDateFormat(arg_date) {
      let ret_date = new Date("" + arg_date + "").toLocaleDateString("ja-jp", date_options);
      if (ret_date.toString() === "Invalid Date") {
      return "Invalid Date";
      } else {
      return ret_date;
      }
      }

      function convDateFormat2(pub_date, up_date) {
      let p_date = new Date("" + pub_date + "")…

    • アタル
      アタル 11/29/2021

      function convDateFormat2(pub_date, up_date) {
      let p_date = new Date("" + pub_date + "").toLocaleDateString("ja-jp", date_options);
      let u_date = new Date("" + up_date + "").toLocaleDateString("ja-jp", date_options);

      if ((p_date.toString() === "Invalid Date") || (u_date.toString() === "Invalid Date")) {
      return "Invalid Date";
      }

      //先頭の絵文字を「SVG文字列」と置き換えれば、表示されるはず?
      var ret_string = "✏️&nbsp;" + p_date + " "; // 末尾に漢字SPACE付加
      if (p_date !== u_date) { // 投稿日と更新日が異なる場合
      ret_string += "🔄&nbsp;" + u_date + " "; // 末尾に漢字SPACE付加
      }
      return ret_string;
      }

      //]]>
      </script>
      =================================================
      以上です

    • アタル
      アタル 11/29/2021

      文字数制限、厳しいな(泣き)

    • アタル
      アタル 11/29/2021

      1個だけ、変数定義に var が残ってました!
      var ret_string = 〜 はできれば、 let ret_string = 〜 に修正してください。

       私の記事も修正しました!

      highlight.js 利用で、インデントした見やすい「上記コード」を追記しました!
      ( JetTheme テンプレートと、QooQ テンプレート用の2つのサンプル )

    • アタル
      アタル 11/29/2021

      が〜ん、「aタグ」使えないんですね! リンクが無視されるようです。
      修正記事の URL は以下となります。
      インデントありの「 highlight.js 」表示で、QooQ用サンプルも追記しました。

      https://mac-excel-vba.blogspot.com/2021/05/display-qooq-list-lastUpdatedDay-toLocaleDateString.html

      何度も Reply して、ごめんなさい。

    • あトん
      あトん 11/29/2021

      アタルさん、日付関数の公開ありがとうございます。JavaScriptを使えばいろんな書式に変換できるのですね。

      勉強になりました。

      JetThemeのコメント欄って文字数制限があるんですね。
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      1234567890123456789012345678901234567890
      12345678901234567890123456…

    • あトん
      あトん 1/30/2022

      0050 678901234567890123456789012345678901234567890
      0100 678901234567890123456789012345678901234567890
      0150 678901234567890123456789012345678901234567890
      0200 678901234567890123456789012345678901234567890
      0250 678901234567890123456789012345678901234567890
      0300 678901234567890123456789012345678901234567890
      0350 678901234567890123456789012345678901234567890
      0400 678901234567890123456789012345678901234567890
      0450 678901234567890123456789012345678901234567890
      0500 678901234567890123456789012345678901234567890
      0550 678901234567890123456789012345678901234567890
      0600 678901234567890123456789012345678901234567890
      0650 678901234567890123456789012345678901234567890
      0700 678901234567890123456789012345678901234567890
      0750 678901234567890123456789012345678901234567890
      0800 678901234567890123456789012345678901234567890
      0850 678901234567890123456789012345678901234567890
      0900 678901234567890123456789012345678901234567890
      0950 678901234567890123456789012345678901234567890
      1000 67890123456789012345678901234567890123456789…

Please Enter Comments in Light mode
comment url