【cocoon】モバイルメニューを正しく設定【WordPress】

wordpress

スマホのChromeで自分のブログを確認していたら、ヘッダーのドロップダウンメニューで、サブカテゴリーのドロップダウンが展開されないことに気が付いてしまいました。
Google Search Consoleでも、モバイルフレンドリーと評価されていたので、細かく確認もせずに放置していました。
そもそも、モバイル端末でメニューをどのように表示すべきでしょうか。
とりあえず、最も簡単に変更できる、ベストと思える状態に変更してみました。

【前提条件】

  • WordPress(Ver.5.8.1)
  • テンプレート・・・cocoon
  • 確認端末・・・XPERIA 1Ⅲ (Android Ver.11)
  • ブラウザ・・・Chrome(Ver.93.0.4577.82)
  • 構築サーバ・・・お名前.com RSプランサーバ

ドロップダウンメニューはスマホでは正しく動作しない

ヘッダー・フッターメニューで、カテゴリーをドロップダウン展開するメニューは、WordPressの基本機で能簡単に設定できます。

しかし、Androidのスマホ上では正しく動作しません

具体的には、ドロップダウンからサブカテゴリーのメニューが展開できませんでした。

ドロップダウンメニューが開かない

モバイルからのアクセス比率も増えていることから、望ましい状態とは言えません。

きっちりと設定をし、アクセシビリティーを向上しておきましょう。


この記事で目指すメニューの状態

変更前メニュー

通常のメニュー(青い部分)が表示されています。

正しく動作しないくせに、かなりのスペースを占有しています。

モバイルメニュー変更前
変更前メニュー

変更後メニュー

モバイル用の、スリムなメニューに変更します。

モバイルメニュー変更後
変更後メニュー

左上メニューをクリックすると、サブカテゴリーまで一気に展開されます。

モバイルメニューを開いた状態
モバイルメニューを開いた状態

メニューの設定方法

スマホで通常メニューを表示させない設定(WordPress)

WordPressの機能で設定変更を行います。

外観」ー「メニュー」ー「ヘッダーモバイルメニュー」のチェックを外し、「メニューを保存

通常のメニューを非表示にする設定
通常のメニューを非表示にする設定

「ヘッダーモバイルボタン」から下のチェックをすべて外します

スマホでモバイルメニューを表示させる設定(Cocoon)

Cocoon設定」ー「モバイル」タブ ー 「ヘッダーモバイルボタン」を選択し
変更をまとめて保存」をクリック。

cocoonモバイル設定画面
cocoonモバイル設定画面

PCでメニューが影響を受けてないか確認

念のため、PC側で変更による影響を受けていないか確認します。

問題なく動作することが確認できました。

まとめ

  • 通常メニューのドロップダウンは、モバイル環境で正常に動作しない。
  • WordPress側で、モバイルメニューを無効化する。(モバイル環境のみ非表示となる)
  • cocoon側で、モバイルメニューを正しく設定し、モバイル環境でのアクセシビリティーを向上をしよう。
  • 変更後は、PC環境が影響を受けていないか動作確認をしよう。

コメント

  1. pikurun より:

    まさに、タイトル通りの問題に悩んでおりました。
    解決策をわかりやすく書いていただき、本当にありがとうございました。
    スマホでメニューが左上に表示され、非常に満足です。
    大感謝!

    • kuchikarasuni kuchikarasuni より:

      コメントありがとうございます。
      励みになります。
      実はこの記事は、私のブログの中でも上位のアクセス数があり、同様の悩みを抱える方は多いと思います。
      お役に立ててよかったです。