【オリジナル(自作)テーマ制作】WordPressでドロップダウンメニューを作成する方法

ドロップダウンメニュープログラミング備忘録
スポンサーリンク

WordPressでドロップダウンメニューを作成する方法について、悩んでいませんか?

どうも、ちゃんカマです。

WordPressのオリジナル(自作)テーマ制作で、サイトをレスポンシブデザインにする時に、ナビゲーションメニューをドロップダウンにしてみたくなりました。

今回は、その時に自分がやった方法を書いていきます。
既存テーマの使用は無し、プラグインの使用も無しの方法です。

同じようなことに取り組んでいる方は参考にしてみてください。

以前に投稿した、WordPressでナビゲーションメニューを作る方法はこちら

WordPressの管理画面でドロップダウンメニューを作成

WordPressの管理画面で、新たにドロップダウンメニューを作成します。
外観 → メニュー → 「新しいメニューを作成しましょう」を選択。
メニュー名を入力します。今回はドロップダウンメニューという名前をつけます。
メニュー名を入力したら、「メニューを保存」をクリックします。

管理画面でメニューを作成
管理画面で新しいメニューを作成する

ドロップダウンメニューの「メニュー」となる部分を作成します。

メニューとなる部分
この「メニュー」となる部分を作成する

外観 → メニュー → カスタムリンク で作成します。
「URL」はサイトのフロントページのURLを、「リンク文字列」はメニューと入力します。
そして、「メニューに追加」をクリックします。

カスタムリンクで作成
カスタムリンクで「メニュー」となる部分を作成する

次に、ドロップダウンメニューの中身となる部分を作成します。

ドロップダウンメニューの中身となる部分
ドロップダウンメニューの
中身となる部分を作成する

外観 → メニュー → 固定ページ でドロップダウンメニューの中身に入れる固定ページを選択します。
この時、作成しているはずの固定ページが表示されていない場合は、「すべて表示」のタブをクリックしてください。
固定ページを選択したら、「メニューに追加」をクリックします。

固定ページを選択
ドロップダウンメニューに入れる固定ページを選択

さらに、以下のような操作が必要です。
追加した固定ページのメニューをドラックし、横にスライドします。

固定ページをスライド
ドラックして固定ページのメニューを横にスライドする

これで、下の画像のような形のドロップダウンメニューになります。

ドロップダウンメニュー

作成したドロップダウンメニューをページに表示

では、作成したドロップダウンメニューをページに表示します。
メニューはページのヘッダー部分に表示させるので、header.php に記述します。

考え方としては、header.php には通常のナビゲーションメニューとドロップダウンメニューの両方を記述しておき、CSSでサイトの表示幅に応じてどちらかを表示、もう片方を非表示にする、という感じです。

通常のナビゲーションメニュー
PCなどの表示幅なら、このナビゲーションメニューを表示
ドロップダウンメニュー
スマホなどの表示幅なら、
このドロップダウンメニューを表示

header.php には以下のように記述します。

header.php
<nav class="page-nav__dropdown">
    <?php wp_nav_menu( array('menu' => 'ドロップダウンメニュー') ); ?>                
</nav>
<nav class="page-nav">
    <?php wp_nav_menu( array('menu' => 'ナビゲーションメニュー') ); ?>                
</nav>

1〜3行目は、ドロップダウンメニューを表示させるためのコードです。
‘menu’ => ‘ドロップダウンメニュー’ は、先程WordPressの管理画面で作成したドロップダウンメニューのメニュー名になります。
page-nav__dropdown というクラス名を付与し、後でCSSで用います。

4〜6行目は、通常のナビゲーションメニューを表示させるコードです。

試しに、このままでページを表示させてみます。

両方のメニューが表示される
ドロップダウンメニューとナビゲーションメニューの両方が表示される

このように、ドロップダウンメニューとナビゲーションメニューの両方が表示される状態になります。

CSSでドロップダウンメニューの表示、非表示を制御する

では、サイトの表示幅に応じたドロップダウンメニューの表示と非表示を、CSSで制御します。

モバイルファーストなので、最初に画面幅が狭い場合(スマホなどを想定)のCSSを記述します。
style.css に以下のように記述します。

style.css
/* ドロップダウンメニューを表示 */
.page-nav__dropdown {
  width: 100%;
  margin-left: 10px;
  text-align: left;
}

/* ナビゲーションメニューは非表示 */
.page-nav {
  display: none;
}

display: none; でナビゲーションメニューを非表示にしています。
その他のCSSのプロパティについては、あくまでも自分が制作しているサイトに合わせたものなので参考程度にどうぞ。

次に、表示幅が広い場合(PCなどを想定)のCSSを記述します。

style.css
/* 表示幅が1024px以上の場合はドロップダウンメニューを非表示 */
@media (min-width: 1024px) {
  .page-nav__dropdown {
    display: none;
}
/* ナビゲーションメニューは表示 */
  .page-nav {
    display: inline;
    width: 100%;
    margin-left: 10px;
    text-align: left;
}
}

min-width: 1024px で「サイトの表示幅が1024px以上の場合は」という条件をつけています。
display: none; で今度はドロップダウンメニューを非表示にしています。
そして、ナビゲーションメニューはdisplay: inline; で表示を復活させています。

これでドロップダウンメニューの完成です。

ドロップダウンメニューの完成
ドロップダウンメニューの完成

まとめ

WordPressの管理画面でメニューを作成し、それをheader.php に記述、CSSで表示と非表示を制御するという方法でドロップダウンメニューを作成することが出来ました。

今回の記事が皆さんの参考になれば幸いです。
以上、ちゃんカマでした。

コメント

タイトルとURLをコピーしました