WordPressテーマ『Luxeritas』でFont Awesome 5を利用する方法

2019年5月25日2022年2月20日

はじめに

『Luxeritas』は、SEO 最適化済み、レスポンシブ、高カスタマイズ性を持つ無料の WordPress テーマです。
Luxeritasでは、無料で使えるアイコンフォント『Font Awesome』を導入しており、カテゴリーやタグなどのアイコンとして使われています。

読み込んでいる以上は、もちろん記事内など、好きなところで利用が可能です。

ここでは、使い方と使えるアイコンを紹介します。

設定方法

実は設定しなくても使えます。
ただし、Luxeritasが使っている最小まで削られているため、他のアイコンも使いたいとなれば設定変更が必要です。

変更点は管理者画面のメニューから「Luxeritas」⇒「カスタマイズ」⇒「CSS」のページ中ほどにある【CSSの構成】の項目。
Luxeritasで利用されているアイコンを他の場所でも使いたいだけなら「Luxeritasで必要最小限のCSSのみ」を選択、他のアイコンも使いたいなら、「Font AwesomeオリジナルのCSS」を選択してください。
他の項目は、特別な理由がない限り上画像の通りでOKです。
注意：最小のCSSに比べ、オリジナルのCSSは１０倍（63KB）のファイルサイズがあります。

使い方

ここでの説明はFont Awesome 5 用です。

テンプレートファイルやFaunctions.phpで使う場合

参考サイトが多い為、基本のみ説明すると<i>を使います。

<i class="fas fa-home"></i>

fasの部分

主に書式（font-weight）に関するクラス。フリー版の場合は、「fas」「fab」のみ。
fas…solidの意。基本的にはこれを記述。Pro版なら「far」や「fal」が使える。
fab…brandの意。企業ロゴなどのアイコンを使う場合はこっち。

fa-homeの部分

アイコンの種類を決めるクラス。
沢山あるので、Font Awesome公式サイトで調べて使う。

記事内で使う場合

方法はいくつかあり、

テキストモードで上記の方法を使う
元々テキストモードで書いていたり、アイコンの使用頻度が少ないのならこれ
タグのクラスをカスタムできるエディタを使う
すでにそういうエディタを使っているならこれ
Font Awesome専用のプライグインを使う
面倒くさいorプラグインが増えても気にしないのならこれ

Better Font Awesome
ショートコードを使う
そこそこ使うけど、プラグインを入れたくならいのならこれ

ここでは、ショートコードを利用した使い方を説明します。

ショートコードでFont Awesomeを利用する方法

オーソドックスな使い方です。
回転やサイズ変更は可能ですが、強制変形やマスクなどには対応していません。

ショートコードの中身

functions.phpに以下を追加します。

function shortcode_iCustom($atts){
$contents ='<i class="';
foreach((array)$atts as $value){
$contents .= $value . ' ';
}
$contents .= '"></i>';
return $contents;
}
add_shortcode('i_custom','shortcode_iCustom');