説明
このプラグインは、アイコンを 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個のブロックを提供します。
- Single icon
評価
貢献者と開発者
変更履歴
1.2.9
Added an option for rendering technology for custom icons sets. You can now also choose rendering with a ::before or ::after pseudo element instead of the regular HTML / CSS. This allows for more CSS flexibility. For example adding backgrounds or hover effects.
1.2.8
Update to re-enable icons in ACF select2 field. Icons apeared as literal HTML after an update of the ACF plugin.
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