本週早些時候,websevendev將其第四個WordPress外掛Block Attributes釋出到官方目錄中。該擴充套件允許終端使用者向幾乎任何區塊新增任何HTML屬性。
WordPress編輯器的問題之一是自定義HTML可能有點麻煩。區塊建立在一組標準上,標記應該滿足這些期望。如果某些內容不適合,使用者會看到無效標記警告。
但是,有時使用者出於各種原因需要放入自定義HTML屬性。例如,我有時需要新增一個自定義data-
屬性來使用一些JavaScript。因為我對程式碼非常瞭解,所以我通常通過自定義HTML區塊在這些情況下寫出HTML。但是,當需要新增次要屬性時,這沒有意義。
WordPress目前允許使用者向幾乎每個區塊新增類和ID(在管理中稱為“HTML錨點”)。它不允許直接輸入HTML支援的許多其他可能的屬性。普通使用者的用例很少。
對於某些使用者可以使用額外功能的場景,塊屬性外掛非常方便。
該外掛易於使用。它在每個區塊的“高階”選項卡下新增了一個名為“附加屬性”的新欄位。使用者可以新增屬性名稱並單擊“新增”按鈕。從那裡,它建立一個用於新增屬性值的新欄位。
向onclick
按鈕區塊新增屬性。
該外掛還支援多個屬性。新增一個後,您只需使用相同的輸入欄位來建立更多。
對於我的第一次嘗試,我新增了onclick
一個值為myFunction()
. 然後,跳轉到我的主題並通過JavaScript建立該函式以在控制檯中輸出一條簡單的訊息。一切看起來都很好,而且它奏效了。
HTML檢視和控制檯,帶有用於按鈕區塊的自定義JS。
我想到的大多數用例都是與JavaScript整合的,這是一個簡單的例子。開發人員可以使用這樣的功能做更復雜的事情。這就是將該外掛保留在工具箱中的充分理由——有時您需要扳手而不是錘子。
我還可以看到區塊屬性用於在其他可能有助於可訪問性的情況下新增ARIA屬性。
使用者可以通過style
外掛的屬性將自定義樣式新增到特定區塊。但是,除非這是一個簡單的一次性,否則我建議不要這樣做。對於更高階的用例,Blocks CSS是一個更合適的外掛。它有一個內建的語法熒光筆。另外,textarea比單行文字輸入框更友好。
我見過的區塊屬性的唯一缺點是停用時。如果您新增了任何自定義屬性,您將在編輯器中看到可怕的“此區塊包含未預料的或無效的內容。”訊息。編輯器設法解決了我在核心區塊中遇到的任何問題。
停用外掛後解決區塊警告。
停用外掛不應影響前端輸出。因為自定義屬性是 HTML 標記的一部分,所以它們仍然存在。錯誤訊息應該只顯示在編輯器中。
評論留言