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

首頁外掛目錄 › 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 的封面圖片
300+
安裝啟用
★★★★★
5/5 分(11 則評價)
65 天前
最後更新
0%
問題解決
WordPress 6.6+ PHP 7.4+ v1.6.0 上架:2024-05-24

內容簡介

總結:
- 創建此外掛的兩個主要動機是解決區塊樣式限制和增強「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 檔案添加類別名稱。

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.6.0) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「CSS Class Manager – An advanced autocomplete additional css class control for your blocks」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

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.
Body and Post Classes: Add custom class names to post body and post containers using body_class and post_class filters directly from the post editor.
Inline CSS Classes: Add custom class names to any selected text inside paragraph, heading and other blocks that support Rich Text.
Theme.json Integration: Automatically include global class names generated from theme.json settings in your class suggestions.
Show the control in its own panel: User specific settings to show the Addional CSS Class(es) control in its own panel.
Add classes without saving to the database: User specific settings to toggle saving classes to the database.
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 add body or post classes, look for the “Body Classes” and “Post Classes” controls in the Post tab of the post editor (requires custom-fields support). See the limitations
To add inline classes to the selected text, use the block format tool control in the text formatting tools options (available in blocks that support Rich Text).
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.
Theme.json generated classes are automatically included and can be disabled from the Preferences in the manager modal.
Use css_class_manager_filtered_class_names filter to add class names with PHP files.

延伸相關外掛

文章
Filter
Apply Filters
Mastodon