WP SVG Iconsで投稿記事にテキストだけでなくアイコンなどのワンポイントを！

記事を書いて投稿するときにダーっと文章を書くだけで終わりにしていませんか？
ユーザーが見やすいページを作るには、
ちょっとしたワンポイントを入れるととても見やすくなりますし、
少し華やかになります。

文字だけがずら～っとならんでいるページって見づらいですよね。
ページに見出しなどのリードやアイコンを入れるだけで見やすいページに変わります。
wordpressのテーマなどは装飾された見出しなどが用意されているのですが、
リード等の装飾パーツの他にアイコンなども使いたい、と思うときもあるでしょう。

でもアイコン画像を用意していちいちアップロードするのも面倒・・・
って時に便利なプラグインがあります。

投稿記事の中にアイコンを入れることが出来るようになるプラグイン

そのプラグインというのが、「WP SVG Icons」という無料プラグインです。
このプラグイン導入後に使えるようになるアイコンは、画像のアイコンではなくフォントアイコンです。

導入方法はいつものように管理画面の「プラグイン」→「新規追加」でプラグインを検索してください。

インストール＆有効化を行ってください。

有効化を行うと、管理画面のメニューに「WP SVG Icons」が出現します。
これをクリックすると上記のようなページに移ります。

いろいろなアイコンがずら～っと並んでいますね。
この中から使いたいアイコンを選択して使用します。

WP SVG Iconsの使い方

このプラグインを有効化すると、投稿ページや固定ページなどの投稿画面のエディタの上に、
「Add icon」というボタンが出るようになります。アイコンフォントを使うときはこれをクリック。

すると上記のようなウィンドウが現れますので、使いたいアイコンをクリックします。

使いたいアイコンをクリックするとそのアイコンのショートコードが表示されます。
その状態で「Insert icon」というボタンをクリック。

するとエディタの中にアイコンのショートコードが書き込まれます。

この状態で記事の投稿を完了すると、

↑ のようなアイコンが表示されるようになります。

この「WP SVG Icons」というプラグインが入っていれば、
投稿記事入力エディタ以外の場所でもアイコンを使うことが出来ます。

その場合は管理画面のメニューにある「WP SVG Icons」という項をクリックすると、
アイコン一覧が表示されますので、使いたいアイコンを探します。

記事の中で使いたいアイコンが見つかったら、使いたいアイコンをクリック。

アイコンをクリックするとこのページの上部のほうへ自動的にスライドします。
するとショートコードが表示されているので、このコードをコピーします。

このショートコードを、例えばウィジェットエリアに「テキスト」ウィジェットを使って、
ウィジェットのテキストエリアにペーストすれば、
サイドバーなどにもアイコンを表示させることが出来ます。

 

こんな使い方などが出来ます

参考  「ほうれい線を無くす」という内容のページに関連商品を掲載しています。
（※ ↑のアイコンもこのプラグインを使っています）
そこで商品の口コミ評価をマークのアイコンフォントで表示させています。

上記の評価のの部分もこのプラグインのアイコンフォントです。
アイコンの組み合わせとアイディア次第でいろんな使い方ができると思います。

アイコンフォントに色を付けたい場合は、投稿画面にペーストしたショートコードを反転させて
エディタのテキストカラー変更ボタンで色を選ぶとアイコンフォントにも色を付けることができます。

文字色を変更する方法と同じ要領で行えば、アイコンの色も変えられます。