スマホ表示のヘッダーの下にメニューを表示する!

WordPressのテーマ「Diver」を使用してWordPressサイトをカスタマイズします。本稿では、スマホにおけるヘッダー部の左の部分の表示を設定します。Diverでは、ドロワーメニューと読んでいます。

スマホ表示でメニューがどこにもない!

Diverでカスタマイズしたサイトをスマホで見ていると、メニューが表示されていないことに気づくと思います。そこで、ドロワーメニューに表示したいと思います。

ドロワーメニューにメニューを設定する!

ウィジェットの設定画面から、ドロワーメニューにメニューを設定します。「ドロワーメニュー」に「ナビゲーションメニュー」をドラッグ・アンド・ドロップします。「メニューを選択」の設定画面で、PC表示のときに表示しているメニューを指定します。タイトルは、設定しなくて大丈夫です。

スマホのメニューをWordPressの設定で表示する!

Diverの設定ではありませんが、WordPressの設定でスマホの場合だけ表示されるメニューを表示させることができます。「外観」→「メニュー」の画面を開き、「位置を管理」のタブを表示します。「横スクロールメニュー(スマホのみ)」の設定で、表示させたいメニューを選択します。この方法では、ヘッダーの下にメニューが表示されます。

おわりに

Diverでは、デフォルト時にスマホで表示した時にメニューが表示されないために、少し戸惑うかもしれません。ドロワーメニューにメニューを登録しましょう。