jQueryいらず?WordPressで簡単にドロップダウンメニューを追加する方法

スポンサーリンク

jQueryいらず?WordPressで簡単にドロップダウンメニューを追加する方法

 

今時のサイトってすごくオシャレですよね?

自分のサイトもオシャレにしたいんだけど、どうすればいいの…?

 

そんな時、簡単にオシャレなサイトに見せるドロップダウンメニューを作成する方法をご紹介いたします。

スポンサーリンク

ドロップダウンメニューって?

ドロップダウンメニューって?

 

まず、「ドロップダウンメニュー」というのは何なのか?

 

おそらくあなたも見たことはあるでしょう。最近のオシャレなサイトは必ずと言っていいほどこのドロップダウンメニューを実装しています。特にヘッダー付近のメインメニューに多いです。

 

ドロップダウンという名前の通り、メニューにカーソルを合わせるとさらに細かい項目が合わせたメニューの下へと伸びていきます。

 

↓こんなやつですね。

ドロップダウンメニューの例の画像

見たことありませんか?そうですこれがドロップダウンメニューです。

 

このドロップダウンメニューがあるだけで、だいぶサイトのオシャレ度上がると思いませんか?

では、作っていきましょう!!

 

ドロップダウンメニューを作るのは難しい?

ドロップダウンメニューを作るのは難しい?

 

ドロップダウンメニューを自作しようとすると、結構な量の勉強をしなければなりません。HTML、CSS、JavaScript…このJavaScriptというのがなかなか曲者で、プログラミングの知識がないと大変難しいです。

 

その、JavaScriptを簡単に操作できるようにしようということでよく使用されるのが、タイトルにもあるjQueryというものです。

このjQueryを使えば、作れなくもないでしょう。

 

しかし…!!

 

それでも、やはり時間がかかってしまう。

勉強なんてしている暇ないよ…。

 

でも安心してください!

 

WordPressなら本当に簡単に、しかも一切の勉強することなくドロップダウンメニューが作れてしまいます。

 

WordPressは大概のことは、すぐにできてしまいますし、ちょっと小難しいこともコミュニティーが大きく、いろんなプラグインがあるため、できてしまいます。

 

ドロップダウンメニューに至っては、なんとドラッグ&ドロップだけで完成してしまうのです!

 

WordPressではドロップダウンメニューが超簡単に作れる

 

WordPressでドロップダウンメニューをつくろう

WordPressでドロップダウンメニューをつくろう

 

では、さっそくドロップダウンメニューを作成していきます。

 

まずは、WordPressのダッシュボードにいき、『外観』の『メニュー』を選択してください。
すると、以下のような画面になります。

 

WordPressのメニュー編集画面の画像

ここで、まだメニューを作ったことがない場合はメニュー名を入力して「メニュー作成」を押してください。

 

ちなみに、メニュー名はただの名称なのでサイトに表示されませんのでわかりやすい名前で大丈夫です。

 

メニュー新規作成の仕方の画像

新しいメニューを作成したら、メニューに表示させたい固定ページやカテゴリーなどを追加していきます。

追加したい項目にチェックを入れて、『メニューに追加』を押すだけで追加できます。追加を行うと『メニュー構造』に追加した一覧が表示されます。

 

これだけで、ドロップダウンメニューではない普通のメニューが完成します!

 

普通のメニューからドロップダウンメニューに変更していくには、ドラッグ&ドロップで以下のように動かすだけです。

ドラッグ&ドロップでドロップダウンメニューを作る画像

すると、項目名の右側に『副項目』と出ます。こうすることにより一番上の『てすと』カーソルを合わせると、残り二つの『てすと』が現れ

ドロップダウンメニューの例の画像

このようなドロップダウンメニューが完成します。

 

最後に『メニューを保存』のボタンを押すのを忘れないようにしましょう。
保存が終わったら、思い通りの動きになっているかサイトを見てみましょう。

 

これで、完成です!!

 

まとめ

オシャレなサイトには必ずと言っていいほど、「ドロップダウンメニュー」が実装されています。

WordPressでは、本当に簡単に作成することができますので試してみてください。

 

しかしながら、自分好みのデザインや動きにしたい場合はやはりCSSやJavaScriptといった専門的な知識が必要になってきます。

興味のある方は、挑戦してみるのもいいですが、まずはWordPressで簡単に作ってみてください。

コメント