MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


【ひろきち様】WordPressでグローバルナビゲーション・メインメニューをパソコンとモバイルで切り替える方法

グローバルナビゲーション メニューをパソコンとモバイルで切り替えるには?というご相談を頂きました。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 がフォーラムとなります。
bizvector メニュー ID

これを利用すればプラグインを使わずとも背景画像に置き換えることができますし、メディアクエリを使えば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で表示を変更する条件分岐方法

参考にして頂ければ幸いです。

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA