モバイルメニューにボタンや画像などを表示してリッチなメニューにカスタマイズする方法

モバイルメニューにボタンや画像などを表示してリッチなメニューにカスタマイズする方法

機能紹介
初心者向け
yStandard Toolbox

yStandard Toolboxのメニュー拡張機能と[ys]パーツ機能を使い、モバイルメニューの内容をブロックエディターを使ってカスタマイズする方法について紹介します。

※このページで紹介している機能では有料プラグイン「yStandard Toolbox」を使用しています。
※プラグインの詳細は yStandard Toolbox ページをご覧ください。

※この機能は yStandard Toolbox v1.9.0 から利用できます。

完成イメージ

完成イメージはこちら▲

モバイルメニューを開いた際、ただグローバルメニューに設定したメニュー項目が並ぶだけではなく、ボタンを配置したり、バナー画像を使ってリンクを設定することも出来ます。

グローバルメニューを表示したままにすることも出来ますし、モバイルメニュー内ではグローバルメニューを非表示にすることも出来ます。

モバイルメニューの設定方法

モバイルメニューウィジェットを有効化する

yStandard Toolboxの「メニュー拡張」メニューから「モバイルメニューウィジェットを有効化する」にチェックをつけます。

「外観」→「ウィジェット」内に「モバイルメニュー(上)」「モバイルメニュー(下)」が追加されます。

[ys]パーツ機能でモバイルメニューに表示する内容を作成する

[ys]パーツでモバイルメニューに表示する内容を作成します。

上の画像のようにカラムブロックとボタンブロックの組み合わせでメニューを作る方法がおすすめです。

[ys]パーツの使い方についてはこちらのマニュアルをご覧ください▼

[ys]パーツの使い方
[ys]パーツの使い方について紹介します。
wp-ystandard.com

[ys]パーツ表示ウィジェットをモバイルメニューに追加する

「外観」→「ウィジェット」から「[ys]パーツ表示ウィジェット」を「モバイルメニュー(上)」もしくは「モバイルメニュー(下)」に追加します。

「モバイルメニュー(上)」はグローバルメニューの上側、「モバイルメニュー(下)」はグローバルメニューの下側に表示されます。

モバイルメニューでグローバルメニューを非表示にする場合はどちらに追加しても大丈夫です。

「タイトル」を空欄、「表示するパーツ」で先程作成したパーツを選択し、「保存」ボタンをクリックします。

実際にメニューの表示を確認してみましょう。

パーツの表示は出来ましたが、モバイルメニュー背景色とボタン文字色がほぼ同じになってしまったため、見づらくなってしまいました。

モバイルメニューの背景色や文字色の設定をする

モバイルメニューの背景色や文字色をカスタマイザーから調整しましょう。

モバイルページのメニュー設定・サイドバー表示設定
モバイルページのメニューに関する設定、サイドバーの表示設定について紹介します。 モバイルメニュー・サイドバーの設定はテーマカスタマイザーの「[ys]デザイン」→…
wp-ystandard.com

また、モバイルメニューの背景色・文字色の設定変更で[ys]パーツで作成したボタンなどの色が変わってしまった場合はもう一度[ys]パーツで作成したコンテンツを確認して、文字色の設定などを調整していきましょう。

モバイルメニュー上部の検索フォームやグローバルメニューを非表示にする

モバイルメニューに表示されている検索フォームやグローバルメニューを消し、モバイルメニューウィジェットで作ったメニューのみ表示する場合、「メニュー拡張」メニューから「モバイルメニュー内のグローバルメニューを非表示にする」「モバイルメニュー内の検索フォームを非表示にする」にそれぞれチェックをつけます。

完成

モバイルメニューのカスタマイズ完了です!

ただグローバルメニューが並んでいるときよりもぐっと使いやすくなったのではないかと思います。

設定に関して、少し手順が多くなりますが、ぜひ試してみてください。