トップ
業務紹介
お知らせ
ブログ
個人情報保護方針

お問い合わせ

Mac OSX15/Safariにてwordpressの入力画面が崩れる原因はclassic editorのcssの様です。

Mac OSX15/Safariにてwordpressの入力画面が崩れる原因はclassic editorのcssの様です。

web技術
2024/10/09

Mac OSX15/Safariにてwordpressの入力画面が崩れる原因はclassic editorのcssの様です。

wordpressの入力画面が盛大に崩れた!!

ちょっと前から気づいていたのですが、クライアントの管理画面だったので『何か設定をいじったのかな?』くらいにしか思ってませんでしたが、私が自分のブログを書こうかな〜と思ったら…いや崩れとる!!
chromeでは大丈夫だったのはクライアントの管理画面で確認していたので、予想としてはsafarがアップデートして対応しなくなったcssでもあるんじゃないかなと思ってました。ウィンドウを狭めて1カラムのスマホレイアウトだと正常でしたし。

でも原因と対策をちょっと調べておこうと思っていたら…バッチリ報告されていて、対応まで終わっていた模様です…が?

今回の崩れを引き起こしていたのはclassic editor。『gutenberg大っ嫌い!!誰が使うんだ!!』と思っている私はACFのwysiwygエディタを基本的に導入します…しますのでclassic editorは使ってるけど、classic editorプラグインは使ってないんです…。

こちらにバッチリの情報がありました。
acfで作成した入力フォームがsafariで表示崩れを起こす

でもwordpress自体のアップデートはまだきておらず、classic editorは修正したということだったので、classic editorプラグインを新規インストール、有効化してみる…。

するとアラマ!!ちゃんと直りました!!
じゃあclassic editorプラグインは削除してもいいよね!!……はいダメー。全然ダメー。プラグインを無効化したら崩れた状態に戻りました

カスタムポストをfunction.phpで設定していますが、タイトル以外をsupportしてないので、classic editorプラグイン自体は全く影響ないのですが(私のブログのケースでは)、ACFのwysiwygエディタなどは…多分普通にtextareaなどもそうだと思うのですが、classic editorプラグインのcssを優先で見てるということでしょうか。プラグイン間で依存関係があるの、チョトコワイ(多分違う)

ちょっといや〜んな感じ。wpのプラグインは1個も増やしたくない感じなので、ACFだけしか入れたくないのです。プラグインに頼りまくってどれかがアップデートについていけなくなってWPの更新が一生できなくなったサイトなども多数見てきました。プラグイン万能説は誰が流布したんだ!?(Youtubeとかブログとかで『簡単にサイトが作れるんです!!』とか吹聴している悪質な人たちでしょうけど)

自分はいいですが、クライアントに対しては必要に応じて対応しないといけないので、一応classic editorプラグインの設定を確認。
ここで既存の入力画面に影響がない様にしてあげて、暫定対応とすればいいかなと思います。
旧エディタを使ってるか、gutenbergを使ってるか、それだけしっかり選択しておけばとりあえず大丈夫なのかも。

私のこのブログではまずclassic editorプラグインは削除して、崩れた状態のままではありますが、wordpress自体のアップデートを待ちたいと思います。

しかしwpのアップデートもclassic editorプラグインもイヤ!!という場合は、cssをいじってあげればいいでしょう。
先に紹介したトピックページにもcssの修正について案内がありますので、『ヘッダ読み込みのタイミングでフックでcssを記述』しちゃえばいい様です。トピックからのリンク先にはmy_custom_css()という関数名でstyleタグをねじ込んでいます。
これもなんか後から『知らないフックが入ってるんですけど!!』と思われそうですが…プラグインを入れるよりはまぁいいかな〜。

すぐ不要になる情報かもしれませんが、備忘録として。