ワードプレス側でできるサイトのレイアウト・デザインの設定は主にテーマ(テンプレート)とウィジェットとメニューによって設定をすることができます。
これはテンプレートによって変わってくるのですが、主にメニューでは
・ナビゲーションメニュー
・フッター
のリンクなどの設定をすることができるはずです。
ナビゲーションメニューがあると、WordPressサイト内のコンテンツをユーザーが発見しやすくなりますので導入したほうがいいですし、プロによっては絶対に導入したほうがSEO的な効果が期待できる。
という人もいるくらいです。
そこで、ここではナビメニューを編集するき基本的な方法から、更にユーザービリティーをあげる効果がきたいできるナビゲーションメニューの構造化表示の仕方までを網羅的に解説していきたいと思います。
1.カスタムメニューとは?(主に設定できるのは2箇所)
カスタムメニューはテンプレートにもよって編集できる箇所が変わってきますので、テンプレートなどを一度見てもらったほうがいいかもしれませんが、
・グローバルメニュー(ナビゲーションメニュー)
はほとんどのテンプレートで設定することができます。
あと
・フッター
も結構多いです。
2,カスタムメニューを作成・編集する方法
2-1.メニューの作成
テンプレートで選択できるメニューが変わってくる。
私が使っているこのテンプレートの場合だと「固定ページ」「投稿」「カスタムリンク」「カテゴリー」「フォーマット」の5つのメニューから選ぶ事ができます。
これは使ってるテンプレートによって、違ってきますので、「自分のと違う!」と焦らなくても大丈夫です。
では、メニューに表示したいものを追加するための基本的な動きを説明しますね。
ここでは例として、固定ページの「ホーム」と「お問い合わせフォーム」をメニューに追加したいとします。
まずは、「外観」→「メニュー」の順」でクリックします。
①外観をクリック
②メニューをクリック
固定ページの右横にある「▲」をクリックします。
そうすると下図を見てもらえばわかるのですが、そこのようなメニューが開きます。(ピンクの枠)
ちなみに、、画面右横の紫の点の枠を見てください。
今は何も表示されてないですよね。
ここに追加したメニューが表示されますので、覚えておいてくださいね。
では、ここで今回追加したいメニュー「ホーム」「お問い合わせフォーム」のチェックボックスに✓をいれます。
最後にメニューに追加をクリックします。
①固定ページの横にある▲をクリックをする。
②メニューが開いたら「ホーム」「お問い合わせフォーム」のチェックボックスにチェックをいれる
③メニューに追加をクリック
黄緑色の枠をみてもらうとわかるのですが、「最近」「すべて表示」「検索」というタブがあります。
これは、この「固定ページ」と「カテゴリー」にだけこの3つのタブがあるのですが、「すべて表示」のタブだけを使うようにしましょう。「最近」のタブですとうまく表示されない場合がありますので。
そうすると、、先ほどの紫の点のボックスの部分を見てみるとわかるのですが
メニューが追加されていますよね。
この要領で、他に追加したいメニューを追加していきます。
ちなみに私の場合はこんな感じでメニューを追加してみました。
メニューを追加した後は下の方にある「メニューの位置」の「トップページ」のチェックボックスにチェックを入れてくださいね。
(ここにチェックをいれないとトップページに何も表示されませんでした・・汗
ちなみに、「固定ページを自動追加」の右横にあるチェックボックスにはチェックを入れないでください。
固定ページを追加するたびにトップページのメニューに追加されてしまいますので・・)
メニューを追加したらメニューを保存ボタンをクリックするのをお忘れなく。
では、これがどんな感じで表示されるのか見てみましょう。
ドキドキしますねっ!(笑)
じゃじゃ~ん!!!
ピンクの枠のところを見てください。
こんな感じでうまく表示されました!
テンション上がりますね!
2-2.メニューの階層化する
下記の画像を見るとわかるように、メニューの階層化を設定されているメニューにカーソルを持っていくと、このように表示されます。
では、さっそくいきましょう!
左側にあるメニューからから「外観」をクリックし、「メニュー」を選択します。
①外観をクリック
②メニューをクリック
するとこのような画面が開きますので、階層化したい項目を選びます。
ここでは例題として、「なちゅらるうぇぶ テスト1」の投稿を階層化したいと思います。
階層化したい項目のチェックボックスにチェックを入れたら「メニューに追加」をクリックします。
①階層化したい項目のチェックボックスにチェックを入れる
②メニューに追加をクリック
下図をみてもらうとわかるように画面右側のメニュー構造のところに先ほどチェックをいれた項目が追加されました。
そしたら、階層化したいメニューの下に移動させます。
この時、ただ単に移動させるのではなく、動画のように一つ右へずれているように移動させてください。
①階層化したいメニューの下に一つ右へずれるように移動させる
もし、こちらの作業が難しいなと感じたら、下記のやり方を試してみて下さい。
まずは、普通に階層化したいメニューの下へドラッグ&ドロップで移動させます。
移動させたらメニューバーの右に▼があるので、そこをクリックします。
①階層化したいメニューの下へドラッグ&ドロップで移動させる。
②移動させたらメニューバーの右に▼があるので、そこをクリックする。
すると下図のようにメニューがでてきます。
今回の場合、「大事にするから」に階層化させたいので「大事にするから下の階層」を選びクリックします。
①メニューが出てきたら、○○(階層化したい項目名)下の階層を選びクリックする。
これで、「なちゅらるうぇぶ テスト1」の投稿を「大事にするから」に階層化できました。
下図の紫の点線枠を見てみましょう。階層化できた場合は一つ右にずれているのがわかります。
最後に、下の方にある「メニュー設定」の中の「メニューの位置」右横にある「トップメニュー」のチェックボックスにチェックが入ってるかを確認して「メニューを保存」をクリックします。
①下の方にある「メニュー設定」の中の「メニューの位置」右横にある「トップメニュー」のチェックボックスにチェックが入ってるかを確認。
②メニューを保存をクリック。
これでメニューの階層化の完成です。
では実際にどんなふうになってるのかみてみましょう。
2-3.編集をする方法
説明欄が表示されない!って人はこちら。
上の方にある「表示オプション」の横にある▲をクリックすると、下図のようにチェックボックス付きの項目が表示されますので、その中の「説明」のチェックボックスにチェックをいれます。
①表示オプションの右横にある▲をクリック
②説明のチェックボックスにチェックをいれる。
3,フッターメニューを作成・編集する方法
フッターとは、ホームページをスクロールした時に一番下に出てくるメニューのことです。
フッターは使っているテンプレートによって、設定の方法が変わってきます。
今回はTwenty Seventeenの場合で説明していきますね。
Twenty Seventeenの場合は
ウィジェットからフッターメニューを編集します。
そしてTwenty Seventeenの場合
フッター1とフッター2と設定できます。
フッター1に追加したものは左側(ピンクの枠)、フッター2に追加したものは右側(紫の枠)に表示されます。
では早速設定していきましょう。
メニューの「外観」→「ウィジェット」をクリックします。
①外観をクリック
②ウィジェットをクリック
この画面でフッターに追加したい項目を選び追加します。
今回は例題として、「検索窓」を「フッター1」に追加しようと思います。
下図のように、フッターに表示したい項目を左の欄から選び、右側にある「フッター1」にドラッグ&ドロップします。
追加したい項目を右側にある「フッター1」にドラッグ&ドロップ
これで、フッター1に「検索窓」を追加する事ができました。
では、実際にどんな風に表示されてるのか見てみましょう。
ホームページを下の方にスクロールすると・・
このように表示されていますね。
これでフッターの編集は完了です。
あとは、他に自分が追加したいものを随時追加してみてくださいね。