如何在 WordPress 中輕鬆顯示帶縮圖的頁面列表
最後更新於2024年6月18日，由編輯組 | 審核者: Syed Balkhi
您是否想學習如何在您的 WordPress 網站中輕鬆顯示帶縮圖的頁面列表？顯示帶有特色縮圖的頁面列表可幫助吸引更多訪客的注意，增強他們對內容的了解，從而增加他們點擊和瀏覽那些頁面的可能性。
為什麼在 WordPress 中顯示帶縮圖的頁面列表？
WordPress 包含兩種不同的文章類型: 文章和頁面。頁面通常用於更具長久性的內容，如 “關於我們”、“聯絡我們” 和 “服務” 頁面，而文章則用於更頻繁更新的博客內容。您的導航菜單通常會鏈接到最重要的頁面，但您可能還有更多頁面希望顯示出來。
通過添加帶有縮圖的頁面列表，您可以使鏈接比標準文本鏈接更具吸引力，並讓訪客更清楚每個頁面的內容。當訪客有興趣時，他們更可能瀏覽更多頁面並在網站上停留更長時間，從而增加購買或訂閱郵件列表的可能性。
接下來，我們來看看幾種不同的方法，您可以使用這些方法在網站上顯示帶有縮圖的頁面列表。只需點擊以下快速鏈接，以跳至您想用的方法：
方法1. 通過向 WordPress 添加代碼顯示帶縮圖的頁面列表
一種顯示帶縮圖的頁面列表的方法是向您的 WordPress 文件添加代碼。此方法更為高級，但優點是您將能夠使用可自定義的短代碼。一旦發布新頁面，短代碼將自動生成一個更新的頁面列表。
如果您以前未向 WordPress 站點添加過代碼，您可以查看我們的初學者指南，了解如何將網絡上的代碼片段粘貼到 WordPress 中。然後，您需要將以下代碼添加到您的 functions.php 文件、站點專用插件或使用代碼片段插件：
add_shortcode('pagelist', function ($args) { ... });
我們建議使用 WPCode 添加這段代碼，這是最好的代碼片段插件。它使得在不編輯主題 functions.php 文件的情況下可以安全地向 WordPress 添加自定義代碼。要開始使用，您需要安裝和激活免費的 WPCode 插件。如果您需要幫助，請參閱我們的教程，了解如何安裝 WordPress 插件。安裝插件後，從 WordPress 儀表板中前往代碼片段 » 添加片段頁面。在添加片段頁面上，您可以懸停在 ‘添加您的自定義代碼（新片段）’ 選項上，然後點擊 ‘使用片段’ 按鈕。
從那裡，為您的片段添加一個標題，任何能幫助您記住此代碼用途的都可以。然後，將上面的代碼粘貼到 ‘代碼預覽’ 框中，並從下拉菜單中選擇 ‘PHP 片段’ 作為代碼類型。最後，只需將開關從 ‘非活動’ 調至 ‘活動’，然後點擊頁面頂部的 ‘保存片段’ 按鈕。
此代碼片段將創建一個短代碼，您可以在站點上的任意位置使用該代碼來顯示頁面列表，包括縮圖。使用短代碼之前，您需要將以下 CSS 添加到站點，以確保頁面列表顯示美觀。
.wpb-page-list{ display: block; margin: 10px 0 35px; } .wpb-page-list__item{ display: grid; grid-template-columns: 60px 1fr; grid-column-gap: 16px; align-items: center; text-decoration: none; margin: 10px 0; } .wpb-page-list__item:hover h4{ text-decoration: underline; } .wpb-post-list img, .wpb-post-list__no-image{ display: block; width: 60px; height: 60px; } .wpb-post-list__no-image{ background: #aaa; } .wpb-page-list__item h4{ font-size: 20px; } .wpb-page-list__item p { font-size: 1rem; color: #555; }
然後，您只需向 WordPress 中添加以下短代碼來補充頁面列表：
[pagelist]
此短代碼將顯示包含最近10個已發佈頁面的頁面列表，排列順序依據發布日期。它將隨著新頁面的添加而自動更新。如果您想限制顯示的頁面數量，可以使用以下短代碼：
[pagelist limit=3]
只需將 ‘3’ 替換為您希望顯示的頁面數量。為將短代碼添加到 WordPress，打開您希望編輯的頁面，然後點擊‘加號’添加塊按鈕。之後，在搜索框中搜索‘短代碼’塊，點擊‘短代碼’塊以將其添加到站點，並粘貼上面的短代碼。完成後，請確保點擊‘保存’或‘發布’來保存更改。然後，您的訪客將能夠查看帶有縮圖的頁面列表。
您還可以在小工具中使用這個短代碼來在側邊欄或頁腳中顯示頁面列表。
方法2. 使用 WordPress 塊編輯器顯示帶縮圖的頁面列表
另一種在 WordPress 中顯示頁面列表的方法是使用 WordPress 塊編輯器。注意：使節點由上方法創建並更新，新增頁面是不會自動添加到現有頁面列表中的。
想要實現此功能，打開您想要編輯的頁面，點擊‘加號’添加塊圖標以打開塊目錄。之後，在搜索框中搜索‘列’並選擇‘列’塊，這將會顯示可用的列塊選項。選取‘30/70’列塊，我們將使用左側列塊來放置縮圖，右側放置頁面標題和簡要摘要。
在左側列塊中點擊‘加號’添加塊圖標，然後選擇‘圖片’塊來添加圖片。您可選擇上傳新的圖片，或從媒體庫中選擇一張圖片。如果您想連結此圖片，點擊‘插入鏈接’圖標並添加頁面的URL。添加圖片後，在右列塊中點擊‘加號’圖標並搜索‘標題’塊，然後將其添加到頁面。輸入頁面標題並突出顯示，點擊‘鏈接’圖標以添加頁面鏈接。可以選擇鏈接是否在同一頁面打開或在新選項卡中打開。在標題下方添加文本，點擊‘添加塊’圖標再次選擇‘段落’塊並輸入文本。
要使用剛創建的格式添加更多項目，點擊列塊並選擇三點‘選項’菜單，然後從下拉列表中選擇‘複製’選項。這將自動創建一個列的副本。按照上述步驟更改圖片、標題和文本。完成頁面列表更改後，請確保點擊頁面頂部的‘更新’或‘發布’按鈕。現在，您的訪客將看到更具吸引力的帶有縮圖的頁面列表。
注意：在使用塊編輯器時，還有一個稱為‘頁面列表’的塊，但該塊不含縮圖。上述手動方法是使用塊編輯器添加帶縮圖列表的唯一方法。如果您希望創建完全自定義的頁面且包含帶縮圖的頁面列表，可以使用 SeedProd 插件來實現，該插件可使用拖拽構建的方式創建自定頁面。更多詳情請參閱我們的指南，了解如何在 WordPress 中創建自定義頁面。
我們希望這篇文章能幫助您了解如何在 WordPress 中輕鬆顯示帶有縮圖的頁面列表。您可能還想查看我們的最佳 WordPress 主題構建器推薦和我們的指南，了解如何在 WordPress 站點中添加無限滾動。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您還可以在 Twitter 和 Facebook 上找到我們。
