JINの使い方

【WordPressテーマJIN】グローバルメニューを設定しよう

この記事では、ワードプレスのテーマJINを使ってグローバルメニューを設定する方法についてわかりやすくお伝えしていきます。

子育てママ
子育てママ
次はグローバルメニューですね!わかりやすくお願いします!
マザー
マザー
グローバルメニューは目に付きやすい部分なので、ユーザーに見て欲しいメニューで構成するといいわよ!

 

グローバルメニューとはサイトのこの部分のことをいいます。

 

 

今回はこのグローバルメニューに

  • ホーム
  • プロフィール
  • お問い合わせ

の3つを設置してみようと思います。

ブログを開設してすぐのときはグローバルメニューに並べることができるメニューが限られているため今回は上記の3つを設定していきますが、記事数が増えてサイトが充実してきたら自信のあるメニューを並べていくことをおすすめします。

なお「プロフィール」と「お問い合わせ」はあらかじめ固定ページで作っておいてくださいね。

それではさっそく設定していきましょう。

スポンサーリンク



 

STEP1. メニュー作成画面を開こう

 

ワードプレスの管理画面から[ダッシュボード]-[外観]-[メニュー]をクリックします。

STEP2. グローバルメニューに設置する項目を選ぼう

 

メニュー作成画面が開いたら、画面上にある「新しいメニューを作成しましょう」をクリックしてください。

 

 

わかりやすいようにメニューに名前をつけていきましょう。

メニュー名のところに「グローバルメニュー」と入力します。

 

 

入力できたら「メニューを作成」ボタンをクリックします。

 

 

続いて画面左側の「メニュー項目を追加」の中にある「すべて表示」タブをクリックします。

 

 

そして「ホーム」「お問い合わせ」「プロフィール」の3つにチェックを入れ「メニューに追加」ボタンをクリックします。

 

 

「メニュー構造」のところに「ホーム」「お問い合わせ」「プロフィール」が追加されました。

3つの並び順はドラッグアンドドロップで変更することができます。今回は「お問い合わせ」の前に「プロフィール」を持ってくることにしました。

STEP3. メニュー項目の詳細設定をしよう

 

続いてそれぞれのメニュー項目の詳細設定をしていきましょう。

ホームの詳細設定

まずは「ホーム」からです。「ホーム」の右側にある下矢印をクリックします。

 

 

そうすると「ホーム」の詳細設定画面が開きます。

URLには、サイトのトップページのURLを入力してください。

ナビゲーションラベルには、グローバルメニューで表示させたいメニュー名を入力します。

マザー
マザー
ホームでもHOMEでも何でもOKよ!

 

 

メニュー名の前にアイコンを表示させたい場合は

FontAwesome(フォントオーサム)

から取得することができます。

マザー
マザー
アイコンを表示させない場合はこのままSTEP4.に進んでね!

 

 

FontAwesomeが開いたら検索窓に「home」と入力してみてください。

そうすると「home」に関係するアイコンが表示されます。濃い色で表示されたアイコンの中から自分の好きなアイコンを見つけます。

見つけたらそのアイコンをクリックしてください。

 

 

そうするとこのような画面が開きます。

 

 

画面上にある

<i class=”fas fa-home”></i>

をクリックするとコードをコピーすることができます。

 

 

ワードプレスに戻って「ホーム」の詳細設定画面の「説明」のところにコピーしたコードを貼り付けます。

 

 

使いたいコードはダブルクォーテーションマークで挟まれている部分になりますので、貼り付けたコードのうち

fas fa-home

のみ残してあとのコードは削除します。

ここまで入力できたら「ホーム」右側にある上矢印をクリックして「ホーム」詳細設定画面を閉じてください。

プロフィールの詳細設定

 

続いて「プロフィール」です。「プロフィール」の右側にある下矢印をクリックして「プロフィール」詳細設定画面を開きます。

ナビゲーションラベルには、グローバルメニューで表示させたいメニュー名を入力してください。

 

 

FontAwesomeを開き、今度は検索窓に「profile」と入力してみましょう。

そうすると「profile」に関係するアイコンが表示されます。濃い色で表示されたアイコンの中から自分の好きなアイコンを選んでクリックします。

 

 

画面上にある

<i class=”fas fa-user”></i>

をクリックしてコードをコピーします。

 

 

ワードプレスに戻って「プロフィール」詳細設定画面の中にある「説明」にコードを貼り付けます。

貼り付けたコードのうち

fas fa-user

のみ残してあとのコードは削除します。

ここまで入力できたら「プロフィール」右側にある上矢印をクリックして「プロフィール」詳細設定画面を閉じてください。

お問い合わせの詳細設定

 

最後に「お問い合わせ」の詳細設定をしていきましょう。

やり方は「ホーム」や「プロフィール」とまったく同じです。

ナビゲーションラベルと説明の入力が終わったら「お問い合わせ」の詳細設定画面を閉じてください。

STEP4. メニューを保存しよう

 

すべての詳細設定が終わったら「メニュー設定」の中にある「グローバルナビゲーション」にチェックを入れます。

 

 

そして「メニューを保存」ボタンをクリックします。

これでグローバルメニューを設定することができました。実際にトップページを見て確認してみましょう。

 

 

画面左上にある家のマークまでカーソルを持っていき、でてきた「サイトを表示」をクリックします。

 

 

サイトのトップページに、設定したグローバルナビゲーションが表示されていますね。

念のためそれぞれのメニュー項目をクリックしてみて、きちんとそのページに行くかどうかも確認してみてください。

マザー
マザー
これでグローバルナビゲーションの設定は終わりよ!
子育てママ
子育てママ
よかったです!私でもなんとか設定することができました!

 

以上、ワードプレスのテーマJINを使ってグローバルナビゲーションを設定する方法についてでした。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です