JVM Gutenberg Rich Text Icons

説明

このプラグインは、アイコンを Gutenberg エディターや Advanced Custom Fields で作成されたオプションに統合したい人にとって便利なツールセットです。

Gutenberg ブロックエディター内の段落、見出し、リスト、ボタンなどのリッチテキストフィールドにインラインアイコンを追加するか、Gutenberg エディター内から専用のアイコンブロックを追加します。

このプラグインには、デフォルトのアイコンセットとして無料の Font Awesome アイコンセットが付属しています。バージョン4.x、5.x、およびバージョン6.x から選択できます。
このプラグインは、SVG アイコンに基づいてカスタムアイコン セットを作成するための使いやすいインターフェイスも提供します。カスタムアイコンは、使いやすいドラッグ & ドロップアップローダを使用して、プラグイン設定からアップロードできます。

このプラグインは、Advanced Custom Fields (ACF) の新しいフィールドタイプ、JVMアイコンも作成します。これで、font awsome アイコンセット、またはそれ以上のカスタムアイコンセットで動作するカスタムフィールドを作成できるようになりました。

Font Awesome または組み込みのカスタムアイコンセットコンフィギュレーターがニーズを満たさない場合は、独自のカスタムアイコンセットを作成し、プラグインによって提供されるフックを使用してロードすることもできます。

プラグインは、次の HTML 形式でアイコンを単純に挿入します :

<i class="icon fa fa-address-book" aria-hidden="true"> </i>

WordPress テーマ用の PHP フックを作成する準備ができている場合は、CSS クラス名と使用可能なアイコンをすべて好みに合わせて変更できます。「Font Awesome 4.7」を使用するようにプラグイン設定を維持する必要があることに注意してください。
自分で作成したカスタム作成の Web フォントまたはアイコンセットを読み込みたい場合は、読み進めてください。 SVG ファイルがある場合は、プラグイン設定を「カスタム SVG アイコンセット」に設定し、プラグイン設定から SVG ファイルをアップロードできます。

CSS ファイル
Font Awesome 4.7 CSS ファイルのわずかにカスタマイズされたバージョンがデフォルトでフロントエンドとバックエンドにロードされ、プラグインをそのまま使用できますが、設定画面から Font Awesome Free バージョン 5.x または 6.x を選択することもできます。
カスタム作成されたアイコンセットを使用する場合は、このプラグインによって提供されるフックを使用して、アイコンセットの json ファイルと CSS ファイルをオーバーライドすることをお勧めします。

カスタムアイコンセットファイル
プラグインが Font Awesome 4.7 アイコンセット (デフォルトの動作) に設定されている場合、アイコンは wp-content/plugins/jvm-richtext-insert-icons/dist/fa-4.7/icons.json から読み込まれます。json ファイルには、Font Awesome 4.7 CSS ファイルによってアイコンに変換できるすべての CSS クラスが含まれています。(子) テーマの functions.php でフィルターフックを呼び出すことにより、カスタム json アイコンセットファイルを読み込むことができます。

function add_my_icons($file) {
    $file = get_stylesheet_directory().'/path_to_my/icons.json';
    return $file;
}

add_filter( 'jvm_richtext_icons_iconset_file', 'add_my_icons');

アイコン構成ファイルは、バージョン1.0.3以降、fontello 形式にすることもできます。https://fontello.com を参照して、カスタマイズしたアイコンセットを作成してください。

カスタム CSS ファイル
デフォルトでは、Font Awesome 4.7 CSS は wp-content/plugins/jvm-richtext-insert-icons/dist/fa-4.7/font-awesome.min.css から読み込まれます。(子) テーマの functions.php でフィルターフックを呼び出すことにより、アイコンセットのカスタム CSS ファイルを読み込むことができます。
例 :

function add_my_css($cssfile) {
    $cssfile = get_stylesheet_directory_uri().'/path_to_my/cssfile.css';
    return $cssfile;
}

add_filter( 'jvm_richtext_icons_css_file', 'add_my_css');

独自の CSS ファイルの読み込みを選択し、デフォルトの CSS ファイルを無効にする場合は、次のコードを使用します。

add_filter( 'jvm_richtext_icons_css_file', '__return_false');

すべてのアイコンマークアップには、挿入されたアイコン HTML の前に「icon」というクラス名が付きます。他のプレフィックスを使用する場合は、フィルターを追加できます。 例 :

function my_icon_class($css_class_name) {
    return 'my-custom-css-class-name';
}

