メニューの設定をしよう

このページではWordPressテーマ「SANGO」でのメニューの設定方法について解説します。

メニューを作成しよう

WordPressのメニュー設定は、［管理画面］⇒［外観］⇒［メニュー］から行います。

手順1：メニューの新規作成

まずはメニューを作りましょう。②［新規メニューを作成］をクリックし、②メニュー名（「例：PCヘッダーメニュー」）を入力します。③その後［メニューを作成］をクリックします。

手順2：メニューをどこに表示させるかを選ぶ

次にメニューをどこに表示させるかを選びます。SANGOではあらかじめ3つのメニューの位置が用意されています。

それぞれのメニューの表示位置と役割については後ほど詳しく説明します。

手順3：メニューの項目を作る

次にメニューに表示させる項目（リンク）の設定を行います。画面左側で「固定ページ」「投稿」「カスタムリンク」「カテゴリー」から項目を作ることができます。

カスタムリンクからは「URL」と「リンク文字列」を自由に決めることができます。

［メニューに追加］をクリックすると、その項目がメニューに追加されます。これを繰り返してメニューの項目を作りましょう。

SANGOのメニュー位置は4箇所

初期設定では、SANGOのメニューは4箇所に設置することができます。どれも任意なので、必ず設定しなければいけないものではありません。

その1：ヘッダーメニュー（PCのみ）

1つめがPC用のヘッダーメニューです。ブラウザの幅が768px以上、かつPCで見た場合のみに表示されます。

通常の表示

ロゴを中央寄せしている場合は下に

ロゴを中央寄せする方法は「ロゴやタイトルの設定をしよう」をご参照ください。また、メニューの色の変更は「カスタマイザーの色設定」から行います。

その2：スライドメニュー（モバイルのみ）

スライドメニューはモバイル（スマホ/タブレット）でのみ表示されるメニューです。PCでは表示されず、モバイルでも768px以上になると非表示になります。

画面に収まりきらなかったメニュー項目は右側にスクロールすることで表示されます。「スクロール可能であること」を示すために、ページが読み込まれた際には若干左にスクロールされながら現れる仕様となっています。

なお、「表示されているページ」＝「メニューのリンク先」の場合には、テキストの下に下線が引かれます。

その3：フッターメニュー（ページ最下部）

こちらはPC/モバイル共通のメニューです。全てのページの最下部に表示されます。

「利用規約」や「サイトマップ」などへのリンクをこちらに配置することをおすすめします。

参考：メニューテキストにはアイコンが使用可能

なお、メニューの文字列には、FontAwesomeのアイコンフォントを使うこともできます。

参考：SANGOのFontAwesome対応

バージョンや設定により使用可能なFontAwesomeのアイコンが異なります。SANGO v1.7以上をご利用の場合、FontAwesome5がデフォルトで有効になっています。詳しくはこちらをご覧ください。

参考：ヘッダーメニューに検索ボタンを設置することも

SANGO v1.8以上をご利用の場合、ヘッダーメニューに検索ボタンを使用することもできます。利用するためにはメニューに「カスタムリンク」の項目を追加し、以下のように設定を行います。

詳しくはこちらをご覧ください。

その4：フッター固定メニュー（モバイルのみ）

モバイル（スマホ/タブレット）では、画面下部に固定されるメニューを表示することができます。設定手順が他のメニューとは異なるため、詳しくは以下の記事をご覧くださいませ。

2020年8月13日モバイル用フッター固定メニューの設定方法

2列のメニューボックスを表示する方法

上のようなメニューをサイドバーに設置する方法は、以下の記事で説明しています。

2021年6月17日メニューボックスをウィジェットやページに表示する方法