【簡単】wordpressのグローバルナビゲーションにアイコンをつける方法を分かりやすく解説します!

いろいろなアイコンのイラスト
ティロ
こんにちは!理系大学生のティロといいます。

 

グローバルナビゲーションにアイコンをつける方法を簡単に紹介します。

今回はアイコン界で有名なFont awesome iconを使います。

アイコンの種類によっては有料のものがありますが、無料版でも多くの種類のアイコンがあります。使い方もソースコードをコピペするだけなので簡単です。

Font awesomeに登録する

Font Awesomeのページに行きます。

des_2

Font Awesome 5をクリックします。

 

fontawesome_top

Start for Freeをクリックします。

 

des?3

emailアドレスを入力してください。

入力するとメールが届くので

Click to Confirm Your Email Address …をクリックしてください。

des_4

パスワードを入力してください。

名前など書くところがありますが、スキップしてもかまいません。

名前の入力Scriptタグが生成されるのでコピーしてください。

コードをコピーする

 

headerファイルにコードを貼り付ける

先ほどコピーしたコードをheaderファイルに貼り付けます。

方法は2種類あります。

直接headerファイルに書き込む方法

外観のテーマエディターを開いてください。

テーマエディターを開く

開くとstyle.cssが出てきます。

左のテーマヘッダーをクリックしてください。

テーマヘッダーをクリック

 

head内に貼り付けてください。scriptタグの一番下にコピペしました。貼り付ける場所がよくわからない場合は</head>の上に貼り付けてください。

貼り付ける

カスタマイズからheaderに書き込む方法

外観→カスタマイズ→高度な設定→</head>直上の自由入力エリアにコピーしたscriptタグを貼り付けてください。

</hade>直上に貼り付ける

アイコンをグローバルナビゲーションにつける

 

お待たせしました!

アイコンをグローバルナビゲーションにつけます。

試しに家のアイコンをメニューにつけてみます。

 

Font awesome iconのページに行き、家のアイコンを検索します。英語で入力してください。

fontawesome

 

今回はhomeを検索したら出てきました。start Using This Iconをクリックします。

home-icon-select

 

青い丸をクリックするとコピーされます。

コードをコピーする

 

WordPressのページに戻って外観からメニューをクリックします。

メニュー

 

コピペしたコードを貼り付けます。

ソースコードを貼り付ける

保存したら完了です!

 

アイコンを追加