前言介紹
- 這款 WordPress 外掛「DivUp Content」是 2011-07-16 上架。
- 目前有 300 個安裝啟用數。
- 上一次更新是 2022-09-27，距離現在已有 949 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 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 環境。
延伸相關外掛（你可能也想知道）
WP Shortcodes Plugin — Shortcodes Ultimate 》Shortcodes Ultimate 是一個全面的視覺與功能性元素收集，您可以在文章編輯器、文字小工具甚至是範本檔案中使用。使用 Shortcodes Ultimate，您可以輕鬆地建...。
Admin Columns 》這個 WordPress 外掛可以管理並整理文章、使用者、評論及媒體列表的欄位。它讓 WordPress 後台界面變得更美觀、明確。, , Admin Columns Pro, Admin Columns ...。
Column Shortcodes 》此外掛提供簡單易用的短碼，在您的文章或頁面中輕鬆創建欄位。有時候，您只需要將網頁切成不同的欄位。使用此外掛，您只需選擇一個欄位的短碼，便可將欄位加...。
ACF Quick Edit Fields 》這個 WordPress 外掛為 Advanced Custom Fields Plugin（Pro 和 Free 5+）增加了快速編輯功能。, 特色, , 在清單檢視中顯示 ACF 欄位值, 支援的 ACF 欄位類型...。
Advanced WP Columns 》Advanced WP Columns 外掛提供了簡單易用的介面，讓您可以在部落格中使用多欄位顯示內容，而無需使用任何簡碼。此外，也支援回應式排版。, , 基本資訊, 外掛...。
TemplatesNext ToolKit 》這個外掛提供了許多必要的元素，如簡歷、團隊成員、推薦評價、輪播、WooCommerce 產品清單等等，使用短代碼、SiteOrigin Page Builder 或 Elementor widget ...。
PixCodes 》PixCodes 是一個 WordPress 外掛，可以提供簡單易用的短碼（Shortcode）編輯器界面。, 最酷的部分是，透過這個外掛，您可以過濾任何短碼參數或使用自己的佈景...。
Lightweight Grid Columns 》輕量級網格列非常容易使用！您只需要安裝並啟用外掛，然後在 TinyMCE 工具列中尋找列圖示（請參閱屏幕截圖）。, 指定所需的桌面、平板和移動端列寬，添加內容...。
Genesis Columns Advanced 》, ⚠️ 警告, Genesis Columns Advanced 即將終止其生命週期。該外掛程式是為經典編輯器而建立的，不需要在區塊編輯器 (Gutenberg) 中使用。重要支援仍然會在支...。
Columns 》使用 [column-group] 短碼建立欄位群組，然後使用 [column] 短碼將欄位添加到群組中，如下所示：, [column-group], [column]這是我的第一列[/column], ...。
Three Column Screen Layout 》從文章編輯器的「螢幕選項」選單中選擇額外的佈局。, 現在有 24 款變化可供選擇！。
Simple Shortcodes 》這個外掛可與任何佈景主題一起使用，但是特別與simplethemes.com的佈景主題相容。簡單短碼 (Simple Shortcodes)為您的編輯器工具列添加了一個按鈕，方便快速...。
Grid Shortcodes 》這是一款響應式且易於使用的工具，可在文章/頁面中分割您的內容。這款超輕量級的外掛程式可讓您將內容放入不同寬度的列中。您所看到的就是您所得，而且完全免...。
Genesis Easy Columns 》這個外掛可以在 WordPress 編輯器中輕鬆整合 Genesis 欄位類別。點擊一下按鈕，您現在可以在您的頁面或文章中添加欄位類別 shortcode，您不再需要了解任何 HT...。
Div Shortcode 》此外掛可讓您使用簡短代碼 [div] 和 [end-div] 創建 div 元素。若要添加 id 為 "foo" 和 class 為 "bar"，請使用 [div id=”foo” class=”ba...。