別タグで開くリンクにこういう→アイコンを付けたい！
実際に、このアイコンを表示する方法は、こちらです。
前回は、WordpressでFont Awesome5を使えるように設定をしました。 [sitecard subtitle=関連記事 url=https://lazylazylazy.com/setting_font_awesome5[…]
ということで、今回はWebアイコンフォントのFont Awesome 5をWordpressに設定します。
このblogはWordPressのテーマにThe Thor(ザ・トール)を使っています。
ですから、The ThorにFont Awesomeを設定する方法となりますが、他のテーマの場合でも参考になると思います。
Font Awesomeとは？
Font Awesomeは、無料および有料でつかえるWebフォントのサービスで、設定すると多数のアイコンを使用できるようになります。
現在のバージョンは、Version 5.13.0です。(2020/05/26現在）
プランとしては、無料のFreeプラン、有料のProプランがあり、Freeプランでは1,588個、Proプランでは7,842個のアイコンを使うことができます。
ProプランのStandardは、年間99ドルです。
通常はFreeプランで十分と思います。
Font Awesome 5の設定
Font Awesomeへの登録
まずは、Font Awesomeのホームページを開いて、【Start for Free】をクリックします。
次に自分のメールアドレスを入力して、【Send Kit Code】をクリックします。
Font Awesomeから「Confirm Your Font Awesome Account Email Address」というタイトルのメールが届きます。
メールを開き、【Click to Confirm Your Email Address + Set Things Up】をクリックします。
新しい画面が開いて、パスワードを設定するように求められるので、パスワードを2回入力して【Set Password & Continue →】をクリックします。
次は、名前などの設定です。
上から順に、名・姓・Font Awesomeを始めて使用した時期・お気に入りのアイコンを入力して、【All set. Let’s go! →】をクリックします。
お気に入りのアイコンは、空欄でも大丈夫です。
これで、Awesome Fontへの登録は完了です。
WordPressへFont Awesome5を設定
登録が完了すると、組み込み用のソースの画面が表示されます。
【Copy Kit Code】をクリックして、追加ソースをクリップボードにコピーします。
このコピーしたソースを<head></head>内に出力するようにすれば、設定は完了です。
The Thorでの設定
WordPressの設定画面を開き、外観の【カスタマイズ】をクリックします。
【基本設定[THE]】をクリックします。
【高度な設定】をクリックします。
</head>直上の自由入力エリアにさきほどクリックボードに保存したソースを張り付けて、【公開】をクリックします。
これで、設定は完了です。
のはずが、「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」とのエラーがでました。
「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」エラーの解消方法
調べたところこのエラーが出るのは、WAFがオンになっているためでした。
WAF(Web Application Firewall)は、Wordpressのサーバーの設定で、Webアプリケーションの脆弱性を突いた攻撃からWebサイトを守る機能です。
上記の設定をするときだけ、WAFをオフにすると【公開】をクリックしてもエラーは出ませんでした。
その後、WAFはオンに変更しておきます。
これで設定は完了です。
設定が完了すると、こんな風にアイコンを表示できるようになります。
次回は、別タブで開くリンクに自動的にアイコンを付ける設定を行います。
前回は、WordpressでFont Awesome5を使えるように設定をしました。
[sitecard subtitle=関連記事 url=https://lazylazylazy.com/setting_font_awesome5[…]