Luxeritas 3.7.5 リリース
Luxeritas Theme 3.7.5 をリリースしました。
ブロックエディタの Luxeritas Blocks に「スクロールブロック」を追加。その他、不具合修正などなど。
機能追加分の「スクロールブロック」に関しては、開発者ブログの記事で簡単な解説とサンプルを載せておきましたので、そちらを参照してください。
改訂履歴
機能追加・機能拡張
- ブロックエディタに「スクロールブロック」を追加
仕様変更
- AMP で画像に対して layout="responsive" 指定するのやめた (Amazon アソシエイトの画像とか悲惨な状態になるから・・・)
不具合修正
- トップページを固定ページに設定しており、且つ PWA のスタートページをトップページに設定してる場合、PWA のスタートページが設定した固定ページではなくランダムな投稿ページになっちゃうことがある不具合修正
- 管理者でログインした状態で Google reCAPTCHA v3 が有効になってると、コンソールにエラーメッセージが出ちゃうので修正(動作的には何の問題もないけど気持ち悪いから直した)
- AMP のサイトマップページが色んな意味で見た目が崩れてたので修正(AMP 実装初期の頃からの不具合)
その他
- グローバルナビの動作改善(たぶん)
- AMP ページで一部不要な CSS が読み込まれちゃってたので読み込まないようにした
- 全文表示にしてるアーカイブページだと、投稿内の LazyLoad が効かないので全文表示でも LazyLoad できるようにした
- WP 5.3 から wp.editor が非推奨になったので、wp.blockEditor が使えない環境(古いバージョンの WP とか Gutenberg プラグイン)だけ wp.editor を使用して、それ以外では wp.blockEditor を使うようにした
ディスカッション
コメント一覧
こんにちは、Sanjiparkです。
質問です。
スマホで見た場合、TOPページはないですが、記事ページのヘッダーなんですけど、ヘッダーの画像の上に追加ヘッダー「ディスクリプション」文字が反映して、ものすごくじゃまなんですけど、どうやって消すことができますか?
ちなみにパソコン画面の場合は、何も映ってません。
どこ探しても、スマホ用の設定が見つからないので分かりません。
お忙しいところよろしくお願いします。
sanji さん。
sanji さんのサイトでは </head> タグの直前に説明文が挿入されていて、それが表示されているのが原因ですが、Luxeritas でその位置に挿入されるのは
・子テーマ編集の「Head タグ」に書いた内容
・投稿ページの「追加ヘッダー」に書いた内容
しかありません。
これらに何か余計なものを記述していないか確認してみてください。
お忙しい中、返答ありがとうございます。
解決しました。
説明変更欄に、タイトルを書いて、追加ヘッダーにメタディスクリプションを書いてました。
タイトル欄は、他のワードプレスのテンプレートどと違って、説明変更欄のところがタイトルと勘違いして作成してました汗
この「Luxeritas 」では、タイトルは一番記事上に書けばそれでいいのですね。
他のテンプレートは、上も下も書いてたので、その癖が出てました。
お騒がせしてすみません。
また何かありましたらよろしくお願いします。
助かりました!
この「Luxeritas 」もホント可愛くてお気に入りです!
ありがとうございました!
https://took.jp
でエンジニアの階段というブログをやっています。
この度、stingerというテーマからこちらのluxeritasに切り替えました。
テーマのバージョンは、親:ver3.7.6.1と子:ver3.0.0を使用しています。
移行後、カスタマイズなどで変更を加えようとすると以下のようなメッセージが出てきます。
【問題のメッセージ】
ファイルを作成・保存できる権限がありません。
以下のファイルもしくはディレクトリの所有者およびパーミッションを確認してください。
/
一応、変更内容自体は保存がされているらしいのですが、AMPやPWAへの対応などが設定をしても反映されません。
(AMPの確認は、こちらを使用しました。https://search.google.com/test/amp?hl=ja)
おそらく、上記のエラーが原因で対応ができていないと思うのですが、解決方法などをご存じでしたら、ご教授いただきたいです。
また、
wordpressのバージョンは、ver5.3.2
PHPバージョンは、var7.3.5
を使用しているため、テーマの導入などには問題ないと思います。
こちらで試してみたことですが、
・luxeritasの親テーマを3.7.7に変更
・wordpressの再インストール
・WAFの無効化
・フォルダのパーミッション、所有者の確認
をしてみましたが、解決しませんでした。
たけさん。
AMP に関しては、ちゃんと動作してるし、テストも通ってますよ。
PWA の方は / ってことはルートに書き込み権限が無いのが原因ですね。PWA はルートにファイルが無いと動かないので、ルートにファイル作成してますが、今後、ファイル作らなくても動作するようにしたいとは思ってるんですよねぇ。
ひとまず現状での対策としては、どうしても / に書き込み権限を与えることができないのであれば、/ に「luxe-manifest.json」と「luxe-serviceworker.js」っていう名前の空ファイル作って書き込み権限与えてみてください。
その後、Luxeritas のカスマイズ画面で、何かしら「変更を保存」ボタン押せば、ファイルが作られると思います(たぶん)。
るな様
ご連絡ありがとうございます。
AMPについては、トップページを調査していたために、表示されなかったようです。
記事の投稿ページは、問題ありませんでした。
PWAについては、ルートへの書き込み権限を与えられず、指定されたファイルの生成も行えなかったため、テーマの一部を書き換え、「/took.jp/」に書き込むように指定したところ、問題が解決できました。
https://thk.kanzae.net/wp/settings/pwa/t5880/
の記事を参考にしたところ、一応動作はしているようですが、iPhoneからは確認ができませんでした。
そのため、PWAへの対応は一旦、諦めようかと考えています。
一時的な問題解決ではありますが、現在技術ブログを書いていますので、一時的な対処法として今回のことを記事にしようと思うのですが、問題ないでしょうか。
たけさん。
前回のたけさんのコメントを受けて、わざわざ今朝リリースした ver3.78 に対策を入れたんですが?
まず、そちらのリリース内容から確認していただけませんか。
絵文字ボタンのブロックエディタ移植など、その他いろいろ大幅改善 Luxeritas 3.7.8
ちなみに、iPhone の PWA に関しては、↓ この辺を参考にしてください。
参考:
https://www.suzukikenichi.com/blog/three-problems-pwa-has-to-overcome/
https://webtan.impress.co.jp/e/2018/04/03/28862
それと、たけさんのサイトを見る限り、WP Multibyte Patch のプラグイン、停止か削除してませんか?
WP Multibyte Patch 無しで、日本語ファイル名の画像とかアップすると、スマホじゃたぶん表示されないし、アイコン画像とかも PWA に限らず表示されないと思いますよ。
WP Multibyte Patch 有効化して、日本語ファイル名の画像は、全部アップロードし直さないとダメです。WordPress で日本語ファイル名を扱うなら WP Multibyte Patch 停止したらアカンです。
るな 様
ご返信ありがとうございます。
ライブプレビューの画面を使用せずに、AMP用ではないヘッダー下ウィジェットに設定すると表示できました。
ライブプレビュー画面からだとAMP用のヘッダー下ウィジェットとAMP用ではないヘッダー下ウィジェットの区別がなかったので、おそらく「1. AMP 用のヘッダー下ウィジェットに入れてないか?」が原因だったようです。
ご多忙な中ご教授いただき、ありがとうございました。
先程は、場違いなところに、質問して誠に申し訳ございませんでした。再度質問させていただきます。
速くて使いやすいテーマをありがとうございます。ルクセリタス一筋です。
早速ですが、404 Not Found メッセージをアップするにはどうしたら良いでしょうか。
当方、親テーマ:バージョン: 3.7.5.1、子テーマ:バージョン: 3.0.0を使っています。
以前のバージョンでは、「カスタム → その他」で固定ページを選べるようでした。
現在のバージョンでは、どうすればよろしいでしょうか?
お忙しいところすみません。よろしくお願いいたします。
noboru さん。
実装当時から何も変わってませんよ?
「カスタマイズ -> その他」から設定できます。
参考:実装当時のブログ記事
るなさん、早速のお返事、ありがとうございます!
> 「カスタマイズ -> その他」から設定できます。
そうなんですね。現状の管理画面はこのようになっています。
https://photos.app.goo.gl/pycxz8htg59Pcbie6
再インストールでしょうか?
noboru さん。
固定ページが1個もない場合は、そーいう表示になります。
るなさん、早速のお返事ありがとうございます!
固定ページ公開しましたら、ちゃんと選択メニューが出てきました。
私の読解力不足で、お手数をおかけしてしまいました。
お答えいただき、本当に助かりました。ありがとうございます!!
るな 様
ご返信ありがとうございます。
ウイジェット領域は「ヘッダー下ウイジェット」です。
何卒よろしくお願いいたします。
MIYA さん。
ひとまず、以下を確認していただけますでしょうか。
1. AMP 用のヘッダー下ウィジェットに入れてないか?
2. カルーセルの設定で「このウィジェットを表示するページ」にチェックは付いているか?
3. 「Luxeritas -> 管理機能 -> ウィジェット管理」で非表示にするウィジェットにチェックは付いてないか?
るな様
ブログを開設してからずっとテーマを使わせていただいております
かつひでと申します
自分のサイトをLighthouseでチェックしたところ
Progressive Web Appの部分が「 – 」になり
赤い三角のマークの部分に
Current page does not respond with a 200 when offline
start_url does not respond with a 200 when offlineThe start_url did respond, but not via a service worker.
Does not register a service worker that controls page and start_url
という3つのエラー?が表示されるのですが、
PWAに完全対応させるにはどのような方法がありますでしょうか?
ちなみに上の問題とは関係ないと思いますが
Warnings: `apple-touch-icon-precomposed` is out of date; `apple-touch-icon` is preferred.
という警告も下のほうに表示されていました
お手数をおかけしますが、どうぞよろしくお願いいたします。
かつひでさん。
こちらの質問内容と同じです。
LightHouse の初期設定では計測のたびにキャッシュクリアする設定になってます。なので、最初の一発目のアクセスはキャッシュされてないから「オフラインできてない」って意味です。
「Clear storage」のチェックを外して、キャッシュされてる状態で計測すればオールグリーンになります。
つまり、何もしなくても完全対応してるってことです。
apple-touch-icon に関しては、気になるようであれば、luxeritas/inc/load-header.php 内にある「apple-touch-icon-precomposed」を書き換えればいいです。
るな先生
いつもいつもお世話になっております。
ご報告です。
ブログカード上の画像(サムネイル画像とfavicon)、Lazy Loadが効いていないように見えます。
LazyLoadの設定項目(各種サムネイル画像、 投稿コンテンツ、サイドバー、フッター、Gravatar)は当然ながらすべてONですが、だめのようです。
るな様のサイトでもブログカード上の画像はLazy Loadが効いていないようでしたので、ご報告申し上げます。
※当方PHP、nginx、WordPress、Luxeritasのバージョンはすべて最新です。
追記
コメント欄の「次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。」にチェックを入れないと、「Sorry, your request cannot be accepted.」とか「認証が無効です」などとエラーが出て書き込みが出来ない件も発見しました
んにゃんにゃさん。
うーん。ブログカードの画像は「サムネイル」って扱いになってなくて、且つデータベースの wp_posts 内にも直接書かれてるわけじゃないから「投稿」という扱いにもなってないですね。
とりあえず、次のバージョンで「サムネイル」って扱いで、LazyLoad できるようにしときます。
んにゃんにゃさん。
当方で、未ログイン状態でコメントテストしてみたけど。問題なくコメントできますね。
「認証が無効です」っていう文言が出るパターンは Google reCAPTCHA v3 の設定間違いか、Google reCAPTCHA v3 で信用スコア 0.5 を下回った場合のみ出るんで、んにゃんにゃさんのコメントがスコア 0.5 を下回ったけど「次回の~」にチェックを付けたら 0.5 を上回ったってことになりますね。
Google reCAPTCHA v3 は人間がコメントしても、たまに 0.1 とかいうスコアが出ることがあります(閲覧者のサイト内での行動パターンをスコアとして算出してるらしい、人間のコメントの大半は 0.9 になる)。
おおよそ分かってるのは、サイト内をほとんど読まずにあっちこっち、やたらページ遷移繰り返したりするとスコアが下がるってこと。
スコア判定 0.5 ってのは Google さんのオススメ値だけど、0.3 くらいに下げてみましょうか?
ちなみに、「Sorry, your request cannot be accepted.」は Luxeritas 内にはそーいうメッセージは無いので、おそらく IP Geo Block によるゼロディ攻撃遮断。
— 追記 —
アクセス解析で、おそらく、んにゃんにゃさんであろうと思われるアクセスログ見たけど、数秒単位でやたらページ遷移してますね。
これが原因でスコアが下がってますね。
んにゃんにゃさん。
Google reCAPTCHA v3 の信用スコアをログに保存するようにしてみた。
んにゃんにゃさんが次にコメントしたら(認証で弾かれても)、んにゃんにゃさんのスコアが分かると思う。
るな先生
LazyLoadの件、ありがとうございます!!
PageSpeed Insightsで、ブログカードの画像が「オフスクリーン画像の遅延読み込み」の項目で引っかかって減点されていたので、助かります。
>「アクセス解析で、おそらく、んにゃんにゃさんであろうと思われるアクセスログ見たけど、数秒単位でやたらページ遷移してますね。」
→ブログカードがLazyLoadされないってのが仕様なのがバグなのか私の環境のせいなのか判定するために、各ページをまわったせいですかね、恐縮です・・
PC(nuro光回線)で何度か試ししても「Sorry, your request cannot be accepted.」が出たので、iPhone(au回線)から試したら「認証が無効です」が出て、チェックを入れてみたらコメントできた次第です。
先ほど、再度iPhoneから試してみたら「Google reCAPTCHA : あなたはボットとして判断されたため、認証できませんでした。」と異なるメッセージも出ました。
トータル50回くらい書き込みトライして申し訳ありません。
諸々ありがとうございます!
んにゃんにゃさん。
めちゃくちゃ大量にコメントされて訳分からんので、とりあえず一番最後のコメントだけ承認。
異なるメッセージってのは、んにゃんにゃさんが reCAPTCHA で認証されてないってことに気づいてないようだったので、文言を分かりやすく変更したんです。
成功時のスコアは 0.9、失敗は 0.1 ですね。
あまりにも連続コメントで reCAPTCHA の認証サーバーへの接続に失敗するパターンもありました(いったん認証に失敗してブラウザの更新ボタンを押した場合は、ほとんどこれになる)。
この場合も同じメッセージが出ちゃうので、この場合の文言も以下のように変更します。
「Google reCAPTCHA : 認証サーバーへの接続に失敗しました。しばらくしてからもう一度お試しください。」
閾値は 0.5 に戻しました。ログ取りも停止。
— 追記 —
んにゃんにゃさんの NURO 光で「Sorry, your request cannot be accepted.」が出る理由は、んにゃんにゃさんの回線が何故か「国:ドイツ」ってことになってるからですね。
当方、IP Geo Block で日本以外からはコメント拒否してるんで。
本当に申し訳ありません、、
どうにも書き込み出来なくてコメント諦めていました。
nuro光ドイツ判定の件は、nuro光あるあるのトラブルです。nuro光というよりGeoIPの問題ですか。
参考: https://fukuoka-internet.com/hikari/nuro_ip_address/
アップデート、誠にありがとうございます!
るな 様
初めまして。MIYAと申します。
先日よりまとめサイトを作成するためにLuxeritasを使用させていただいております。
無料で非常に高機能のテーマを使用させていただき、大変感謝しております。
ご多忙な中大変恐縮なのですが、1点質問させていただきたく思います。
ウィジェットの「#2 カルーセルスライダー」が表示されません。
親テーマ・子テーマともに最新のバージョンを適用させていただいており、
テーマファイルへの書き換えは一切行っておりません。
表示されない原因として、どのような点がございますでしょうか。
お手数をおかけいたしますが、何卒よろしくお願いいたします。
MIYA さん。
まず、どこのウィジェット領域に入れてるのかを教えてください。
何度もすみません。自分のミスに気付いたので…
>> 1. 全ての HTTP リクエストを HTTPS にリダイレクトするようにしてください。
WordPressから初期化していたのでpluginの「SAKURA RS WP SSL」を設定していなかったのが原因だったのだと思います。
>> 2. Manifest には 192px と 512px の PNG アイコンを設定してください。
>> 2. に関しては jpg アイコンを png に変更すれば解決します。
>> また、困ったことに、ファイルをアップロードするとpng画像がjpeg画像として認識されます。
色々調べてみたのですが、どうやら「EWWW Image Optimizer」を入れたことが問題だったようです。
参考にしたURLです ⇒ https://easy-wordpress.work/wordpress/png-becomes-jpg/#reason
縦長のpng画像のみがjpgに変換されてしまうというバグ(仕様?)のようで、勝手にjpegに変換されていたようです。
ご返信ありがとうございます。
>> まうさんが使用していたプラグインのスクリプトが、まうさんのブラウザ内でキャッシュされて、双方混在しているのが promise エラーになってると考えてほぼ間違いないです。
キャッシュが影響するかもしれない、ということは『Luxeritas Theme』のQ&Aから理解していたつもりだったのですが、確認不足で1時間以内のキャッシュのみ削除されていたようです。加えて、iphone端末のChromeのキャッシュクリアはしていましたが、iOSはSafariから『ホーム画面に追加』をすることを忘れていました。なので、Safariのキャッシュもクリアすることを忘れていました。大変申し訳ございません
>> 1. 全ての HTTP リクエストを HTTPS にリダイレクトするようにしてください。
.htaccessをwordpress内のトップに作成し、以下の記述をしました。
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
パーミッションは604にしました。これでリダイレクト出来ていますでしょうか?
一般設定のWordpressアドレスとサイトアドレスはhttps://~から始まるようにしている状態です。
>> 2. Manifest には 192px と 512px の PNG アイコンを設定してください。
>> 2. に関しては jpg アイコンを png に変更すれば解決します。
Manifestの192pxと、512pxの画像はどこから設定されいるのでしょうか?自動でluxe-manifest.jsonに画像が入力されていたので、サイトのファビコンが192px,512pxに使われているのですか?
また、困ったことに、ファイルをアップロードするとpng画像がjpeg画像として認識されます。拡張子だけpngでバイナリがJPEGなのかと思い、判別ツールで確認しましたがpngのようでした。luxe-manifest.jsonには、画像ファイル名の絶対パス-1.jpg、type:image\/jpegのような形になっていました。
現在も、Safari,Chrome(PC),Chrome(iphone)のキャッシュは削除しましたが、Safariからの『ホーム画面に追加』で追加されたアイコンからアクセスをかけても全画面になっていない状態です。
まうさん。
> パーミッションは604にしました。これでリダイレクト出来ていますでしょうか?
>
当方で確認した限りでは、リダイレクトされてます。
ていうか、http://chocotto.sumomo.ne.jp/ でアクセスして https://chocotto.sumomo.ne.jp/ にリダイレクトされれば良いだけなので、まうさんの方で確認できると思いますが。
> サイトのファビコンが192px,512pxに使われているのですか?
>
Luxeritas の PWA タブ内にある「アイコン」の項目に書いてあるとおりです。外観カスタマイズの「サイトアイコン」です。
jpeg になる云々は、png をアップロードして jpeg になるというのは聞いたこともないですが、「サイトアイコン」は Luxeritas ではなく WordPress の機能なので当方では分かりかねます。
> Safariからの『ホーム画面に追加』で
>
safari は PWA への対応を開始して間もない状態で、PWA への対応が不完全です。むしろバグだらけです。その辺を理解した上で PWA にするかどうかは判断した方がよいです。
参考:
https://www.suzukikenichi.com/blog/three-problems-pwa-has-to-overcome/
https://webtan.impress.co.jp/e/2018/04/03/28862
初めましてるな様、私は数週間前からLuxeritasを使用させていただいている者です。
先日、PWAのネイティブアプリのように動作するUXを導入したいと思い、るな様の投稿されている記事を見ながら設定を行いました。が、検証 ⇒ applicationからの動作が上手くいきません。
具体的には、自分のサイトホームに検証 ⇒ applicationタブ のconsoleを見るとエラーが発生しています。
『×▽ Uncaught (in promise) DOMException: The prompt() method must be called with a user gesture luxe-serviceworker-regist.js?v=1578488450:2 』と、consoleにはありました。Manifestは読み込まれている状態で、vice Workersでは「ドメイン名、Source、Status」の表示もされています。
こちらの環境は以下のようになります。
サーバ: さくらのレンタルサーバ(Perl 5.26.3 PHP 7.3.12)
Wordpress:5.3.2-ja Luxeritas:3.7.5 Luxeritas Child Theme: 3.0.0
plugin: TS Webfonts for SAKURA RS と SAKURA RS WP SS
私が入れていた他のpluginや追記したコードが問題なのかと思い、一度Wordpressから入れ直しました。ですので、Wordpressをサーバ上にアップロードし、初期設定を行い、Luxeritas本体⇒子テーマ,を有効化し、LuxeritasのPWA初期設定をして、このエラーが出るといった状態です。エラー文についても調べてみましたが当方の理解が追い付かず何も出来ませんでした。るな様のお手を煩わせることは大変恐縮なのですが、ご指導いただけないでしょうか?
ちなみになのですが、私は当初LuxritasがPWAに対応されていることを知らず、別のplugin(具体的にはSuper Progressive Web Appsです)を導入していたのですが、そのpluginが有効化された状態(尚LuxeritasのPWAは有効化されていない状態)でiPhone(8+)から確認すると上手くネイティブアプリのように全画面化された状態になっていました。Luxeritasはとても素晴らしいThemaなので、LuxeritasからPWAを有効化したい、と思いましたのでここに連絡させていただきます。長文申し訳ございません。
まうさん。
まうさんのサイトを確認しましたが、とりあえず promise 関連のエラーは出てませんでした。PWA は「一応」ちゃんと動作してます。
PWA は Javascript なので、キャッシュの影響を受けます。
まうさんが使用していたプラグインのスクリプトが、まうさんのブラウザ内でキャッシュされて、双方混在しているのが promise エラーになってると考えてほぼ間違いないです。
なので、
1. Chrome の Application で「Clear storage」する
2. Chrome の設定で「プライバシーとセキュリティ -> 閲覧履歴データの削除」からブラウザキャッシュを削除する
3. Chrome を再起動する
でプラグインのスクリプトの痕跡を消してください。
また、まうさんのサイトでは上記のエラーとは別に PWA に関連する警告が以下 2 つ出てます。(最初に「一応」ちゃんと動作してるって書いたのは警告が出てるから「一応」ってことです)
1. 全ての HTTP リクエストを HTTPS にリダイレクトするようにしてください。
2. Manifest には 192px と 512px の PNG アイコンを設定してください。
上記 2 つ。
1. に関しては http:// で始まる URL でアクセスした場合に https:// にリダイレクトされてないのが原因です。.htaccess 等で http:// から始まるアクセスがあった場合には https:// にリダイレクトするように設定してください。
2. に関しては jpg アイコンを png に変更すれば解決します。
るな 様
あけましておめでとうございます。
再びの質問で恐縮ですが教えていただけないでしょうか。
記事中にURLを張った際にブログカードが自動表示されるブログカードの画像がオリジナルサイズになってしまい、表示速度が極端に遅くなってしまいました。
ブログカードの画像をフルサイズからユーザーサムネイル 1に変更するにはどこを編集すれば良いのでしょうか?
カスタマイズ(外観)からサムネイル(アイキャッチ)でサイズ指定をnormal(360×189px)に変更しましたがブログカードの画像は変更されませんでした。
お手数ですがどうぞよろしくお願いいたします。
321web さん。
以前、サムネイル再作成したと言っておられましたが、100×100 削除してませんか?
ブログカード・関連記事・新着記事ウィジェットは 100×100 です。
さっきアップした ver3.7.5.1 で一応、100×100 が無い場合は 150×150 を使うようにしておきましたが、基本的には 100×100 を使った方がいいです。
るな様
アップデート対応までしていただき感謝いたします。
おっしゃるように100×100を削除していたせいだと思います。
アップデートしたら小さいサイズになりました。
本当にありがとうございます!