WP SVG Icons：簡単に490種類以上のSVG形式のアイコンフォントを使える
簡単に 490 種類以上の SVG 形式のアイコンフォントを使える WordPress 用プラグインの紹介です。
それは「WP SVG Icons」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。
WP SVG Icons
WP SVG Icons は、簡単に 490 種類以上の SVG 形式のアイコンフォントを使えます。
用意されているアイコン以外にも独自のアイコンもインポートして使用できます。
下記の IcoMoon から独自のカスタムアイコンをダウンロードしインポートできます。
https://icomoon.io/app/#/select
※Free 版でアップロードできる独自アイコンの数は、10 個までです。
使い方も簡単で、
ショートコードを生成する方法と投稿画面から専用ボタンをクリックし挿入します。
記事を作成もしくは更新時点でのバージョン：v 3.2.1
マルチサイトでの利用:可
インストール手順
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
WP SVG Icons – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「WP SVG Icons」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
WP SVG Icons を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
ダッシュボードの「設定」メニューの下に追加されています。
使い方
使い方には、2 つの方法があります。
投稿画面から専用ボタンから挿入する
専用画面からショートコードを生成する
どちらの場合もショートコードを生成することになります。
[wp-svg-icons icon=""]
独自のカスタムアイコンを使用する場合には、
[wp-svg-icons custom_icon=""]
のように icon の代わりに custom_icon パラメータを使用します。
投稿画面から専用ボタンの場合
ビジュアルエディターとテキストエディターに上のようなボタンが追加されています。
クリックすると、アイコンのショートコードを挿入する画面が開きます。
アイコンを選択すると、右上のプレビュー領域に選択したアイコンが表示されます。
アイコンをラップする要素を必要であれば選択します。
よければ「Insert Icon」ボタンをクリックします
そうするとショートコードが挿入されます。
実際に表示させると上のような感じになります。
専用画面からショートコードを生成する場合
「Default Icon Set」メニューを選択すると、
投稿画面でのアイコン挿入画面と同じような画面が表示されます。
アイコンを選択すると、右上のプレビュー領域に選択したアイコンが表示されます。
アイコンをラップする要素を必要であれば選択します。
「Shortcode:」の下に表示されているショートコードをアイコンを表示したい場所に貼り付けます。
使用できるショートコードのパラメーター
- icon
生成するアイコンの名前を指定します。 - wrap
アイコンをラップする要素を指定します。 - class
クラスを追加したい場合に指定します。 - size
アイコンのサイズを変更したい場合に指定します（px/ em/ rem/ %）。 - custom_icon
カスタムアイコンを割り当てる際に指定します。 - link
アイコンを投稿もしくは固定ページにリンクしたい場合にリンク先を指定します。 - new_tab
リンクの開き方を指定します。 - color
アイコンの色を変更したい場合に指定します（hex/ rgb/ rgba）。
Custom Icon Set
下記の IcoMoon からダウンロードしたカスタムアイコンパックをインポートできます。
https://icomoon.io/app/#/select
Settings
- Load Default Icons
デフォルトのアイコン用スタイルシートをフロントエンドでロードするかどうか。 - Defualt Icon Element
デフォルトのアイコンの要素を選択します。 - Clear Data on Uninstall
カスタムパックと関連付けられた全てのファイルをアンインストール時に削除するかどうか。
Upgrade
有償版についての説明が記載されています。