【賢威カスタマイズ】賢威6.2のスマホメニューを削除する方法

グローバルメニューの構造と非表示の設定

今回は、いさろぐに寄せられた質問に簡単ではありますが、答えてみたいと思います。 「プラグインを利用することで賢威のメニューが開かなくなってしまった」というご質問をいただきました。

私の環境でも実際にプラグインを有効化してみましたが、メニューは問題なく動作していました。 それぞれの環境が違うことや、プラグインの設定、カスタマイズ状況によって原因を特定することは意外と難しいものです。 そこで、今回は別案でいただいた「スマホだけグローバルメニューを削除する方法」を考えていきたいと思います。

今回の記事の目的

  • 賢威6.2グローバルメニューの構造を確認
  • スマホ表示の際にメニューを非表示にする

賢威テンプレートにはWordPressのメニュー機能を利用した、グローバルメニューがあります。 「外観」→「メニュー」から自由にメニューを設定することで、自動的に反映される仕組みになっていて、PC・スマホどちらにも同じメニューが反映されます。

グローバルメニューの記述を確認してみる

賢威のグローバルメニューの記述は、「外観」→「テーマの編集」から「テーマヘッダー (header.php)」を選択します。

そして、以下の記述の箇所が該当のグローバルメニューの記述となっています。 コメントアウトを見ると分かりやすいですね。

●header.php

<!--▼グローバルナビ-->
<div id="global-nav">
<dl id="global-nav-in">
<dt class="btn-gnav">メニュー</dt>
<dd class="menu-wrap">
<ul id="menu" class="menu">
<?php echo get_globalmenu_keni(); ?>
</ul>
</dd>
</dl>
</div>
<!--▲グローバルナビ-->

上記の記述の「dt」がスマホ用の「メニュー」というテキストになっているので、スマホ表示の際にテキストを変更したい場合は、この箇所を任意に変更することで対応が可能です。

また、ハイライトにした7行目の関数で設定したメニューを呼び出しているようです。 「functions.php」のメニューのカスタマイズに記述がありますが、ここでは詳細な説明は割愛させていただきます。

それでは、今回、スマホ表示の際にはグローバルメニューを非表示にする、ということで、CSSで非表示にする方法と、「wp_is_mobile」関数を利用した条件分岐の方法を紹介したいと思います。

CSSでグローバルメニューを非表示にする

CSSを利用して、メニューの表示を制御するというものです。 この場合、「テーマヘッダー (header.php)」でphpを触ることなく、「mobile.css」への追記で対応することが可能です。 ただし、HTML上はコードが表示されますので、お好みで選択してください。 利用しないコードを出力したくない、という方は後述する「wp_is_mobile」関数を利用した条件分岐の方法をご確認ください。

●mobile.css

/*--------------------------------------------------------
グローバルナビ
--------------------------------------------------------*/

#global-nav{ border-bottom: 0; }

「mobile.css」の94行目にある「#global-nav」に対し「display:none;」とすることで、グローバルメニュー自体を見えなくする方法です。 具体的には以下のように記述を追加します。

●mobile.css 追記後

/*--------------------------------------------------------
グローバルナビ
--------------------------------------------------------*/

#global-nav{ border-bottom: 0; display:none; }

このように指定することで、グローバルメニュー全体を非表示にすることができました。 続いては「テーマヘッダー (header.php)」で調整をおこない、HTMLの出力自体を制御する方法です。

「wp_is_mobile」を使って、スマホ表示の条件分岐をおこなう

2つ目の方法は、「テーマヘッダー (header.php)」内でphpを触ることになりますので、カスタマイズの際は必ずバックアップを取るなどし、すぐに現状復帰できるようにしておくと安心です!

いざという時のためのWebサイトデータのバックアップ

それでは前述したグローバルメニューを以下のように変更していきます。 「外観」→「テーマの編集」から「テーマヘッダー (header.php)」を選択します。

●header.php

<?php if (wp_is_mobile()) : ?>
ここはスマホ用の表示エリアなので、何も表示しない場合は削除します
<?php else : ?>
<!--▼グローバルナビ-->
<div id="global-nav">
<dl id="global-nav-in">
<dt class="btn-gnav">メニュー</dt>
<dd class="menu-wrap">
<ul id="menu" class="menu">
<?php echo get_globalmenu_keni(); ?>
</ul>
</dd>
</dl>
</div>
<!--▲グローバルナビ-->
<?php endif; ?>

上記のハイライト部分がスマホ表示の条件分岐となっています。 2行目のテキスト部分がスマホ表示の際の振る舞いですので、何も表示させない場合はテキストを削除しましょう。

「CSS」と「wp_is_mobile」どちらの場合でも対応は可能ですので、現在のカスタマイズ状況やご自身が分かりやすい方法でカスタムに挑戦してみましょう。 また、「wp_is_mobile」の利用はスマホとPCの条件分岐ですので覚えておくと、いろいろな場面で活用できるので便利だと思います!

まとめ

いかがでしたか?

今回はプラグインの影響によるものか原因が分からず申し訳ありません。 別案のグローバルメニューの動作について説明をしてきましたが、参考にしていただけますと幸いです!

最近めっきり更新をしていない「いさろぐ」ですが、いただいたお問い合わせには可能な限りお答えしていきますので、ぜひ「お問い合わせ」から送信ください。 記事に書いてアウトプットすることで私自身も学んでいますし、記事を見てプラスになることがあれば嬉しく思います。

また、今回は賢威6.2ベースの説明をしていますが、賢威7での対応も追記できればと考えています。 ぜひ楽しみにしていてください!