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

本記事にピッタリな方

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

記事の信頼性

私はブログ歴2年以上でして、ブログ収益月間500万円以上を得ています。

さるくん

ボクも使いたいです！

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

michi

記事の内容

前半

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

後半

WordPressのメニューにアイコンを表示させる方法←すぐに使いたい方

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

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

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

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

私も利用しています。

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

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

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

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

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

などメリットだらけ。

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

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

michi

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

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

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

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

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

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

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

以上で準備は完了です。

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

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

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

michi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

赤枠内をコピーでOK。

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

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

michi

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

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

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

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

こんな感じ。

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

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

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

michi

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

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

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

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

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

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

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

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

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

無料

有料

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

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

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

例えば

htmlをコピー
メモ帳に貼り付け
メモ帳からコピー
メニューに貼り付け

みたいな感じですね。

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

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

michi

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

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

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

たったこれだけ。

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

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

今回は以上です。