v4ウィジットとv3ウィジットの比較テストを行っていた時、こんなことがありました。
編集画面ではちゃんとスタイルがついているのに、プレビューページを表示してみると、あれれ…
v4ウィジットだけスタイルが反映されていないじゃないですか！！
色々自分なりに試行錯誤したものの解決できず…
AIもチンプンカンプンなことしか言わんし…
そんな時のTOFUラボ！
質問してみたところ、elementorのプロフェッショナル、さくたろうさんからこんなご返信いただきました。
v4ウィジットのスタイルが反映されない原因はなんだったのか。
SSL化したはずのサイトで、httpが混ざっていて、エラーが出ていたのです！
いわゆる「混在コンテンツ」です。
この時、サイト自体はhttpsでしたが、WordPress一般設定のURLがhttpのままだったのです…
これによりcssファイルのリンクがhttpのままだったのです。
httpsのページ内でhttpのファイルを読み込むことは、ブラウザから見てセキュリティ的にNG！
そのためcssファイルがブロックされて、スタイルが適用されていなかったと。
じゃあなんで編集画面で見れてたかというと、プレビューページとは違い、その画面専用のシステムでスタイルを強制適用していたのだと思います。
v4じゃなくても編集画面とプレビューページの見た目が違うことはたまに起きますよね…
シンプルな解決方法
解決方法はシンプルな２ステップ。
① https にする
先ほどのURLを「 https:// 」となるように、sを追加しましょう。
「変更を保存」のクリックを忘れずに。
② URLを変更
elementor > エディター > ツール > URLを変更 を開きます。
ここで
上の欄 http://…
下の欄 https://…
と記入します。
「URLを変更」をクリック。
これでhttpが、httpsに置き変わります。
③ 念の為キャッシュ削除
elementor > エディター > ツール > 一般 >Elementor キャッシュ をしておきましょう。
これで古いhttp情報を持ったCSSキャッシュが消え、新しい設定が確実に反映されます！
結果…
ちゃんとv4ウィジットのスタイルも反映されるようになりました！
まとめ
httpのままなの、意外とあるあるの凡ミスじゃないでしょうか…笑
みなさんもお気をつけください^^
では本日もお疲れ様でした！
