Tips

WordPress に Font Awesome 5 を導入する方法

投稿日:2018年3月30日 更新日:

WordPress に Font Awesome 5 を導入する方法について説明します。

1. はじめに

Font Awesome そのものについてや、一般的な Webサイトに導入する方法については以下のページに書きましたので参考にしてください。

Webサイトに Font Awesome 5 を導入する方法

2018.03.30

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 フォルダ内の lessscss フォルダは必要ありませんので削除して構いません。

分かり易くするためにこの 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用 おすすめレンタルサーバー

-Tips
-

執筆者:fitallright

関連記事

エックスサーバーに Node.js をインストールする

エックスサーバーは、SSH を使ってターミナルエミュレータでログインすることができますが、そのままだと Node.js が使えません。つまり、node コマンド(npm, npx も)が使えません。 …

CGI と PHP(モジュール版) の違い

レンタルサーバーにおける「CGI」と「PHP(モジュール版)」の違いについて書きます。 目次1. 「CGI」と「PHP(モジュール版)」の共通点2. 両者の違いと「PHP(モジュール版)」の手軽さ1. …

【エックスサーバー】サイトを編集する時は、mod_pagespeed をオフにしましょう

2019年3月27日:「mod_pagespeed設定」機能の新規設定の受付が終了しました。 「mod_pagespeed設定」機能の新規設定の受付終了について – 2019/03/27 …

複数カラムレイアウトのサイトで表の幅を広げられるようにする

目次1. 問題点2. 対策3. コードサンプル4. おわりに 1. 問題点 このサイトは2カラムレイアウトです(少なくても今の時点では)。左カラムには記事が、右カラムにはサイドバーが表示されます。 こ …

レンタルサーバーにおけるデータ転送量とは?

レンタルサーバーの機能やスペックを見ていると「転送量の目安」といった項目を目にすることがあります。 ウェブサイトへのアクセスが少ないうちは、あまり気にする必要はない項目ではあるのですが、できれば、 レ …

ロリポップ!「スタンダードプラン」
さくらのレンタルサーバ「スタンダードプラン」