任意の場所へアイコンフォントを挿入できるプラグイン「JVM Gutenberg Rich Text Icons」
文章の途中などにアイコンフォントを使いたい時ってありますよね？
今回紹介する「JVM Gutenberg Rich Text Icons」はブロックエディターで、段落ブロックやテーブルブロックなど、文字が入力できるブロック内の任意の場所へ、簡単な操作でアイコンフォントを挿入できる便利なプラグインです。
【JVM Gutenberg Rich Text Icons】プラグインの用途や機能
- ブロックエディター上でウェブアイコンを任意の場所へ挿入できます
このプラグインの秀逸なところは、FontAwesomeの各バージョンのアイコンセットが使えるだけでなく、独自のSVG画像をアップロードしてカスタムアイコンセットを作成して使用できることです。
例えばIcomoonなどの無料ウェブアイコンサイトでSVG画像を入手すれば、完全オリジナルなアイコンのセットを作り、どこにでも挿入できるようになります。
本ページを最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用（試用）したテスト環境・公式ページなど
この紹介記事作成にあたって、試用（テスト）を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。
| テストしたサーバー | |
| WordPressバージョン | 6.1.1 |
| PHPバージョン | 7.4.27 |
| テストしたテーマ | Twenty Twenty-Two(WordPressのデフォルトテーマ) |
| プラグインバージョン | 本記事で紹介するために試用したバージョン ：1.1.8 公式サイトで配布されている最新バージョン ：1.1.9 ※バージョンが違うと、仕様が大きく変更となっている可能性があります |
| テストした日 | 2023年3月11日 ※本記事の最終更新日であり、実際の試用日とは異なることがあります |
| 公式サイト | https://ja.wordpress.org/plugins/jvm-rich-text-icons/ ※wordpress.org上のページへのリンクです |
| 作者サイト | ※プラグイン制作者の独自ページ（サイト）リンクです |
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【JVM Gutenberg Rich Text Icons】プラグインの設定画面や表示画面の日本語化と翻訳
【JVM Gutenberg Rich Text Icons】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます
【JVM Gutenberg Rich Text Icons】プラグインのインストールと設定方法
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
基本的な設定方法と使用方法
アイコンセットを選択する
WordPressの管理画面から、「設定」→「JVMリッチテキストアイコン」を選択します。
以下のような画面が出てくるので、アイコンセットを選択します（基本デフォルトのままでOKです）
また、一度「カスタムSVGアイコンセット」を選択して変更を保存すると、以下のような画面になるので、SVG画像をアップロードして独自のアイコンセットを作ることもできます。
下図はSVG画像をいくつかアップロードした時のスクリーンショットです
独自SVG画像のアップロード数には制限がないようですので、いくつでも設定でき、ブロックツールバーから呼び出すアイコン選択画面にもきちんと表示されます。
アイコンの挿入方法
投稿や固定ページの編集画面で、文字が入力できるブロック（段落やテーブルなど）を挿入後、何等かの文字を入力します（ブロックがフォーカスされた状態になります）。
その後、そのブロックを選択した際、上部に表示されるブロックツールバーの旗マークをクリックし、好みのアイコンをクリックすれば、簡単にアイコンを挿入できます。
【JVM Gutenberg Rich Text Icons】プラグインの便利な使い方・カスタマイズ方法など
このプラグインをより便利に使うカスタマイズ技、テストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない情報、発見した不具合などを紹介します。
途中でアイコンセットを切り替えると表示されなくなる
前述したように、このプラグインでは、FontAwesomeの各バージョンのアイコンセット、または、独自のSVG画像をアップロードして作成できるカスタムアイコンセットから、適用するアイコンセットを選択できるようになっています。
例えば、しばらくFontAwesome6.0を選択して、ブロックエディター上でアイコンを挿入した後に、独自のアイコンセットを選択しなおすと、FontAwesome6.0にした際に挿入していたアイコンは表示されなくなります。
アイコンセットの変更によって過去に作成した投稿や固定ページのアイコンが表示されなくなる可能性がありますので注意が必要です。
サイトエディターで不具合が出るかも．．
本プラグインのバージョン1.1.8を有効化した状態で、ブロックテーマのサイトエディターを使ってテンプレート編集する際、以下のような不具合が私の環境では発生しました。
WordPress 6.1.1では．．
テンプレートエディターで、段落ブロックを挿入した後、通常の使用方法でアイコンを挿入すると、空白として挿入されます。
ただし、フロントエンド（閲覧画面側）では正常に表示されますので、恐らくブロック側にアイコンが正常に読み込まれないのが原因かと思われます。
WordPress 6.2RC1では．．
前項の6.1.1では、エディター側で非表示になっているだけでしたが、6.2RC1では、段落ブロック自体が壊れて操作できなくなりました。
このプラグインを停止することで不具合なく編集できるようになるため、このプラグインの不具合で間違いないかと思います。
この不具合については、[ha-mdate]現在、公式のフォーラムからプラグイン作者に検証していただくようメッセージを送っており、返信・検証待ちの状態です
このページの更新履歴
| 更新日 | 更新内容 |
|---|---|
| 2023年 3月11日 | 本ページを公開しました |
ポチップ 
ポチップ 
作者: ひまあーと（管理人）
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、このサイトでも使用している【HABONE】テーマの制作と配布を行っています。
年齢：50代 趣味／園芸・ペット・卓球
