wordpressテーマ【JIN】でメニューを最適化する

メニューを最適化

wordpressのテーマで大人気の「JIN」。

私も「JIN」のおかげでブログを楽しく簡単に書けるようになりました。

ほとんど設定をカスタマイズすることなく使っているのですが、メニューの設定でちょっとだけ悩みました。

そこで、それぞれの場所に適したメニューの設定をまとめてみました。

尚、それぞれのメニューの設定方法は、JINの公式マニュアル「グローバルメニューの設定方法」、「スマホスライドメニューの設定方法」「スマホフッターメニューの設定方法」をご参照くださいね。

JINのメニュー位置

「JIN」のメニューには、メニュー位置として以下の4箇所が用意されています。

  • グローバルナビゲーション
  • スマホ固定フッターメニュー
  • スマホのスライドメニュー
  • トップページのピックアップコンテンツ

パソコンとスマホで、表示されるメニューと表示されないメニューがあるのでまとめてみます。

メニュー位置 パソコン スマホ
グローバルナビゲーション
スマホ固定フッターメニュー ×
スマホのスライドメニュー ×
ピックアップコンテンツ

※ピックアップコンテンツはちょっと特殊なので、今回はメニューの配置からは除外して考えます。

パソコンの場合、メニューはグローバルナビゲーションのみ表示なのであまり深く考える必要はありませんが、スマホの場合、すべてのメニューが表示されることになります

スマホメニュー
グローバルナビゲーションメニューはクリックすると開くメニュー(右上のアイコン)なので気にする必要はないと思いますが、スマホスライドメニュースマホフッター固定メニューが同一画面に表示されます。

気を付けるべき点は、スマートフォンの場合画面サイズがそれほど大きくないので、上下のメニューが「重複しないように設定した方が良い」という点です。

同じメニューが上下にあるのは少ししつこい感じがしますし・・・。

  • スマホ固定メニューは出さない設定も可能です。
  • スマホフッター固定メニューは4つ以上の設定があっても、スマホに表示されるのは4つまでです。
  • スマホスライドメニューは4つ以上あると、スクロールして表示することができます。

おすすめのメニュー設定

メニューに表示する項目は以下のようなものが一般的です。

  • ホーム
  • プロフィール
  • カテゴリー(1~3程度)
  • サイトマップ
  • お問合せ

他にも、スマホフッター固定メニューにはSNSフォローリンクもおすすめです。

これらを上下メニューのどこに表示したいかきちんと整理する必要があります。

両メニューとものスクロールなしで表示するメニュー数は4つですので、スマホスライドメニュー+スマホフッター固定メニューのそれぞれにどう当てはめるか考えてみます。

スマホスライドメニュー スマホフッター固定メニュー
カテゴリー① ホーム
カテゴリー② サイトマップ
カテゴリー③ お問合せ
プロフィール SNSフォロー

もちろん、それぞれのブログで表示したいメニューは異なると思いますので、この表を参考に、自身のブログに最適なメニュー表示を整理してみると良いと思います。

サイトマップ
プラグインなしで作るサイトマップの作り方wordpressでプラグインなしでサイトマップを作る手順をご紹介しています。プラグインだと何かと気になる点が・・・。ちょっとがんばればプラグインなしでもサイトマップは作れますよ!...

メニューにSNSフォローを追加するには、
メニューの設定で「カスタムリンク」をクリックし、URLに各SNSの自身のページURLを設定し、メニューを追加することで設定できます。

よく使うFont-Awesome

各メニューのアイコンにはFont-Awesomeを使います。

毎回探しに行くのが面倒になったので、メニューによく使う無料のFont-Awesomeをまとめました。

ホーム fas fa-home
メール fas fa-envelope far fa-envelope fas fa-envelope-open far fa-envelope-open
サイトマップ fas fa-home
twitter fab fa-twitter fab fa-twitter-square
facebook fab fa-facebook-f fab fa-facebook fab fa-facebook-square
instagram fab fa-instagram

※プロフィールや各カテゴリーのアイコンは人それぞれですので、Font-Awesomeのページから探してくださいね。

JINでfont-awesomeを使う時の注意点

JINではfont-awesomeのバージョン4.7に対応しています。

最新のfont-awesomeのバージョンは5になっています。

バージョン5のコードを利用すると表示できないので注意が必要です。

対応していないフォントを使うと・・・

font-awesomeエラー

上記のように、アイコンが【!】マークの点滅状態となります。

font-awesomeのバージョン確認方法

font-awesomeバージョン

選んだ画像の右上にバージョンが表示されています。

こちらは「5.0.9」となっているので利用できません。

旧バージョンの利用方法

font-awesome 4.7から旧バージョンを表示して、利用したいフォントを選びましょう。

メニューに見えるけどメニューじゃない設定

ちなみに、メニューに見えるけどメニューじゃない場所があります。

スマホキャプチャ

上記の部分はメニューではなく、トップページの記事一覧に表示するカテゴリーIDの設定です。

外観→カスタマイズ→トップページから、以下の部分の設定です。

※半角数字で入力(3つまで)

【最新記事】は固定なので、その他に3つのカテゴリーIDを指定できます。

ABOUT ME
まつみ
まつみ
もっと輝く50代応援メディア『50blog』を運営するアラフィフ女子まつみ@老後戦略家です。 現在は社内SEとして働きながら、これからの新しい働き方のために猛烈にポジティブに活動中です。 楽しく過ごす50代、おしゃれに暮らす50代、未来に備える50代。 50代は大忙しです。 もう若くないから・・・なんて言わずにもっともっと輝きましょう! 一緒にがんばる仲間も募集中!twitterフォローよろしくお願いいたします。

COMMENT

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