【WordPress】Font Awesomeを使ってグローバルメニューにアイコンを入れる方法

ブログ

おはこんばんにちは!ノボル(@Veritas40835638)です。

ねぇポチ。よくサイトのグローバルメニューにアイコンがついてるけど、あれってどうやって作ってるの?

こんなやつだね。Font Awesomeを使ったら簡単に作れるよ!

そこで今回は、Font Awesomeを使ってWordPressのグローバルメニューにアイコンを入れる方法について解説します。

WordPressでFont Awesomeを使えるようにする

Font Awesomeとは?

Font Awesomeとは、Webサイトなどでよく利用される、アイコンを文字として使うことができるツールです。文字として使えるため、大きさを変更することができるという優れたツールなんです!基本無料で、商用利用も可能です。

じゃあまず、WordPressでFont Awesomeを使えるようにしよっか。


Font Awesomeに登録

2019年からアカウント登録が必要になりました。面倒くさいとは思いますが、わかりやすく説明するので大丈夫ですよ!

Font Awesomeにアクセスして、[Start for Free]をクリックしてください。


ご自身のメールアドレスを入力し、ページ右にある[Send Kit Code]をクリックしてください。


上のようなメールが届くので、【Click Confirm Your Email Address + Set Things Up】をクリックしてください。


パスワード設定画面に飛ぶので、[New Password]にはパスワードを、[Confirm New Password]には再確認用のパスワードをそれぞれ入力し、最後に[Set Password & Continue]をクリックしてください。

Site Kitをコピー

ログインすると、ページ上部にキットが表示されます。そこにあるコードを「Copy Kit Code」ボタンでコピーしてください。

キットをサイトの<head>タグ内に貼り付ける

コピーしたキットを、WordPressの <head>タグ内に貼り付けましょう。

<head>タグ内に貼り付けるやり方がわからない人は、下記の以下の記事がオススメです。


グローバルメニューにアイコンを入れる

まず入れたいアイコンを決めよっか!

アイコンを探す

700

Font Awesomeにアクセスし、Startをクリックしてください。


自分が貼り付けたいアイコンを探しましょう
ここでは、例として、「home」で検索してみました。


アイコンをクリックするとコードが表示されるので、[Copy HTML]ボタンをクリックし、コピーしましょう。

グローバルメニューに追加する

ここまでお疲れ様でした!あとは、グローバルメニューにアイコンを追加するだけです(o^^o)


WordPressのダッシュボードから、[外観]→[メニュー]にアクセスしてください。


グローバルメニューの設定が表示されるので、アイコンを追加したい項目をクリックしましょう。ここでは、例として[HOME]メニューにアイコンを追加してみます。


現時点では、[HOME]メニューに何もアイコンはついていません。


ナビゲーションラベル]に先ほどコピーしたアイコンのコードを貼り付け、[メニューを保存]をクリックします。

これで完了です!サイトを確認してみましょう。


無事[HOME]メニューにアイコンが追加されています!

ほんとだ!アイコンがあるだけで可愛い雰囲気になるんだね!


プラグインを使ってアイコンをつけるのはオススメしません

実は、ここまで紹介した「Font Awesomeを使ってグローバルメニューにアイコンを入れる方法」は、WordPressプラグインを使って実装することも可能です。

しかし、個人的には、プラグインむやみに使うことはオススメしません。

WordPressプラグインをむやみに使うべきでない理由

・プラグインが増えると、サイトが重くなる

・プラグイン同士の相性が悪いと、サイトに動作不良が起こる

・サポートが終了したり、アップデートが遅れて使えなくなる可能性がある


最後に

今回は、Font Awesomeを使ってWordPressのグローバルメニューにアイコンを入れる方法について解説しました。

アイコンをつけるとサイトの雰囲気を変えることができるので、オススメですよ!

最後まで読んで頂き、ありがとうございました(o^^o)

コメント

タイトルとURLをコピーしました