WEBフォント使ってるので鳥をXに変えるだけだろガハハって思ってたらWordPressで使ってるWEBフォントがfontawesomeだったため激しく躓いたので備忘録。
fontawesomeで何が問題かっていうと現時点(2023/11/09)でfontawesomeのWordPressのバージョンが4.4.0。
そしてfontawesomeの最新バージョン自体は6.4.2で、WordPressのプラグインとしての更新が追いついていない状態。
[ fontawesomeのXのページ ]
https://fontawesome.com/icons/x-twitter?f=brands&s=solid
つまりfontawesomeバージョン4.4.0状態のWordPress上でfontawesomeバージョン6.4.2じゃないと使えないXのアイコンを設定しても読み込まれずにアイコンのない空白が産まれてしまう。
解決策として、WordPressのプラグインを無効化してfontawesomeのKit 埋め込みコードを設定する方法を採用した。
WordPressのプラグインとしてfontawesomeを利用するメリットは、本来バージョンの更新によって新規フォントを利用できることなので、今一番使いたいフォントが利用できない以上このメリットがデメリットになっている。
そのうちWordPressのfontawesomeのバージョンがアップして6.4.2以上になれば問題なく使えるはずなので、その時は今回設定した埋め込みコードを削除して無効化したプラグインを有効に戻す予定。(忘れそう
手順
① WordPressのプラグインでfontawesomeを無効化
② fontawesomeで埋め込みコードを入手する(メルアド入れて登録できる) https://fontawesome.com/kits/
③ 発行されたコードをWordPressのheaderに記述
※headerに書き込むフォームがあるテーマの場合はそこからできるが、ない場合はfunction.phpに書き込む必要がある。
以下、function.phpに書き込む場合
function add_text_before_head_close_tag() {
?>
<script src="https://kit.fontawesome.com/*********.js" crossorigin="anonymous"></script>
<?php
}
↑の****のところに発行されたコードの英数字を入れる
function.phpを書き換える場合、WordPress上の外観>テーマファイルエディター
からだとセキュリティ云々で弾かれる可能性があるので、その場合はFTP等で直接テーマのディレクトリを開きfunction.phpを書き換えてやる必要がある。
これで鳥アイコンをXに変更する作業完了。なんて面倒くさい仕事増やしてくれたんだ。