【WordPress】管理画面の表示崩れを直す方法 Chrome 45で発生【Chrome Admin Menu Fix】
WordPressのバージョンを4.3に上げて少しして管理画面に異変が起こっていることに気づいた。
そう。何か左側のメニューのレイアウトが崩れるのだ…。
マウスのカーソルを合わせると、よく分からない動きをして、思ったメニューを選択出来ない。
最初はWordPressの4.3が悪いのか、プラグインが悪さをしているのか、私が手を加えた部分が悪いのかが分からなかった。
ローカルでまっさらのWordPressの4.3を入れてみて再現したので、恐らく4.3が悪いのだろう。
きっと誰かが解決してくれると、ちょっと放置してたところ解決方法が見つかったそうです。
何と！悪いのはChrome 45でした(；・∀・)
スポンサーリンク
表示崩れの解決方法
日本語の公式フォーラムで上がっていました。
Chrome 45 でWP管理画面のメニューが崩れる場合の応急対策
一応解決法方法は2つあります。
おすすめの方法から。
プラグインで対応する
今回の表示崩れを何とかしてくれるだけのプラグイン「Chrome Admin Menu Fix」です。
リポジトリ：GitHub – chrome-admin-menu-fix
中身を見るとやっていることはこれだけ！
wp_add_inline_style( 'wp-admin', '#adminmenu { transform: translateZ(0); }' );
導入方法
3日前に公式プラグインに登録されたので、管理画面から追加出来るようになりました！
管理画面のプラグインから「新規追加」→「Chrome Admin Menu Fix」を検索して「今すぐインストール」をクリック。
インストールが完了したら、「プラグインを有効化」をクリック。
すると、あら不思議。綺麗になりました！
インストール後に下で紹介する開発中のGitHubとの差分を見てみました。
差分があったのは、公式プラグインには「寄付して欲しいという内容」が画面上部に表示されるようになっているくらいでした。
一度「Hide Notice」をクリックすることで、二度と表示されなくなります。
寄付してやろう！という方はDonateから！
開発中の最新版の導入方法
恐らく安定版として1.0をリリースしたので更新はそんなにないと思いますが一応。
GitHubのページからzipファイルでプラグインを入手します。
赤枠で囲った「Download ZIP」をクリックします。
手に入れたzipファイルを解凍して、プラグインディレクトリに移します。
管理画面から「プラグイン」をクリックして「インストール済みプラグイン」を表示させると、「Chrome Admin Menu Fix」が増えているので、「有効化」をクリックします。
こちらの方が、より新しい対策を取り入れられますが、管理画面から導入する方法で十分だと思います。
Chromeのフラグ設定を変更する
こっちはあまりオススメしない方法です。
今回の表示崩れの原因は、Chrome 45（2015/9/11時点の最新）で、「slimming paint」に不具合が生じているからです。
なので、Chromeの「slimming paint」を無効にしてしまうというのが解決方法です。
設定方法
フラグの設定は以下のURLにアクセスして下さい。
chrome://flags/#disable-slimming-paint
こういう画面が表示されるので、「有効にする」をクリックします。
有効に切り替わって、背景色が白に変わります。
後は最下部にある「今すぐ再起動」ボタンをクリックして再起動させます。
「変更内容は次に Google Chrome を再起動したときに有効になります。」と書いてある通り、再起動しない限り、変更内容は反映されません。
これで、管理画面のレイアウト崩れが直ります。
おすすめしない理由
本来は有効になっているものなので、今後正常に動くようになった時に、有効に戻さないと逆に動かなくなるWebページが出てくるかもしれないからです。
恐らくその時に困ることになるのは、今回のWordPressの件で「slimming paint」を無効にしたユーザーくらいなので、解決方法が見つかる可能性は極めて低くなるでしょう。
というわけで、どうしてもプラグインは嫌だ！という人以外は一時的にプラグインを導入することをオススメします。
おまけ
スリミング ペイントを無効にする。の説明
スリミング ペイントを有効にするフラグとこのフラグが両方とも設定されている場合は、スリミング ペイントを有効にするフラグが優先されます。
スリミング ペイントを有効にする。の説明
スリミング ペイントを無効にするフラグとこのフラグが両方とも設定されている場合は、スリミング ペイントを無効にするフラグが優先されます。
どっちやねん( ﾟдﾟ )ｸﾜｯ!!
そもそも無効フラグ、有効フラグとなんで2つあんねん…。
というお話ですがきっと深い闇があるんでしょう。
正しい内容は「両方とも設定されている場合は、スリミング ペイントを無効にするフラグが優先されます。」です！
終わりに
さて、2種類方法を紹介しましたが、皆さんはどちらを採用したんでしょうか。
とりあえず、メニューが思った通り選べず、イライラしていたのが解決出来てよかったです。
恐らくChrome側の問題なので、WordPress側にプラグインの内容が正式に取り込まれることはないと思います。
ChromeユーザーでWordPress管理者の皆さんはすぐに対応しときましょう！
それでは。