[WordPress] 外掛分享: CSS Class Manager – An advanced autocomplete additional css class control for your blocks

WordPress 外掛 CSS Class Manager – An advanced autocomplete additional css class control for your blocks 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「CSS Class Manager – An advanced autocomplete additional css class control for your blocks」是 2024-05-24 上架。
  • 目前有 50 個安裝啟用數。
  • 上一次更新是 2025-01-26,距離現在已有 98 天。
  • 外掛最低要求 WordPress 6.6 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
  • 有 6 人給過評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

ediamin |

外掛標籤

editor | styles | dropdown | multiple | gutenberg |

內容簡介

總結:
- 創建此外掛的兩個主要動機是解決區塊樣式限制和增強「Additional CSS Class(es)」控制面板的使用體驗。
- 透過 CSS Class Manager,使用者可以更輕鬆地管理並應用 CSS 類別,提供了強大的管理功能和自動完成的控制面板。

問題與答案:
1. 爲什麼使用 CSS Class Manager 這個外掛?
- 因為使用 WordPress 的區塊編輯器時,只能給一個區塊添加一個 CSS 類別,無法選擇多個樣式。
- 「Additional CSS Class(es)」控制面板只能輸入一個簡單的文本,使用起來不夠方便。
2. CSS Class Manager 提供了哪些功能?
- 進階自動完成控制:以自動完成的方式簡化 CSS 類別的套用。
- 輕鬆的類別管理:在管理界面直接添加、編輯或刪除 CSS 類別。
- 匯入和匯出:無縫地傳輸自定義的 CSS 類別名稱以確保專案間的一致性。
3. 如何開始使用 CSS Class Manager?
- 在 WordPress 設定中啟用這個外掛。
- 進階控制會取代預設的「Additional CSS Class(es)」,可在「Advance」區塊設定中找到。
- 在自動完成功能中添加和選擇類別與添加標籤和分類的方式相似。
- 點擊「Open Class Manager」連結或在更多選單中選擇「CSS Class Manager」,即可編輯和管理類別名稱。
- 可在管理模式中進行匯入/匯出。
- 使用 css_class_manager_filtered_class_names 過濾器可通過 PHP 檔案添加類別名稱。

原文外掛簡介

Struggling with adding multiple CSS classes to your WordPress blocks? CSS Class Manager simplifies the process with autocomplete suggestions and a dedicated manager for adding, editing, and organizing your classes. Boost your block styling efficiency!
There are two main motivations behind creating this plugins:
Limitation of Block Style – When applying a block style, only one CSS class can be added to a block. Unfortunately, the block editor lacks the ability to select multiple block styles. To address this, users must resort to the Additional CSS Class(es) inspector control to apply multiple classes. CSS Class Manager provides a powerful manager and an autocomplete inspector control, enabling users to easily add and apply CSS classes to their blocks.
Poor UX of the Addional CSS Class(es) control – The default control for adding class names is a simple text input. This can be cumbersome, especially when applying CSS classes frequently. With the custom inspector control provided by CSS Class Manager, users can effortlessly add their class names, enhancing the user experience.
Features

Advanced Autocomplete Control: Streamline block styling with autocomplete functionality for CSS classes.
Effortless Class Management: Easily add, edit, or remove CSS classes directly within the manager interface.
Show the control in its own panel: User specific settings to show the Addional CSS Class(es) control in its own panel.
Import and Export: Seamlessly transfer custom CSS class names to ensure consistency across projects.

Getting Started

Activate the plugin within your WordPress setup.
The advanced control will replace the default “Additional CSS Class(es)” and can be found in the “Advance” block settings section.
Adding and selecting classes in the autocomplete field is similar to the tags and categories fields.
To edit and manage class names, click the “Open Class Manager” link or select “CSS Class Manager” from the More Menu.
Import/Export can be done from the manager modal.
Use css_class_manager_filtered_class_names filter to add class names with PHP files.

各版本下載點

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


