今回はサイトの『メニュー』を作成していきたいと思います！メニュー画面（メニューバー）を設定することで、プロフィールや問い合わせページを簡単に表示させることが可能です！
※本記事で紹介している情報は執筆時点のもので、閲覧時点では変更になっている場合がございます。
ご利用の環境（ブラウザ、サーバー、プラグイン、テーマ、またはそのバージョンや設定、WordPress本体のバージョンや設定など）によっては本記事の通りに動作しない場合がございます。あらかじめご理解いただければ幸いです。
メニュー設定の前に
メニューに表示させる前にまず、メニューに表示させたい項目を作成していきます
この作業をしないとメニューに表示ができませんのでご注意ください!
今回は以下の４つの項目を作っていきます
固定ページの準備
まずは固定ページに表示させるページを作っていきます。
管理画面⇒固定ページ⇒新規追加の順にクリックします
新規固定ページを追加
新規固定ページを追加していきます
タイトルには『Profile』『Contact』など1ページで完結ができる内容のものを設定しておくと良いでしょう
新規固定ページのタイトルを入力します
『Contact』とタイトルを入力し『公開』をクリックします
同様の手順で『Profile』『WordPress』『Privacy Policy』という項目を作っていきます。
新規固定ページの公開
先ほどの工程で『公開』をクリックしていただくと、URLが一般公開されます（URLを指定すると該当ページを検索できます）
ただし、この段階ではまだメニューに固定ページは反映されていません
メニューは以下の手順で作成・公開していきます
メニュー設定
まず初めに新規固定ページで作成したページを表示させるためのメニューバーを作成していきます
メニュー作成
管理画面⇒外観⇒メニューの順にクリックをしていきます
メニュー画面で『新しいメニューを作成しましょう』をクリックします
メニュー構造の設定
メニュー構造の『メニュー名』にわかりやすいメニュー名をつけていきます
メニューに名前を記入後、メニューを表示させたい位置にを入れメニューを作成をクリックします
| メニューの位置 | 場所 |
|---|---|
| ヘッダーメニュー | ヘッダー（サイト上部）に挿入したいメニューを選択できます |
| ヘッダーモバイルメニュー | モバイルヘッダー（モバイル用サイト上部）に挿入したいメニューを選択できます |
| ヘッダーモバイルボタン | モバイルヘッダー（モバイル用サイト上部）に挿入したいメニューボタンを選択できます |
| フッターメニュー | フッター（サイト下部）に挿入したいメニューを選択できます |
| フッターモバイルボタン | モバイルフッター（モバイル用サイト上部）に挿入したいメニューを選択できます |
| モバイルスライドインメニュー | モバイル用のスライドインに挿入したいメニューを選択できます |
メニュー項目追加
メニュー設定できる項目
- 『固定ページ』
- 『投稿』
- 『カスタムリンク』
- 『カテゴリー』
以下の『固定ページ』横のを開きます
先ほど作成した『固定ページ』のメニューをメニューバーに反映していきます
『すべて表示』タブを選択、『Contact』『Profile』『WordPress』にをいれ『メニューに追加』の順にクリックします
を入れた『Contact』『Profile』『WordPress』が右に反映されました
メニューを表示させたい位置にを入れメニューを保存をクリックして完了
メニューの表示確認
ここまでで一通りWordPressのメニュー設定ができました
WordPressであればメニュー表示の横に『Webアイコン(FontAwesome)』を入れることも可能です。
Webアイコン(FontAwesome)表示設定
メニューにWebアイコンを入れ、メニュー表示の装飾をしていきます
FontAwesome公式サイト
Webアイコン(FontAwesome)で装飾するとこんな感じになります
FontAwesomeに関する記事はこちら
FontAwesomのアイコン選択
まず上記の公式サイトにアクセスし、好きなアイコンを選択します
今回は『WordPress』と検索⇒Verは『5.15.4』を選択します
以下画面のコード部分をコピーします
公式サイトはコードをクリックすればコードごとコピーできます
FontAwesomeのアイコンコード貼り付け
FontAwesomeコードのコピーができたら、メニューに貼り付けをしていきます
以下の位置に貼り付けます
文字の前後どちらでもOKなのでサイトの好みに合わせて設定ください（上記はWebアイコンが文字の前パターンです）
- 『WordPress』の前にWebアイコンを入れる
- 『WordPress』の後にWebアイコンを入れる
※『WordPress』以外にも様々なフォントがありますので探して設定してみてください
『Profile』『Contact』用にも同様の方法でアイコンを探し、コードのコピペをします
全て記載ができたらメニューを保存をクリックして完了
FontAwesomeが反応しない場合
FontAwesomeが反応しない場合はどうしたらよいかという意見もあるかと思います。
その場合、確認いただきたい点がありますので以下を参考にしてみてください
なお、プロ版は有料会員専用フォントですのでしようができません
WordPress【Cocoonユーザー】の場合
Cocoon設定のチェック
管理画面⇒Cocoon設定⇒全体をクリック
FontAwesome5にチェックが入っているか確認してみましょう
デフォルトの場合、FontAwesome4になっているので、必ずチェックをしましょう
WordPress【Cocoonユーザー】以外の場合
CDNコードが正しく貼れていない
CDNを利用する場合は、専用のコードをheaderタグに貼り付ける必要があります。
CDNのコードが正しく貼り付けられていない場合に表示されないことがあります。
その際、貼り付け位置やコードの内容に間違いがないか今一度確認してみてください。
さいごに
いかがでしたでしょうか？
サイトの運営を行うにあたり、あると便利な機能『メニュー設定』について解説をしてきました。
WordPressであればもちろん、WordPressを利用していない方もメニュー設定をしユーザーにとって見やすいサイト作りの参考になれば幸いです
コメント