add_filter( 'jvm_richtext_icons_base_class', 'my_icon_class');

このフックを使用して、1.0.9で追加されたプラグイン設定画面全体を無効にします。

add_filter('jvm_richtext_icons_show_settings', '__return_false');

設定は引き続き読み込まれることに注意してください。プラグインフックを使用して設定されたカスタム アイコンを読み込む場合は、設定がデフォルトの font awesome に設定されていることを確認してください。

スクリーンショット

ブロック

このプラグインは1個のブロックを提供します。

  • JVM Gutenberg Rich Text Icons

評価

2024年3月1日
I love this very ergonomic and very quick solution for inserting icons in buttons and titles for example. In addition, it is compatible with the site editor (FSE)
2022年11月7日
I can imagine something like this becoming part of core. Very well developed essential addon for the block editor
2022年2月18日 1 reply
Just what I was looking for – you saved me hours of work! I was just wondering why you decided to include FA4 instead of a newer version (they are also free and have a ton more icons) Still, great work
2021年12月7日
Does what it should do, and nothing more (and that is what we want from good plugins). It comes with some filters that are handy for those who don’t want to load FA assets or add BS icons or w/e.
2021年9月16日
It works really well, and it’s very flexible. I wish it had a dedicated block as an additional option for those cases where we just one to add an icon without depending on any other blocks (like Paragraph). Still, it does its job, so it’s a 5-stars.
9件のレビューをすべて表示

貢献者と開発者

JVM Gutenberg Rich Text Icons はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“JVM Gutenberg Rich Text Icons” は2ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“JVM Gutenberg Rich Text Icons” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.2.7

Security update. File name now sanitize in delete icon ajax call.

1.2.6

Security update. Fixed a vulnerabilities in plugin settings upload and delete icon options.

1.2.3

Fixed the thick border around the toolbar button by using the correct toolbar button markup.

1.2.2

Bugfix WordPress 6.2 site editor rich text blocks not editable.

1.2.1

Bugfix for the single icon block using incomplete css classes.

1.2.0

Added a dedicated single icon block for Gutenberg.

1.1.9

Fixed some deprecation errors to get this plugin compatible with the site editor and future WordPress versions. Some work is still needed on this.

1.1.8

Got rid of position relative for custom icon sets.

1.1.7

Fixed editor dialog position on smaller screens.

1.1.5

Font Awesome 4.7 webfont URL’s fixed.

1.1.4

Now also load in the site editor. Not all block however.

1.1.3

Fixed a deprecated warning in php 8.1.

1.1.2

Added Font Awesome Free 5.15.4 and Font Awesome Free 6.2.0 to the settings. The CSS for these verions are loaded from a CDN. Font Awesome version 4.7 is still the default.

1.1.1

Added a notice on the settings screen if a custom icon set is loaded and the SVG icon set is selected. These options won’t work together.

1.1.0

Added a hook to disable the plugin settings page altogether for those who like a clean WordPress admin.

Use this in your functions.php to disable the settings screen that was added in 1.0.9:
add_filter(‘jvm_richtext_icons_show_settings’, ‘__return_false’);

1.0.9

Added a plugin settings screen and a nice interface to upload and create a custom SVG file based icon set. If you like this feature please consinder donating: https://www.paypal.com/donate/?hosted_button_id=VXZJG9GC34JJU

1.0.8

Fixed some WordPress coding convenstions and tested and fixed some minor issues for WordPress 6.0.

1.0.7

Fixed the styling of the editor pop-over. It was to large since WordPress 5.9.

1.0.6

The addon is now also loaded in the widget screen (widget.php)

1.0.5

Added a hook for modifying the editor javascript file loaded for advanced users.
Example usage:

function add_my_js_file($file) {
    $file = '/path_to_my/js_file.js';
    return $file;
}

add_filter( 'jvm_richtext_icons_editor_js_file', 'add_my_js_file');

1.0.4

Bug fix: Replaced the deprecated block_editor_settings hook by the new block_editor_settings_all hook. This fixes a deprecated notice.

1.0.3

New feature: ACF field for the JVM icon set loaded.
New feature: Font icon config file can now also ben in fontello format

1.0.2

Bugfix: Changed backend asset loading to load only on new posts and edit post pages. In version 1.0.1 scripts for this plugin loaded on all backend pages and kept breaking the widget text editor.

1.0.1

Php error fix for some php versions on plugin activation.

1.0.0

Initial release

Stable

1.0.0