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 に設定されていることを確認してください。