グローバルナビゲーションにアイコンをつける方法を簡単に紹介します。
今回はアイコン界で有名なFont awesome iconを使います。
アイコンの種類によっては有料のものがありますが、無料版でも多くの種類のアイコンがあります。使い方もソースコードをコピペするだけなので簡単です。
Font awesomeに登録する
Font Awesomeのページに行きます。
Font Awesome 5をクリックします。
Start for Freeをクリックします。
emailアドレスを入力してください。
入力するとメールが届くので
Click to Confirm Your Email Address …をクリックしてください。
パスワードを入力してください。
名前など書くところがありますが、スキップしてもかまいません。
Scriptタグが生成されるのでコピーしてください。
headerファイルにコードを貼り付ける
先ほどコピーしたコードをheaderファイルに貼り付けます。
方法は2種類あります。
直接headerファイルに書き込む方法
外観のテーマエディターを開いてください。
開くとstyle.cssが出てきます。
左のテーマヘッダーをクリックしてください。
head内に貼り付けてください。scriptタグの一番下にコピペしました。貼り付ける場所がよくわからない場合は</head>の上に貼り付けてください。
カスタマイズからheaderに書き込む方法
外観→カスタマイズ→高度な設定→</head>直上の自由入力エリアにコピーしたscriptタグを貼り付けてください。
アイコンをグローバルナビゲーションにつける
お待たせしました！
アイコンをグローバルナビゲーションにつけます。
試しに家のアイコンをメニューにつけてみます。
Font awesome iconのページに行き、家のアイコンを検索します。英語で入力してください。
今回はhomeを検索したら出てきました。start Using This Iconをクリックします。
青い丸をクリックするとコピーされます。
WordPressのページに戻って外観からメニューをクリックします。
コピペしたコードを貼り付けます。
保存したら完了です！