內容簡介
注意：此外掛原本是為了解決將傳統編輯器內容分割成 div，使用簡短代碼的問題。於 2022 年 9 月 27 日，我測試了此外掛與 Gutenberg 的相容性，因為 div 在 Gutenberg 運作後才被渲染，所以仍然可以正常使用。但值得一提的是，Gutenberg 內有一個名為 Group 區塊，具有相同的功能，對於一些使用者來說，使用簡短代碼可能比較直覺。即便如此，如果您已經停用 Gutenberg 轉而使用傳統編輯器，此外掛仍然非常有用。雖然我不會加入新功能，但我會修復使用者回報的任何錯誤。
現在我們進入如何使用：
將 WordPress 文章或頁面內容分成 div，加上（可選）自訂 CSS class 和 ID。在某些內容之間添加簡短代碼 [divup]，即可將內容分成兩個獨立的 div。
您可以在文章或頁面中輸入任意數量的 [divup] 簡短代碼。非常適合在保持簡短代碼標記的情況下為雜誌風格網站創建多欄內容。DivUp Content 永遠不會使用內置樣式，但它確實會自動為 div 提供巧妙的 class，例如 first、last、div-1、div-2、div-3、div-odd、div-even、mul-3、mul-4（1、2、3、4 的倍數等）。然後，您可以在 style.css 中或使用可自定義 WordPress 網站的視覺設計 CSS 外掛 Microthemer 創建自己的樣式規則。
三欄範例 CSS
三欄佈局的 CSS 可以是：
.divup-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
六欄範例 CSS
對於帶有縫隙的六欄佈局，您只需將 CSS 更改為：
.divup-wrap {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2rem;
}
對於具有不同列數和行數的內容的複雜網格布局，您可能會發現使用 Microthemer 的可視控件生成 CSS 網格規則非常方便。只需在使用 Microthemer 編輯時選擇 .divup-wrap 元素，然後使用拖放工具將網格項目放置到任何您想要的位置即可。
新增功能
最新：
新增對於添加自訂 HTML 屬性到 div/span 的支援。可使用 [startwrap custom='title: read this'] 或 [divup custom="data-src:image.jpg"]（自訂屬性可套用至 [startwrap] 和 [divup] 簡短代碼）。
您也可以使用 [startwrap custom='title: read this|required:some value']（使用 | 管道字符分隔多個）
當使用 [divup] 時，將創建兩個 div。要為第一個和第二個 div 應用自訂屬性，請使用逗號，例如 [divup custom="data-src:image1.jpg, data-src:image2.jpg"]
更新：
新增支援 span 元素。可使用 [startwrap type='span']。
新增支援無冗餘子元素。可使用 [startwrap parent=0] 或 [startwrap parent='false']。
新增功能：您也可以添加多個 [startwrap] 和 [endwrap] 簡短代碼，以控制如何在包裝器 div 中包裝 div。如果選擇使用它，這將覆蓋原始的自動包裝器功能。**
理解 DivUp Content 如何運作的最佳方式（包括高級部分）是 **將以下任一虛擬內容範例之一複製並粘貼到文章或頁面中，然後使用您的瀏覽器檢查 HTML（右鍵單擊>檢查）**——注意它自動套用於 div 的 CSS class。
虛擬內容範例 1
此頁面上的一些內容。此頁面上的一些內容。此頁面上的一些內容。
外掛標籤
開發者團隊
原文外掛簡介
NOTE: This plugin was originally created to solve the issue of splitting classic editor content into divs, using shortcodes. On Sept 27th, 2022, I tested to see how this plugin works with Gutenberg and it actually still works fine (because the divs are rendered AFTER Gutenberg does it’s thing). But it’s worth mentioning that there is a Group block in Gutenberg that serves the same purpose, and might be more intuitive than working with shortcodes for some users. That said, if you’ve disabled Gutenberg in favour of the classic editor, this plugin is still useful. And although I’m not adding new features, I will fix any bugs people report.
Now on to how it actually works:
Separate your WordPress post or page content into divs with (optional) custom CSS classes and ids. Adding the shortcode [divup] in between some content will split the content into 2 separate divs.
You can enter as many [divup] shortcodes to a post or page as you like. Great for creating columns of content for magazine style websites while keeping shortcode markup to an absolute minimum. DivUp Content never uses inline styles, but it does automatically give divs fiendishly clever classes like first, last, div-1, div-2, div-3, and div-odd, div-even, mul-3, mul-4 (multiple of 1,2,3,4 etc). You can then create your own style rules for the divs in style.css or with Microthemer (a visual design CSS plugin for customizing WordPress sites).
3 Column Example CSS
The CSS for a 3 column layout could be:
.divup-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
6 Column Example CSS
For a 6 column layout (with gaps), you would just change the CSS to:
.divup-wrap {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2rem;
}
For more complex grid layouts with content spanning different numbers of columns and rows, you may find Microthemer‘s visual controls for generating the CSS grid rules quite handy. Just select the .divup-wrap element when editing with Microthemer, and then position the grid items however you like using drag and drop.
Features added
NEWEST:
Added support for adding custom HTML attributes to divs/spans. Use [startwrap custom=’title: read this’] or [divup custom=”data-src:image.jpg”] (the custom attribute can be applied to both [startwrap] and [divup] shortcodes.
You can also do[startwrap custom=’title: read this|required:some value’] (seperate with a | pipe character for multiple)
When using [divup], two divs will be created. To apply custom attributes to the first and second divs use a comma e.g.[divup custom=”data-src:image1.jpg, data-src:image2.jpg”]
NEWER:
Added support for span elements. Use [startwrap type=’span’].
Added support for no superfluous child elements. Use [startwrap parent=0] or [startwrap parent=’false’].
NEW: You can also add multiple [startwrap] and [endwrap] shortcodes to control how the divs are wrapped in a wrapper div. This overrides the original auto-wrapper functionality if you choose to use it.**
The best way to understand how DivUp Content works (including the advanced aspects) is to **copy and paste the ONE of the following dummy content examples below into a post or page and then inspect the html with your browser (Right-click > Inpsect) ** – paying attention to the CSS classes it automatically applies to the divs.
Dummy Content 1
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup id=’id-a, id-b’ class=’class-a, class-b class-b2′]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup class=’my-class diff ‘]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup id=’my-id’ class=’diff my-class2′]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup class=’diff’]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
Dummy Content 2
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[startwrap class=”my-wrap-class another-wrap-class”]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup id=’id-a, id-b’ class=’class-a, class-b class-b2′]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[endwrap]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[startwrap id=”my-wrap-id” class=”hello-wrap”]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup class=’my-class diff ‘]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup id=’my-id’ class=’diff my-class2′]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup class=’diff’]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[divup]
Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page. Some content on this page.
[endwrap]
