WP SVG Iconsは、WordPressでアイコンフォントを簡単に利用できるプラグインです。490種類以上のアイコンを利用できます。それに加え、カスタムアイコンをインポートして利用することもできます。

プラグインの管理画面と記事編集画面にアイコンの一覧が表示されます。そのアイコンを選択すると、アイコンのプレビューとショートコードが表示されます。そのショートコードを記事に貼り付けて利用します。

記事の内容が文字ばかりだと、どうしても地味な印象になってしまいます。記事の中にアイコンがあるだけで、見た目も良くなり、アイコンで記事の内容を視覚的に表現できます。見た目が良いと、自分で書いた記事に反響が出やすくなります。非常に便利なプラグインなので活用しましょう。

はじめに

このプラグインが優れている点

  1. WordPressで490種類以上のアイコンフォントを利用できる。
  2. プラグインの管理画面でアイコンの一覧を確認できる。そのアイコンを選択すると記事に貼り付けるショートコードが表示される。
  3. 投稿と固定ページの記事編集画面の上部にアイコン挿入ボタンが追加される。そのボタンを利用するとスムーズに記事にアイコンを挿入できる。
  4. プラグインの管理画面でアイコンの種類を選択すると、ショートコードが表示され、そのショートコードを記事に貼り付けて利用できる。
  5. IcoMoonからSVG形式のアイコンをインポートして利用できる。(無料版で利用できるカスタムアイコンは10個に制限されている)
  6. 自分で作ったカスタムアイコンをインポートして利用できる。(無料版で利用できるカスタムアイコンは10個に制限されている)
  7. アイコンフォントは、フォントなので、テキストと一緒にCSSでアイコンのサイズやカラーを調整しやすい。
  8. 更に機能を拡張した「有料版」のプラグインも提供されています。

利用イメージ(英語)

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「WP SVG Icons」で検索
  2. WordPress.org からダウンロード

プラグインの使い方

管理画面の場所

プラグインの管理画面は下記の場所にあります。
それに加え、投稿と固定ページの記事編集画面にもアイコン挿入ボタンがあります。

WordPress管理画面 > WP SVG Icons

記事編集画面のアイコン挿入ボタン

投稿と固定ページの記事編集画面の上部にアイコン挿入ボタンが追加されます。そのボタンを利用するとスムーズに記事にアイコンを挿入できます。

記事編集画面のアイコン挿入ボタン

アイコン挿入画面

投稿または固定ページの記事編集画面にあるアイコン挿入ボタンをクリックすると、アイコン挿入画面が表示されます。

そして、利用したいアイコンを選択すると、アイコンのプレビューとショートコードが表示されます。そのショートコードを記事に貼り付けて利用します。

アイコン挿入画面

アイコンのショートコード例

[wp-svg-icons icon=”home” wrap=”i”]

ショートコード応用

無料版の機能では、ショートコードにアイコンのサイズやカラーを指定する機能がありません。しかし、無料版を利用していても、手動でCSSを記述すれば、アイコンのサイズやカラーを変更できます。下記はSPANタグを利用してアイコンのサイズやカラーを変更した例です。

<span style="color:#ff9900; font-size:24px;">
[wp-svg-icons icon="home" wrap="i"]
</span>

※ CSSは「class」で指定しても問題ありません。

まとめ

WP SVG Iconsは、WordPressでアイコンフォントを簡単に利用できるプラグインです。490種類以上のアイコンを利用できます。それに加え、カスタムアイコンをインポートして利用することもできます。

記事の内容が文字ばかりだと、どうしても地味な印象になってしまいます。記事の中にアイコンがあるだけで、見た目も良くなり、アイコンで記事の内容を視覚的に表現できます。見た目が良いと、自分で書いた記事に反響が出やすくなります。非常に便利なプラグインなので活用しましょう。

スポンサーリンク