[WordPress] 外掛分享： JVM Gutenberg Rich Text Icons

WordPress 外掛 JVM Gutenberg Rich Text Icons 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「JVM Gutenberg Rich Text Icons」是 2021-03-19 上架。
  • 目前有 2000 個安裝啟用數。
  • 上一次更新是 2024-11-04，距離現在已有 180 天。
  • 外掛最低要求 WordPress 5.4 以上版本才可以安裝。
  • 有 9 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

jorisvanmontfort |

外掛標籤

acf | SVG | icon | gutenberg | Font Awesome |

內容簡介

這款外掛可以在 Gutenberg 區塊編輯器中的段落、標題、清單或按鈕等豐富文字區塊中添加內嵌圖示。該外掛以免費的 Font Awesome 圖示集作為預設圖示集。您可以在版本 4.x、5.x 和版本 6.x 之間進行選擇。
此外掛還提供了一個易於使用的介面，可基於 SVG 圖示創建自定義圖示集。可以使用簡單易用的拖放上傳器從外掛設置中上傳自定義圖示。

此外，外掛還為 Advanced Custom Fields (ACF) 創建了一種新的字段類型：JVM 圖示字段。現在，您可以創建與 Font Awesome 圖示集或甚至更好的自定義圖示集配合使用的自定義字段。

如果 Font Awesome 或內置的自定義圖示集配置器不滿足您的需求，您也可以創建自己的自定義圖示集並使用外掛提供的 Hooks 加載它。

外掛只是以以下 HTML 格式插入圖示：

如果您準備為 WordPress 主題編寫一些 PHP Hooks，則可以將 CSS 類名和可用圖示全部進行修改，但請注意，您應將外掛設置保持為使用「Font Awesome 4.7」。

如果您想加載自己製作的自定義網頁字體或圖示集，請繼續閱讀。您可以通過從外掛設置中設置為「自定義 SVG 圖示集」並從外掛設置中上傳 SVG 文件來實現此目的。

CSS 文件
默認情況下，前端和後端都會加載 Font Awesome 4.7 的略微自定義版本的 CSS 文件，以便使外掛能夠直接運行，但您也可以從設置屏幕中選擇 Font Awesome Free 版本 5.x 或 6.x。
如果您想使用自己製作的圖示集，建議您使用外掛提供的 Hooks 覆蓋圖示集 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 文件
默認情況下，外掛會從 wp-content/plugins/jvm-richtext-insert-icons/dist/fa-4.7/font-awesome.min.css 加載 Font Awesome 4.7 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');

所有圖示標記都在插入圖示時添加了 classname「icon」。如果您想使用其他前綴，可以添加過濾器。例如：

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

add_filter( 'jvm_richtext_icons_classname', 'my_icon_class');

原文外掛簡介

A plugin / toolset for anyone wanting to integrate (SVG) icons into the Gutenberg editor or options created with Advanced Custom Fields.
Add inline icons to rich text fields like: paragraphs, headings, lists or buttons anywhere in the WordPress block editor, or add a dedicated icon block from within the Gutenberg editor.
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.
If font awesome or the built in custom icon set configurator do not meet your needs you can also create your own custom icon set and load it using hooks provided by the plugin.
The plugin simply inserts icons in the following HTML format:

The CSS class names and available icons can be all be modified to your liking if you are prepared to write some PHP hooks for your WordPress theme. Please note that you should keep the plugin settings set to use ‘Font Awesome 4.7’.
If you would like to load a custom created webfont or icon set you crafted yourself please read on. If you have the SVG files you can set the plugin settings to ‘Custom SVG icon set’ and upload your SVG files from the plugin settings.
CSS file
A slightly customized version of the Font Awesome 4.7 CSS file is loaded by default on the front end and backend to make the plugin work out of the box, but you can also choose Font Awesome Free version 5.x or 6.x from the settings screen.
If you want to use a custom created icon set it is advised to overide the icon set json file and CSS file using hooks provided by this plugin.
Custom icon set file
If the plugin is set to Font Awesome 4.7 icon set (default behaviour) the icons are loaded from: wp-content/plugins/jvm-richtext-insert-icons/dist/fa-4.7/icons.json. The json file contains all css classes that can be turned into icons by Font Awesome 4.7 CSS file. You can load a custom json icon set file by calling a filter hook in your (child) theme functions.php.
For example:
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');

The icon config file can also be in fontello format since version 1.0.3. Have a look at: https://fontello.com to create your customized icon set.
Custom CSS file
By default the Font Awesome 4.7 CSS is loaded from: wp-content/plugins/jvm-richtext-insert-icons/dist/fa-4.7/font-awesome.min.css. You can load a custom CSS file for your icon set by calling a filter hook in your (child) theme functions.php.
For example:
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');

