WordPress|最も基本的なメニューの作り方【WP基礎】

2021-02-06

WordPress|最も基本的なメニューの作り方

おのです。

WordPressで、基本的なメニューの作り方です。

最近WordPressを始めた人の中には、ヘッダーメニュー、メインメニューなどの基本的な作り方、作成方法を知りたい人も多いと思います。

 

そこで本記事では、最も基本的なメニューの作り方について書きました。

確実にメニューを設置していきましょう。

 


スポンサーリンク


WordPress|最も基本的なメニューの作り方

では早速ですが、
WordPressで基本的なメニューの作り方について、解説していきます。

 

↓完成形としては、このようにメインの部分にメニューを表示するようなイメージです。

メインの部分にメニューを表示するようなイメージ

 

基本的なメニューの作り方の手順としては、以下になります。

メニューの作り方

  1. 表示させたい項目を選ぶ
  2. メニューに追加する

全体的にはこんな感じです。

 

基本的にWordPressでは、作成したメニューをどこに表示させるか選択するのが基本的なスタイルです。

WP メニューの基本

作成したメニュー「A・B・C」

↓表示させる場所

メインエリア、フッターエリアなど

こんな感じです。

逆に言えば、表示させたい場所によって、メニューの内容を変えることもできます。

 

では実際に作ってみましょう。

 

1. 表示させたい項目を選ぶ

↓まずは、管理画面左側のメニューから「外観」→「メニュー」に進みます。

メニューから「外観」→「メニュー」に進みます

 

メニューの作成画面に移ります。まだ何もメニューは無い状態なので、これから作成していきます。

 

↓最初にメニューの名前と表示させたい位置を決めてください。

メニューの名前と表示させたい位置

メニュー名名前をつける
メニュー名の位置メニューを表示させる位置

基本的には、あとで変えられるので一旦適当で大丈夫です。メインメニューとかにしておきましょう。

メニューの位置は、テーマによって変わります。今回はヘッダー部分のメインメニューを作りますので、「ヘッダー用メニュー」を選択します。

位置が間違っていたらあとで変えればいいだけです。

 

上記を選択したら、「メニューを作成」をクリックしてください。

 

↓メニューの項目を選択できるようになります。

メニューの項目を選択できるようになります

 

ここの赤枠の中から、メニューにしたい項目を選んでいきます。

 

 

2. メニューに追加する

↓例えば、カテゴリーをメニューにする場合は、こんな感じでチェックをして「メニューに追加」をします。

カテゴリーをメニューにする場合

※このとき、カテゴリー項目の中でタブになっていますので、「すべて表示」にして選択をするようにしてください。

「よく使うもの」だけだと全てのカテゴリーが出てきません。

 

 

↓こんな感じで、選択したカテゴリーがメニューに追加されます。

選択したカテゴリーがメニューに追加されます

 

これで一旦、アップル、グーグル、マイクロソフトの並びでメニューが追加されました。

「メニューを保存」をクリックします。

 

 

↓サイトトップに戻ると、メインメニュー部分に先ほど作成したメニューが設置されています。

メインメニュー部分に先ほど作成したメニューが設置されています

 

基本的には、これでメニューを作成できます。

 

 

メニューを階層化する

続いて、メニューを階層化させる手順です。

先ほどは、アップル、グーグル、マイクロソフトの並びでしたが、次はアップルの中にグーグルとマイクロソフトを入れてみましょう。

 

↓まずはメニューにしたい項目を選択した状態にします。

メニューにしたい項目を選択した状態

 

ここまでは問題ないと思います。

 

↓中に入れて階層化したい項目を、クリックした状態で動かせるので、右に少しずらします。

中に入れて階層化したい項目を、クリックした状態で右に少しずらします

 

そうすると、このように少しずれた状態になり、「副項目」と書かれています。
この時点で既に階層化は完了しました。

 

↓もしくはクリックでずらさずに、階層化したい項目を開いて「~下の階層」を選択します。

階層化したい項目を開いて「~下の階層」を選択します

 

上記のどちらかの方法で、階層化したい項目をずらせばメニューが階層化されます。

 

↓サイトトップに戻ってメニューを見ると階層化されています。

メニュの階層化

 

 

他のメニューを作成する

WordPressでは、複数メニューを作成することができます。

例えば、上記で作成したアップル、グーグル、マイクロソフト以外を新規で作ることができます。

 

手順としては簡単で、新しいメニューを作成するだけです。

↓「外観」→「メニュー」に進んだら、「新しいメニューを作成しましょう。」に進みます。

新しいメニューを作成しましょう

 

そして、最初に説明している手順でもう一度新しいメニューを作成すればオッケーです。

このようにして、WordPressではメニューを複数作成できますので、使用する場所に合わせて使分けたりします。

 

 

↓メニューを複数作成すると、メニューの画面で編集するときに選択できるようになります。

メニューの画面で編集するときに選択できる

 

一度作成したメニューを追加したり、変更、編集したりする場合はここからします。

 

 

あわせて読みたい

 

WordPress 基本設定ガイド

 

そんな感じで、WordPressで基本的なメニューの作り方でした。

これでメニューの作成はバッチリです。

では。

 

おすすめ≫WordPress|おしゃれでSEOに強いおすすめの有料18テーマ【厳選】

おすすめ≫アフィリエイト|やり方・始め方:初心者はまずおすすめのASPに登録

このエントリーをはてなブックマークに追加

 

 無料オンライン体験レッスン可・プログラミング学習でスキルアップ!

WebデザインやHTML、CSS、サイトカスタマイズに関するプログラミング学習は、
プログラミングのオンラインスクールCodeCampがおすすめです。

特に、初心者でもHTMLとCSSの基礎を学んでおくと、ブログやサイトのデザインカスタマイズが圧倒的に上達してスムーズにできるようになります。

無料オンライン体験レッスンが可能なので、興味のある人は受講してみるといいです。当然、完全に初めての人でも問題ありません。

やはり自分のブログやサイトのデザインを自由にコントロールスキルが身につくと、サイト運営がとても楽になます。スキルアップもできるし、とても勉強になりますよ。

≫CodeCamp

-WP メニュー
-, ,

© 2020 OnoCode.