グローバルナビゲーション メニューをパソコンとモバイルで切り替えるには？というご相談を頂きました。CSSだけで切り分ける方法、wp_is_mobileとwp_nav_menuで切り分ける方法を解説します。
目次
ワードプレスbizvektorのグローバルナビゲーションのカスタマイズ
ワードプレスのbizvektorのカスタマイズについて質問致します
グローバルナビゲーションをPC用（画像）、スマートフォン用（テキスト）で表示させたい
※PC用の画像はNav Menu Imagesプラグインを使用
※子テーマの使用可能
CSSの知識はありますが、ワードプレスのカスタマイズが初めてで戸惑っています
ワードプレスのカスタマイズが初めてで、ネットで調べると子テーマをカスタマイズして、functions.phpとstyle.cssを上書きするとグローバルナビゲーションのPC用とスマホ用の振り分けが実現できるようですが、php初心者の私にはadd filterの関数がわかりません
ちなみにヘッダーの電話番号の画像は子テーマのfunctions.phpをカスタマイズして表示することができました（ネットにソースが書いてあったため実現できました）
↓ヘッダーの電話番号画像のソース
<?php //
add_filter('headContactCustom','do_head_contact_custom');
function do_head_contact_custom($headContact){
$headContact = '
‘;
return $headContact;
}
ワードプレスの子テーマfunctions.phpに同じ記述でグローバルナビゲーションの上書きができるはずなんですが、phpの理解ができず困っています
上記のソースの意味が分かれば、解決すると思い、ネットで調べても分からず、上記ソースの説明をお願いしたい次第です
add_filterの原理
bizvectorはそれほど利用したことがないので、add_filterの基本原理だけ説明しておきますね。
function 【独自の関数名】() {
上書きしたい処理
}
add_filter('【既存の関数名】', '【独自の関数名】');
このように、既存のテーマの処理やWordPressに用意されている関数を上書きするのがadd_filterです。
headContactCustom ･･･ 既存のテーマの関数
do_head_contact_custom ･･･ 上書きしたい独自の関数
add_filter と aplly_filters をセットで勉強すると良いと思います。
WPcodex 関数リファレンス add_filter
WPcodex 関数リファレンス aplly_filters
分かりやすいと感じた解説はこちらの記事でした。
SEI2の日記 様 apply_filters と add_filter の使用方法
HACKNOTE様 apply_filtersとadd_filter
頂いたコードの内容は、do_head_contact_customで電話番号の部分だけ（$headContact）を上書きしている状態なので、既存のグローバルナビがどうやって表示されているかを把握しなくてはナビ全体を置き換えることはできないかもしれません。（既存の関数名を把握する必要がある）
多くの場合は、header.phpに後述の「wp_nav_menu()」があると思うので、一概に”add_filterを使えばできる”というわけではないかもしれません。
ナビゲーションメニューのPC/モバイル切り替え
ナビゲーションメニューのPC/モバイル切り替えですが、CSSだけで行うことも可能ですし、bizvectorの仕様を理解していなくても切り替える方法があります。
CSSだけでメニューを切り替える方法
多くのWordPressテーマでは、ナビゲーションメニューのそれぞれにIDが振り分けられています。bizvectorの公式サイトでもそのようになっています。（カスタムメニューを利用していると思います。）
外観＞メニュー でカスタムメニューを作る方法についてはこちらをご覧ください。
カスタムメニューの作り方
bizvectork公式のソースでいうと、li#menu-item-12 がトップページ 、li#menu-item-2385 がフォーラムとなります。
これを利用すればプラグインを使わずとも背景画像に置き換えることができますし、メディアクエリを使えばPCとスマホで表示を切り替えることも可能です。
※PCとモバイルでメニューの並び替えをしたい項目を変えたい･･･とかになるとCSSだけだと無理矢理感が出るので以下の方法と組み合わせると便利です。
wp_is_mobile + wp_nav_menu
Nav Menu Imagesを使った事が無いため、この方法と組み合わせられるかはわかりませんが、WordPressには元々
1.PCと、タブレット含むモバイル端末で処理を分岐する関数 wp_is_mobile
2.メニューを表示するテンプレートタグ wp_nav_menu
が用意されています。
WPcodex 関数リファレンス wp_is_mobile
wp codex テンプレートタグ wp_nav_menu
例えば以下のように別々のメニューを出す事ができるので、Nav Menu Imagesで設定した（？）メニューをPC用に表示することができれば切り分けできるかもしれません。（既存のメニュー出力部分を修正する形です）
<?php
/* header.phpのメニュー出力部分で行うイメージです */
if ( wp_is_mobile() ) {
wp_nav_menu( array('menu' => 'モバイル・タブレット用カスタムメニュー名' ));
} else {
wp_nav_menu( array('menu' => 'PC用カスタムメニュー名' ));
}
?>
ちょっとプラグインを見てみると、カスタムメニューを拡張するプラグインっぽいのでカスタムメニューを二つ表示させる形でいけるかもしれませんね。
この方法ならbizvetctorの既存のコードを探してフィルターすることが無い上、別のテーマでも使える考え方だと思います。
ちなみにwp_is_mobileはタブレットも含んでしまう点が難点なのですが、モバイルだけ切り分けたりモバイル・タブレット・PCで切り分ける方法を紹介している記事もあるのでこちらも参考になると思います。
nobbi LABO様 wp_is_mobileによる条件分岐をカスタマイズする
ホワイトベアー様 WordPressでスマートフォン・タブレット・PCで表示を変更する条件分岐方法
参考にして頂ければ幸いです。