ストークで最新版のFont Awesome 5を使う方法

STORKで最新のFont Awesome 5を使う方法 WordPress

こんにちは、ストーク大好きくまぺです。

ストークでは標準でFont Awesomeが利用できますが、バージョンが4.7.0と少し古くなっています。

Font Awesomeはバージョン5で大きく変わったので、現在Font Awesomeで検索したコードをそのまま貼り付けても表示されないことがあります。(古いバージョンの場合はclassの”fab”や”fas”を”fa”に変えると表示されることがあります)

このままでは何かと不便なので、この機会に最新のFont Awesomeを使えるようにしてみました。

Font Awesome 5を使えるようにする方法

Font Awesomeをダウンロード

まずはFont Awesomeをダウンロードします。

参考:Font Awesome

Download」をクリックし、ダウンロードしたzipファイルを解答します。

FTPで必要なファイルをアップロード

解答したファイルの中から、必要なファイルをサイトの子テーマにFTPでアップロードしましょう。

子テーマ内に「library」というフォルダを作り、その中に「css」というフォルダを作成します。

「library」の中に、Font Awesomeの「webfont」というフォルダをフォルダごとコピーし、

「css」の中に、Font Awesomeのcssフォルダに入っている「all.min.css」というファイルをアップロードします。

最終的な構成は以下のようになります。

SNSシェアボタンのアイコンを修正する

SNSのシェアボタンは手作業で変更する必要があります。

子テーマに「parts_sns.php」と「parts_sns_short.php」の2つのファイルを親テーマからコピーして用意してください。

各ファイルのTwitter、Facebook、Pocketのコードを修正します。

それぞれの「<i class=”fa fa-〇〇(sns名)”></i>」を、

<i class=”fab fa-〇〇(sns名)”></i>」に修正します。

つまり、classの”fa”を”fab”に変更します。

(例:<i class=”fa fa-twitter”></i> → <i class=”fab fa-twitter”></i>)

これでSNSシェアボタンの修正は完了です。

functions.phpに追加

最後に、子テーマのfunctions.phpに以下のコードを追加します。

// 子テーマのFont Awesome 5.5.0を読み込み
function add_font_style() {
wp_register_style('fontawesome-5.5.0', get_theme_file_uri('/library/css/all.min.css'));
wp_enqueue_style('fontawesome-5.5.0');
}
add_action('wp_print_styles', 'add_font_style', 100);

以上でFont Awesome 5の設定は完了です。

まとめ

ストークでFont Awesome 5を利用する方法を紹介しました。

標準で読み込まれている古いバージョンのFont Awesomeを無効化しようとしたのですが、修正箇所が多すぎてcssも冗長になってしまうので、残しておくことにしました。

コメント

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