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

はじめに

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

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

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

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

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

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

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

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

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

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

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

SVGアイコンの登録

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

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

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

「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」を開き、登録済のデータの最後に追加保存下さい。

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

ちなみにSVGアイコンのidはi-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で修正はできると思いますが、面倒臭いのでやってません。

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

気軽に足跡残してね！

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

https://t.co/s6Xtaaa2p6

「JetTheme」の日付の書式変更と更新日の追加方法について記事を書いて見ました。

日付を修正したい方は参考にご覧下さい。#JetTheme #Blogger

— heavy-peat (@AfterWork_Lab) September 29, 2021

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