【WordPress】Font Awesome (フォントオーサム) の設定のしかた

見出しやリストマークなどに使用されるアイコン Font Awesome
Luxeritasでかんたんに利用することができる設定のしかたを解説させて頂きます。

Font Awesome(フォントオーサム)とは?

Font Awesome は無料で利用できる アイコンのツールキットです。
知らないうちにいろんなところで Font Awesome は利用されています。
 Font Awesome パンくずリストに使用されているアイコン
例えばこちら↑ 記事上にあります パンくずリンク横のアイコンや
メタ情報などのアイコンが Font Awesome のアイコンなのです。

代表的なアイコンのサンプルを見てみます。
こちらは無料のものを集めてみました。

Font Awesome サンプルアイコン-energyエネルギーの画像
energy エネルギー
Font Awesome サンプルアイコン-インターフェースの画像-
インターフェース
Font Awesome サンプルアイコン-インターフェースの画像-
インターフェース 2
Font Awesome サンプルアイコン-スピナーの画像-
スピナー

Font Awesome のアイコンは 無料のものだけでも1500点以上
有料のアイコンを含めると 7000点以上ものアイコンがあります。

Font Awesome サイトの登録と設定

Font Awesome のサイトに登録します。
公式サイトはこちら → Font Awesome 公式サイト
Font Awesome 公式サイトの画面
画面左の Start for Free をクリックすると
↓このようなメールアドレスを入力する画面が表示されます。
 Font Awesome メールアドレス登録画面翻訳すると メールアドレスを入力して 最初のキット を作成してください。
と書かれています。

キットコードとは Font Awesome を使用するための コードで
キットコードを作成し WordPress テーマの中にコードを書き込むことで
指定した アイコンを呼び出す( 使用する )ことができるのです。

キットコードの作成

先ほどの Font Awesome のスタート画面です。
 Font Awesome メールアドレス登録画面メールアドレスの入力をし 右の キットコードを送信 をクリックすると
作成されたキットコードの画面になります。

Font Awesome- -作成された キットコードと編集画面に貼り付けるコードこれを WordPress テーマのファイル内に貼り付けますので コピーします。

キットコードの貼り付け

先ほどのコードを編集画面に貼り付けるのは
WordPress テーマの Header という場所になります。

二通りの方法がありますが、 Luxeritas をご利用の場合は
子テーマの編集画面からかんたんに編集することが出来ます。

子テーマの編集に貼り付ける

ダッシュボード画面から Luxeritas → 子テーマの編集 をクリック

ダッシュボード画面から子テーマの編集

子テーマの編集-headタグの編集画面

子テーマの編集画面の Headタグ を開けていただくと ヘッダーファイルが表示されます。

?>以降に書いてください。とありますので こちらの画像でいうと
12行目から下ということになります。
コードを貼り付けましたら左上の保存をクリックして完了です。

テーマエディターから貼り付ける

管理画面から 外観 → テーマエディター をクリック
テーマファイルの一覧がありますので header.php というファイルを探します。

テーマの編集画面-header.php-の表示のしかた

子テーマを利用されている場合 add-header.php 
子テーマなしのテーマを利用されている場合
テーマヘッダー( header.php ) を探してください。

Font-Awesome-キットの記述のしかたの画像

<!DOCTYPE html> という宣言の下にある
<html> のあとに <head> の項目があります。

貼り付けるのは <head> ~ </head> の間ですが
項目がたくさんありすぎて 探すのが大変ですね。

私の場合、170項目目に </head> がありました。
この手前に貼ると後からも探しやすいと思います。

上の画像はイメージですが 親テーマの場合コードが複雑で
間違いやすいかもしれません。

子テーマを利用した場合、新たに記述するコードが書き込みやすく
表示されているので ミスしにくいかと思います。

これでキットコードの設定は完了です。

Font Awesome 管理画面 – Your Account –

Font Awesome 管理画面 アカウントナビを開くFont Awesome にサインイン したら アカウント画面に移動します。
右上の アイコンをクリックして頂くと アカウントナビ を表示することができます。

キットコードの再表示

 Font Awesome アカウント管理画面からキット画面を表示キットコード を再表示させたい場合、こちらの Kits をクリック
Font-Awesome-アカウントナビ-Your-Kits画面キットコードをクリックすると 先ほどの 貼り付け用の HTMLコード が表示されます。

 WordPress  プラグインを利用する

Font Awesome は WordPress のプラグインでも利用することでもが出来ます。
こちらは プラグインを インストールするだけですので とても簡単です。

プラグインの新規追加から Font Awesome を検索
 Font Awesome プラグインの新規追加の検索画面

インストールしましたら有効をクリックして すぐに利用することができます。

Font-Awesome-プラグイン画面バージョンなどの セッティングをする場合はこちらをクリックします。

Font-Awesome-プラグイン-settings画面このような画面で現在のバージョンなどを確認することができます。

Font-Awesome-プラグイン-バージョン-4.0.0-rc20-こちらは 最新のバージョンへ更新した後の画面 スタイリッシュになりました!!

バージョンの変更は どちらも Version の項目でバージョンの一覧が表示されます。

キットコードとプラグインの違い

プラグインの利用はかんたんなのですが、プラグインの入れすぎは
動作が遅くなってしまうというデメリットもあります。

ただ、バージョンアップなどが かんたんにできるので
その点では かなり便利だと思います。

また、Font Awesome や WordPress のバージョン によっては
CSSカスタマイズで 疑似要素  before を使用する場合、
アイコンの種類によっては プラグインでしか表示できない 事もあります。

私の使用している テーマ・バージョンのせいかもしれませんが
結局いまは 両方設定している状態です。

サイトのテーマ・バージョン・Font Awesome のバージョンによって
変わってきますのでいろいろ試してみて
コードの方だけでダメなら、プラグインも入れてみてはいかがでしょうか?

関連記事はこちら →【 Font Awesome 】アイコンの基本カスタマイズ
【 WordPress 】見出しをラインやアイコンでカスタマイズしてみる