1.0.0 | 1.1.0 | 1.2.0 | 1.2.1 | trunk |

延伸相關外掛(你可能也想知道)

  • Elementor Website Builder – More Than Just a Page Builder 》, 全球超過 1000 萬個網站的領先網站建立平台, Elementor 是專為 WordPress 設計的領先網站建立平台,使網站製作者能夠使用直覺式的視覺建立工具建立專業、像...。
  • Classic Editor 》Classic Editor 是由 WordPress 團隊維護的官方外掛程式,可還原之前(也就是「經典」)的 WordPress 編輯器和「編輯文章」畫面,使使用者可以使用延伸這個畫...。
  • Advanced Editor Tools 》高級編輯工具(以前稱為 TinyMCE Advanced)引入了一個「經典段落」區塊,供區塊編輯器(Gutenberg)使用。, 如果您還沒有準備好切換到區塊編輯器,或者有插...。
  • Classic Widgets 》Classic Widgets 是由 WordPress 團隊維護的官方外掛,能夠恢復先前(即「經典」)的 WordPress widgets 設定畫面。該外掛將於 2024 年或必要時保持支援和維...。
  • Spectra Gutenberg Blocks – Website Builder for the Block Editor 》a.com/tutorials/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="nofollow ugc">Spectra tutorials, you can easily learn how to ...。
  • User Role Editor 》「User Role Editor」WordPress 外掛讓您輕鬆更改使用者角色和權限。, 只需打開您希望新增到所選角色的能力核取方塊,然後按「更新」按鈕以保存您的更改。完...。
  • Disable Gutenberg 》此外掛可禁用新的 Gutenberg 編輯器 (也稱為區塊編輯器),並以經典編輯器取代它。你可以完全禁用 Gutenberg,或從文章、頁面、角色、文章類型和主題模板中有...。
  • Gutenberg Blocks with AI by Kadence WP – Page Builder Features 》Kadence Blocks 是一個 WordPress 外掛,它附加自訂區塊和選項,擴展了 Gutenberg 編輯功能,使您能夠輕鬆創建美麗的網站,而不需要任何程式編寫。Kadence Bl...。
  • Page Builder: Pagelayer – Drag and Drop website builder 》. Pagelayer是一個WordPress網站建構工具,為您提供最佳的設計體驗和快速效能,不論您是初學者或專業人士都能愛上它。, Pagelayer是一款很棒的網頁建構工具,...。
  • Black Studio TinyMCE Widget 》此外掛添加了一個新的 Visual Editor 小工具類型,讓您能夠在側邊欄中輕鬆地插入豐富的文字和媒體對象。使用 Black Studio TinyMCE Widget 時,您將能夠使用W...。
  • Unyson 》, 您覺得這款外掛有幫助嗎?請考慮給它一個五星評價。, , Unyson - 一個免費的拖放框架,附帶許多內建的擴充功能,可以協助您輕鬆快速地開發高級主題。, 贊助...。
  • GenerateBlocks 》將不同的功能整合至編輯器,但並不會因為過多的一維方塊造成內容過於臃腫。使用 GenerateBlocks,您只需深入學習少量的方塊,即可用於創建任何內容。, Genera...。
  • Colibri Page Builder 》Colibri Page Builder 為 ColibriWP 佈景主題新增拖放式頁面建立功能。, 授權, 除非另有指定,所有佈景主題檔案和腳本皆採用 GNU 通用公眾授權證 (GNU Genera...。
  • AddQuicktag 》這個外掛讓在 HTML 和可視化編輯器中添加快捷標籤非常容易。您可以將您的快捷標籤匯出為可供其他插件版本匯入的 JSON 格式文件。, WordPress 的 WP-AddQuickt...。
  • Brizy – Page Builder 》, , Brizy 是一個快速且易於使用的頁面建構器,任何人都可以使用。不需要設計師或開發人員技能。一旦你使用 Brizy ,你就再也不會覺得有任何其它容易了!, 重...。

文章
Filter
Apply Filters
Mastodon