如何在沒有插件的情況下在 WordPress 中創建欄目

如何在沒有插件的情況下在 WordPress 中創建欄目

借助 WordPress Columns 塊,將內容組織成欄是小菜一碟。該塊屬於每個 WP 主題中可能使用的核心塊。列塊最多可以有 6 列。因此,您可以並排顯示 6 個不同的內容。

今天我們將向您展示如何在沒有插件的情況下在 WordPress 中創建欄 - 通過使用欄塊。我們還為您帶來了總結 WP 5.3版本的最新功能 更新。

在本教程中,您將找到以下信息:

列的目的是什麼

網站上的欄目可以有多種應用。首先,它們可以使內容排列整齊、更具可讀性並且更易於瀏覽。通過將內容組織成列,您可以突出顯示重要信息或參數。

例如,您可以使用多欄佈局來展示您的服務。添加說明性圖像、描述或按鈕。您當然可以使圖像可點擊。

具有服務的多列佈局
帶有服務的多列佈局

與服務類似,您可以使用 WordPress 上的欄來顯示產品或產品類別。如果您有一個簡單的商業網站,這是理想的選擇。

包含產品和類別的多列佈局
用於顯示產品和類別的列

在博客文章中,您可以使用欄來分隔內容。您可以並排放置文本、項目符號點或圖像。

使用列分隔內容
使用列來分隔內容

舊編輯器中列的工作方式

在 WordPress 5+ 之前,如果您想製作多列內容,則必須使用表格。這比最新的編輯器要困難得多。此外,移動設備上的樣式和顯示表格通常存在問題。過去是如何運作的?

關於如何在 WordPress 網站中創建列,您有多種選擇:

1. 手動將 HTML 代碼插入文本編輯器

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

這種方法主要由開發人員使用,他們可以根據自己的需求快速創建表或列。缺點是並非所有 WordPress 主題都能很好地處理列。表格通常並不完美,普通用戶無法輕鬆解決所有可能的問題。

2.允許在WordPress編輯器中使用表格

因為WordPress使用TinyMCE編輯器,所以可以允許函數編輯表格。如果您有興趣了解更多信息,可以找到所有詳細信息 在這個論壇中。如果您對我們的 AIT 主題執行相同的操作,表格將正常工作。

3.在AIT主題中使用Columns元素

如果您使用我們較舊的 WordPress 主題之一,您肯定知道我們的“Columns”元素。該元素可用於在頁面內添加列。它是一個可排序的元素,這意味著您可以將其放置在任何需要的地方。優點是頁面內的可變性。

列元素
可訂購元素列 – 您可以在任何 AIT 主題中使用它

4. 下載第3方插件來管理表

關於如何在 WordPress 帖子和頁面中創建列的另一個解決方案是下載一個用於創建表格的可用插件。這些插件允許只需點擊幾下即可添加列/表,無需任何編碼。經驗不足的用戶也可以使用它。

如何在沒有插件的情況下在 WordPress 中創建列(在塊編輯器中)

感謝新的塊編輯器,創建列變得非常容易。如果您仍在使用舊版 WordPress,現在是更新到最新版本的最佳時機。使用“列”塊,只需單擊幾下,您就可以簡單地添加和管理列。

對於想要處理多列內容、展示產品或撰寫博客但沒有編程經驗的每個人來說,此塊都是一個受歡迎的更改。

讓我們看看如何添加列塊以及如何在沒有插件的情況下在 WordPress 中創建列:

  • 第一個選項是單擊頂部欄中的“+”,然後從可用塊中選擇“列”塊。
  • 第二個選項是單擊編輯器內任意位置的“+”。
單擊“+”在 WordPress 中添加列
通過單擊“+”在 WordPress 中添加列
添加帶有斜杠“/”的列塊
使用斜杠“/”在 WordPress 中添加列

WordPress Columns 塊的預定義佈局(WP 5.3 的新增功能)

