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

Luxeritas 3.15.0

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

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

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

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

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

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

モバイル用グローバルナビの選択画面

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

ハンバーガーメニュー

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

Font Awesome の描画が遅い

PWA 仕様変更対応

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

新 PWA 設定画面

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

Web アプリケーションのインストールボタン

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

PWA のインストールボタンウィジェット

配置すると ↓ こんな感じ

PWA のインストールボタン

その他の変更点など

PWA のオフラインページ選択の仕様変更

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

オフラインページの選択画面

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

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

スムーススクロールの設定

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

スムーススクロールの設定画面

スマホ表示時のぺージャー表示数削減

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

モバイル用ページャー

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

サムネイル管理画面でスラッグ表示

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

サムネイル管理画面

高速化 & セキュリティ向上用 htaccess

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

高速化・セキュリティ向上用 htaccess

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

改訂履歴

機能追加・機能拡張

  1. モバイル用グローバルナビの種類を2つ追加
  2. PWA の設定で「モバイル用グローバルナビにアプリケーションのインストールボタンを表示する」の項目を追加
  3. PWA の設定で「ウィジェットを使ってインストールボタンを配置する」の項目を追加
  4. ウィジェットに「#10 PWA インストールボタン」を追加
  5. 上記に合わせて「カスタマイズ -> CSS -> ウィジェット用の CSS」に「PWA インストールボタン」を追加
  6. 「カスタマイズ -> その他」に「スムーススクロールの設定」を追加
  7. 「管理機能 -> サムネイル管理」でサムネイルをスラッグを表示するようにした

仕様変更

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

その他

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

Luxeritas

Posted by るな