このページではWordPressテーマ「SANGO」でのメニューの設定方法について解説します。
目次
メニューを作成しよう
WordPressのメニュー設定は、［管理画面］⇒［外観］⇒［メニュー］から行います。
手順1：メニューの新規作成
まずはメニューを作りましょう。②［新規メニューを作成］をクリックし、②メニュー名（「例：PCヘッダーメニュー」）を入力します。③その後［メニューを作成］をクリックします。
手順2：メニューをどこに表示させるかを選ぶ
次にメニューをどこに表示させるかを選びます。SANGOではあらかじめ3つのメニューの位置が用意されています。
それぞれのメニューの表示位置と役割については後ほど詳しく説明します。
手順3：メニューの項目を作る
次にメニューに表示させる項目（リンク）の設定を行います。画面左側で「固定ページ」「投稿」「カスタムリンク」「カテゴリー」から項目を作ることができます。
カスタムリンクからは「URL」と「リンク文字列」を自由に決めることができます。
［メニューに追加］をクリックすると、その項目がメニューに追加されます。これを繰り返してメニューの項目を作りましょう。
SANGOのメニュー位置は4箇所
初期設定では、SANGOのメニューは4箇所に設置することができます。どれも任意なので、必ず設定しなければいけないものではありません。
その1：ヘッダーメニュー（PCのみ）
1つめがPC用のヘッダーメニューです。ブラウザの幅が768px以上、かつPCで見た場合のみに表示されます。
通常の表示
ロゴを中央寄せしている場合は下に
ロゴを中央寄せする方法は「ロゴやタイトルの設定をしよう」をご参照ください。また、メニューの色の変更は「カスタマイザーの色設定」から行います。
参考：展開ボタンに隠れたコンテンツは無視され検索結果の対象にならないかもしれない
そのためにJavascriptを書くのも、非表示コンテンツを増やすのも微妙な気もしたので。
その2：スライドメニュー（モバイルのみ）
スライドメニューはモバイル（スマホ/タブレット）でのみ表示されるメニューです。PCでは表示されず、モバイルでも768px以上になると非表示になります。
画面に収まりきらなかったメニュー項目は右側にスクロールすることで表示されます。「スクロール可能であること」を示すために、ページが読み込まれた際には若干左にスクロールされながら現れる仕様となっています。
なお、「表示されているページ」＝「メニューのリンク先」の場合には、テキストの下に下線が引かれます。
その3：フッターメニュー（ページ最下部）
こちらはPC/モバイル共通のメニューです。全てのページの最下部に表示されます。
「利用規約」や「サイトマップ」などへのリンクをこちらに配置することをおすすめします。
参考：メニューテキストにはアイコンが使用可能
なお、メニューの文字列には、FontAwesomeのアイコンフォントを使うこともできます（FontAwesome Ver4が導入済みです）。使い方は簡単で、文字列（ナビゲーションラベル）に表示させたいアイコンコード（Ver.4のもの）を貼り付けるだけ。
FontAwesomeの詳しい使い方はこちらの記事を参考にして頂くと良いかと思います（「2.使用準備」は完了しているので「3.使い方」から読んでくださいませ）。
その4：フッター固定メニュー（モバイルのみ）
モバイル（スマホ/タブレット）では、画面下部に固定されるメニューを表示することができます。設定手順が他のメニューとは異なるため、詳しくは以下の記事をご覧くださいませ。
モバイル用フッター固定メニューの設定方法
１ヶ月前からサルワカで勉強させてもらっている素人です。今回、SANGOを購入させて頂き、初めてのHP作りに四苦八苦しているのですが、ipad（Chrome）で作ったHPをみたときにヘッダーのメニューが表示されません。何がおかしいのでしょうか？MacとiPhoneでは、ヘッダーにメニューが表示されています。
コメントありがとうございます。
該当部分ですが、モバイル（スマホ/タブレット）で画面幅が768px以上の場合にご指摘頂いた現象が発生してしまいます。
というのも、モバイルメニューは画面幅を768px以上にすると、非表示にする設定になっているためです。対処法なのですが、以下のCSSを子テーマのstyle.cssに貼り付けると、モバイルメニューがiPadでも表示されるようになります。
.mobile-nav {
display: block;
}
ご確認よろしくお願い致します。
ありがとうございました。アップデートしたら表示されるようになりました。
今回導入させていただきました。
メニューの階層表示は今後も対応する予定はありませんか？
どうにかカスタマイズしようとしていますが、いかんせん素人なもので四苦八苦しております。
コメントありがとうございます。
階層メニューですが、多くの方からご要望を頂いているため対応することに致します。
次回アップデートまでお待ちくださいませ。
ありがとうございますm( . . )m
はじめまして。モバイル用のデザインですが、スライドニューは表示されますが、左上のプルダウンメニューが表示されません。設定はどこでしたら良いのでしょうか？よろしくお願いいたします。
ハンバーガーメニューはウィジェットの設定から行うことができます。
よろしくお願い致します。
はじめまして。いつもサルワカを拝見させていただいています。
特定のページのみ、グロナビにページ内見出しIDを個別で設定することは可能でしょうか？また実装予定はありますでしょうか。
サルワカの漫画記事のようにしたいです。
https://saruwakakun.com/life/bestbooks#manabi
WordPressの通常機能では難しいですね・・・。
（サルワカの該当記事は、HTMLファイルをイチから作成サーバーにアップロードして表示させています）
申し訳ありませんが、ご理解頂けますと幸いです。
ご回答ありがとうございます！
自分でトライしてみようと思います！
大変素晴らしい内容だと感じたので、昨日購入させていただきました。感謝しています。素人なのでいま必死で構築中です。
申し訳ありませんが、メニューの階層表示（ドロップダウン）について2点質問があります。
1：親メニューを非リンク扱い（クリック・タップしても無反応で、ドロップダウンだけできる状態）にするにはどうすれば良いでしょうか。これまでは親メニューのタイトル属性を仮にnoeventにし、スタイルシートに
a[title=”noevent”] { pointer-events: none; }
と追記することで対応していましたが、今回PCサイトではこの方法が通じません。一方、モバイルサイトのヘッダーメニューとハンバーガーメニューでは有効になります。
→いまアップされたばかりのver.1.33にしたら改善できました！いやそもそも自分のカン違いなのか・・・せっかく文章を作ったので、他の方のご参考になればと思い残しておきます。
2：モバイルのヘッダーメニューはドロップダウンにはならない仕様なのでしょうか（PCはカーソルを合わせればドロップダウンになりますが、モバイルはタップしたらドロップダウンが出るイメージを望んでいます）。もし難しいなら、やむなく親メニューの非リンクは解除し、その先をドロップダウンリストを同じものに作っておくことで対応したいと思います。
以上、何卒よろしくお願いいたします。
1について、ご報告ありがとうございます。なんでしょうね。そのあたりの仕様にはVer1.3.3で一切変えていないので、キャッシュが残ってしまっていたという可能性は考えられます（削除されているかもしれませんが）。
2について、大変申し訳ないのですが、モバイルのタイトル下メニューをドロップダウンにするのは少しむずかしいですね…。
PCだとカーソルのホバーしたときに…という挙動にできるのですが、スマホだとホバーという動作が無く「タップしたときに」になるので、
テーマとして実装すると、色々と問題が生じてきます。
恐れ入りますが、ご了承お願いします。
さっそくのご返信ありがとうございます。今のベストを尽くしていただければ十分です。それを補っても余りあるほど良いテーマだと感じています。ではモバイルファーストの考えに従い対応したいと思います。
また、サルワカさんのあまりにご丁寧なコンテンツを拝見し、今まで挫折しかかっていましたが、何とかできそうだという希望を見出せました。ツイッターフォローさせていただきます。今後も応援しています！
ありがとうございます。
そう言って頂けるととても嬉しいです。今後ともよろしくおねがいします。
素敵なテーマありがとうございます。
Font Awesome 5 が出ているので、使用しようと子テーマのheader.phpの内にCDNscriptを追記したところ、記事下のSHARE!の各種ソーシャルアイコンやモバイル用固定フッターのシェア時ソーシャルアイコンが表示されなくなってしまいました。
Font Awesome 5のCDNを消すと、きちんと表示されます。
現状、ソーシャルボタンを使いたい場合、Font Awesome 5を併用して使うことはできないということでしょうか？
私の方でも試してみましたが、問題なく使うことができました。
併用は重くなるので、FontAwesome5だけを使うのが良いかと思います。以下のコードを子テーマなどのfunctions.phpに追記すれば、FontAwesome5が使えるようになるかと思います。
※CDNのURLの部分をコピペで変えてくださいませ。
ただし、一部アイコン名が変わっているかもしれないので、その場合にはアイコン名を変更して頂く必要があります。
ご返信ありがとうございます。
そちらのコードをfunctions.phpに追記してキャッシュ削除を試してみましたが、Font Awesome5のアイコンを使うことができませんでした。
おそらく、こちらの環境特有の不具合なのだと思いますので、FA5の仕様は諦めることにしました。
またいつか試してみたいと思います。
本当ですか・・・。
そのうちアップデートで可能であれば、FontAwesome5への切替も行おうと思います。
はじめまして。ブログを始めるにあたり、こちらのSANGOに一目惚れして購入しました。
メニューの文字列に、FontAwesomeのアイコンフォントを使う場合、文字列（ナビゲーションラベル）に表示させたいアイコンコードを貼り付けるだけとのことですが、うまく表示されません。
外観＞メニュー＞メニュー構造＞任意のカテゴリ内のナビゲーションラベル にFontAwesomeの任意のアイコンのコードを貼り付けるだけでいいのでしょうか？
「【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう」のページも見ましたが、なぜかうまくいきません。
素人の質問で大変恐縮ですが、ご教示いただけないでしょうか。
どうぞよろしくお願いいたします。
SANGOでは、FontAwesomeのVer4を利用しています。Ver.5のアイコンを利用していると、うまく表示されないことがあります。Ver4のアイコン一覧からご利用してみて頂けますか？
早速ご回答いただきありがとうございます！
旧verでうまく表示できました！
大変助かりました。今後ともどうぞよろしくお願いいたします！
こんにちは。
基本設定を色々としていましたら、ふと気がつくとカテゴリーのラベルが消えていました。消す設定をした記憶はないのですが、どうしたら復活させられるでしょうか？
お手数ですが、どうぞよろしくお願いいたします。
トップページの記事一覧（カードタイプ）でもラベルが消えておりますか？
・カテゴリーページの場合
・トップページで記事一覧を横長のレイアウトにした場合
だともとからラベルが非表示の設定になっています。
大変お世話になっております。ありがとうございます。
SANGO ver.1.3.3を使用させていただいております。
[外観]-[メニュー]画面で、表示オプションの「詳細メニュー設定を表示」の説明にチェックを入れて、メニュー構造の各項目の「説明」欄に文字列を入力すると、メニューの項目文字列の下に、説明の文字列が表示されることを期待しておりましたが、なぜか表示されません。原因がわかるようでしたら、アドバイスをいただけないでしょうか？
お世話になっております。
大変恐縮ながら、メニュータイトル下に説明を表示する機能には対応しておりません…。
なのですが、ちょっとしたカスタマイズで実装ができそうです。
よくある質問に「PCヘッダーメニューのタイトル下にラベル（説明）を表示したい」という項目を追加したのでご確認頂けますか？
サルワカさん、超速のご教示をありがとうございました。
おかげさまで、うまく行ったのですが、一点問題がありました。
[外観]-[メニュー]画面のメニュー構造の各項目の[ナビゲーションラベル]で、Font Awesomeを使用しておりまして、タイトル文字列の前に、を付加しています。これだと、ラベル（説明）文字列がメニュータイトル下ではなく、メニュータイトルの左横に表示されてしまうんですね。この問題に対処するため、試行錯誤中です(^_^;
なるほど。
それであれば
①functions.phpに貼り付けたコードのうち、
<br />を削除。②CSSを以下に書き換え
お願いします！
サルワカさん、ありがとうございました！
うまく行きました。超速ご教示に感謝いたしますm(__)m
はじめまして、自社サロンのサイトにSANGOを使わせていただいております。
サロンメニュー表のページを「初来店者」と「再来店者」で分けたいのですがタブメニューで分けられないものかなとカスタマイズガイドを拝見しましたが、無いようでした。
今後のアップデートで「タブメニュー」機能を追加する予定はありますでしょうか。
タブメニューの実装は検討しておりますが、もうしばらくかかりそうです。
それまではShortcode unlimitedなどのプラグインでご対応頂ければ幸いです。
こんにちは。
フッター内のコピーライトの表記を変えることはできないのでしょうか？カスタマイザーから簡単に変えられるとより便利だと思うのですが…
よろしくお願い致します。
コピーライトについては、あまり変更したいという要望を聞かないため
カスタマイズにより変更頂いている状況です。
サクッと変えたい場合には以下のCSSを追加して頂ければと思います。
「Copyrightの表記をここに」という部分を書き換えて頂ければ。
はじめまして。
wordpress初心者です。少し前にSANGOを購入させていただきました。
サイドバーのカスタマイズで教えてもらいたいことがあります。
サイドバーにカテゴリー別のタイトルを載せたのですが、
タイトルの並び順は変更することができますか？
よろしくお願いします。
はじめまして。
カテゴリーの表示順を並び替えるプラグインを使うのが良いかと思います！
ありがとうございました。
無事並び替えることができました。
お世話になっております。初めて使用させていただいております。
Font Awesomeに関しまして
外観→メニュー→固定ページメニュー→ナビゲーションラベル に
営業時間・アクセス を設定しているのですが表示ではアイコンの代わりに四角枠が表示されます。使用法間違っていますでしょうか？
どうぞよろしくお願いします。
FontAwesome5のアイコンを使用していませんか？
SANGOでは、FontAwesome4を利用しているので、こちらからアイコンをお選びください。
その通りでございました。表示されました。
ありがとうございます。
コメント失礼します
PC用メニューは表示されるのですが、
モバイルメニューが表示されず困っています
外観→メニューに新規作成後 スライドメニュー(モバイルのみ)の設定し反映させています。その他ウィジェットのハンバーガーメニューも表示されません。
テーマ 最新
WordPress 4.9.5
お忙しいと思いますが、ご教授の程よろしくお願いします。
よくある原因としては
① キャッシュ系のプラグインによりモバイルでも、PCと同じデータが表示されている（その場合、プラグインの設定を見直す必要あり）
② AWS Cloudfrontを使ってキャッシュでページを表示している
③ メニューを正しく設定できていない
などでしょうか。プラグインを一度すべて停止したうえで確認してみましたか？
お世話になっております。コメント失礼します。
スマホでのメニューについて質問させて下さい。
SANGOを使用している方で何人か同じような表示のさせ方をしている方がいたので、どうやってやるのか知りたくてコメントしました。
ウェブサイト欄にその方のURLを添付します。
お忙しいと思いますが、ご教授の程よろしくお願いします。
お世話になっております。
モバイル用フッター固定メニューの設定方法をご覧頂けますでしょうか。
大変申し訳ございません。
説明不足でした。
フッターではなく、ヘッダーメニューの方です。
スマホでもヘッダーメニューが表示され、６個に区切られている(?)ような感じになっているんです。
お忙しいと思いますが、ご教授の程よろしくお願いします。
そういうことですね。
この部分はサイト運営者様がカスタマイズして作ったもののようです。
申し訳ありませんが、制作者様の表現を尊重するためにも、
私の方でカスタマイズ方法を公開することはできません。
ご理解頂けると幸いです。