您想在WordPress中添加項目符號和編號列表嗎?向內容添加列表有助于提高網站的可讀性。它們也是與訪問者共享分步說明或復雜數據的好方法。有時,搜索引擎甚至可以為在其內容中使用列表的頁面提供更高的排名。在本文中,我們將向您展示如何使用自定義樣式在WordPress中輕松添加項目符號和編號列表。

為什么要在WordPress中添加項目符號和編號列表?
我們認為,最佳做法是將內容分解為可掃描的部分,而不是向訪問者展示一堵文字墻。有很多方法可以使頁面對讀者更友好,包括創建表格、使用副標題、添加視頻和創建列表。
列表可以幫助訪問者一目了然地了解您的內容,即使您共享的是復雜的信息或大量數據。這可以改善用戶體驗,并讓人們在您的網站上停留更長時間。
它們也是創建待辦事項列表或與訪問者共享分步說明的理想選擇。例如,您可以將食譜轉換為美食博客上的編號列表。
方法 1.使用內置的WordPress列表塊(簡單)
添加項目符號和編號列表的最簡單方法是使用內置的列表塊和 WordPress 塊編輯器。
這允許您創建簡單的列表,而無需安裝單獨的WordPress插件,盡管默認塊只有幾個自定義選項。
如果要使用自定義圖標、水平布局、不同顏色等微調列表的每個部分,那么我們建議使用本文中的其他方法之一。
要開始使用,只需打開要添加列表的帖子或頁面即可。然后,您可以選擇是創建項目符號點還是編號列表。
如何在WordPress中創建項目符號列表
要創建項目符號列表,請單擊“+”圖標以添加新塊。

在出現的彈出窗口中,輸入“列表”。
當右側塊出現時,單擊它以將其添加到頁面中。

這將創建項目符號點列表中的第一項。只需鍵入要用于第一個列表項的文本。
完成后,按鍵盤上的“Enter”鍵移動到下一行。WordPress將自動創建第二個項目符號。

現在,您可以繼續鍵入要用于第二個項目符號點的文本。只需重復這些步驟即可將更多項目添加到列表中。
如果要創建嵌套列表,請單擊“縮進”按鈕。這會將光標向右移動一步,以便您鍵入縮進的文本。

您可以再次單擊“縮進”按鈕,以創建兩級嵌套項目符號點。
如下圖所示,每個級別使用不同的圖標。

要減少縮進,請單擊“縮進”按鈕。
這會將光標向左移動一步,準備開始鍵入。

通過按“縮進”和“縮進”按鈕,您可以創建具有多個不同級別的嵌套列表。
默認情況下,WordPress將使用“中等”字體大小,但您可以使用右側塊選項中的“排版”設置在小,大和超大之間切換。

您還可以添加鏈接,或使用標準文本格式選項,如粗體和斜體。
如何在WordPress中創建編號列表
要在WordPress中創建編號列表,只需按鍵盤上的“1”鍵,然后按句號(.)。
WordPress會自動將此文本轉換為編號列表中的第一項。

現在,您已準備好在編號列表中鍵入第一項。
之后,只需按鍵盤上的“返回”鍵,WordPress將自動創建下一個編號點。

就像項目符號一樣,您可以通過單擊“縮進”和“縮進”按鈕來創建嵌套列表。
這將在編號的項目符號點下方創建一個縮進的項目符號點。

與項目符號點列表不同,您只能使用單個縮進級別。
當您對列表的外觀感到滿意時,只需單擊“更新”或“發布”按鈕即可使其在您的WordPress網站上生效。
方法 2.使用超級列表塊WordPress插件(創建多媒體列表)
內置的列表塊非常適合創建基于文本的列表,但有時您可能希望包含其他內容。例如,您可能希望創建一個包含圖像、文本和號召性用語按鈕的定價表。
最簡單的方法是使用超級列表塊。這個免費的插件添加了一個新塊,允許您使用列表中的任何WordPress塊。
您甚至可以通過向單個列表項添加多個塊來創建多媒體項目符號點。在下圖中,我們在每個列表項中使用了段落和圖像塊。

