WordPressの投稿や固定ページで、Font Awesomeをはじめとするアイコンフォントが自由に使えたら表現の幅が広がるのになぁ、と感じている方は多いと思います。
ただ、WordPressの機能によって、基本的にHTMLをそのまま貼り付けても無視（削除）されてしまうため、アイコンフォント用のHTMLコードをそのまま挿入しても、まったく反映されないという経験をされた方も多いはずです。
それならそういう機能を持つテーマ（有料のものはこれをウリにしてるものもあるのかも．．）にするしかないのかと購入する前に．．．ブロックでホイホイ挿入というわけにはいかないものの、今使っているテーマで実装できたらうれしいですね。
そこで今回は、有名なFont Awesomeというアイコンフォントを例に、比較的簡単な手順でアイコンフォントをWordPressの投稿や固定ページ内で使う方法を紹介します。
便利なプラグインもある
いきなりですが、コード編集の経験がない、このページを見てみたけど導入や操作が面倒な感じがするという方は、以下のプラグインがおすすめです。
Font Asesomeの各バージョンのいずれかや、独自のSVGファイルをアップロードしたアイコンセットをブロックの中で簡単に呼び出して挿入することができます。
ブロックで挿入するわけではないので、基本どこにでも挿入できて便利なのですが、アイコンフォントを使用する機会ってそんなに多くないと思われ、わざわざプラグインで追加しなくても．．感が個人的にはあります。
そこで今回は、アイコンの挿入操作がかなり原始的にはなるものの、プラグインを使わずにアイコンフォントをブロックエディターで使用する方法を紹介します。
今回はFont Awesome 6.3.0での実装方法を紹介しますが、他のバージョンやその他のアイコンフォントでも導入の流れは基本的に同じです
アイコンフォントをローカルで実行させる
Font Awesome6.3.0はCDN(外部サイト）経由でのスタイル読み込みでも使用できますが、以下の理由から、テーマ内へ必要なファイルを置いて実行させる（ローカルで実行させる）方法を取ります。
- CDN経由では、ページ表示速度に影響が出るケースがあったり、接続の不具合等によって表示されないケースがある
- CDN経由では、CDN内のファイル変更等により、表示されるアイコンが消失したり変更したりするケースがある
- ローカルで実装したほうがブロックエディター側（編集画面）側への反映がしやすい
本ページのカスタマイズでは、有効化しているテーマへのファイル（フォルダ）転送、functions.phpへのコード追加が必要です。操作が不安な方は、前述のプラグインを使用するか、導入を見送ることをおすすめします
１．必要なファイルを入手する
Font Awesome 6.3.0のファイル一式を以下の公式ページからダウンロードします。
ページをスクロールしていくと下図のような部分がありますので、赤枠のボタンをクリックし、パソコン内にファイル（圧縮）を保存します。
図内にも書いていますが、Font Awesomeのバージョンを確認ください（現在のバージョンはVersion 6です）
ダウンロードが完了したら、パソコン上です圧縮ファイルの解凍（展開）をしておきましょう。
２．サイトで必要なファイルをテーマへ転送する
まずは、転送するフォルダを格納する、新しいフォルダを作成します（今回は「icon-fa6」というフォルダを作成した前提で進めます）。
１の最後に展開したフォルダ内を見ると、以下のように、たくさんのフォルダ・ファイルがあります。
ただ、今回使用するのは、上図の赤枠で囲んだ「css」「webfonts」の2つのフォルダだけです。
先ほど作成した「icon-fa6」フォルダ内へ「css」「webfonts」の2つのフォルダをコピーします。
次に、「icon-fa6」フォルダを、FTPクライアントツールなどを使って、有効化しているテーマのフォルダ直下へ転送します。
３．転送したファイルをサイトへ読み込む
以下のコードを有効化しているテーマのfunctions.phpへコピーし、保存します。
/***** FontAwesome アイコン *****/
/* アイコンの読み込み */
function sample_fa_icon_init() {
//スタイルシートの登録
wp_register_style( 'sample-fa-icons', get_stylesheet_directory_uri() .'/icon-fa6/css/all.min.css', array(), filemtime(get_stylesheet_directory() .'/icon-fa6/css/all.min.css'), 'all' );
//スタイルシートの読み込み
wp_enqueue_style('sample-fa-icons');
}
add_action( 'enqueue_block_assets', 'sample_fa_icon_init');子テーマを使用している前提のコードです。親テーマ（非推奨）の場合は「get_stylesheet_directory_uri()」「get_template_directory_uri()」へ書き換えてください（2か所）
ブロックエディターでアイコンを挿入する
１．必要なアイコンを探す
挿入するアイコンは以下の公式ページから探します。
目的のアイコンが見つかったら、クリックして以下のような別画面を表示させます。
上図の赤枠部分をクリックすると、コードがコピーされます。
２．HTMLコードを貼り付ける
段落ブロックを例に説明します。
段落ブロックを追加したら、適当な文字を入力します。
下図のようにブロック上部に表示されるブロックツールバーから、三点リーダーをクリックし、「HTMLとして編集」をクリックします。
下図の赤枠のように、挿入したい場所へ先ほどコピーしたアイコンのコードを貼り付けます。
終わったら、青枠の場所にある「ビジュアル編集」をクリックします。
問題なく導入できていれば、下図のようにアイコン含みで文字列が表示されます。
他のブロックでも段落ブロックと同じ手順が踏めるものは、任意の場所へアイコンを挿入できます。
- Font AwesomeアイコンのHTMLコードをコピー
- 三点リーダー→HTMLとして編集をクリック
- アイコンのHTMLコードを貼り付け
- 「ビジュアル編集」をクリック
HTML編集では、改行やスペースを余分に入れると、ビジュアル変換でエラーとなることがありますのでご注意ください
以上で、いつでもアイコンフォントを任意の場所へ追加できるようになります。
冒頭にも書いた通り、挿入する手順がちょっと面倒な感じがしますが、この方法ならそれをウリにする有料テーマを使ったり、余分なプラグインを使う必要もないですね。
また、以下のページ内のコードを参考にカスタマイズしてショートコードで挿入するという手段もあるのですが、ショートコードだとブロックエディター側で確認できないので、アイコンをあまり多用しないなら今回紹介した方法の方が使い勝手がいいのかなと思います。
アイコンが表示されない、□になってしまうという場合には、次項を参照してチェックしてみてください。
アイコンが表示されず、□になってしまうときは
ブロックエディター側でビジュアル編集に戻したとき、プレビュー表示した時などにアイコンが表示されなかったり、□で表示されてしまう場合には、以下の原因が考えられます。
- テーマフォルダ内へ必要なフォルダが転送されていない→こちらの手順を確認
- テーマのfunctions.phpへ追加したコードに誤りがある→こちらの手順を確認
- アイコンフォントのHTMLコードのコピーに誤りがある
よくあるのは1で新規作成したフォルダ名を変更した場合です。
変更した場合は2のコード内の参照先を変更する必要がありますし、内包した「css」「webfonts」フォルダの名前を変更するとうまく動作しませんので注意が必要です。
また、導入時に既に開いている投稿編集画面やプレビューでは、アイコン用の設定が読み込まれていないために□表示になってしまうことがありますので、一度キーボードの「Ctrl」＋「F5」を押してキャッシュをクリアしてみてください。
コメントを残す