最新版本在列設置方面帶來了巨大改進。首先,有可用的默認佈局樣式。這是什麼意思?

用戶可以在向內容區域添加新塊的過程中選擇佈局和對齊方式。預定義的佈局非常有幫助 – 特別是對於那些不具備高級 WordPress 技能的用戶。此功能代表了我們如何想像如何在 WordPress 中創建欄目(無需插件或任何其他附加組件)。

列塊中的預定義佈局
預定義佈局選項

 

如果您不想在 WordPress Columns 塊中選擇預定義佈局,請跳過它。跳過此步驟後,內容將分為 2 個相同的部分/兩個可以編輯的單獨列。

創建的列塊
具有 2 個可編輯的默認區域(列)的列塊

列塊基本設置

WordPress Columns 塊本身沒有很多選項。為什麼會這樣,我們稍後會解釋。在頂部欄中,您可以將對齊方式更改為寬或全寬。如果您的活動主題支持,您可以更改此對齊方式。

列塊的頂部工具欄
帶有對齊選項的頂部工具欄

最重要的列塊設置是右側檢查器側欄中的列數。默認情況下有 2 列,但您可以將此數字增加到 6。您可以使用鼠標更改它或輸入數字。增加或減少列後您將立即看到它的外觀。塊根據滑塊動態變化。

更改列數
使用滑塊移動以根據需要更改列數

它非常實用,因為您可以在幾秒鐘內更改列數,而無需對設置或編碼進行任何困難的更改。

與 WordPress 編輯器中的其他塊類似,您也可以將自定義 CSS 類插入到列塊中。

塊附加器可以更順暢地使用塊

列塊很特殊,因為您可以用它創建多個塊。在新版本發布之前,使用單個塊非常困難。當您想要添加一些塊時,您不知道到底要單擊哪裡。借助塊附加程序(及其通過背景顏色進行區分),可以更輕鬆地將內容插入到正確的列中。

WordPress 列塊中的塊附加程序
具有背景顏色的塊附加器

如何使用 WordPress 列塊

Columns 塊的優點在於每列都可以嵌套其他塊。它可以是段落、圖像塊或按鈕塊。最大列數為 6,因此您可以根據需要創建多列內容。如前所述,要展示產品,您可以並排添加產品圖像、名稱、價格和按鈕。

多欄佈局中不同類型的內容
使用列塊,您可以並排呈現不同類型的內容

您還可以使用多個列塊一個接一個地創建網格。您可以使用它來展示您的服務或宣傳重要功能。

列塊的網格效果
列塊放置在彼此下方的網格效果

編輯嵌套塊

正如我們已經提到的,您可以在列內嵌套其他塊。每個嵌套塊都有其所有可用的設置。這意味著如果您將圖像塊添加到列中,您可以按照與獨立中完全相同的方式對其進行編輯 圖像塊.

將圖像塊編輯為嵌套塊
嵌套在列塊中的圖像塊的可用設置

結論:柱塊優點

發布 WordPress 塊編輯器以及在頁面和帖子中使用列的可用性顯著簡化了用戶處理內容的方式。感謝 WordPress Columns 塊,使用第 3 方解決方案或編寫 HTML 代碼不再重要。只需點擊幾下即可添加或刪除列。對於技術含量較低的用戶來說,一切都非常直觀和快速。

多列佈局中的內容將很好地對齊到網格中。它在響應式版本中也會立即看起來不錯。

我們正在努力開發新的 Citadela WordPress 主題,該主題是專門為 WordPress 塊編輯器開發的。了解有關 Citadela 主題和可用佈局包的更多信息。

2 對“How to make columns in WordPress without plugin”的思考

    1. 你好大衛,

      感謝您的來信。您應該激活古騰堡編輯器,它提供了選擇單個列的選項,在設置側邊欄(右側)中您可以調整其寬度。

      此致!
      茲拉特科
      艾特團隊

評論被關閉。