いやー、焦りました!最近リリースされたwordpress4.5にアップデートしたら不具合が起きちゃって!
しかも、僕がメンテしている違うサイトで不具合起きちゃって!トラブルって本当に怖いですね。
「僕のサイトも妻のサイトも不具合ないし、大丈夫だろう!」なんて考えはダメですね。反省です。
不具合が起きたテーマは「Xeory Extension」
サイトで使用している不具合が起きたテーマは「Xeory Extension」というバズ部さんのテーマ。
バージョンは最新のものを使用していて、これまで大きな問題もありませんでした。
(不具合があって対処したのはこれだけかな?)
しかし、今回の不具合はちょっと困ってしまいました。
ワードプレス4.5にアップデートしてからの不具合なので、テーマの問題というよりは、ワードプレス4.5との相性が問題だと思われます。
レイアウト崩れとスマホメニューのクリックが効かない不具合
具体的なトラブルは下記の2点。
- トップページのキャッチコピーと説明文のレイアウトが崩れる
- スマホのハンバーガーメニューをクリックしてもメニューが開かない
1の不具合はマージンやパディングで調整できるとしても、2の不具合は大至急解決にあたらなければなりません。
ハンバーガーメニューをクリックしても開かないので、もはやただのハンバーガーです。
↓実際の不具合がこちら。
↓通常の画面。
↓スマホもレイアウトが崩れます。そしてクリックしても開かない。
↓通常の画面がこちら。
↓通常のメニュー。
原因はJavaScriptか?
こういう時は、エラー原因を特定しないといけませんよね。開発モードをチェックしてみましょう。
どんなエラーでしょうか?
ふむ。なるほど。そうか。全くわからん。とりあえずわかったのはこんなところ。
- ハンバーガーメニューをクリックした後「#」に飛ぶ
- パーマリンクに「#」がつく
- しかし、「#」に飛ぶはずのJava Scriptがエラーになっている
- だから、クリックしてもメニューが開かない
- どちらのエラーも赤丸で囲まれたJSファイルが原因
うーむ…どうしよう…Xeory Extension側のコードを書き変えればベストだけど、素人がコードをいじるのも怖いなぁ。
いくつか解決方法を考えてみよう。
- 前のバージョン(ワードプレス4.4)にダウングレードする
- 誰かに頼む
- ドットインストールで勉強する
- テックキャンプを受講する
- 原因になっている2つのJSファイルを前のファイル(ワードプレス4.4の時のファイル)に置き換えれる
うん。5の方法を試してみよう。
公式のJSファイルだけ一時的に前のバージョンに戻す
テーマのJSファイルではなく、ワードプレス公式のJSファイルをいじるので注意してくださいね。
先にオフライン環境で試すことをおすすめします!
(※ワードプレスの管理画面からは操作できません。FTPソフト or ファイルマネージャーが必要です)
wp-includes→js→jqueryと進み、下記の2つのファイルを探します。
- jquery-migrate.min.js
- jquery.js
そして、この2つのファイルを前バージョンのファイルと差し替えます。
オフライン環境でバックアップをとっている方は、該当するファイルを見つけて差し替えてください。
過去のファイルがない方は、こちらからワードプレス4.4.2をダウンロードして差し替えてください。
過去のデータをいじってよくわからなくなった時は、ダッシュボード(管理画面)→更新と進み、最新のバージョンを再インストールすればOKです。
エラーが消えて無事に解決!
応急処置でしたが無事にエラーが消えました!そして、ご覧のようにレイアウトも崩れていません!
もちろん、スマホのメニューも開くようになりましたよ!いやー、良かった良かった。
ただ、公式のファイルをいじっているので、後々こんなトラブルがあるかもしれません。
- マイナーアップデートをすると再びエラーが発生してしまう
- 他のトラブルが発生する
- プラグインとの相性が悪くなる
※今のところは大丈夫そうです。
「大至急解決しなければいけないけど、どうすればいいの…?」
なんて方はぜひお試しください。参考にしていただければ嬉しいです!
追記:WordPress 4.5.1で無事に不具合解決!してませんでした!
4月27日公開の最新バージョン4.5.1にて不具合解決したみたいです。
修正したファイルの中にこの2つのファイルがなかったので、その他のファイルと相性が悪かったんでしょうか?
僕の環境では問題ありませんでしたが、こちらもオフラインで試してから実際のサイトに反映してくださいね!
※「WordPress 4.5.1にアップデートしても不具合治らなかったよー」というご報告があり、改めて確認してみたら絶賛不具合あり!
まだ応急処置は必要みたいです…
追記:公式のテーマバージョンアップで不具合解決!
公式のテーマをバージョンアップすると不具合解決とのご報告が!確かに、お知らせがありましたね。多謝!
今回の最新テーマ(Ver0.1.9)を使用することで次の問題が解消されます。
- メインビジュアルのレイアウト崩れ
- レスポンシブ時のメニューボタン動作に関する不具合