たぶん、一番多く使われているであろうアイコンフォント、Font Awesomeをワードプレスで使うためのプラグインを探して、「Better Font Awesome」にたどり着きました。
アイコンフォント Font Awesome
Font Awesomeというのは、SIL OFL(Open Font Lisense)というライセンスで公開されているオープンソースのアイコンフォント集です。
Font Awesome CC BY 3.0
OFL(Open Font License)
Open Font Licenseはフリーフォント用のライセンスで詳細は
に書かれています（注意：英語）が、フォントの改変・再配布の際には無料（同じライセンスを踏襲）にしなくてはいけないのと、再配布時にはクレジット表記をしなくてはいけない、改変したものは名前を変えなくてはいけない、というライセンスです。
なんとなく、クリエイティブコモンズCC BY-SA-NCとほとんど同じように見えますが、クリエイティブコモンズと違って、いったん公開されたら撤回不能ではない予感がします。
ソースコードはMITライセンス（著作権表記が必要）、ドキュメントはCC BY（著作権表記が必要）ですので、フォント本体のほうが少し厳しいライセンスです。
利用者にとってはとても嬉しいライセンスです。
気をつける点
使う際に、1点気をつけなくてはいけないところがあります。
Font Awesomeには、たくさんのブランドロゴが含まれています。
こういったブランド関係のアイコンを使う際には商標に気をつけなくてはいけません。
Font Awesomeのプラグイン
Font Awesomeは、スタイルシートを読み込めば使えます。スタイルシート（CSS）ファイル内でブラウザごとに設定されたフォントファイルを読み込みます。
フォントファイルをダウンロードして自分のサーバーに載せるか、公式で案内されているようにCDN（コンテンツデリバリーネットワーク）のMaxCDNにアップロードされているファイルを使用することが出来ます。
手作業でもそれほど面倒ではないのですが、プラグインを使ったほうが楽です。
人気のウェブフォントですので、たくさんのプラグインが公開されています。今回は、ワードプレスの公式プラグインライブラリから、2つのプラグインをインストールしてみました。
選定基準は、
- 更新されている
- なんとなく気分で
- できれば、インストール数が多いものが良い
と、結構適当です。
検索すると、よく紹介されているプラグインは「Font Awesome Icons」や「WP Visual Icon Fonts」で総インストール数も多いです。でも、最終更新がどちらも2013年なので最新版のWordpressでの使用実績が報告されていませんし、使用するFont Awesomeのバージョンが古いです。
また、ネット上では動かなくなったという報告もチラホラ出ています。
今回ピックアップしたプラグインは2つで、一つはチャレンジャー枠で「Icon Fonts」、もう一つは実績がかなりある「Better Font Awesome」です。
プラグイン「Icon Fonts」
Font Awesomeだけではなく、Wordpress公式ホストサイトのWordpress.comを運営しているAutomattic社が開発しているGenericonsを含む18種類のアイコンフォント、6000個を使うことができるというのが売りです。
GUIで色を変えたりすることもできるようで、良さそうです。
残念ながら、私のWordpress（バージョン4.2.2で、ほとんどカスタマイズしていません）ではインストールでエラーが出たので試していません。（インストールエラーでも使えるかもしれませんが・・・）
プラグイン「Better Font Awesome」
「Better Font Awesome」では、Font Awesomeのみを使用できます。
バージョンを選ぶことができる点がとても良さそうで、自動的に最新版を使うようにすることもできます。
ただ、プラグインの内部に保存されているフォントは現時点での最新版（4.3.0、2015年7月12日現在）ですが、普段はCDNからフォントを取り込む設定になっています。エラー時には内部のフォントファイルを使うのではないかと思います。
他のプラグインやテンプレートにFont Awesomeを読み込ませないようにする設定がありますが、私の使っているテンプレートでは働かなかったため手動で適当に設定しました。
現在、標準のエディタ（TinyMCE）を使っていますが、メディアを追加ボタンの隣にアイコン挿入ボタンが出てきます。
これをクリックするとドロップダウンメニューが出てきてフォントを挿入できます。
[icon name="youtube" class="" unprefixed_class=""] [icon name="twitter" class="" unprefixed_class=""] [icon name="reddit" class="" unprefixed_class=""]
標準では、このショートコードがそのまま挿入されます。ここのclassのところをいじると、大きくしたり色を変えたり、いろいろな追加効果を付加できます。
Better Font Awesomeショートコードの挙動
プラグイン内部で
に変換されます。
Font Awesomeの標準コード
<i class="fa fa-youtube"></i> <i class="fa fa-twitter"></i> <i class="fa fa-reddit"></i>
とは違うので、<i class>…</i>に文字を挟んだりすることはできませんが、ショートコードが展開されるときに”fa-“で終わっているので、ここにオプションの”class=”設定が入って、”unprefixed_class=”がその後に来るようです。上手くできていますね。
Font Awesomeプラグインのでファクトスタンダードと言えるプラグイン「Font Awesome Icons」は古い形式のコード（fa-pencilではなくてicon-pencil）を使用していますし、互換性はありません。
「Better Font Awesome」が働かなくなったときにショートコードを変更するのはすこし面倒ですが、データベース上でいじるのが良いと思います。
コメント