JVM Gutenberg Rich Text Icons
アイコンを Gutenberg エディターや Advanced Custom Fields で作成されたオプションに統合したい人にとって便利なプラグイン / ツールセットです。
WordPress ブロックエディター内の段落、見出し、リスト、ボタンなどのリッチテキストフィールドにインラインアイコンを追加するか、Gutenberg エディター内から専用のアイコンブロックを追加します。
This plugin ships with the free Font Awesome icon set as default icon set. You can choose between version 4.x, 5.x and version 6.x. The dedicated icon block contains several styling options to customize the icon in the icon block. The plugin also provides an easy to use interface for creating a custom icon set based on SVG icons. Custom icons can be uploaded from the plugin settings using an easy to use drag & drop uploader.
For users of Advanced Custom Fields (ACF) the plugin also creates a new field type: JVM Icon. This allows you to create custom fields that work with a the font awsome icon or any custom created icon set.
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 に設定されていることを確認してください。