WordPressでFont Awesomeプラグインを使う方法

ATTENTION

これまで散々ほったらかしてしまっていたこのブログは現在大規模改装を実施しています。
古いコンテンツの削除や入れ替え、最新情報の追加といったコンテンツの手入れを順次行いますが、なにせ壮大な作業なもんでその間リンク切れだのなんだのでご不便しかおかけしませんがどうぞご容赦を。。。
また、この際取り扱い教材や購入特典も一新しますので、購入をご検討の場合は先に問い合わせフォームからメールかなんかでご一報くださると幸いです。
(古い特典だとほら申し訳ないですし、ご案内できる特典コンテンツを事前におしらせしますので!)

完全に自分メモでしかないのですが、あの便利すぎるアイコンフォント「Font Awesome(フォントオーサム)」を新規導入する時にCDNガーとかKitガーとかheader.phpにコードをコピーしてーとかいう面倒臭いものを全部プラグインで済ませてしまえることがわかったので忘れないようにメモします。

POINT

後で読み返してみて自分でも「ん??」ってなったので追記すると、この記事はアイコンフォントのFont Awesomeというサービスを使うためのセットアップとして、今までphpファイルの編集が必要だったけどそんなことしなくてもプラグインでいけたよ、という喜びの声を書いたものです。追記になってるのかなこれ???笑

とりあえずFont Awesomeのアカウントを作る

Font Awesome
FontAwesomeのアカウントを作る

図のように「Start for free」をクリックしてメールアドレスを入力、折り返しメールから〜〜というよくあるアカウント登録パターンと大差ないので案内に従ってアカウントを作っておきます。

ワードプレスでFont Awesomeプラグインをインストール

次いで、ワードプレスでFontAwesomeのプラグインをインストールします。

WordPressのFontAwesomeプラグイン

なんてことなく普通に検索で見つかりますのでインストール、有効化しておきます。

FontAwesomeプラグインインストール

こんな感じでFont Awesomeコーナーができました。
続いてセットアップしていきます。

Font Awesome セッティング

まずはここ。
デフォルトでは「Use CDN」になっているのを「Use A Kit」に変更。

グーグル翻訳曰く、CDNとやらは古い形式でそのうち廃止になるので便利なKitを使ってね、みたいな話でした。
(うんゴメンものすごくはしょった)

Font Awesome API Token

「Use A Kit」に切り替えると画面がガラッと変わってこんな感じになるので、枠で囲った青文字リンクをクリック。

このリンク、要するに入力に必要なAPIトークンとやらを取得しようと言っています。

Font AwesomeWordPress, with an API token.

それっぽいのキターーー!!

実はちょっとここで迷子になってたんですよ。
全然違う、埋め込みコード用の識別番号みたいなのを一生懸命見てた。。。

一応、同じようにワードプレス用のAPIトークンの場所がわからなくて迷子になった同志のためにURL書いときますね。

Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

Font Awesome ワードプレス セットアップ

あとは、コピーしたAPIトークンをここに貼り付けて保存すればOK!!

Font Awesome ワードプレス プラグイン

ほらできた!!

これで、header.phpに記述を〜〜とかしなくて良くなるのでphpクラッシャーな生徒さんも安心ですだ!

タイトルとURLをコピーしました