WordPress に Font Awesome 5 を導入する方法について説明します。
1. はじめに
Font Awesome そのものについてや、一般的な Webサイトに導入する方法については以下のページに書きましたので参考にしてください。
Webサイトに Font Awesome 5 を導入する方法
本ページで説明する方法について
今回紹介するのは、CDN は使わない方法です。
また、header.php
テンプレートファイルに、<script>
タグや <link>
タグを記述して導入する方法もありますが、ここでは functions.php
を使った方法について説明します。
2. 導入手順
Font Awesome 5 には、「SVG with JS」と「Web Fonts with CSS」という2つのフレームワークがあり、前者が推奨されています。ここでは両方の導入手順を説明します。
「SVG with JS」の導入手順
(1) Font Awesome 5 のファイルをダウンロードします。
公式サイト Font Awesome にアクセスし、「Download Free」ボタンをクリックするとダウンロードすることができます。
ダウンロードできたら解凍しておきます。
ここでは、ダウンロードした fontawesome-free-5.0.9.zip
ファイルを解凍して、fontawesome-free-5.0.9
フォルダができたとします。
(2) Font Awesome 5 の必要なファイルをアップロードします。
Webサイトに Font Awesome 5 を導入する方法 でも説明していますが、必要なファイルは fontawesome-all.min.js
ファイルだけです。
この fontawesome-all.min.js
ファイルをサーバーにアップロードします。
(2) functions.php
内に、Font Awesome の JavaScriptファイルを読み込むための記述を追加します
wp_enqueue_script
関数を使って、アップロードした fontawesome-all.min.js
ファイルを読み込ませるだけです。この処理は関数にしておき、wp_enqueue_scripts
アクションフックに登録します。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );
function theme_enqueue_scripts() {
//...
wp_enqueue_script( 'fontawesome5', get_stylesheet_directory_uri() . 'path/to/fontawesome-all.min.js', array(), '5.0.9', true );
//...
}
「Web Fonts with CSS」の導入手順
(1) Font Awesome 5 のファイルをダウンロードします。
「SVG with JS」の導入手順と同様です。
(2) Font Awesome 5 の必要なフォルダをアップロードします。
Webサイトに Font Awesome 5 を導入する方法 でも説明していますが、必要なフォルダは、web-fonts-with-css
フォルダのみです。
※ web-fonts-with-css
フォルダ内の less
、scss
フォルダは必要ありませんので削除して構いません。
分かり易くするためにこの web-fonts-with-css
フォルダという名前を、fontawesome5
に変更してサーバーにアップロードするとよいでしょう。
(3) functions.php
内に、Font Awesome のCSSファイルを読み込むための記述を追加します
wp_enqueue_style
関数 を使い、fontawesome-all.min.css
ファイルを読み込む記述を行います。
先ほどと同様、この処理を関数にしておき、wp_enqueue_scripts
アクションフックに登録します。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
//...
wp_enqueue_style( 'fontawesome5', get_stylesheet_directory_uri() . 'path/to/fontawesome5/css/fontawesome-all.min.css', array(), '5.0.9' );
//...
}
3. おわりに
Font Awesome 5 は手軽に導入でき、使い方も簡単です。レンタルサーバーを借りて WordPress サイトを運営しようと考えている方は、是非 導入してみてください。
WordPress用 おすすめレンタルサーバー