AFFINGER5を入手して、当サイトもノリノリでテーマ変更をしてみたのですが、メインメニューの階層表示が動かないことに気付きました。
AFFINGER5のデモサイトでも階層表示されていないので、仕様かなとも思いましたが、AFFINGER5の公式サイトでは普通に階層表示されていたので、仕様ではないということがわかりました。
なんとか解決できたので、対処法を書いておきます。
テーマ変更後のメニューの動作
当サイトは「AFFINGER4」から「AFFINGER5」へのテーマ変更を行いました。
そのときのメニューの動作は次のとおりでした。
まずは基本どおりプラグインを全停止して動作確認
ワードプレスで、プラグインの追加などの作業後に動作しなくなることがあったときに原因を探る基本的な方法として、「全てのプラグインを停止して動作を確認する」という方法があります。
左メニューの[プラグイン]から、全てのプラグインの動作を停止して、メニューの動作を確認してみます。
すべてのプラグインを停止した状態だとメニューは正常に動作しました。
これで、何らかのプラグインが影響していることが確認できました。
動作に影響を与えているプラグインを特定する
まずは、影響を与えているプラグインに目ぼしをつけて、該当のプラグインを「有効化/停止」で動作に影響がでるか確認します。
(初心者には難しいかもしれませんが、経験して予想できるようになっていきます)
メニューバーに動きが付いている場合は「javascript」というスクリプト言語が使われているのが一般的です。
今回、プラグインを停止すると正常に動作していることを考えると、javascriptに関係するプラグインが怪しいななどの予想をして、地道に確認していきます。
プラグイン「Autoptimize」の一部機能を停止
「Autoptimize」は表示速度高速化プラグインのひとつ
「Autoptimize」は、HTMLやCSS、javascriptのコードのうち、スペースや改行を取り除いて、データサイズを小さくしたり、コードの読込み場所を変更することができる表示高速化のためのプラグインとして有名です。
・外部ファイルにあるCSSとjavascriptをHTML内に記載することで、外部ファイル読み込みを省略
「<head> 内へ JavaScript を強制」機能を停止
当サイトでは、いくつかのプラグインと独自のjavascriptを全てのページのヘッダー部に挿入していました。
そして、「Autoptimize」内で「JavaScript コードの最適化」と「<head> 内へ JavaScript を強制」をするように設定していました。
javascriptは読み込むタイミングによって動作しないことがあることが多くあります。
これは、ユーザーが使う環境(テーマやプラグイン)が無数にあるため、すべての環境で動作するように作ることが難しいために起こってしまいます。
ユーザーは、実際に使ってみて何らかの対策をして解決しなければいけません。
今回、「<head> 内へ JavaScript を強制」を設定していることで、使用している他のプラグインやテーマのjavascriptに影響を与えたのだと考えて、この機能を外しました。
結果的に、これによってメニューは正常に動作しました。
WING(AFFINGER5)では「Autoptimize」は一部停止すべき
その後、もう少し詳しく調べてみました。
WING(AFFINGER5)でAutoptimize以外のプラグインを全停止して、さらに独自のjavascriptの読込みを削除して確かめてみましたが、同じようにメニューは正常に動作しませんでした。
つまり、Autoptimizeに限らず、WING(AFFINGER5)ではjavascriptを強制的にヘッダー部で読み込ませるようなプラグインを使用すると弊害がある可能性が高いということがわかりました。
(テーマ内のjavascriptの中に読込みタイミングを遅らせたいコードがあるということだと思います。たぶん。)
WING(AFFINGER5)は十分に高速なワードプレステーマです。
今回のAutoptimizeの一部機能を停止したとしても問題ないですし、他の高速化対策で十分だと考えています。