- このトピックには14件の返信、2人の参加者があり、最後に
により3年、 2ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】13.1.1
【お使いの Snow Monkey Blocks のバージョン】10.3.0
【お使いの Snow Monkey Editor のバージョン】4.0.1
【お使いのブラウザ】Firefox, Chrome
【当該サイトのURL】—※WordPressバージョン ： 5.6.1
### 発生している問題
WordPress編集画面側のブロックエディタの表示が崩れます。
しかしプレビュー画面で確認すると問題なく表示されています。
画像を添付いたしますのでご確認ください。【WordPress編集画面】
「メディアと文章」ブロックで、画像と文章が横並びに配置されません。
「パネル」ブロックで、行あたりのカラム数を3に設定していても反映されません。【プレビュー画面】
プレビュー画面で確認すると画像と文章が横並びに配置されています。
パネルの方も、プレビュー表示は問題ありません。### 試したこと
Snow Monkey、Snow Monkey Blocksの再インストール今回、古いバージョンをアップデートしたのではなく、最新のバージョンを新規でインストールした形になります。
お手数をおかけいたしますが、ご教示よろしくお願いいたします。いいねをした人: 居ませんありがとうございます。
有効化しているプラグインは以下となります。- Akismet Anti-Spam
- All-in-One WP Migration
- Contact Form 7
- Snow Monkey Blocks
- Snow Monkey Editor
- Snow Monkey Forms
お手数をおかけいたしますが、よろしくお願いいたします。
いいねをした人: 居ませんエディタ側のCSSとプレビュー側のCSSを比べてみたところ、
【エディタ側】
blocks-editor.css
.c-rowがmargin: 0のみ【プレビュー側】
style.min.css
.c-rowにdisplay: flexとflex-wrap: wrapが設定されています何か解決策はありますでしょうか。
いいねをした人: 居ませんプラグインは問題なさそうですねぇ。
エディタ側のCSSとプレビュー側のCSSを比べてみたところ、
本来はエディタ側でも
.c-rowにdisplay: flexとflex-wrap: wrapは適用されるはずです。
これが抜けているということですよね…？
いいねをした人: 居ませんSnow Monkey の管理画面用の CSS は
wp-content/themes/snow-monkey/assets/css/editor-style.min.cssで、それをwp-content/themes/snow-monkey/app/setup/editor.phpが読み込む処理をおこなっています。この2つのファイルは存在しますか？※サーバーのスペック等により、インストール・アップデート時に正しく解凍がおこなわれずにファイルが欠落することがまれにあります。
いいねをした人: 居ませんうーん、となるとちょっとわからないです、すみません…。ここから先は実際に中を覗いてみて、どこで処理がされなくなっていくのかを調査していくしか無いかなと思います。可能であれば僕用の WordPress アカウントをつくってもらって、中を見せていただければと思うのですがいかがでしょうか？
いいねをした人: 居ませんアカウントの発行ありがとうございます！
どうも HTTP と HTTPS が混合していている部分があるように思います。
※「WordPress アドレス (URL)」と「サイトアドレス (URL)」は HTTP で設定されているのに、実運用は HTTPS でおこなわれている？もしかしたらそれが原因かもしれません。一度確認してみてください！
いいねをした人: 居ません調査ありがとうございます。
ご指摘いただいた「WordPress アドレス (URL)」と「サイトアドレス (URL)」をHTTPSに修正しましたが、やはりエディタの表示崩れは改善されておりませんでした。その後、Snow Monkeyテーマ、Snow Monkey Blocks、Snow Monkey Editorプラグインを一旦削除し、1つ前のバージョンをそれぞれ手動でインストールしてみましたが状況は改善されず、さらにアップデートを行っても状況は変わらずでした。
以前XSERVERでSnow Monkeyを使用させていただいた時はこのような表示崩れは起こらなかったので、もしかしてサーバー側の問題ということはあり得るのでしょうか・・・？
今回はAzure App Serviceを使用しています。いいねをした人: 居ませんご指摘いただいた「WordPress アドレス (URL)」と「サイトアドレス (URL)」をHTTPSに修正しましたが、やはりエディタの表示崩れは改善されておりませんでした。
なるほど…。
その後、Snow Monkeyテーマ、Snow Monkey Blocks、Snow Monkey Editorプラグインを一旦削除し、1つ前のバージョンをそれぞれ手動でインストールしてみましたが状況は改善されず、さらにアップデートを行っても状況は変わらずでした。
問題があるとすればプラグインではなく Snow Monkey だと思いますが、ファイルの欠落も無いとのことだったので別な問題な気がしています。
他に気になったのは、表側のページで読み込まれる CSS/JS の URL が、
https〜から始まらず/wp-content/〜から始まっているものがあることです。これはなにか特殊な処理をサーバー側でされているのでしょうか？ もしかしたらこれも怪しいのかなと…。いいねをした人: 居ませんアドバイスいただいたとおり、CSS/JS の URLをルートパスから絶対パスに変更するためwp-config.phpを以下のように修正いたしました。
修正前：
define('WP_CONTENT_URL', '/wp-content');
修正後：define('WP_CONTENT_URL', 'https://'.$_SERVER['HTTP_HOST'] . '/wp-content');その結果、エディタ側の表示崩れが無事直りました！
無事に解決いたしましたので、こちらのトピックは閉じさせていただきたいと思います。
大変丁寧にご対応いただきまして、誠にありがとうございました。いいねをした人: 居ません
- トピック「WordPress編集画面側のブロックエディタの表示が崩れる」には新しい返信をつけることはできません。