ワードプレスのメニューをスマホとPC版で自由に作れるようにしたいというご依頼事例をご紹介いたします。
クライアント様のご相談内容
事業者をまとめて検索できるリスティングサイトを運営されているクライアント様のご相談内容は下記のような内容でございました。
「Empty Menu「foot_navi」
(中略)
この内、foot_naviについては自分で設定できましたが、他のメニューについては編集ができないようです。
可能であれば、サイト上部にあるヘッダーメニュー(グローバルメニュー)も自分で追加や削除・編集を簡単に行えるようにしたいです。
既存はアイコンがあるのでアイコン設定もできればと思います。
その際に、スマホメニューも別に設定でき、追加削除ができれば助かります。
ワードプレスのメニューが設定変更できない理由は？
ワードプレスには、管理画面＞外観＞メニュー からワードプレスの様々なメニューを設定変更する機能がついていますが、テーマによっては(特にオリジナルなテーマ)では、このグローバルメニューが直接テンプレートファイルに書き込まれていて、管理画面のメニュー設定から動的に読み込むようにプログラムされていない場合がございます。
この場合、管理画面のメニュー設定でメニューを設定してもサイトに反映されません。
ちなみに管理画面で設定されたメニューをテーマで読み込んで表示するコードは下記のようになります。
wp_nav_menu( array( 'menu' => 'メニュー名', 'menu_class' => 'メニューに適応するCSSクラス' ) );
ただ、この読み込み方法ですと、サイトのスタイルシートが適応されなかったり、アイコン画像等を読み込むことはできません。
こちらのクライアント様の事例では、WPドクターで下記のような流れで、メニュー関連のテーマのカスタマイズをサイトに実装させていただきました。
・本番サイトで直接作業せず、当社仮想環境に作業用テストサイトを構築
・管理画面で設定されたメニューがテーマに読み込まれるようPHPでコーディング
・サイトのスタイルシートがメニューの見た目が変わらず適応されるように、クラス等を調整、スタイルシートを作成
・メニュー設定の説明欄に画像のURLを入れると各メニューにそのアイコン画像が表示されるようにコーディング
・スマホで表示したときは、別のメニューが自動で選択して呼び出されるようコーディング
・動作確認の上本番サイトに適応
WPドクターでは経験豊かな技術者がUI関連の調整を安全に迅速に代行いたします。お気軽にご依頼・ご相談お送りください。
WordPress ワードプレスサイトのUIのカスタマイズや機能向上のご依頼・ご相談はWPドクターまでお気軽にお送りください
