グローバルナビを好きなメニューにカスタマイズ
賢威を使っている方に「メニューを自由にカスタマイズするには？」という質問を受けることがあります。 実は、WordPressの管理画面の設定から対応できるのですが、実はメニューのカスタムは賢威の設定ではなく、WordPressの基本設定で可能なんです！
はじめたばかりだと気付きにくいメニュー設定、今回は基本的ですが自由度が高い「グローバルナビ」のカスタマイズに挑戦していきましょう。
今回の記事の目的
- WordPressのメニューを活用しよう
- カスタムメニュー「賢威」に設定しよう
WordPressのメニュー設定の方法を順番にみていき、設定した「メニュー」を賢威に設定していくという流れです。 賢威6.2では「フッター」に2か所、このメニューを設定することも可能ですので、目的にあった使い方をしていきましょう。
まずは管理画面にログインして「メニュー」にアクセス
WordPressのデフォルトの左メニュー「外観」＞「メニュー」からメニューの画面に移動します。
新規のメニューを作成
メニューの画面に移動したら、「新規メニューを作成」をクリック。
メニューの名前を入力したら、「メニューを作成」をクリックします。
この画面まで進んだら、メニューの設定の準備完了です。 自分の好きなメニューにカスタマイズしていきましょう。
メニューの項目を選ぼう
メニューの項目は左側の「固定ページ」「投稿」「カスタムリンク」「カテゴリー」からメニューに表示させたい項目を選んで、右側のメニュー構造に追加していきます。
「固定ページ」を追加
左側のメニューの固定ページをクリックすると、投稿されている固定ページが表示されます。 この時「すべて表示」のタブにしておくと一覧で見ることができるので分かりやすいです。
そして、追加したい項目をチェックし「メニューに追加」をクリック。 右側のエリアに追加した項目が追加されていたら成功です。
ここでは「ホーム」と「お問い合わせ」というページを選択してみました。
「投稿」を追加
次は「投稿記事」を追加してみます。 特定の記事をメニューに追加したい時には、ここから設定をしていきます。
追加方法は固定ページと同様で、チェックして「メニューに追加」をクリックします。
「カスタムリンク」を追加
カスタムリンクは「自由なリンク」を追加する項目です。 別のドメインに会社概要がる場合や、ECショップのページなど、外部のサイトへのリンクが必要な場合は、こちらを利用すると便利です。
上記の画像のように「URL」と「テキスト」を入力して、メニューに設定します。 そのまま「メニューを追加」をクリックして、右側のエリアに追加していきます。
「カテゴリー」を追加
カテゴリーもこれまでと同様の操作で追加可能です。 「親カテゴリ」「子カテゴリ」と分かれているので、それぞれメニューに追加したい場合は、どちらのカテゴリも追加する必要があります。
メニューの親子関係を作る
ここまでのメニュー追加で、以下のような項目を設定できました。 しかしこのままでは、カテゴリがすべて同じ階層になってしまうため、親子関係を作っていきましょう。
メニューの並び替えと親子関係の設定は、操作がとても簡単で「ドラッグ＆ドロップ」をして項目を移動させるだけで完了です。
この操作でお問い合わせを一番下に、カテゴリを親子関係にしてみました。 子カテゴリをつかんで、右にずらすような操作です。
必ず「メニューを保存」をクリックして設定を保存するようにしましょう。
賢威の設定に作成したメニューを適用する
これだけではまだメニューは反映されていませんので、賢威に設定して、メニューを反映していきます。 左メニューの「賢威の設定」に移動し「グローバルメニューの選択」を見ていきます。 ※賢威6.2のコーポレート版で操作しています。
この設定でさきほど作った「ヘッダーのメニュー」を選択して、「変更を保存」をクリックします。
実際にサイトを見てみると、ヘッダーエリアに設定したメニューが反映されています。
スマートフォンで見た際のメニュー表示はこのような形になります。
「フッター」用のメニューも作ってみる
賢威6.2では、フッターメニューも同様にカスタムメニューを設定することが可能です。
左メニューの「賢威の設定」＞「フッター」に移動し「フッタメニューの選択」を見ていきます。
フッターには特定のカテゴリだけ、プライバシーポリシーや会社概要だけを掲載したい、などサイトの設計によってメニューはさまざまかと思います。 カスタムメニューを上手に活用して、使いやすいメニュー設計のサイトにしていきましょう！
いかがでしたか？
今回はWordPressのメニュー設定と賢威への適用について紹介しました。 もともと自由度の高いメニュー設定なので、上手に活用して賢威に利用していきましょう。
また、今回紹介したメニューの設定方法は「賢威7」でも同様の操作で適用が可能です。 すでに賢威7を使っている方も参考にしてみてください！
メニューまわりの記事も今後増やしていければと思います。 次回は「メニューを画像にしつつ、スマホ表示ではテキストメニューにする」や「特定のページでメニューの内容を変更する」のようなカスタマイズを考え中です。
よく使いそうなシチュエーションのカスタマイズを紹介できればと思います。 もしこんなことがしたい、というご意見があれば「お問い合わせ」からリクエストをお願いします！