超級列表塊還允許您在垂直和水平列表樣式之間切換,并創建沒有項目符號圖標或數字的“無標記”列表。
首先,您需要安裝并激活超級列表塊插件。
之后,轉到要添加列表的頁面或帖子。然后,您可以單擊“+”圖標并開始輸入“超級列表”。
當出現右側塊時,單擊一下。

這將添加一個具有兩個默認列表項的新塊。
首先,您可以使用工具欄和左側菜單中的箭頭在水平和垂直布局之間切換。

您還可以使用“更改列表樣式”下的圖標在編號列表或項目符號列表之間進行選擇。
另一個選項是“無標記”,這是插件提供的獨特列表樣式。

當您對列表的配置方式感到滿意時,即可創建第一項。
只需單擊超級列表塊一角的“+”按鈕,然后選擇要添加的第一個塊。 超級列表與所有默認的WordPress塊兼容,因此您可以添加圖像,標題或任何其他所需的塊。

然后,您可以照常設置塊的樣式。例如,您可以上傳圖像、添加下載鏈接或鍵入一些文本。
要在項目符號點添加另一個塊,只需按鍵盤上的“Enter”鍵。這會在第一個塊下方添加一個新的“鍵入/以選擇塊”行。
您現在可以單擊列表項內的“+”圖標,并按照上述相同過程添加另一個塊。

如果對第一個列表項的設置方式感到滿意,可以按照相同的步驟配置第二個默認項。
若要添加更多項目符號,需要選擇整個列表項。這可能有點棘手,因為您需要選擇整個項,而不是該列表項中的單個塊。
當您在工具欄中看到“+”圖標時,您選擇了正確的項目。完成后,只需繼續并單擊“+”按鈕即可。

這會將一個新的空項添加到列表中。
只需繼續重復這些步驟即可添加更多項目符號和塊。

當您對列表的外觀感到滿意時,您可以單擊“更新”或“發布”按鈕以使其在您的WordPress博客或網站上生效。
方法 3.使用頁面構建器插件(最適合登錄頁面)
如果要使用自定義樣式創建漂亮的列表,則可能需要使用SeedProd。
這個高級拖放頁面構建器插件可讓您使用簡單的拖放編輯器創建專業設計的頁面。它還帶有一個現成的列表塊,可讓您微調列表設計的每個部分,包括更改單個項目之間的間距、用自定義圖標替換標準項目符號等。
SeedProd 可以輕松設計具有獨特設計的獨立頁面,因此,如果要將列表添加到自定義主頁或登錄頁面,這也是一個不錯的選擇。
您需要做的第一件事是安裝并激活SeedProd。
激活后,您需要輸入許可證密鑰。

您可以在SeedProd網站上的帳戶下找到此信息。添加許可證密鑰后,只需單擊“驗證密鑰”。
之后,轉到 種子生產 ? 登陸頁面,然后單擊“添加新登陸頁面”。

在下一個屏幕上,系統會要求您選擇一個模板。
SeedProd 附帶了 180 多個漂亮的模板,這些模板分為不同的類別,例如 404 頁模板和自定義 WooCommerce “謝謝”頁面。
只需單擊任何選項卡即可查看該類別中的不同模板。

當您找到要使用的模板時,只需將鼠標懸停在其上,然后單擊復選標記圖標即可。
我們在所有圖像中使用“爆炸性增長網絡研討會”模板,但您可以使用任何您想要的設計。

接下來,您需要為頁面指定標題。
SeedProd 將根據頁面標題自動創建一個 URL,但您可以將其更改為所需的任何內容。例如,將相關關鍵字添加到URL通常會改善您的WordPress SEO,并幫助頁面出現在相關搜索結果中。

當您對標題和URL感到滿意時,請單擊“保存并開始編輯頁面”。
這將加載 SeedProd 拖放頁面編輯器。在右側,您將看到頁面設計的實時預覽,左側有一些設置。

SeedProd 附帶了許多可以添加到設計中的塊,包括允許您添加社交分享按鈕、視頻、聯系表單等的塊。
要向設計添加列表,請找到“列表”塊并將其拖到頁面上。

