この記事ではWordPressプラグイン『Simple Author Box』において「TikTok」や「X」（旧Twitter）のアイコンを今すぐ簡単に実装する方法をご紹介します
この記事のポイント
- プラグイン公式の機能として実装されないかも（もしくはかなり待たされるかも）しれない
- とはいえ自力で実装する方法の情報がない
- なるべく簡単に実装（公式のアップデートによる正式な機能実装までとりあえず急場を凌ぐ目的の処置）
- CSSに貼り付けるだけ（コピペOK）
『Simple Author Box』で実装されない！？
ことの発端は「Twitter」が「X」になりしばらく経ったので、そろそろアイコンを変更しようかと思い立ったこと。しかし『Simple Author Box』プラグイン側で未だ対応（実装）されていないようで、できない…（2024.3時点）
「X」に名称変更してから半年以上が経過し各社軒並みアイコンアップデートを完了させ始めている頃、これだけ有名なプラグインがその主幹ともいえる要素に未だ着手していないことに多少驚きながらも「まぁそのうち次のアップデートあたりで実装されるだろうから、待つか…」と待っている人も多いかもしれないが、どうも雲行きが怪しい
WordPressプラグインサポートフォーラムにおけるユーザーからの質問「TikTokアイコン追加されないの？」に対する公式の返答「次のアップデートでする！ToDoリストにあります」（2022.12）
しかし、この質問から1年3ヶ月経った現時点でも、未だ追加されていない。さらにこの7ヶ月前にも全く同様のやり取りがあったことが示されている。つまり公式側は約2年もの間「TikTokアイコンを追加する」というToDoを抱え消化できていないことになる
なにか事情があり着手できないのか、ここまでくると近日中の進展を期待して、このまま待ち続けるのは得策ではない。（ちなみに放置されているかといえばそうでもなく、プラグイン自体の最終更新も数ヶ月前にあり今も「使用中の（最新の）WPバージョンと互換性あり」となっている）
実際に2024.3.27付のバージョン2.53アップデートでは「WordPress 6.5 and PHP 8.2 compatibility」つまり「ワードプレスとPHPの最新バージョンに対応」とは書いてあるものの、それ以外の記載はなく、Twitter→XもTikTokの実装も叶わなかった
SNSアイコン自力実装の情報がない
『Simple Author Box』はとても便利なプラグインだ。今回まで至らないと思うことはひとつもなく、だからこそこの件には驚いている。だからこそなんとも惜しい
そしてとても便利、だからこそ巷には情報が溢れている。なので自力実装の方法もすぐ見つかると思っていたが、なかなか見つからない。出るのはどれも「プラグインの紹介」や「初期設定」の話ばかり。有名プラグインの宿命か。ニッチなカスタマイズ情報は一般的な情報に埋もれてしまう
もしくは「情報がない」のかもしれない
『Simple Author Box』を利用する世界中のユーザー全員が「X」や「TikTok」未実装で、未だに「Twitter」バードアイコンを表示させているとすると恐ろしいが、今回のはひょっとしたらそのくらいの事案
『Simple Author Box』未実装アイコン対策方法
対策の落としどころ
今回の問題の根本的な解決は「プラグイン公式が本実装アップデートしてくれること」しかなく、それに関してはもう委ねるしかないが、いつになるかわからない。明日かもしれないし、1年後かもしれない
そんな「自力で根本解決を願えない事案に対して、明日にも不要になるかもしれない対処をする」のなら、たとえ「明日不要になっても惜しくない手間で最小限（表面的な見た目）の処置をする」のが今回の落としどころ
対策の方向性
『Simple Author Box』の既存のアイコン上に追加したいアイコンフォントFont Awesomeを表示させる
メリット
- Font Awesomeにあるアイコンならば何でも追加でき、レスポンシブデザインに向けて大きさや位置も自由に（個別に）調整することもできる
- 簡単に実装できる（5分かからない）
デメリット
- Font Awesomeにあるアイコンしか追加できない
- Font Awesome 6が必要（4や5にはXやTikTokなど最新のSNSアイコンがないため）
- 無限に追加できるわけではない（あくまで既存のアイコンを“再利用”するため）
- アイコンホバー時に表示されるSNS名は元のまま
ネックはこの実装自体よりも、むしろFont Awesome 6の導入かもしれない。今これを読んでいる貴方も、ここで断念・見送る方に傾いているのなら、考えてみてほしい
Font Awesomeはいわずもがな便利な機能で必須ともいえる。その最新版を導入しておく恩恵はこの様に計り知れず、長いスパンで考えればどこかでやることになるだろう。そしてその重い腰を上げるのが、まさに「今」なのではないだろうかということを
物事に着手するにはキッカケが要る。そして「このままずっとXではなくTwitterバードアイコンを表示させ続け、TikTokに関しては載せることもできない」状況が進展するかもしれないというインセンティブ以上に、強烈なキッカケはないだろう
古いバージョンを使い続けている人の多くは恐らく「使用中のテーマが対応していない」といった理由だろう（例えばCocoonは4か5しか選べない）が、なるべくスムーズなFont Awesome 6導入の方法をここでは併せて後述するので参考にしてほしい。（実際Cocoon環境下でFont Awesome 6導入を試したが特段問題は起きていない）
「Twitter」を「X」にする方法
まずは「Twitter」バードアイコンを「X」に変えてみよう。下のコードをCSSに追加する
.saboxplugin-wrap .saboxplugin-socials a svg.sab-twitter {
display: none;
}
.saboxplugin-wrap .saboxplugin-socials a:has(.sab-twitter)::before {
font: var(--fa-font-brands);
content: "\e61b"; /* X */
display: inline-block;
font-size: 1.25em;
margin-top: -1px;
}
簡単に説明すると『Simple Author Box』上のTwitterアイコンを特定、非表示、その上に疑似要素でFont AwesomeからXアイコンを重ねている。下段のfont-sizeとmargin-topは各自好きな数値に変更して、大きさと位置を調整してほしい
「TikTok」アイコンを表示させる方法
「TikTok」に関しては「Twitter」→「X」の応用だが、もともと『Simple Author Box』にTikTokは存在しないので、他のSNSを代用（再利用）するしかない
.saboxplugin-wrap .saboxplugin-socials a svg.sab-stumbleUpon {
display: none;
}
.saboxplugin-wrap .saboxplugin-socials a:has(.sab-stumbleUpon)::before {
font: var(--fa-font-brands);
content: "\e07b"; /* TikTok */
display: inline-block;
font-size: 1.25em;
margin-top: -1px;
}
ここでは「StumbleUpon」を再利用している
サービス終了SNSを再利用する
上の「StumbleUpon」は既にサービスが終了している。ユーザープロフィール編集ページ内Social Media Links（Simple Author Box）のリストにあるSNSならば別に何でも良いのだが、いくら日本人が聞いたこともないような外国のSNSだとしても今後使う可能性が少しでもあるものに比べれば、既にサービス終了してしまったSNSの方が“再利用”には向いており有難い
ちなみに現在『Simple Author Box』にあるSNSでサービスが終了・移行しているものは以下の通り
- Add This （sab-addthis）
- Delicious （sab-delicious）
- Google Plus （sab-googleplus）
- StumbleUpon （sab-stumbleUpon）
- Twitter （sab-twitter）
（）内は割り当てられているクラス名
「LINE」も実装できる
Font Awesome 6には「LINE」アイコンもあり、この方法を使えば『Simple Author Box』のSNSアイコンリストにLINEを表示させることができる。SNSとはちょっと違うかもしれないが、公式LINEアカウントなど活用シーンはありそう。コードは以下の通り
.saboxplugin-wrap .saboxplugin-socials a svg.sab-delicious {
display: none;
}
.saboxplugin-wrap .saboxplugin-socials a:has(.sab-delicious)::before {
font: var(--fa-font-brands);
content: "\f3c0"; /* LINE */
display: inline-block;
font-size: 1.25em;
margin-top: -1px;
}
「Delicious」を再利用している
SNSアイコン以外の使い道も
上述した通りこの方法であればFont Awesome 6のすべてアイコンを自在に『Simple Author Box』へ表示させることができるので、SNSフォローボタンとして以外の使い方もできるかもしれない
.saboxplugin-wrap .saboxplugin-socials a svg.sab-addthis {
display: none;
}
.saboxplugin-wrap .saboxplugin-socials a:has(.sab-addthis)::before {
font: var(--fa-font-solid);
content: "\f005"; /* star */
display: inline-block;
font-size: 1.25em;
margin-top: -1px;
}
例えばここでは「Add This」アイコンを星アイコン「★」に変えている。自分の他の運営メディアや活動チャンネルに促すのもいいだろう
また「note」など日本では一般的だがFont Awesome 6にないブランドアイコンもある。その場合は苦肉の策だが、この手法でなるべく近いイメージのアイコンでリンクを貼ることができる。完璧とはいえないが、何もできなかった状況に比べれば現状最善といえるだろう
『Font Awesome 6』導入の手引き
この対策はほぼFont Awesome 6が使えることが前提だがFont Awesome 6を使えるようにすること自体は難しくない。問題はFont Awesome 6にアップグレードすることで、今まで4もしくは5で表示させていたものが乱れたり、そのため書き換えや修正をしなければならなかったり、それをひとつひとつする手間が途方もなかったりすること
現にCocoonではFont Awesome 4がデフォルトのようで、5への対応はまだしも、6に関してはサポート外という状況らしい。無理もない
今回は「なるべく手間取らない対策で様子を見る」というのがテーマなので、「CDN読み込みにより、6を使えるようにしつつ、4も有効な状態を保つ」という方向性を採用
CDNを読み込む
Font AwesomeのCDNは既に廃止しているという情報があるが「cdnjs」というサイトが利用できる
現段階で最新のFont Awesome 6とFont Awesome 4で最新だったバージョン4.7.0のリンクタグをコピーして、headタグ内に貼り付ければ完了。サイトでアイコン表示をチェックしてみよう。（2024.3時点では以下の通り）
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />この時にどうやらバージョン4の方を下に記述することにより4も生きる模様で、検証でもそのようだった
とりあえず試してみたいという人は、上のコードを自分のサイトの<head>内に貼り付けてみよう。それがなにも“悪さ”をしていない、もしくは“許容範囲内”であれば
Welcome to Font Awesome 6
この記事の方法を使って『Simple Author Box』のTwitterアイコンをXに変更したり、TikTokやLINEまで追加できたりするだけでなく、使えるアイコンフォントの幅がぐっと広まったはずだ
この“最小限”の対策で凌ぎつつ、あとはプラグインが正式にアップデートして本実装されるのを待ち（祈り）ましょう
コメント