內容簡介
總結：WordPress 的 Gutenberg 編輯器讓添加連結到圖像、按鈕和文字變得容易，但並沒有提供直接添加定製 HTML 屬性到這些連結的方式。這就是「Steve's Attributes」的用途。
#### 問題與答案
- 這個外掛的名稱是什麼？
- 答：「Steve's Attributes」。
- 這個外掛對哪些 WordPress 區塊進行擴展？
- 答：它對 Image、Button、Paragraph、List Item、Heading、File 和 Navigation Link 區塊進行了擴展。
- 使用這個外掛可以添加哪些網頁元素的自訂屬性？
- 答：可以添加數據屬性用於彈出視窗、自定義樣式類別、追蹤屬性以及無障礙增強功能。
- 在板塊側欄中，用戶應該去哪裡找到「Link Attributes」面板？
- 答：在「Link Attributes」面板中添加所需的 HTML 屬性，以 key="value" 格式，一行一個。也可以添加類別和 ID。
外掛標籤
開發者團隊
原文外掛簡介
WordPress’s Gutenberg editor makes it easy to add links to images, buttons, and text, but it doesn’t provide a straightforward way to add custom HTML attributes to those links. This is where “Steve’s Attributes” comes in.
This plugin extends the core Image, Button, Paragraph, List Item, Heading, File, and Navigation Link blocks to include a “Custom Attributes” field in their link settings. You can add any HTML attributes you need, such as data attributes for popups, custom classes, tracking attributes, or accessibility enhancements.
Key Features:
* Adds a “Custom Attributes” textarea to the link settings of supported blocks.
* Parses attributes in key="value" format (one per line).
* Merges class attributes properly to avoid duplicates.
* Super lightweight – only loads in the block editor, no frontend impact.
* No database queries or heavy processing.
* Expanded Block Support: Now supports Image, Button, Paragraph, List Item, Heading, File, and Navigation Link blocks.
Use Cases:
* Adding popup triggers (e.g., data-popup-id="123")
* Custom styling classes (e.g., class="my-custom-class")
* Tracking attributes (e.g., data-ga-action="click")
* Accessibility enhancements (e.g., aria-label="Open details")
Usage
General Instructions
Add one of the supported blocks to your post/page (Image, Button, Paragraph, List Item, Heading, File, Navigation Link).
Ensure the block contains a link. For example:
Image Block: Set a link URL in the block settings.
Button Block: Set the button text and link URL.
Paragraph/Heading/List Item Blocks: Select text and add a link using the inline link tool.
File Block: Upload a file, and ensure it’s linked.
Navigation Link Block: Add a navigation item with a URL.
Select the block containing the link.
In the block sidebar, locate the “Link Attributes” panel.
In the “Custom Attributes” field, add your desired HTML attributes, one per line, in key="value" format. You can also add classes and IDs.
Example
`
data-popup-id=”my-popup”
rel=”noopener”
class=”my-custom-class”
id=”unique-id”
`