這會向頁面添加一個垂直列表,并帶有占位符“Item 1”。
如果要創建水平列表,請單擊“高級”選項卡,然后選擇“水平”按鈕。

現在,您可以通過選擇“內容”選項卡開始構建列表。
要將默認文本替換為您自己的消息,請單擊左側菜單中的“項目 1”。

現在,您可以在出現的小文本編輯器中鍵入列表項。
在這里,您還可以應用要使用的任何格式,例如粗體或斜體。

默認情況下,SeedProd 對每個項目符號點使用復選標記,但它有一個內置的圖標字體庫,其中包括 1400 個字體真棒圖標,您可以改用這些圖標。
要替換復選標記,只需將鼠標懸停在其上,然后在出現時單擊“圖標庫”。
![]()
這將打開一個彈出窗口,您可以在其中選擇要使用的圖標。
您可以為列表中的單個項目符號使用不同的圖標,因此這是創建更有趣和引人注目的列表的好方法。

要創建更多要點,只需單擊“添加新項目”按鈕。
現在,您可以按照上述完全相同的過程添加文本并更改默認圖標。

將所有項目添加到列表后,您可以使用左側菜單中的設置更改字體大小和對齊方式。
您還可以使用“間距”滑塊增加或減少各個列表項之間的間距。

之后,您可能需要更改列表中圖標的顏色。即使您使用不同的圖標,SeedProd 也會對每個項目應用相同的顏色,因此設計將始終保持一致。
要進行此更改,請單擊“圖標顏色”區域,然后從出現的彈出窗口中選擇新顏色。
![]()
完成后,您可能需要單擊“高級”并查看一些其他設置。我們已經了解了如何在垂直和水平列表布局之間切換,但您也可以更改文本顏色和字體。
要真正使您的列表脫穎而出,您可以添加框陰影或 CSS 動畫。

“高級”選項卡中的大多數設置都是不言自明的,因此值得瀏覽它們以查看您可以創建哪些不同類型的效果。
完成后,您可以通過添加更多塊,然后使用左側菜單中的設置自定義它們來繼續處理頁面設計。
如果您對頁面的外觀感到滿意,請單擊“保存”按鈕上的下拉菜單,然后選擇“發布”。

您現在可以訪問此頁面以查看您的在線商店或網站上的實時列表。
方法 4.使用代碼添加項目符號和編號列表(高級)
您還可以使用內置的WordPress代碼編輯器和HTML創建列表。
這更復雜,因此它不是初學者的最佳方法。但是,它確實允許您在內置列表塊中使用更多樣式和格式。例如,您可以使用 和 等標記快速輕松地向列表項添加標題樣式。
要開始使用,請打開要顯示列表的頁面或帖子。然后,單擊右上角的三點圖標并選擇“代碼編輯器”。

后續步驟將根據您是要添加項目符號列表還是編號列表而有所不同。
如何使用代碼創建項目符號列表
要創建項目符號列表,請首先鍵入以下內容:
<ul>
代表“無序列表”,這意味著列表沒有任何數字,并告訴WordPress您正在手動創建列表塊。ul wp:list
接下來,按“返回”鍵移動到新行并創建您的第一個列表項:
<ul>
<li>
Red
</li>
在這里,代表“列表項”,我們將用 .<li> </li>
可以重復此過程以創建更多列表項。例如:
<ul>
<li>Red</li>
<li>Orange</li>
<li>Green</li>
完成后,使用另一個“無序列表”標志關閉代碼塊:
</ul>
這給了我們以下列表代碼:
<ul>
<li>Red</li>
<li>Orange</li>
<li>Green</li>
</ul>
如下圖所示,這將創建一個非常簡單的列表,但您可以通過添加其他 HTML(如標題標簽)來自定義它。

如何使用代碼創建編號列表
要創建編號列表,只需鍵入以下內容:
<!-- wp:list {"ordered":true} -->
然后,您可以鍵入哪個代表有序列表:ol
<ol>
之后,按照上述相同過程添加每個列表項:
<ol>
<li>Red</li>
最后,使用標記和 關閉有序列表。/ol``wp:list
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>






