【WordPress初心者】ワードプレスのメニューにアイコンを表示する方法

社会人一年目で、ハウスメーカーで戸建て住宅の設計をしています。
経営者になることを目標にここでは、起業をするために必要なスキルを中心に解説しています。

ブログのデザインを考えるようになるといろんなところいじりたくなりますよね。

ブログの上のメニューにアイコンがついているサイトを見たことありますか?

当ブログでも実際に使用しているように、グローバルメニューにアイコンを入れているこれです↓

今回はこの【グローバルメニューにアイコンを表示させる方法】を解説していきます。

この表示設定は初心者でも簡単にカスタマイズできるので、ぜひ自分のブログにも取り入れてほしいと思います。

【WordPress初心者】ワードプレスのメニューにアイコンを表示する方法

メニューにアイコンがあることで見栄えが良くなり、メニューのタブがかっこよくなった感じがします。

やはり、アイコンがあったほうが見やすいですね。ユーザーが自分のサイトに来たときに迷子にならないための目印にもなります。

これはプログラミングができない・コードが読めない初心者でも超簡単につけることができるので、その方法を順番に解説します。

Font Awesomeとは?

【Font Awesome】とは簡単に言うと、ブログやサイトにwebアイコンフォントを表示させてくれるサービスです。

webアイコンフォントとは?

webアイコンフォントとは、ウェブページ上で文字と同じように表示できるアイコンのことです。
なにか図を示したいときに画像を貼っていては、解像度が落ちてしまうので、webアイコンフォントを使うことできれいに写り、色も大きさも変更できるのでとても便利です。

Font Awesome無料版と有料版の違い

Font Awesomeには【有料版】と【無料版】があります。この違いについて少し説明します。

【有料版】でも【無料版】でも、どちらも無料で商用利用は大丈夫です。ウェブサイトやドキュメントで使用することができます。

【有料版】と【無料版】はアイコンの選べる量が違います。

確認してみてください

Font Awesomeのサイト【https://fontawesome.com/】に飛ぶと分かりますが、【無料版】では使うことができないアイコンがあります。

使用前準備

Font Awesomeを使う前に少しだけ準備がいります。以下の2つですがめっちゃ簡単なので大丈夫です。

手順
  • 手順1:以下のコードをコピー
  • 手順2:テーマの編集「header.php」に貼り付ける

手順1:以下のコードをコピー

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

引用:【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

このコードをheadタグへ貼り付けていきます。

手順2:テーマの編集「header.php」に貼り付ける

ワードプレスのテーマの「header.php」にコードを貼り付けていきます。
手順は次の3つです。

手順1:WordPressのダッシュボードから「外観」

手順2:「テーマエディター」(一番下)を選択。

手順3:子テーマを親テーマに変更。ここわからない人がほとんどなので注意です。

手順4:右の「テーマヘッダー(header.php)」をクリック

手順5:</head>の直前に先程コピーしたコードを貼り付ける。

これで【Font Awesome】が使えるようになりました。

Font Awesome使い方

次に使い方についてです。以下の手順で行います。

手順
  • 手順1:アイコンを選ぶ
  • 手順2:アイコンのコードをコピー
  • 手順3:アイコンのコードを貼り付ける

1:アイコンを選ぶ

Font Awesome】にアクセスして、「Icons」をクリックします。

するとアイコンがズラリと並びます。このページを何度か使うのであれば、ブックマークにお気に入りにしておくといいですね。

手順2:アイコンのコードをコピー

次にキーワードを入れて使いたいアイコンを検索し、使いたいアイコンを選択します。

アイコンコード【<i…></i>】をクリックコピーします。

⚠:使いたいアイコンを探していると、濃くはっきり表示されているアイコンと、薄くグレーに表示されているアイコンがあります。
濃くはっきり表示されているアイコンは【無料版】で、薄くグレーに表示されているアイコンは【有料版】になるので注意してください。

あとはワードプレスのメニューに貼り付けるだけで完成です。

手順3:アイコンのコードを貼り付ける

①.ワードプレスのダッシュボードから「外観」→「メニュー」を選択。

②.「ナビゲーションラベル」のメニュー名(例:HOME,WORK)の前に、先程コピーしたアイコンコードを貼り付ける。

ここまでできたら「メニューを保存」をクリックしてください。これをしないとやり直しです。よくあることなので、ご注意を。

プラグインは使わない

今ま紹介したアイコンをメニューにつけることは、プラグイン(携帯で言うアプリのようなもの)でも変更可能です。

しかし、このプラグインを使って変更すると、

  • プラグインの入れ過ぎで、サイトが重くなる
  • プラグイン同士の相性が悪いと動作不良が起こる

このようなデメリットがあるので、注意してください。

もっと詳しく知りたい方はこちら↓

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

世界一わかりやすいWordPress導入とサイト制作の教科書 [ 安藤篤史 ]
価格:2618円(税込、送料無料) (2020/8/27時点)

 

楽天で購入

 

 

 

WordPress基礎勉強はこの一冊で十分です。初心者でも図式で説明されているので入りとしてはとてもわかり易いと思います。また、これからブログで頑張っていくという方には読んでおいて損はないかと思います。

たくまのまとめ

いかがでしたか?

今回は【グローバルメニューにアイコンを表示させる方法】を解説しました。

おさらいで手順はこれだけ。

手順
  • 手順1:「head」タグをテーマの編集「header.php」に貼り付ける
  • 手順2:【Font Awesome】でアイコン決める
  • 手順3:アイコンコードを貼り付ける

これからも「ワードプレスのカスタマイズ方法」について発信していきます。このようにちょっとカスタマイズするだけでもPV(視聴率)やCTR率(クリック率)がグンとあがるので、SEO対策にもなります。

また、インスタもやってるので、フォローよろしくお願いします。

MUPに入学した感想

⇩MUPに入学してみての感想です⇩

この記事を書いた人

アバター

takuma

【経歴】
●1997年年生まれ、岐阜県出身。たくまと言います。

●高校3年間は成績学内1位。その後、名古屋の名城大学を卒業

●2020年4月に東証一部上場企業に新卒入社し、webデザインとコンテンツ販売で副業をしています。

●webデザイン / コンテンツ販売 / ブログなどで月6桁達成。