creatersnest16

【初心者向け】WordPressでナビゲーションの設定をしてみよう!


こんにちは!
今回は、WordPressでナビゲーションの設定を紹介します。
ナビゲーションは、読者がコンテンツまでスムーズに移動できるようにするためのものです。
初心者でもわかりやすいように設定方法を説明します。

 ナビゲーションメニューの追加方法

まず、管理画面左の「外観」⇒「メニュー」をクリックします。
その後、画面真ん中の「新規メニューを作成」をクリックします。

navi02

画面の見方としまして、
左側が、メニュー候補の一覧です。
右側が、実際にメニューに表示する項目を編集する箇所です。
左側でメニュー候補から選び、右側で詳細を編集します。

「メニューの名前」欄に任意の名前を入力して、「メニューを作成」をクリックします。
自分が管理しやすい名前で結構です。

そして、下図の赤枠内の「メニュー構造」でナビゲーションメニューの編集ができます。

navi03

ナビゲーションメニューに追加できるのは、
左にある「固定ページ」「リンク」「カテゴリー」ですので、いずれかを選択します。
任意の記事にチェックを入れ、「メニューに追加」をクリックします。
すると、メニュー構造にメニューが追加されます。
※固定ページとカテゴリーにだけ「最近」「すべて表示」「検索」という3つのタブがありますが、
「最近」だとタイトルが表示されないケースがあるので「すべて表示」を使うようにしよう。

navi04

 

次は、「メニュー設定」についてです。

navi05

れぞれチェックを入れると次のように機能します。

・固定ページを自動追加は、固定ページを作る毎に固定ページのリンクを自動でナビゲーションメニューに追加できます。ただし、自動的に追加されると不便なことも多いので、外しておくことをオススメします。

・テーマの位置は、サイトにナビゲーションメニューを表示させるかどうかのチェックですので、必ずチェックしておきましょう。

最後に、「メニューを保存」を忘れずにクリックして下さい。

 

ナビゲーションメニューの位置の指定方法

メニューを複数持つ場合あります。
その場合、複数メニューを一覧画面で設定する方法が便利です。

「位置の管理」というタブをクリックし、
ヘッダーメニューやフッターメニューとして、どのメニューを利用するかを選択します。

navi08

選択しましたら「変更を保存」をクリックして、位置の指定が完了しました。

 

 ナビゲーションメニューの並び替え方法

メニューの並び替えはいたって簡単です。
対象のメニューをドラッグ&ドロップするだけです。

navi06

並べ替えは上下に動かして最適な位置に移動します。
また、左右に動かすことによって親となるメニューの下に配置することが可能になります。
設定が完了したら「メニューを保存」をクリックしてください。

 

 ナビゲーションメニューの削除方法

ナビゲーションメニューのリンクを削除する場合は、
削除したいタイトルリンクを選び右側の▼をクリックして、
「削除」ボタンをクリックします。

navi07

 

ナビゲーションメニューの役割

ナビゲーションメニューは、読者をコンテンツへ誘導する役目だけではなく、
サイトへの入り口が末端ページだった時にも、効果を発揮します。
事実、トップページからの訪問者よりもサブページからの訪問者のほうが多いのが事実なので、
ナビゲーションがあると、ユーザーが目的を達成するのも楽になります。
また、読者にとってサイトの構成・目次を一目で確認できるものになりますので、
読者のことをイメージして、構成を考えることが重要です。

 

 

まとめ

いかがでしょうか。
多くのサイトでナビゲーションメニューは利用されてます。
WordPressでは直感的にナビゲーションメニューを追加できるので大変便利です。
簡単にできますので、記事や固定ページを幾つか作成した後、導入しましょう!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【入門】WordPressでHTMLやCSSを簡単に編集する方法と注意点