記事の詳細

久々に自作のコード紹介になります、網干です。

今回はほぼコピペで完成してしまうようなスマホ専用メニューの作成方法をご紹介致します。
メニューの項目はアコーディオン形式で表示しますので、項目が多くなっても対応できます!
本記事を読む事で下記のようなメニューを作成することができます。
01_スマホ専用メニュー実装例
※本記事では「大項目」は見出しのみリンクなし、「中項目」はリンクありの想定でメニューを作成します。

では早速、横から割り込むようなスマホ専用メニューを作っていきましょう。

WordPressのメニューでスマホで表示するメニューを作成する

まずはじめに、WordPressのメニューから新規メニューの作成を行います。
02_新規メニュー作成

今回は「大項目」「中項目」でメニューを作成しました。
メニューの作成が完了したら「メニューを保存」ボタンを押して確定します。
03_新規メニュー保存

以上で、メニューの準備は完了になります。

bodyタグの下にスマホ用メニューのコード(htmlタグ、Javascript、jQuery)を貼り付ける

bodyタグの次の行に下記コードを追記します。
※基本的にはheader.phpのコードに追記することになると思います。

7行目の”wp_nav_menu”の’てすとめにゅー’の箇所を作成したメニューの名前に変更することで、自作したメニューの内容でスマホ専用メニューを作成することができます。

コードの見栄えやファイル管理を考えると、script部分はまとめて別ファイルにして読み込ませる方が良さそうですね。
ですが、今回は後先のことを考えずに「コピペでできる!」という部分を追求して作成します!

コードの貼り付けは以上です。
続けて、CSSの設定を行いましょう。

スマホ専用メニューのCSSを設定する

下記CSSを設定します。
※基本的にはstyle.cssのコードに追記することになると思います。

ボタンスタイルは下記のサイト様を参考にさせて頂きました。
参考:5つの効果で作る、よく使うCSS3ボタンデザインサンプル集

47行目の”@media screen and (max-width: 1000px)”の指定で、画面の横幅が1000px以下になったらメニューボタンが表示されるように設定しています。
もし1000pxではなく、もっと小さな横幅の時にメニューを表示したい場合は1000の値をもっと小さくしてください。

CSSの設定は以上です。

以上で、スマホ専用メニューが表示されるようになります!
細かいスタイルの修正は、CSSでなんとかごまかしましょう!

WordPressの関数を使うことで楽にメニューの作成が完了してしまいます!

いかがでしたか?

WordPressの関数を使用することで楽にメニューの項目が引き抜けてしまいます。
メニュー項目の設定自体はそこまで深い知識を必要としないので、お客様にお出しする際にも「この部分を変えればスマホ専用のメニューを変えることができます」と紹介できるのが良いですね。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る