大規模アップデート。モバイル用グローバルナビの種類追加、PWA の仕様変更対応などなど Luxeritas 3.15.0

2021年4月20日

事情（感覚過敏、呼吸器系の問題など）によりマスクができない方もいるんで、そーいう人のことは責めないであげてくださいね。

で、、、Luxeritas Theme 3.15.0 をリリース。

PWA の仕様変更に対応させたり、モバイル用グローバルナビの種類を増やしたり、Lighthouse の監査で、さらに点数を上げるための方策を盛り込んだり。

今回は、比較的大規模なアップデート内容になってます。

モバイル用グローバルナビ

モバイル用グローバルナビで選択できる種類を２つ追加。

俗に言うハンバーガーメニューで表示できるようにしました。

これらを追加した理由としては、従来の「豪華バージョン」だと、Font Awesome の読み込みが遅すぎて、CLS（Cumulative Layout Shift）が低下するから。。。Font Awesome 5 の遅さはどーにもならん。

Chrome 67 で PWA のインストールボタンを任意表示できるようになったり、Chrome 76 以降ではミニバーの表示を制御できるようになったりとか、いろいろ仕様が変わってきたので、Luxeritas のサービスワーカーの挙動等も、いろいろ変更しました。

とりあえず見た目で分かりやすい部分としては、モバイル表示時にはグローバルナビの部分にインストールボタンを表示できるように機能を追加しました。

さらに、PWA インストールボタンを任意に配置できるウィジェットも追加。

配置すると ↓ こんな感じ

PWA で start_url と offline_url がイコール関係だとオフラインページが正しく動作しないってことが判明したので、ひとまず PWA のオフラインページで「トップページ」は選択できないようにしました。

これを有効化してる方は、トップページとは別にオフライン用の固定ページを作って設定しなおしてください。

※ ちなみに Luxeritas の公式ページでは、トップページのコピーページを作って、canonical URL をトップページの URL に設定するなどしてます。

「カスタマイズ -> その他」の項目に「スムーススクロール」の設定項目を追加しました。

スマホで表示した際に、ぺージャーで表示されるページ数を２ページ分削減しました。

理由：Lighthouse の監査でボタンが小さいという理由で１点だけ減点されちゃうからｗ

サムネイルを functions.php 等で利用しやすくするためにサムネイル管理画面で各サムネイルのスラッグを表示するようにしました。

高速化用 htaccess にセキュリティの向上用の記述も追加しました。

その他の変更点は下記の改訂履歴のとおり。

機能追加・機能拡張

仕様変更

PWA の「オフラインページ」で「トップページ」は選択できないように変更（スタートページとオフラインページがイコール関係だとオフラインが正しく動作しないため）
PWA の「モバイルだけで有効化」を廃止
Intersection Observer で「各種サムネイル画像の Lazy Load 有効化」と「投稿コンテンツの Lazy Load 有効化」の両方が有効化されてる場合に、投稿コンテンツ内にサムネイルが使われてたら、その箇所については片方だけ処理するようにした(重複回避)
モバイル表示時にページャーに表示するページ数を削減（ボタンが小さくなりすぎるため）

その他

高速化用 htaccess にセキュリティ向上策の内容を追加
alt 属性が設定されてない画像がアーカイブ系ページや関連記事・新着記事などサムネイルを表示する場面で使われた場合、alt 属性や aria-label 属性にランダムに「それらしい」値を入れるようにした（軽い SEO 向上策だけど、できればユーザーにちゃんと alt 属性を設定してもらいたい）