If you choose the load your own CSS file and want to disable the default CSS file use the following code:
add_filter( 'jvm_richtext_icons_css_file', '__return_false');

All icon markup has the classname “icon” prefixed to the icon HTML inserted. If you want to use some other prefix you can add a filter. Like this:
function my_icon_class($css_class_name) {
return 'my-custom-css-class-name';
}

add_filter( 'jvm_richtext_icons_base_class', 'my_icon_class');

Use this hook to disable the entire plugin settings screen that was added in 1.0.9:
add_filter('jvm_richtext_icons_show_settings', '__return_false');

Please note that settings will still be loaded so please make sure you have set the settings to default font awesome if you are loading a custom icon set with the plugin hooks.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「JVM Gutenberg Rich Text Icons」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

最新版本

延伸相關外掛（你可能也想知道）

  • Advanced Custom Fields: Font Awesome Field 》在 Advanced Custom Fields 中添加一個Font Awesome 圖標字段類型。, , 指定要使用哪些 Font Awesome...。
  • Font Awesome 4 Menus 》此 WordPress 外掛能夠在不需編寫任何程式碼的情況下，將 Font Awesome 4 圖示添加到您的 WordPress 選單和網站上！您只需將 fa-（圖示名稱）添加為選單的 cl...。
  • WP Font Awesome 》此外掛可讓您輕鬆地透過 HTML 或內建的簡碼處理器，嵌入 Font Awesome 圖示至您的網站。, 功能, , 支援簡碼。範例：對於 Font Awesome 5 [wpfa5s icon=""]、[...。
  • AGP Font Awesome Collection 》該外掛程式允許您將 Font Awesome 圖示整合到您的 WordPress 網站中。, 使用此外掛程式，您可以輕鬆地使用各種基於 Font Awesome 的圖示、按鈕等，並使用簡單...。
  • Block for Font Awesome 》此外掛可讓您在編輯器區塊（Gutenberg）或自訂 HTML 區塊中顯示任何 Font Awesome 5、Font Awesome 6 或 Font Awesome kit 圖示。, 您也可以透過使用 [fa cla...。
  • Shortcode for Font Awesome 》在編輯器中插入 Font Awesome 短碼，這裡會生成純短碼，沒有包含 Font Awesome 檔案，這些必須已經在 WordPress 中載入。, 在 WordPress 的任何位置使用 [fa ...。
  • Contact Form 7 Star Rating with font Awesome 》此外掛可在 Contact Form 7 中新增星級評分欄位，並使用 Font Awesome 圖示。, 請造訪 Contact Form 7 Star Rating field with Font Awesome icons 了解更多...。
  • Font Awesome WP 》這個外掛用於使用更新版本的 Font Awesome 字體庫，您可以使用簡短代碼在您的頁面、文章和小工具中使用來自 Font Awesome 的各種字體。您可以更改字體顏色、...。
  • CMB2 Field Type: Font Awesome 》使用 Font Awesome 圖示選擇器強大的自定義 metabox 產生器 CMB2, 您可以在 CMB2 函數檔案中使用作為欄位類型。新增一個欄位，設置類型為 faiconselect，並將...。
  • Icon Fonts 》這個外掛增加了對18種免費圖示字型（6000多個圖示）的支援：, Dashicons （218個圖示）, Elegant （360個圖示）, Elusive （304個圖示）, Entypo （284個圖示...。
  • Smart Icons For WordPress 》, 如果您有時間，請給這個外掛留下評價。我們需要您的支持和鼓勵，以繼續開發更棒的外掛給您。, , 智慧型 WordPress 圖示 外掛為您帶來來自 Font Awesome 的...。
  • Perfect Font Awesome Integration 》Perfect Font Awesome Integration 外掛程式能夠完美地將最新的 Font Awesome 圖標無縫地添加到您的 WordPress 網站上。, 如何使用這個外掛程式？, 安裝這個...。
  • Enqueue Font Awesome CDN 》這個外掛可以自動地從 MaxCDN CDN 加載 Font Awesome CSS 檔案，不需要在你的主題中加入程式碼，請使用這個外掛。然後像平常一樣使用 Font Awesome CSS 標籤...。
  • Update Icon for Twitter X 》總結：「更新 Twitter X 圖示」外掛可自動將您網站的 Twitter 圖示更新至最新的 X 圖示，使其保持現代且時尚。它檢查 Font Awesome 庫是否已安裝並啟用，如未...。
  • Surbma | Font Awesome 》這個外掛可以使用 Font Awesome 圖示的字型和 CSS 工具包。它從 MaxCDN 網路加載 CSS 和字型檔案，這表示不管您的訪客身在何處，都能實現超快速加載。, 這個...。

文章
Filter
Apply Filters
Close
Mastodon