前言介紹
- 這款 WordPress 外掛「DivUp Content」是 2011-07-16 上架。
- 目前有 300 個安裝啟用數。
- 上一次更新是 2022-09-27，距離現在已有 1248 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 2.8 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
- 有 4 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
split | columns | css grid | column layout | classic editor |
內容簡介
注意：此外掛原本是為了解決將傳統編輯器內容分割成 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]
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「DivUp Content」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Yandex Pay and Split 》Важно, Для корректной работы модуля в WooCommerce обязательно должно быть настроено значение постоянной ссылки отличное от значения “Обычная”, Опис...。
Order Splitter for WooCommerce – Split / Duplicate / Merge Orders 》**總結:**, Order Splitter for WooCommerce 外掛允許您在 WooCommerce 管理員面板內將一個訂單分成多個訂單，特別適用於需要拆分以進行處理的大訂單。, , **...。
Order Splitter for WooCommerce 》, 作者：Fahad Mahmood, 專案網址：http://androidbubble.com/blog/wordpress/plugins/woo-order-splitter, , WooCommerce 是一個很棒的電子商務外掛程式，它...。
Paged Comments 》Paged Comments 可以啟用評論分頁。對於那些受到許多評論的熱門博客文章或 WordPress 網站中的簡單留言板頁面非常有用。, 功能, , 評論排序：最新評論先顯示...。
Multi Order for WooCommerce 》Multi Order for WooCommerce（WooCommerce 的多訂單插件）會在每個訂單項目中創建一個子訂單。, 免費版, 此插件的免費版本僅允許您：, , 為每個不同的訂單項...。
WC Backorder Split 》WC Backorder Split 是一個免費的 WooCommerce 外掛，它會為你沒有庫存（即缺貨中）的產品自動建立一份狀態為“Backordered”的獨立訂單。, 如果您...。
KosTeams оплата через Яндекс Пей и Яндекс Сплит в WooCommerce 》Принимайте оплату через Яндекс Пей, Яндекс Сплит или их комбинацию. Увеличьте конверсию за счет гибких способов оплаты с плагином от KosTeams., Опи...。
Virtuaria PagBank Split 》總結文案：這個WordPress外掛提供了支援將支付自動分成兩個或多個PagSeguro帳戶的功能，讓您的虛擬商店能夠實現多商店購物車功能，讓客戶在單一交易中支付來...。
bbPress Email Notifications 》bbPress Email Notifications外掛為使用者提供與論壇更改有關的各種電子郵件通知，以及關閉這些通知的功能。它會覆蓋bbPress提供的「訂閱」功能，允許使用者...。
WC Order Split 》, , 作者： Fahad Mahmood, , , 項目連結： http://androidbubble.com/blog/wordpress/plugins/wc-order-split, , , 建立自訂群組標籤並分割 WooCommerce 訂...。
Easy Multiple Pages 》這個外掛在文章編輯器中增加了一個按鈕，讓你可以輕鬆地將文章按頁面分割，并自動為每個頁面添加連結。。
Volumetric shipping for Woocommerce 》Volumetric Shipping 外掛可讓商家根據體積重量而非實際重量計算運費。由於貨物佔據的空間大小直接影響運費，因此運費可能會因體積重量而增加。, 如果您的包...。
Split Order on checkout pro for Woocommerce 》“Split order on checkout pro for WooCommerce”外掛可根據管理員所設定的不同條件，將訂單拆分成多個訂單。此外掛會按照產品屬性或購物車中的商品數量自動將...。
Split Order by category for Woocommerce 》「Split order by Category for WooCommerce」外掛能夠根據商品分類將訂單拆分成多個訂單。此外掛可以自動地根據購物車中的商品類別將訂單拆分為多個訂單。顧...。
Property Tax Calculator 》這是一個簡單的計算機，用於定義你的金錢去哪裡。雖然最初是為物業稅而建立的，但它實際上可以用於任何東西。你可以創建任意多的模塊，定義$$的百分比分配到...。