YouTubeもやってるよ

cocoonヘッダモバイルメニューが反映されない。作成手順

ヘッダモバイルメニューが反映されない

WordPressのテーマcocoonを使っていてヘッダモバイルメニューを設定したけどスマホで確認するとなぜか表示されない。という方は参考にしてください。

  • モバイルメニューの設定
  • 表示オプションのcssクラスの設定
  • メニューの設定

が必要です。

スポンサーリンク

メニュー設定の前に

通常Wordpress管理画面の外観→メニューから設定しますがその前に

『cocoon設定』の『モバイル』でモバイルメニューの設定が必要です。

これがちょっとわかりづらいんだよねw

スポンサーリンク

モバイルメニューの設定

cocoon設定のモバイル設定を開いたらモバイル環境で表示するレイアウトの設定します。

cocoon設定→モバイルを選択します。

cocoon設定→モバイル

『モバイルメニュー』のタブで

  • ヘッダーモバイルボタン
  • ヘッダー・フッターモバイルボタン

のどちらかを選択します。

ヘッダーモバイルボタン

ヘッダー(上部):ヘッダーのみ表示
ヘッダー・フッター(下部):ヘッダーフッター両方表示

これはどちらか好みのレイアウトを選択すれば大丈夫です。

このモバイル設定をしておかないと表示されません!

スポンサーリンク

表示オプションのcssクラスを有効にする

管理画面の『外観』→『メニュー』を選択
メニュー画面の右上『表示オプション』を開き『cssクラス』オプションを有効にします。

表示オプションのCSS

これも有効にしないとモバイルメニューで表示されません。

モバイルボタン・メニューの設定(作成)

すでにヘッダーメニューを作成していて、ヘッダーと同じ項目でいい場合はヘッダーメニュー位置でヘッダーモバイルメニューまたはボタンどちらか好みのほうを選択すると反映されます。

PC表示と分けたい場合は新たにヘッダーモバイルのメニューを作成します。

ヘッダーモバイルメニュー新規作成方法

ヘッダーメニューを作成していない場合は

管理画面の『外観』→『メニュー』

『新しいメニューを作成しましょう』より作成します。

ヘッダーメニュー追加方法

メニュー構造の下の『メニュー名』にヘッダーモバイルメニュー等、自分でわかりやすい名前をつけて『メニューを作成』を選択します。

ヘッダーモバイルメニュー作成

するとヘッダーモバイル用のメニューが出来るので

左側のメニュー項目を追加より、
『固定ページ』『投稿』『カスタムリンク』『カテゴリー』

の中から自分がヘッダーモバイルメニューに追加したい項目を選択しメニューに追加します。

例:固定ページから追加

固定ページを追加

例:カテゴリーページから追加

カテゴリーページも追加

右側に反映されます。
位置はドラッグして変更できます。

少し下にあるメニュー設定のメニューの位置を決めます。

『ヘッダーモバイルメニュー』または『ヘッダーモバイルボタン』にチェックを入れて『メニューを保存』します。

ボタンかメニューの選択→保存

メニューの保存をしないと反映されないので忘れずに。

確認をして反映されていれば完了です。

ヘッダーモバイルメニューの表示

ヘッダーモバイルメニューだとこんな感じになります。

ヘッダーモバイルメニュー・

ヘッダーモバイルボタンの表示

ヘッダーモバイルボタンだとメニューボタンがなくなって★ボタンで表示されます。

ヘッダーモバイルボタン (2)

 カスタムリンクにしたい場合

カスタムリンクにしたい場合は希望のURLを記入して

リンク文字に表示させたい文字を入れることで追加できます。

カスタムリンクにしたい場合

ちなみにPCヘッダーメニューではドロップダウン表示が可能ですが
モバイルでは表示されません。

cocoonのヘッダーメニュー作成でドロップダウン表示させる方法も解説してます。

ブログ・web
スポンサーリンク
nemuをフォローする
記事を書いてるやつ
nemu

nemuです。
眠たい目をこじ開けていいモノ探し。いいモノとは値段ではなく自分の心がときめくものだ。最近ミーノに心を奪われた。。( ˘ω˘)スヤァ。。
YouTubeもやってます。

nemuをフォローする
nemuu.net
タイトルとURLをコピーしました