WordPressでメニュー中にアイコンを表示させる方法【簡単】

 

本記事にピッタリな方

  • グローバルメニューの横にアイコンを表示させたい!
  • どのサイトでも使っている
  • かんたんにできる方法を教えて!

 

さるくん

ボクも使いたいです!

 

本記事を見ていただければ超かんたんに解決しますよ。

michi

 

記事の内容

前半

後半

 

ほかのサイトを見ると、アイコンってどうやって表示させているか気になりますよね。

画像を使うと調整が難しいし。。

 

私も自分のサイトにアイコンをつけたくて、いろいろ試しました(笑)

 

結論を言いますと、一番かんたんなのは『Font Awesomeを使う』ですね。

 

私も利用しています。

グローバルメニューのアイコン

 

手順も超かんたんなので、本記事を見ていただいてサクッと設定しましょう!

※すぐに設定したい方は『WordPressのメニューにアイコンを入れる方法』をクリックしてくださいね。

 

WordPressのメニューにアイコンを表示させる理由は2つ

WordPressのメニューにアイコンを表示させる理由は2つ

 

WordPressのメニューにアイコンを表示させる理由は『目立つ』だけではありません。

  • イメージを連想させるので分かりやすい
  • テキストの代わりになるので見た目がスッキリする

などメリットだらけ。

 

もちろん使いすぎもNGですが、グローバルメニューなどで効果的に使うとサイトがレベルアップします。

メニュー以外にも使えるアイコン

 

ちなみに上記のGoogleのように、メニュー以外でもあらゆるところで使えますよ。
michi

 

【準備編】WordPressのメニューにアイコンを表示させる方法

【準備編】WordPressのメニューにアイコンを表示させる方法

 

それでは早速アイコンを入れていきましょう。

今回は一番かんたんな『CDN』を使う方法を紹介いたしますね。

 

まず下記を<head>~~</head>内に挿入します。

<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">

 

場所はWordPressの場合、『外観』→『テーマエディター』→『header.php』です。

テーマヘッダー<header.php>の場所

  1. テーマヘッダー(header.php)をクリックする。
  2. <head>~~</head>内に貼り付ける。
  3. 『ファイルを更新』をクリックする。

以上で準備は完了です。

次は実際にアイコンを使っていきましょう。

 

バージョンはたまに更新されるので、その場合は『v5.15.1の数字を変えてくださいね。

変えなくても今までのアイコンは使えますが、最新のものは使えません。

michi

 

【実践編】WordPressのメニューにアイコンを表示させる方法は2ステップ

【実践編】WordPressのメニューにアイコンを表示させる方法は2ステップ

 

それでは実際に進めていきましょう。

 

ステップは大まかに分けて2つ。

  1. 公式サイトからアイコンのコードをコピー
  2. メニューに表示

 

順番に説明いたしますね。

 

ステップ1:公式サイトからアイコンのコードをコピー

まずはFont Awesomeの公式サイトを開いてくださいね。

※例をツールのアイコンにします。

 

①検索フォームに『tool』と入力する。

検索フォームに入力

 

②ツールのアイコンをクリックする。

※グレーアウトしているアイコンは課金しないと使えません(PRO版)

 

③『このアイコンの使用を開始する』をクリックする。

『このアイコンの使用を開始する』をクリック

 

④赤枠内のhtmlをコピーする。

赤枠内のhtmlをコピー

 

※ちなみに下記画面になる場合もあるので、その際は好きなアイコンをクリックして

アイコン選択別バージョン

 

赤枠内をコピーでOK。

赤枠内をコピー

※なぜか2行ありますが片方だけでOKです。

 

そのままの状態でステップ2にいきましょう。
michi

 

ステップ2:メニューに表示

続いてメニューに表示させる手順を解説いたしますね。

 

①ダッシュボード内→『外観』→『メニュー』をクリックする。

ダッシュボード内メニューの位置

 

②グローバルナビ等のアイコンを入れたいところにペーストする。

アイコンのhtmlをペースト

こんな感じ。

※このままだと窮屈に感じる場合は、コードとテキストの間に半角スペースを入れるとヨシです。

 

最後にメニューの保存をして完了ですよ。

 

ちなみにHTML、CSSを使えば色、大きさの変更、動きをつけるなど々できます。
michi

 

よくあるミス2選とその対策

よくあるミス2選とその対策

 

手順通りにやったのダメじゃん!

と私みたいにイライラしないように(笑)対策を紹介いたしますね。

 

多いパターンは2つ下記です。

  1. PRO版を使っているかも
  2. コートが間違っているかも

 

対策1:PRO版を使っているかも

本記事でも説明しておりますが、使おうとしているアイコンがPRO版の可能性がありますよ。

 

fontawesomeプロ版

のように『PRO』と書いてあるものは有料です。

 

ちなみにコードでも分かりまして、無料版は『fas』のみです。

無料 

<i class="fas fa-network-wired"></i>

有料

<i class="far fa-network-wired"></i>

<i class="fal fa-network-wired"></i>

<i class="fad fa-network-wired"></i>

 

自分ではPRO版選んでないよって思っていても、意外とやってしまっている場合もあるのでチェックしてみましょう。

 

対策2:コードが間違っているかも

基本は直接コピペすればOKなんですが、メモ帳などのエディタを挟むと文字化けする場合もありますよ。

 

例えば

  1. htmlをコピー
  2. メモ帳に貼り付け
  3. メモ帳からコピー
  4. メニューに貼り付け

みたいな感じですね。

 

ちなみに一番多いのは『”』ダブルクォーテーションでして、もしアイコンが表示されない場合はチェックしてくださいね。

 

あとは【準備編】で紹介したCDNの挿入場所が間違っている可能性もあります。
michi

 

まとめ:アイコンを使ってサイトをレベルアップさせよう!

まとめ:アイコンを使ってサイトをレベルアップさせよう!

 

WordPressでメニューにアイコンを使う方法は下記です。

  1. CDNを<head>~~</head>内に挿入する
  2. Font Awesomeからアイコンのコードをコピーする
  3. ダッシュボード→メニューに貼り付ける

たったこれだけ。

 

アイコンを使うとユーザーがイメージしやすくなり、テキストの代わりにもなるので見た目がスッキリします。

 

本記事を読んだ後はぜひメニューにアイコンを使ってみてくださいね。

 

今回は以上です。

-ブログ運営を効率化したい
-

© 2021 michiブログ