【WordPress】Font Awesome (フォントオーサム) の設定のしかた
見出しやリストマークなどに使用されるアイコン Font Awesome
Luxeritasでかんたんに利用することができる設定のしかたを解説させて頂きます。
Font Awesome（フォントオーサム）とは？
Font Awesome は無料で利用できる アイコンのツールキットです。
知らないうちにいろんなところで Font Awesome は利用されています。
例えばこちら↑ 記事上にあります パンくずリンク横のアイコンや
メタ情報などのアイコンが Font Awesome のアイコンなのです。
代表的なアイコンのサンプルを見てみます。
こちらは無料のものを集めてみました。
Font Awesome のアイコンは 無料のものだけでも1500点以上
有料のアイコンを含めると 7000点以上ものアイコンがあります。
Font Awesome サイトの登録と設定
Font Awesome のサイトに登録します。
公式サイトはこちら → Font Awesome 公式サイト
画面左の Start for Free をクリックすると
↓このようなメールアドレスを入力する画面が表示されます。
翻訳すると メールアドレスを入力して 最初のキット を作成してください。
と書かれています。
キットコードとは Font Awesome を使用するための コードで
キットコードを作成し WordPress テーマの中にコードを書き込むことで
指定した アイコンを呼び出す（ 使用する ）ことができるのです。
キットコードの作成
先ほどの Font Awesome のスタート画面です。
メールアドレスの入力をし 右の キットコードを送信 をクリックすると
作成されたキットコードの画面になります。
これを WordPress テーマのファイル内に貼り付けますので コピーします。
キットコードの貼り付け
先ほどのコードを編集画面に貼り付けるのは
WordPress テーマの Header という場所になります。
二通りの方法がありますが、 Luxeritas をご利用の場合は
子テーマの編集画面からかんたんに編集することが出来ます。
子テーマの編集に貼り付ける
ダッシュボード画面から Luxeritas → 子テーマの編集 をクリック
子テーマの編集画面の Headタグ を開けていただくと ヘッダーファイルが表示されます。
?>以降に書いてください。とありますので こちらの画像でいうと
12行目から下ということになります。
コードを貼り付けましたら左上の保存をクリックして完了です。
テーマエディターから貼り付ける
管理画面から 外観 → テーマエディター をクリック
テーマファイルの一覧がありますので header.php というファイルを探します。
子テーマを利用されている場合 add-header.php
子テーマなしのテーマを利用されている場合
テーマヘッダー（ header.php ） を探してください。
<!DOCTYPE html> という宣言の下にある
<html> のあとに <head> の項目があります。
貼り付けるのは <head> ~ </head> の間ですが
項目がたくさんありすぎて 探すのが大変ですね。
私の場合、170項目目に </head> がありました。
この手前に貼ると後からも探しやすいと思います。
上の画像はイメージですが 親テーマの場合コードが複雑で
間違いやすいかもしれません。
子テーマを利用した場合、新たに記述するコードが書き込みやすく
表示されているので ミスしにくいかと思います。
これでキットコードの設定は完了です。
Font Awesome 管理画面 – Your Account –
Font Awesome にサインイン したら アカウント画面に移動します。
右上の アイコンをクリックして頂くと アカウントナビ を表示することができます。
キットコードの再表示
キットコード を再表示させたい場合、こちらの Kits をクリック
キットコードをクリックすると 先ほどの 貼り付け用の HTMLコード が表示されます。
WordPress プラグインを利用する
Font Awesome は WordPress のプラグインでも利用することでもが出来ます。
こちらは プラグインを インストールするだけですので とても簡単です。
プラグインの新規追加から Font Awesome を検索
インストールしましたら有効をクリックして すぐに利用することができます。
バージョンなどの セッティングをする場合はこちらをクリックします。
このような画面で現在のバージョンなどを確認することができます。
こちらは 最新のバージョンへ更新した後の画面 スタイリッシュになりました！！
バージョンの変更は どちらも Version の項目でバージョンの一覧が表示されます。
キットコードとプラグインの違い
プラグインの利用はかんたんなのですが、プラグインの入れすぎは
動作が遅くなってしまうというデメリットもあります。
ただ、バージョンアップなどが かんたんにできるので
その点では かなり便利だと思います。
また、Font Awesome や WordPress のバージョン によっては
CSSカスタマイズで 疑似要素 before を使用する場合、
アイコンの種類によっては プラグインでしか表示できない 事もあります。
私の使用している テーマ・バージョンのせいかもしれませんが
結局いまは 両方設定している状態です。
サイトのテーマ・バージョン・Font Awesome のバージョンによって
変わってきますのでいろいろ試してみて
コードの方だけでダメなら、プラグインも入れてみてはいかがでしょうか？
関連記事はこちら →【 Font Awesome 】アイコンの基本カスタマイズ
【 WordPress 】見出しをラインやアイコンでカスタマイズしてみる