今日はいわゆる「ソーシャルアイコン」をGeneratePressのトップバーに追加して、X（Twitter）やメール連絡への動線を作ってみましょう。
GeneratePressを採用する最大のメリットは、その拡張性と考え抜かれたコードのミニマルさにあります。ですから、安易に「ソーシャルアイコンプラグイン」などを導入して、Pro版に誘導される広告に悩まされたり、GeneratePressの良さを台無しにするブロートなCSS・JSを挿入されては困ります。
今日は「SVG Icons」という大変クールなアイコン挿入ツールを使って、GeneratePressにアイコン表示機能を付け加えてみましょう。
SVG Iconsの導入
以下がSVG IconsのWordPress公式リポジトリです。GitHubでソースが管理・公開されています（そちらは名称が少し違うので注意してください）。
SVG Icons – WordPress plugin | WordPress.org
GitHub – joel-st/shp-icon: This plugin allows you to use SVG icons within WordPress & Gutenberg
SVG Iconsの使い方
SVG Iconsは、「SVGファイルを登録して、それをショートコードを使って、インラインHTML出力する」ツールだと考えてください。Gutenbergブロックとしても出力できますが、今日はクラシックウィジェットで作業するので、ショートコードの方を使います。
インストールしたら、好みのアイコンをアップロードします。今回はBootstrap Iconsから、2つのアイコンをアップロードします。
Bootstrap Icons · Official open source SVG icon library for Bootstrap
アップロードした状態がこちらです。アイコンの下にショートコードが表示されますから、これを希望の場所にペーストするとアイコンが表示されます。
トップバーのウィジェットに追加
今回はこのショートコードを、トップバーにテキストウィジェットを追加した中に入れていきます。余計なタグは出力されませんから、リンク先はショートコードを普通にaタグで囲めばOKです。
また、SVG Iconsプラグインは、自動的にアイコンからクラスを抽出してHTMLに付加してくれます。例えば、Bootstrap Iconsを使うと、自動的に「class=”bi bi-twitter-x”」（一例です）などとクラスが着きます。これはSVGアイコン側にそのようにクラス指定があらかじめ書かれているからで、SVG Iconsプラグインはそれを抽出してくれます。
したがって、例えば以下のように追加CSSを書いて、簡単にサイズやスペーシングなどを調整することが可能になります。
.bi{
width:1.5em !important;
height:1.5em !important;
}
a .bi {
margin-right: 20px;
}おそらく、これがもっともスッキリとSVGアイコンをGeneratePressに追加する方法なのではないかと思います。もしも、わずか数個のアイコンのためにFont Awesomeなどを導入しているのなら、いますぐにやめて、この方法に切り替えましょう。