【メモ】Xeory Baseのスマホページのトグルメニューが作動しなかった原因

【メモ】Xeory Baseのスマホページのトグルメニューが作動しなかった原因

タブレット端末で閲覧するTurbulence

気に入ったらシェアしてやって下さい

どうもこんにちは。まっしゅです。

WordPressは他の既存のブログサービスよりも自由度が高いので、試行錯誤しながら色々実装しています。

…が、当然試行錯誤すればどこかで「不具合」が生じてくるわけで、Turbulenceでもしばらくスマホ向けのトグルメニューが動かないという不具合に苛まれておりました。

なのでWordPressテーマ(Xeory Base)を提供しているバズ部さんとかに相談しながら色々試したら無事に作動しましたのでその報告をします。

[スポンサードリンク]
[ad#entry1]

スポンサーリンク

トグルメニューとは

まずPC向けのページにはヘッダーの下に「グローバルメニュー」というリンクが有ります。

たとえばブログや投稿者のプロフィールページへのリンクや、主要な記事カテゴリのリンク、お問い合わせフォームへのリンクなどなど、一番目につきやすいところに主要なコンテンツを置くためのリンクを設置します。

Turbulenceのヘッダー(2016年7月31日)

上はTurbulenceヘッダーのグローバルメニューです。

このようにPC向けページにはズラッとリンクを並べられるわけですが、タブレット端末(スマホ)の場合ですと、このグローバルメニューが以下のように変わります。

タブレット端末で閲覧するTurbulence

このように閲覧環境によってデザインが変わるようになっている(=レスポンシブデザイン)わけです。

また、PC版にあったグローバルメニューが無くなり、代わりに右上にアイコンが表示されます。この右上のアイコンがトグルメニューのボタンです。

タブレット端末で閲覧するTurbulence

このアイコンをクリックすると上の画像のようにボヨンとPC版のヘッダーにあったグローバルメニューのリンクが表示されるようになります。これがいわゆるトグルメニューというものです。

しかし、このトグルメニューですが、トップページやアーカイブページでは問題なく作動するのですが、なぜか個別の記事ページで作動しませんでした。

多分初期の頃には問題なく作動してたと思いますが、プラグインとかを追加してるうちに何かが干渉して不具合を起こしたのだと思います。

で、Turbulenceが愛用してるWordPressテーマ「Xeory Base 」を提供してるバズ部さんに相談しながら各種phpやプラグインなどを見なおしていると…

[スポンサードリンク]
[ad#entry2]

原因はHead Cleanerにあった!

バズ部さんにTurbulenceのphpファイルを提示してチェックしてもらったところ、「プラグインのHead Cleanerのエラーが表示されている」との返答を頂きました。

で、試しにHead Cleanerを停止してみたところ、見事トグルメニューが作動するようになりました。

Head Cleaner単体を停止する以前にも、全プラグインを停止して作動するかチェックしたのですが、その時は何故か作動せず、プラグインは関係ないのかなと錯誤。

おそらく反映されるまでにラグがあったために「効果なし」と勘違いしていたようです(仮にその時トグルメニューが作動してもどのプラグインが原因か特定できなさそうですが…)

Head Cleanerとは

Head CleanerはWordPressに導入することで、ページを表示するためのソース(特にCSSやJavaScriptといった容量の大きいソース)を最適化し、表示速度を向上させるキャッシュ系プラグインです。

ページの表示が遅ければユーザーは去ってしまうし、SEOの観点からみても良くないので、サイト表示速度を早くするためにこういったキャッシュ系プラグインを導入している人は多いはず。

…が、同時にこのプラグインはJavaScriptで作動するコンテンツで不具合を起こしてしまうこともあります。今回のように。

それでもHead Cleanerを入れたかったので

かといって、サイト表示速度を向上させられるプラグインを停止にしてしまうのはなんだか惜しい…。

そう思って調べてみたら、バズ部さんのページに下記のような記載がありました。

注:Head Cleanerの詳細設定について
Xeoryテーマを使用しているWordPressでHead Cleanerを使用する場合は、
・フッタ領域の JavaScript も対象にする
・Google Ajax Librariesを利用する
・<head> 内の JavaScript を、フッタ領域に移動
のチェックを外してご使用下さい。不具合の原因となる事がございます。(2015年2月19日時点)

Xeoryテーマのプラグイン設定方法 

上記の通りに設定したら、Head Cleanerを有効化していてもスマホページのトグルメニューが作動しました。

こういったものに不慣れなのでこの設定によって何にどう影響するのかはわかりませんが、とりあえず今はトグルメニューが無事に作動してくれたので一安心です。

まとめ

トグルメニューはスマホページにおいて重要なコンテンツなので、今の今までこれが表示されなかったのはなかなかの痛手です。

今回は幸いバズ部さんのアドバイスのおかげで問題が解決しましたが、今後プラグインやJavaScriptで動くコンテンツを追加するときは注意深く行きたいところです。

スポンサーリンク
この記事が気に入ったら いいね!いいね!しよう

気に入ったらシェアしてやって下さい

フォローして最新情報をゲット

スポンサードリンク
スポンサーリンク

コメント

  1. 鬱リーマン より:

    初めてコメントさせていただきます。
    私もXeory Baseで同じような不具合にあったのですが、
    こちらの記事を参考に解決することができました!

    大変助かりました。
    しかし同じXeoryとは思えないほど素晴らしいカスタマイズ・・・
    他の記事も参考にさせていただきます。

    本当にありがとうございます!!

    • ましゅー より:

      こんにちは。コメントありがとうございます。この記事が問題解決のお役に立てて幸いですm(_ _)m

      今使っているXeoryテーマをベースにしたカスタムデザインは、ライブドアブログ時代に培ったノウハウを元に作っていますが、正しい表記なのか少々不安なところもあります^^;

      今のところPC・スマホ共に目立ったレイアウトの崩れとかはないので大丈夫かなとは思いますが、この先、新たにカスタマイズしたり別のテーマに変更したりする可能性もあり、更新したらその都度報告していこうと思っている次第です。

      • 鬱リーマン より:

        是非シェアしていただけると嬉しいです!

        今後の更新も楽しみにしています!!