FontAwesome アイコンを設置するためのショートコードの作り方

こちらの配信（イベント記事はこちら）の中で、ボタンの中にFont Awesome アイコンが設置されているものを見ていた際に「これはショートコードですねー」という話になったので、実際に試してみました。

事前確認

【外観】→【カスタマイズ】→【ページ速度最適化】より「軽量な FontAwesome を使用する」にチェックが入っている場合、利用できないアイコンがありますのでご注意ください。

こちらの設定に関する詳しい情報は、公式ドキュメントより確認してください。

ソースコード

<?php
/**
 * FontAwesome ショートコード
 */
function hsm_add_fontawesome_icon( $atts ) {
	extract( shortcode_atts( array(
			'icon' => 'fab fa-wordpress',
	), $atts ) );
	$output = '<i class="' . $icon . '"></i>';
	return $output;
}
add_shortcode( 'hsm-fa', 'hsm_add_fontawesome_icon' );

使い方

単純にショートコードのiconという属性の中に、必要なCSSクラス名を入力する形にしています。

設置するアイコンを探す際には、こちらのページから探しましょう。

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

例えば「youtube」と検索すると、このような結果になります。

表示したいアイコンをクリックして、そのアイコンページに表示されている<i>タグのCSSクラス名を覚えておきましょう。

そして、表示したい場所に以下のようにショートコードを設置します。

[hsm-fa icon="fab fa-youtube"]

こうすることでFont Awesomeアイコンを手軽に挿入することができます。

ボタンブロックの中にも、

と入力することで、

というように表示することができるようになります。

ぜひご自身でも試してみてください。