前言介紹
- 這款 WordPress 外掛「Magic Block」是 2018-12-12 上架。
- 目前有 400 個安裝啟用數。
- 上一次更新是 2021-04-18，距離現在已有 1476 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.2.4 以上。
- 有 11 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
div | block | html element | container block | data attributes |
內容簡介
Magic Block 使用區塊編輯器註冊了一個容器區塊。這個區塊有元素（div、section等）、ID、類別名稱、內嵌樣式，以及任意其他屬性（包括 data-* 和 aria-*）的設置，透過自定義屬性選項區。
Magic Block 設計的目的是給希望完全掌握文章 HTML 結構的人，或希望使用編輯器來創建複雜佈局，如 Flexbox、CSS Grid、Bootstrap 等等。
此區塊不會添加任何開發人員未提供的 CSS 樣式。相反，它使您可以輕鬆地將其他區塊包含在帶有任意 ID 或 Class 的父元素中。然後，您可以通過 ID 或 Class 在您的佈景主題樣式表或通過 CSS 外掛輕鬆地定位這些容器元素。對於較小的自定義，有一個內嵌樣式欄位，對應於容器元素的 “style” HTML 屬性。
在編輯器視圖中，每個魔法區塊都有一個薄灰色輪廓，以便您輕鬆地看到哪些子元素屬於它。它還提供了元素類型、ID 和類別的顯示，因此您可以跟踪如何使用 CSS 定位它們。
從 WordPress 5.3 開始，您可能不需要此外掛，因為核心現在提供了一個 “Group Block”（群組區塊），其目的類似，但選項較少。
原文外掛簡介
Magic Block registers a container block with the block editor. This block has settings for element (div, section, etc), ID, classname, inline style, and any other attribute (including data-*, and aria-*) via a custom attributes section.
Magic Block is designed for people who want full control over post HTML structure, or wish to use the editor to create complex layouts such as Flexbox, CSS Grid, Bootstrap, etc…
This block does not add any CSS styles that you, as a developer, do not provide. Rather, it allows you to easily contain other blocks in parent elements with an arbitrary ID or Class. You may then easily target these container elements by ID or Class in your theme’s stylesheets or through CSS plugins. For smaller customizations there is an inline style field which maps to the “style” HTML attribute for the container element.
In the editor view, each Magic Block has a thin grey outline so you can easily see which child elements belong to it. It also provides a display of element type, ID, and classes so you can keep track of how to target them with your CSS.
As of WordPress 5.3 you might not need this plugin since the core now ships with a “Group Block” which is similar in purpose, although it has fewer options.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Magic Block」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Equal Height Columns 》相容於 PHP 8.0, 喜歡這個外掛嗎？請考慮留下5星評價。, Equal Height Columns 讓你輕鬆平等化不同欄位和元素的高度。, 特色, , 可佈局無限元素和元素組, 指...。
Div Shortcode 》此外掛可讓您使用簡短代碼 [div] 和 [end-div] 創建 div 元素。若要添加 id 為 "foo" 和 class 為 "bar"，請使用 [div id=”foo” class=”ba...。
WP-Note 2019 》插件可以在文章中美觀地顯示筆記。本外掛程式完全支援Luke開發的 WP-Note 外掛程式的舊版。。
Ninja Form Layout 》Ninja Forms Layout 外掛可在「版面配置元素」區塊中增加 fieldset 及 div 元素，同時提供自訂元素的類別，以便使用者能夠建立更多樣化的版面配置與樣式設計...。
WPSeed Container Block 》這個外掛將在 Gutenberg 編輯器中新增一個簡單的容器區塊。, 預設情況下，容器區塊會以 div 標籤呈現，並使用 .wp-block-wpseed-container 類別。, 您可以將...。
Diver 》使用[div]短碼直接在視覺編輯器上添加HTML 標記。, 用法：, , [div]在這裡輸入您的內容[/div], [div class=”您的CSS類別”]內容[/div]...。
Slide Div 》這個外掛使用 jQuery 的滑動（toggle）效果，是顯示和隱藏內容 div（div.entry-content）的最佳方法。, 對於每個文章：, 點擊 h1 標題（h1.entry-title），它...。
Social Icons By Demoify 》Social-Icons-By-Demoify 提供一個使用者友善的界面，以便連結各種社交網站。它使用最新和最受歡迎的社交媒體圖示。使用者可以將此外掛程式加入小工具中，並...。
Remote Thumbnail 》這是一個輕巧的外掛，可以使用遠端圖片作為文章縮略圖和特色圖片。輸入遠端圖片的網址到任何文章的自訂欄位 ‘remote_thumbnail’ 中。, 圖片不會...。
Empty Alt Image Container Swap 》### 摘要：, 這個外掛增強了WordPress區塊編輯器中圖像區塊的無障礙性，當圖像的alt屬性為空時，將<figure>標籤轉換為<div>標籤...。
Sksdev All Shortcode 》此外掛允許您使用短代碼建立 div、anchor 或日期。日期的短代碼為 [showdate] 和 [end-showdate]，錨點的短代碼為 [a] 和 [end-a]，div 的短代碼為 [div] 和 ...。
WC Catalog images to DIV convertor 》這是一款基於 WooCommerce 的外掛，會將預設的 WooCommerce 所有圖片都以 div 元素替換，以避免任何圖片大小調整的衝突。, 注意：在使用此外掛時，您必須已安...。
Expose It 》「Expose It」是一個簡單卻有吸引力的外掛，可以為每個設計增添風味。, 此外掛能夠在定義為 class=”expose”的任何 DIV 周圍添加突顯/曝光的效果...。