WordPressでFont Awesomeを使うための設定

WordPressでFont Awesomeを使う時にちょっと引っ掛かったので、メモ代わりに設定例を書いていこうかと思います。

子テーマのfunctions.phpを編集すればFont Awesomeが使えるようになります。今はCSSもしくはJavaScriptをフックして使う方法があるのですが、一長一短という所。それでは設定方法を順番に見ていきましょう。

設定方法

CSSをフックして設定する

CSSをフックして設定する場合、使えるのは旧バージョンのみで最新バージョンは使えません。その代わり、会員登録も必要ないので、手間は少なくて済みますね。

子テーマのfunctions.phpに以下の関数を追加してください。

// fontawesomeを読み込み
function enqueue_scripts(){
    wp_enqueue_style('fontawesome','https://use.fontawesome.com/releases/v5.2.0/css/all.css');
}
add_action('wp_enqueue_scripts','enqueue_scripts');

JavaScriptをフックして設定する

JavaScriptをフックして設定する場合、Font Awesomeの公式サイトで会員登録する必要があります。

Font Awesomeの公式サイト

この方法だと、今後は自動的に最新バージョンが使用可能になる様です。ただ、アイコンによっては表示されなかったりするみたいなので、まだ安定していないのかも。

会員ページからJavaScriptのリンクURLが取得できるので、それを子テーマのfunctions.phpでフックします。

// fontawesomeを読み込み
function enqueue_scripts(){
    wp_enqueue_script('fontawesome','https://kit.fontawesome.com/XXXXXXXXXX.js');
}
add_action('wp_enqueue_scripts','enqueue_scripts');

CSSとは異なり、wp_enqueue_scriptで記述するのがポイント。