[ 解決済 ] Evergreenのコンテンツデータ子テーマ適応時レイアウト崩れについて

[昌樹森田]

■ WordPress のバージョン
5.9.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.17.1

■ Pro Unit のバージョン
0.17.0

■ スキンの種類
Evergreen

■ スキンのバージョン
0.1.3

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
Lightning関係以外は全て停止　及び最新確認

■ 期待する動作
Evergreenのコンテンツデータをインポート後設定し子テーマを適用すると、ブラウザで初回表示の際youtubeのレイアウトが崩れます

リロードや二回目は問題なく表示されますがブラウザの履歴やキャッシュを削除すると再度添付画像の様になります

子テーマではない場合は問題なく表示可能です
当方のブラウザの問題でしょうか？

子テーマ利用で初回から問題なく表示させるにはどうすれば良いのか知りたいと存じます

■ 自分で試した事
・子テーマ適応時のメニューの設定についてと注意書きがあったのでメニュー崩れはないですが以下はやってみました
外観→メニューを開き、Header Top Navigation の設定画面でメニュー設定の「Header Top Navigation 」にチェックを入れて保存

・別サイトで固定ページを作成
デザインプリセット及びスキンをEvergreenで設定　保存後再読み込み
設定を真似してみましたが子テーマの場合は同様にキャッシュをクリアした状態だと初回はレイアウトが崩れます
リロードすると問題なく表示されます

■ 症状が発生するブラウザ
EDGE　クローム　ファイヤーフォックス

■ 実際の症状
添付ファイル画像

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[うなこ]

該当サイトを確認したところ、たしかに添付ファイルの表示になるときがありますね。
（YouTubeの埋め込みブロックのiframeがくずれて表示される）

子テーマではない場合は問題なく表示可能です

ちょっとここが不思議なのですが、なんでしょうね、、、？

あまり関係ないかもしれませんが、、、
カスタマイズ→【ExUnit設定】　の　【高速化設定】　の「JavaScriptをフッターで読み込む」の設定はどうなっていますか？
（チェックの有無）

あとは、テーマを変えたとき（たとえばTwenty Twenty-Oneなどに変えてみてください）は問題ないでしょうか？

[対馬 俊彦]

該当 URL を表示したら、私の PC でも YouTube の部分の高さが大きくなりました。

HTML ソースを正常時と比べると、添付画像のように iframe の height の値が違っていました。

正常時： height: 303.069px;
くずれるとき： height: 624.132px;

もしかしたらなにかの役に立つかも…と思って書かせていただきました。

Attachments:

You must be logged in to view attached files.

[昌樹森田]

返信欄間違ってたらすみません

うなこさん

お調べ頂き有難う御座います
カスタマイズ→【ExUnit設定】　の　【高速化設定】　の「JavaScriptをフッターで読み込む」
オフだったものをチェックを入れオンにしたらいけました

念のため
キャッシュ、履歴などを削除
再起動の状態で
chrome　ファイヤーフォックス　EDGE　Brave全て一発で読み込みました
読み込みの問題で回線なのかブラウザなのかサイト上のことなのか不明でしたので大変助かりました

有難う御座います

対馬様

お調べ頂き有難う御座います
高さの数値が変わる原因は何なんでしょうね？
WordpressのYouTubeブロックが怪しいのかと思いコードで埋め込みタグを試してみようかとも考えていたところでした

他の方の初期アクセス時どうなのか知りたかったので助かりました
ネットカフェに走らずに済みました

有難う御座います

[対馬 俊彦]

> 高さの数値が変わる原因は何なんでしょうね？

私の力では、HTML ソースを見て違うことに気がつくところまでで、数値が変わる原因まではたどり着くことができませんでした。

その後の状況からすると…

たぶん、JavaScript で高さを指定していて、実行のタイミングによって数値が変わるということなのかなと想像します。

いずれにせよ、解決してよかったです。

[投稿者]

投稿