如何更改 WordPress 評論中的「回覆」文字

_{最後更新於 2024 年 2 月 16 日 由編輯部 | 評論者：Syed Balkhi}

最近有一位用戶詢問我們如何更改 WordPress 評論中的「回覆」文字。預設情況下，大多數 WordPress 網站在評論下方都會有一個回覆按鈕，讓用戶可以對評論進行回應。在本文中，我們將向您展示如何輕鬆地更改 WordPress 評論中的「回覆」文字。

為什麼要更改 WordPress 評論中的「回覆」文字？

評論是一種提高用戶互動的簡單方法。有許多方法可以改進 WordPress 評論。例如，您可以設計評論佈局，更改評論表單的樣式，將評論文字欄位移到底部等。評論下方的回覆鏈接就像一個行動呼籲。就像您網站上的其他行動呼籲一樣，語言、顏色、大小和位置都可以促使用戶點擊。

通過將簡單的「回覆」更改為更有趣的內容，您可以使其更加顯眼和吸引人。

如何在 WordPress 評論中更改「回覆」文字

在這篇教程中，您需要向您的 WordPress 文件中添加一些代碼。如果您以前沒有這樣做過，建議您查看我們的初學者指南，以了解如何將網絡上的代碼片段粘貼到 WordPress 中。

您需要將以下代碼添加到主題的 functions.php 文件或代碼片段插件中：

function wpb_comment_reply_text( $link ) {
$link = str_replace( 'Reply', 'Change to This Text', $link );
return $link;
}
add_filter( 'comment_reply_link', 'wpb_comment_reply_text' );

_{由 WPCode 熱情支持
在 WordPress 中一鍵使用}

注意：請勿忘記將代碼中的‘Change to This Text’更改為您想使用的文字。

在 WordPress 中添加這段代碼的最簡單且最安全的方法是使用 WPCode，這是一個最佳的代碼片段插件。

WPCode 允許您在不編輯主題的 functions.php 的情況下添加自定義代碼。這樣，您就不必擔心會破壞您的網站。

此外，如果您更新或更改 WordPress 主題，您將能夠保留自定義設置。

要開始使用，您需要安裝並啟用免費的 WPCode 插件。如果您需要幫助，請參閱本教程了解如何安裝 WordPress 插件。

啟用後，從 WordPress 儀表板中訪問“代碼片段”»“+新增片段”頁面。

在這裡，點擊“使用片段”按鈕，選擇“添加自定義代碼（新片段）”選項。

接下來，您可以在頁面頂部為您的片段添加一個標題，這可以是任何幫助您記住代碼用途的名稱。

然後，只需將上面的代碼粘貼到“代碼預覽”框中。不要忘記從屏幕右側的下拉菜單中選擇“PHP 片段”作為代碼類型。

之後，只需將切換開關從“非激活”切換到“激活”並點擊“保存片段”按鈕。

就是這樣，您現在可以查看您網站上帶有評論的任何文章，您將發現您添加的文字已經取代了“回覆”。

我們希望本文幫助您更改 WordPress 評論中的“回覆”文字。您可能還希望閱讀這個指南，以了解如何獲得更多評論或我們精選的最佳 Facebook 插件來增長您的博客。

如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。

如何為每個分類添加自定義頁首、頁尾或側邊欄

最後更新時間：2024年3月22日 | 編輯者：Editorial Staff | 審核者： Syed Balkhi

你是否希望在你的WordPress網站中為每個分類顯示不同的頁首、頁尾或側邊欄？通常，你會在整個網站上看到相同的頁首、頁尾和側邊欄。但有時你可能希望為某些分類顯示不同的信息、顏色或小工具。

在本文中，我們將向你展示如何輕鬆地為每個WordPress分類添加自定義的頁首、頁尾或側邊欄。

為何要為每個分類添加自定義頁首、頁尾或側邊欄？

當你設置WordPress網站時，你可能會自定義頁首、頁尾和側邊欄，這樣訪客可以快速了解你和你的網站，以及找到他們感興趣的內容。

但有時你可能希望在不同分類中顯示不同的頁首、頁尾或側邊欄。例如，你可能希望在每個自定義文章和頁面中顯示不同的側邊欄，或者通過顯示自定義的頁首、頁尾或側邊欄來改變網站在特定分類中的外觀。

接下來，我們將介紹三種方法來輕鬆地為每個分類添加自定義頁首、頁尾或側邊欄：

• 方法一：使用插件為每個分類添加自定義側邊欄
• 方法二：使用主題構建器為每個分類添加自定義頁首或頁尾
• 方法三：使用代碼為每個分類添加自定義頁首、頁尾或側邊欄

方法一：使用插件為每個分類添加自定義側邊欄

如果你對網站設計已經滿意，只希望更改網站的側邊欄，這是最好的方法，也非常適合初學者。

首先，你需要安裝並啟用 Easy Custom Sidebars 插件。更多細節可參考我們的逐步指南，了解如何安裝WordPress插件。

注意：你可能會注意到該插件尚未與最新的WordPress版本測試過。不過，我們自己已經使用該插件，效果良好。如果你找到更好的替代品，請在評論中告訴我們。

激活插件後，請前往 外觀 » 替換側邊欄 頁面創建一個自定義側邊欄。

首先，為新側邊欄輸入一個名稱。在本教程中，我們將其命名為 ‘Blogging’，因為我們希望在 Blogging 分類中顯示它。接下來，選擇要由自定義側邊欄替換的側邊欄。

然後，選擇自定義側邊欄顯示的條件。你會看到不同的頁面、文章、分類和標籤列在屏幕的左側。點擊分類旁的箭頭，然後勾選 Blogging 分類框。點擊‘添加到側邊欄’按鈕。

你會注意到 Blogging 分類現在出現在側邊欄替換部分，自定義側邊欄將顯示在該分類中。可以添加多個分類，側邊欄會被添加到所有所選分類中。點擊‘創建側邊欄’按鈕創建首個自定義側邊欄。

接下來，添加Wordpress小工具到側邊欄的小工具區域。更多細節可參考我們的《如何添加 WordPress 側邊欄小工具》指南。Easy Custom Sidebar允許你創建任意多的自定義側邊欄，並將每個側邊欄分配給WordPress網站的不同分類頁面。

方法二：使用主題構建器為每個分類添加自定義頁首或頁尾

如果你希望對每個頁面的側邊欄、頁首和頁尾進行完全控制，這是最佳方法。

我們推薦使用 SeedProd。SeedProd是最好的WordPress主題和頁面構建插件，允許你輕鬆創建自定義WordPress主題，不需編寫任何代碼，這包括創建頁首、頁尾以及所有其他必需的元素。

你可以參考我們的《如何輕鬆創建自定義WordPress主題》指南來學習如何快速創建WordPress主題。一旦完成這些操作，SeedProd讓你能輕鬆創建自定義頁首和頁尾，並設置規則，使其僅在特定情況下顯示，例如查看特定分類時。

首先，我們將創建一個自定義頁尾。點擊頁面頂部橙色的‘新增主題模板’按鈕，創建新的主題模板，例如頁尾。

開始時，為模板命名。在本教程中，我們稱它為 ‘Footer – Blogging’。然後，從類型下拉菜單中選擇‘頁尾’，並選擇優先級。這決定了如果多個頁尾匹配當前頁面，哪個會顯示擁有最大優先級的頁尾將顯示。默認頁尾的優先級為0，我們將這個頁尾的優先級設置為1，以確保其顯示在匹配頁面上。

然後，設置頁尾顯示的條件。我們希望它顯示在Blogging分類中。確保第一個條件設定為‘包括’，然後選擇‘擁有分類’從中間的下拉菜單中，最後在最後一個字段中填寫 ‘blogging’，點擊‘保存’按鈕保存設置。

還有一種創建自定義頁尾的方法。你可以通過點擊‘複製’鏈接直接複製原始頁尾。我們將在本教程中這樣操作。

這會創建當前頁尾的精確副本，你可以進行自定義。接下來，點擊新項目下的‘編輯條件’鏈接，按照上面的步驟選擇名稱和條件。

現在，開始自定義這個新的頁尾。點擊其名稱，將在SeedProd的拖曳編輯器中打開它。

SeedProd使得添加新塊到頁尾變得簡單。你也可以點擊現有塊來編輯其顏色、文本和其他選項。在本教程中，我們將簡單地將背景顏色更改為綠色。

當你對自定義頁尾感到滿意時，確保點擊‘保存’旁的下拉箭頭，然後點擊‘發布’。這將保存變更並將頁尾實時顯示。

祝賀你！當查看Blogging分類檔案頁面或Blogging分類中的文章時，你的新頁尾將顯示。

現在，你可以按照上述步驟為特定分類創建自定義頁首。

方法三：使用代碼為每個分類添加自定義頁首、頁尾或側邊欄

如果你熟悉代碼，可以使用這種方法在特定分類檔案頁面和文章中顯示自定義頁首、頁尾或側邊欄。這種方法僅涉及PHP代碼，因此你無需使用HTML或CSS。

你需要將代碼片段添加到主題文件中。如果你以前沒做過，請參考我們的《如何在WordPress中復制和粘貼代碼》指南。

注意：如果你是首次添加代碼，我們強烈建議備份網站和/或使用測試環境，以防止任何錯誤影響實時網站。

使用代碼為每個分類添加自定義頁首

若要在某個分類中的文章中添加自定義頁首，例如‘Blogging’，你需要打開主題的single.php文件，並將常規頁首代碼替換為以下代碼：

<?php if (in_category('Blogging')) { get_header('blogging'); } else { get_header(); } ?>

這段代碼告訴WordPress，如果有人查看‘Blogging’分類中的文章，需要顯示名為 header-blogging.php 的文件（如果存在）。如果不存在，或者文章不在‘Blogging’分類中，則顯示默認header文件。

確保將第1行中的‘Blogging’更改為你的分類名稱，將第2行中的‘blogging’更改為自定義頁首的名稱。

如果你希望在多個分類中顯示自定義頁首，或有多個自定義頁首，可以使用以下代碼：

<?php if (in_category(array('Blogging', 'Photography'))) { get_header('blogging'); } elseif (in_category('News')) { get_header('news'); } else { get_header(); } ?>

這將在‘Blogging’或‘Photography’分類中的文章上顯示header-blogging.php自定義頁首，並在‘News’分類的所有文章上顯示header-news.php頁首。其他所有文章上顯示默認的header.php頁首。

我們目前僅在特定分類中的文章上顯示自定義頁首。你可能還希望在查看分類檔案頁面時顯示自定義頁首。

為此，你需要修改主題的category.php文件。如果主題沒有該文件，你可以創建自己的分類模板或編輯主題的archive.php或index.php文件。

打開文件，將常規頁首代碼替換為以下代碼。請注意，第一行與我們之前使用的代碼略有不同：

<?php if (is_category('Blogging')) { get_header('blogging'); } else { get_header(); } ?>

注意：in_category()函數檢查文章是否在某個分類中。is_category()函數檢查你是否正在查看某個分類檔案。

使用代碼為每個分類添加自定義頁尾

顯示特定分類的自定義頁尾類似。要為每個分類獲得單獨的頁尾，你需要編輯主題的single.php頁面模板，並將頁尾代碼替換為以下代碼：

<?php if (in_category('Blogging')) { get_footer('blogging'); } else { get_footer(); } ?>

確保更改代碼以使用你的分類和自定義頁尾的名稱。

你還應修改主題的category.php文件，將頁尾代碼替換為以下代碼。同樣，確保包括你希望使用的分類和自定義頁尾名稱：

<?php if (is_category('Blogging')) { get_footer('blogging'); } else { get_footer(); } ?>

參考‘使用代碼為每個分類添加自定義頁首’部分獲取更多詳情。

使用代碼為每個分類添加自定義側邊欄

你也可以使用相同的方法為特定分類顯示自定義側邊欄。需要編輯主題的single.php模板，然後將側邊欄代碼替換為以下代碼：

<?php if (in_category('Blogging')) { get_sidebar('blogging'); } else { get_sidebar(); } ?>

你需要使用希望使用的分類和自定義側邊欄名稱來編輯代碼片段。

還需修改主題的category.php模板，將其側邊欄代碼替換為以下代碼：

<?php if (is_category('Blogging')) { get_sidebar('blogging'); } else { get_sidebar(); } ?>

如果需要更多詳情，可以查看‘使用代碼為每個分類添加自定義頁首’部分。

專家指導如何自定義你的 WordPress 頁首、頁尾和側邊欄

你是否希望優化你的頁首、頁尾和側邊欄，使它們對讀者更有用？如果是，請參考以下實用教程：

• 如何在你的 WordPress 側邊欄添加社交媒體圖標
• 如何在 WordPress 中創建粘性懸浮側邊欄小工具
• 如何在 WordPress 頁首菜單中添加按鈕
• 清單：要在你的 WordPress 頁尾添加的內容
• 最佳 WordPress 頁尾設計範例（包含最佳實踐）

我們希望這篇教程幫助你學習如何輕鬆地為每個 WordPress 分類添加自定義頁首、頁尾或側邊欄。你可能還想了解如何通過 WordPress 博客賺錢，或者查看我們的常見 WordPress 錯誤及其解決方法列表。

如果你喜歡這篇文章，請訂閱我們的 YouTube 頻道，獲取 WordPress 視頻教程。你也可以在 Twitter 和 Facebook 上找到我們。

選擇完美的 WordPress 主題 – 需要考慮的 9 件事

最後更新於 2024年7月26日 由編輯部 | 審查者：Syed Balkhi

當我們首次設置 WordPress 博客時，我們花了大量時間實驗不同的主題。雖然我們現在有自定義設計，但我們了解如何為博客或企業網站挑選完美的 WordPress 主題。

有數以千計的免費和高級 WordPress 主題可以選擇。您要確保選擇的主題不僅外觀良好，而且具備您所需的功能並且質量高。

在這篇文章中，我們將分享挑選 WordPress 主題時最重要的考慮因素。

選擇合適的 WordPress 主題有多重要？

WordPress 可以用來創建各種不同類型的網站。有許多主題滿足不同需求，如 WooCommerce 主題、會員網站主題，甚至多用途主題可以自定義以符合幾乎任何類型的網站。

許多 WordPress 主題具有大量自定義選項。如果這些選項沒有正確編碼，則可能使您難以更換主題或使用其他 WordPress 插件。這可能會將您鎖定在特定主題中，或需要聘請 WordPress 開發人員來幫助您切換主題。

另一方面，某些看起來很棒的 WordPress 主題實際上可能會使您的網站變得非常慢。緩慢的網站會損害您的搜尋引擎排名、用戶體驗等。

主題是您的 WordPress 網站的面貌，對用戶和搜尋引擎如何看待它起到重要作用。您的目標應該是找到一個設計您喜歡、速度快且易於自定義的主題。

選擇完美 WordPress 主題前需要準備的事情

在選擇最佳 WordPress 主題之前，您需要一些東西來建立您的 WordPress 網站。首先，您需要確保使用正確版本的 WordPress，因為實際上有兩個版本的 WordPress。一個是有限主機平台的 WordPress.com，另一個是更受歡迎的自託管版本 WordPress.org。

了解這兩者的區別，請參閱我們的 WordPress.com 和 WordPress.org 比較。我們推薦使用 WordPress.org，因為它給予您創建任何類型網站的自由，並且開箱即用地訪問每個 WordPress 主題和所有功能。

開始使用時，您還需要好的 WordPress 託管和自己的網域名。我們推薦使用 Bluehost，因為他們是 WordPress 官方推薦的主機之一，也是全球最大的託管公司之一。此外，他們還同意為我們的讀者提供託管、免費網域名和免費 SSL 證書的巨大折扣。

→ 點擊此處索取獨家 Bluehost 優惠 ←

註冊網絡託管並設置網域名後，您需要安裝 WordPress。幸運的是，使用 Bluehost 時，WordPress 已預先安裝。其他大多數託管公司提供一鍵式 WordPress 安裝選項。如果您使用的是不同的託管提供商，請參閱我們的指南，了解如何安裝 WordPress，這涵蓋了所有主要託管平台。

挑選完美 WordPress 主題時需要考慮的最重要的事情

1. 簡單和極簡設計

許多 WordPress 主題包含許多顏色、複雜佈局、華麗動畫、滑塊等。某些時候可能需要這些東西，但在大多數情況下，您不需要所有這些附加功能。尋找一個能幫助您實現目標的設計佈局。它應該看起來不錯，同時不需妥協於可用性和簡單性。

確保主題的展示風格不過於複雜。您的網站目的是幫助用戶盡快找到他們需要的信息，同時突出您的業務相關信息。如果主題看起來不錯，但不能幫助您獲取新客戶或電子郵件新聞訂閱者，那它就不是一個好的主題。總的來說，您選擇的主題應該盡可能簡單。如果您想為網站添加新功能，可以使用 WordPress 插件。

2. 易於自定義和更改

選擇 WordPress 主題時，您會希望它易於自定義，以便您真正使其成為您自己的主題。即使演示主題完全符合您的要求，您仍可能希望進行特定更改，以使其與您的獨特品牌相匹配。大多數更改將通過 WordPress 主題自定義工具或主題選項面板進行。

某些主題比其他主題允許更多自定義，因此您應該選擇一個允許您自定義想要更改的網站各方面的主題。一般來說，您將可以控制主題的配色方案、字體選擇、佈局、自定義標誌、小工具等。您也可以使用 WordPress 拖放頁面構建器插件如 SeedProd 來從頭創建完全自定義的頁面或自定義 WordPress 主題。

3. 響應式設計，適用於所有設備和屏幕尺寸

今天，超過 60％ 的網站流量來自移動設備。這個數字因您的博客利基而有所不同，但您需要確保您的 WordPress 網站在移動設備上看起來不錯。大多數 WordPress 主題將具有響應式設計，這意味著主題將根據不同的屏幕尺寸和設備調整佈局。

然而，僅僅因為一個 WordPress 主題是響應式的並不意味著它響應式設計的很好。您需要在所有屏幕尺寸中預覽您的主題。您可以通過調整瀏覽器窗口並查看主題調整效果來輕鬆實現這一點。您也可以在不同瀏覽器中測試您的新 WordPress 主題，以確保其在所有瀏覽器中正確工作。更多詳情，請參閱我們的指南，了解如何在不同瀏覽器中測試 WordPress 網站。

4. 經常更新且具有高質量代碼基礎

您的 WordPress 主題將構成您的網站的基礎。除了整體設計外，您還需要確保它加載速度快並定期更新。主題的大小對您的速度和性能有重大影響。加載速度將影響從用戶體驗到 WordPress SEO 的一切，所以您要確保您的主題輕量且加載速度快。

您可以隨時運行網站速度測試，以查看主題加載的速度。更多詳情，請參閱我們的指南，了解如何正確運行網站速度測試。對於免費主題，您可以簡單地安裝主題並運行速度測試。對於高級主題，您可以在演示 URL 上運行速度測試，這將給您一個主題性能的想法。

另一個需要查看的是主題的最後更新時間。WordPress 的新版本不斷發布，因此您需要確保您的主題是最新的。使用過時的主題可能會導致 WordPress 安全問題和插件衝突。

對於免費 WordPress 主題，您可以在 WordPress.org 主題列表頁面上找到最後更新日期。理想情況下，您的主題應該在最近幾個月內更新，並且有一致的更新記錄。如果您正在查看高級 WordPress 主題，則幾乎可以保證它們已更新以與最新版本的 WordPress 兼容。由於您為主題付費，開發人員或開發團隊將有更多資源保持其更新。

5. 與所需插件兼容

理想情況下，選擇 WordPress 主題時，它將處理設計，而 WordPress 插件將負責所有附加功能。WordPress 插件讓您可以在網站上創建聯絡表單、生成潛在客戶、舉辦抽獎活動等。

大多數主題將支持所有 WordPress 插件。但是，如果您具有代碼不良的主題或添加過多插件功能的主題，則可能會遇到衝突並經歷 WordPress 錯誤。此外，如果您想更改網站設計並切換主題，則會失去這些功能。因此，我們建議選擇簡單的 WordPress 主題並通過插件添加功能。

如果您想為網站添加功能，有很大的可能性有適合您的 WordPress 插件。如果您在尋找一些能讓您的網站更好的插件，請參閱我們精選的必備 WordPress 插件。

6. 擁有堅實的評分和評論

判斷 WordPress 主題質量的另一個有力指標是用戶提供的評分和評論。 如果您正在搜尋免費主題，您可以在 WordPress.org 的主題頁面上找到客戶評論，顯示用戶給的評論數量和星級。您可以查看每個星級等級的詳細評分細分。如果該主題在第三方市場上出售，則主題銷售頁面將包括用戶的客戶評論或推薦。

💡更多提示：尋找更多無偏見的主題和插件評論？我們的 WPPressize Me 解決方案中心是我們專家團隊和數千名真實用戶提供詳細評論的完美場所。

7. 擁有活躍且有幫助的客戶支持團隊

即使您花時間學習了 WordPress 並擁有一些較為扎實的技能，但也可能有時需要依賴支持。不同主題將提供不同的 WordPress 支持選項。 例如，許多免費 WordPress 主題不提供有保障的支持，而其他主題則仍提供常規支持。如果您使用的是免費主題，則可以在主題的 WordPress.org 列表頁面上檢查支持頻道的活躍度。大多數高級主題在購買後將提供 6 至 12 個月的支持和更新，並可選擇續訂。高級主題通常通過其網站擁有自己的客戶支持或幫助台。 除了客戶支持選項外，您還需要檢查看主題文檔。這些教程將向您展示如何設置主題並解答最常見的問題。

8. 已為搜索引擎優化

您的 WordPress 主題在網站 SEO 友好性方面起著重要作用。即使主題外觀很好，如果生成不良編碼的 HTML，也會影響網站在搜尋引擎中的排名。對於初學者來說，分析主題的源代碼是困難的。這就是為什麼許多 WordPress 主題開發人員會讓您知道他們的主題已為 SEO 優化的原因。如果您擁有輕量且加載速度快的主題，那麼在搜尋引擎排名方面就朝著正確方向前進。

什麼導致WordPress側邊欄顯示在內容下方的錯誤？

最常見的原因是HTML或CSS錯誤破壞了佈局。在HTML中，每個<div>標籤需要正確關閉。如果負責顯示頁面的模板中有未關閉的<div>標籤，則會破壞佈局。同樣，不必要的閉合</div>標籤也會影響佈局，導致側邊欄移到下方。

除了HTML，CSS也會影響您網站上每個元素的整體設計。它用於定義佈局中元素的寬度、對齊和浮動。簡而言之，如果內容區域的寬度超過可用空間，則會強制側邊欄移到底部。

解析和修復側邊欄顯示在內容下方的錯誤

方法一：撤銷最近對WordPress主題的更改

通常，側邊欄問題是由於WordPress主題文件的更改引起的。如果您最近對WordPress主題或子主題進行了任何修改，則檢查這些更改將是修復此錯誤的快捷方式。如果您無法分辨需要回退哪些更改，請繼續閱讀，我們將展示其他故障排除方法。

方法二：清除WordPress緩存

當您做出更改但未立即顯示時，通常是因為緩存問題。緩存插件通常會顯示同一頁面的舊版本。清除WordPress緩存和瀏覽器緩存將幫助您查看應用到網站上的更改。

方法三：排除WordPress插件的影響

您的網站外觀和樣式由您使用的主題控制。然而，有時候插件也會向您的網站添加自己的HTML和CSS。例如，添加聯繫表單或燈箱彈出窗口會加載額外的CSS和HTML。如果您懷疑是插件引起了問題，您可以暫時禁用網站上的所有插件。進入WordPress管理面板的插件頁面，選中插件列表頂部的“插件”框，然後從下拉菜單中選擇“停用”並點擊“應用”。如果問題消失，則意味著某個插件導致了問題。重新激活插件並逐一檢查，找出是哪一個插件引發的問題。之後，您可以聯繫插件的支持部門尋求解決方案並報告問題。

方法四：修復損壞的<div>標籤

如前所述，損壞的<div>標籤是側邊欄移到內容下方的常見原因。如果問題發生在網站的特定區域，您可以檢查顯示該部分內容的模板。例如，如果此問題僅出現在單個帖子上，則您可能需要檢查single.php模板。要找出應該檢查哪個模板，請參考我們的完整WordPress模板階層結構指南。

方法五：找出將側邊欄移到底部的CSS

CSS控制著網站設計的最重要方面。您的WordPress主題使用CSS來定義格佈局中內容和側邊欄區域的寬度。這個值是基於可視區域的百分比。在移動設備上，主題會自動將側邊欄下推到內容下方。要找出引發問題的CSS，您可以使用檢查工具。

如果側邊欄錯誤仍然存在該怎麼辦

如果您已經嘗試了所有的故障排除方法，但仍無法解決問題，請查看我們的WordPress錯誤故障排除指南，尋找更多解決方案。一個選項是啟用調試模式。當不是直接修復時，調試模式可能會揭示與側邊欄問題相關的更具體的錯誤信息。例如，它可能會顯示一個PHP錯誤消息，提到某個引起CSS樣式問題並影響佈局的插件。這些信息可以幫助您找出有問題的插件，並可以找到解決方案或替代方案。如果您不熟悉進一步的故障排除，可以聯繫我們的WPressize Me專業服務團隊。我們的WordPress專家可以幫助您診斷側邊欄問題的原因並提供解決方案。

我們希望這篇文章能幫助您學習如何修復側邊欄顯示在內容下方的錯誤。您可能還想閱讀我們的WordPress常見錯誤終極手冊以及我們的文章，了解如何為每個WordPress文章和頁面顯示不同的側邊欄。

如果您喜歡這篇文章，請訂閱我們的YouTube頻道以獲取WordPress視頻教程。您也可以在Twitter和Facebook上找到我們。

如何在 WordPress Loop 中顯示任意數量的文章

您是否想在 WordPress loop 中顯示多篇博客文章？

使用 loop，WordPress 會處理要顯示在當前頁面上的每篇文章，並根據 loop 標籤中的指定條件格式化它們。

在本文中，我們將展示如何在 WordPress loop 中顯示任意數量的文章。

什麼是 WordPress Loop？

loop 是 WordPress 用來顯示您的每篇文章的 PHP 代碼。它在 WordPress 主題中使用，以顯示網頁上的文章列表。

在 WordPress loop 中，有不同的函數運行以顯示文章。然而，開發人員可以通過改變模板標籤來自定義每篇文章在 loop 中的顯示方式。

例如，loop 中的基本標籤會顯示文章的標題、日期和內容。您可以添加自定義標籤並顯示其他資訊，如類別、摘要、自定義欄位、作者名等。

WordPress loop 還允許您控制每頁顯示的博客文章數量，這在設計作者模板時很有用，因為您可以控制每個 loop 中顯示的文章數量。

接下來，我們來看看如何在 WordPress loop 中添加任意數量的文章。

在 WordPress Loop 中添加任意數量的文章

通常，您可以從 WordPress 管理面板設置 loop 中顯示的文章數量。
只需前往 WordPress 儀表板的「設置」»「閱讀」。預設情況下，WordPress 會顯示 10 篇文章。

然而，您可以使用 Super Loop 覆蓋該數量，允許您在特定的 WordPress for loop 中顯示任意數量的文章。

這將允許您自定義頁面的顯示設置，包括作者資料、側邊欄等。

首先，您需要打開希望放置文章的模板文件，然後簡單地添加以下 loop：

<?php
// 如果一切就緒，我們開始 loop
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

// 要顯示 'n' 篇文章，我們需要執行 loop 'n' 次
// 因此，我們定義一個數字變量稱為 '$count' 並設置其值為零
// 每次迴圈迭代，'$count' 的值會增加一
// 當 '$count' 的值達到指定數字時，迴圈會終止
// *用戶：將 'n' 更改為您希望顯示的文章數量

<?php static $count = 0;
if ( $count == "n" ) {
 break;
} else { ?>

// 為了 CSS 樣式和佈局，我們將文章內容包裹在一個 div 中
// 然後通過 'the_content()' 函數顯示整篇文章內容
// *用戶：更改為 '<?php the_excerpt(); ?>' 顯示文章摘要

<div class="post">
 <?php the_title(); ?>
 <?php the_content(); ?>
</div>

// 此處，我們繼續限制顯示文章的數量
// 每次迭代迴圈增加 '$count' 的值一
// 最後兩行完成迴圈並關閉 if 語句

<?php $count ++;
} ?>
<?php endwhile; ?>
<?php endif; ?>

注意：您需要在 if ( $count == "n" ) 部分更改 ‘n’ 的值並選擇任意數字。

使用 WPCode 插件是將此代碼添加到您的 WordPress 網站的簡單方法。它是 WordPress 最佳代碼片段插件，有助於您管理自定義代碼。

使用 WPCode，您不必手動編輯主題模板文件並冒著損壞某些內容的風險。該插件會自動為您插入代碼。

首先，您需要安裝並啟用免費的 WPCode 插件。更多詳情，請參閱我們的指南：如何安裝 WordPress 插件。

啟用後，您可以從 WordPress 儀表板前往「代碼片段」»「+ 添加片段」。接下來，您需要選擇「添加您的自定義代碼（新片段）」選項。

之後，只需將我們上面展示的 WordPress loop 的自定義代碼粘貼到「代碼預覽」區域。

您還需要為代碼輸入名稱並將「代碼類型」設置為「PHP 片段」。

接下來，您可以向下捲動到「插入」部分並選擇希望運行代碼的位置。

預設情況下，WPCode 將在您的整個 WordPress 網站上運行該代碼。您可以更改位置至特定頁面或使用短代碼插入代碼。

在本教程中，我們將使用預設的「自動插入」方法。

完成後，不要忘記點擊頂部的切換開關將代碼設為「啟用」，然後點擊「保存」按鈕。WPCode 現在將在您的 WordPress 博客中部署代碼並在 WordPress loop 中顯示指定數量的文章。

我們希望這篇文章能幫助您了解如何在 WordPress loop 中顯示任意數量的文章。您可能還想看看我們的指南：如何從 WordPress loop 中排除置頂文章，以及我們的專家精選：商業網站必備的 WordPress 插件。

如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道，以獲取 WordPress 視頻教程。您還可以在 Twitter 和 Facebook 上找到我們。

什麼是圖示字型以及為什麼要使用它們？

圖示字型包含符號或小圖片，而不是字母和數字。您可以在多種情況下使用這些圖示字型，例如購物車、下載按鈕、功能框、贈送活動甚至是 WordPress 導航菜單。實際上，WordPress 在其管理區域也使用圖示字型。

大多數訪問者會立即理解常用圖示的含義，因此它們可以讓您的網站更易於導航。相比於基於圖片的圖示，字型圖示加載速度更快，從而提高了網站的速度和性能。擁有幾個開源圖示字型集可供免費使用，但在本指南中，我們將使用最受歡迎的開源圖示集 Font Awesome。

方法 1. 使用 WordPress 插件添加圖示字型（簡單）

添加自定義圖示字型到 WordPress 最簡單的方法是使用 Font Awesome 插件。此插件允許您在頁面和帖子中使用免費圖示字型，而無需修改 WordPress 主題文件。

安裝並激活插件後，您可以將 Font Awesome 圖示添加到任何簡碼塊中。打開您希望顯示圖示字型的頁面或帖子，然後點擊“+”圖示。搜索“Shortcode”並選擇出現的正確塊。

輸入以下簡碼來添加任何 Font Awesome 圖示：

[icon name="rocket"]

將“rocket”替換為您想要顯示的圖示名稱。查看 Font Awesome 庫，點擊您想要使用的圖示，在彈出窗口中點擊圖示名稱，名稱將自動複製到剪貼板。

例如，要顯示“fire”圖示，可以使用：

[icon name="fire"]

方法 2. 使用 SeedProd 添加圖示字型（更自定化）

如果您想在網站上的任何地方使用圖示字型，我們推薦使用頁面建設插件。SeedProd 是市場上最好的拖放 WordPress 頁面建設工具，內置了超過 1400 個 Font Awesome 圖示。

首先，安裝並激活 SeedProd 插件。激活後，訪問 SeedProd » 設置，輸入您的許可密鑰。

替代方法：使用 SVG 圖示

另一種在 WordPress 中添加圖示圖像的方法是使用 SVG 圖示，這是一種用於向量圖形的常用圖像格式。SVG 向量圖標通常比圖示字型更易於 SEO 並且需要更少的伺服器請求來加載。

我們希望這個教程幫助您了解如何在 WordPress 主題中添加圖示字型。您還可以查看我們的彈出插件一覽以及如何選擇最佳網頁設計軟體的指南。

如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取更多 WordPress 教學視頻。您還可以在 Twitter 和 Facebook 上找到我們。

什麼是 WordPress Body Class？

Body Class（body_class）是 WordPress 的一個函數，允許您為 body 元素分配 CSS 類別。HTML body 標籤通常在主題的 header.php 文件中開始，每個頁面都會加載它。這使您能夠動態地確定用戶正在查看哪些頁面，然後根據需要添加 CSS 類別。

通常，大多數啟動主題和框架已經在 HTML body 標籤內包含 body class 函數。但是，如果您的主題沒有，您可以通過如下修改 body 標籤來添加它：

<body <?php body_class($class); ?>>

根據顯示的頁面類型，WordPress 會自動添加相應的類別。例如，如果您在存檔頁面上，WordPress會自動添加 archive 類到 body 元素。這幾乎適用於每個頁面。以下是一些根據顯示頁面所添加的常見類別示例：

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

如您所見，擁有這樣一個強大的資源，您可以僅通過使用CSS來完全自定義您的WordPress頁面。您可以自定義特定的作者簡介頁面、基於日期的存檔頁面等。

何時使用WordPress Body Class

首先，您需要確保您的主題的body元素包含如上所述的body class函數。如果它包含，那麼它將自動包括所有上述的WordPress生成的CSS類別。

之後，您還將能夠添加您自己的自定義CSS類別到body元素中。您可以在需要的時候添加這些類別。例如，如果您希望更改特定作者的文章在特定分類下的顯示。

如何添加自定義Body Class

WordPress有一個過濾器，您可以使用它在需要時添加自定義body class。在展示具體的使用案例之前，我們將展示如何使用過濾器添加body class，這樣每個人都可以在同一頁面上。

function my_class_names($classes) {
// 將 'class-name' 添加到 $classes 陣列
$classes[] = 'wpb-class';
// 返回 $classes 陣列
return $classes;
}

//現在將測試類添加到過濾器中
add_filter('body_class','my_class_names');

上面的代碼將在網站的每個頁面上添加一個類 “wpb-class” 到 body 標籤中。

我們推薦使用 WPCode 插件來添加這段代碼，這是市場上最好的代碼片段插件。它使在WordPress中添加自定義代碼變得安全且容易，無需編輯主題的functions.php文件。首先，您需要安裝並激活免費的WPCode插件。如果需要說明，請參見我們關於如何安裝WordPress插件的指南。

插件激活後，從WordPress儀表板轉到 Code Snippets » Add Snippet。然後，找到 ‘Add Your Custom Code (New Snippet)’ 選項，點擊其下的 ‘Use snippet’ 按鈕。

接下來，為您的片段添加標題，然後將上面的代碼粘貼到 ‘Code Preview’ 框中。您還需要從右側的下拉菜單中選擇 ‘PHP Snippet’ 作為代碼類型。

之後，將開關從 ‘Inactive’ 切換到 ‘Active’，並點擊 ‘Save Snippet’ 按鈕。

使用WordPress插件添加Body Class

如果您不是在進行客戶項目，並且不想編寫代碼，那麼這種方法會更容易一些。首先，您需要安裝並激活 Custom Body Class 插件。詳情參見我們的逐步指南—如何安裝WordPress插件。激活後，您需要訪問 Settings » Custom Body Class 頁面。在這裡您可以配置插件設置。

您可以選擇希望啟用body class功能的文章類型，以及誰可以訪問它。不要忘記點擊 ‘Save Changes’ 按鈕來保存您的設置。接下來，您可以前往編輯WordPress網站上的任何帖子或頁面。在帖子編輯屏幕上，您會在右側欄找到一個新元框標籤為 ‘Post Classes’。

點擊添加您的自定義CSS類別。您可以用空格分隔來添加多個類別。完成後，您可以簡單地保存或發布您的帖子。插件現在將為特定的帖子或頁面添加您的自定義CSS類別到body class。

使用條件標籤與Body Class

body_class函數的真正威力在於它與條件標籤一起使用時。這些條件標籤是true或false數據類型，用於檢查某個條件在WordPress中是否為真。例如，條件標籤is_home檢查當前頁面是否為首頁。這允許主題開發人員在添加自定義CSS類到body_class函數之前，檢查某個條件是否為真。

讓我們看一些使用條件標籤來向body class添加自定義類別的示例。

舉個例子

假設您希望為具有作者用戶角色的登錄用戶以不同方式樣式化您的首頁。而WordPress自動生成了.home和.logged-in類別，但它不會檢測用戶角色或將其作為類別添加。這是您可以使用條件標籤和一些自定義代碼來動態添加自定義類別到body class的場景。以下是添加到主題的 functions.php 文件或代碼片段插件中的代碼：

function wpb_loggedin_user_role_class($classes) {
// 檢查是否為首頁
if ( is_home() ) {
// 現在檢查登錄用戶是否具有作者用戶角色。
$user = wp_get_current_user();
if ( in_array('author', (array) $user->roles)) {
//用戶具有“作者”角色
//將用戶角色添加到body class
$classes[] = 'author';
//返回類別數組
return $classes;
}} else {
//如果不是首頁，則只返回默認類別
return $classes;
}}
//添加過濾器
add_filter('body_class', 'wpb_loggedin_user_role_class');

現在，我們來看另一個有用的例子。這次我們將檢查顯示的頁面是否為WordPress草稿的預覽。為此，我們將使用條件標籤 is_preview，然後添加我們的自定義CSS類別。

function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}}
add_filter('body_class','add_preview_class');

現在，我們將以下CSS添加到我們主題的樣式表中，以利用我們剛剛添加的新的自定義CSS類別。

.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}

這就是我們演示站中的效果。

你可能想看看完整的WordPress條件標籤清單。這將給您一套便於使用的標籤來編寫代碼。

動態添加自定義Body Class的其他示例

將分類名稱添加到單篇文章頁面的Body Class中

假設您希望根據文章所屬的分類自定義單篇文章的外觀。您可以使用body class來實現。首先，您需要在單篇文章頁面上添加分類名稱作為CSS類別。為此，請將以下代碼添加到主題的 functions.php 文件或代碼片段插件中：

//在body class中添加分類友好名稱
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
//添加過濾器
add_filter('body_class', 'category_id_class');

以上代碼將在您的單篇文章頁面中的body class中添加分類類別。您可以根據需要使用CSS類別來樣式化它。

添加頁面Slug到Body Class

將以下代碼粘貼到您主題的 functions.php 文件或代碼片段插件中：

//頁面Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
} return $classes;
}
//添加過濾器
add_filter('body_class', 'add_slug_body_class');

再次推薦使用WPCode代碼片段插件在WordPress中添加此代碼，這樣您就不必擔心破壞您的網站。首先，安裝並激活免費的WPCode插件。如果需要幫助，請參閱如何安裝WordPress插件的指南。激活後，從WordPress儀表板轉到 Code Snippets » Add Snippet，然後點擊 ‘Use snippet’ 按鈕，即可在 ‘Add Your Custom Code (New Snippet)’ 選項下。接下來，將上面的代碼粘貼到‘Code Preview’框中，並從下拉菜單中選擇‘PHP Snippet’ 作為代碼類型。最後，將開關從‘Inactive’切換到‘Active’，然後點擊‘Save Snippet’按鈕。

瀏覽器檢測與瀏覽器特定的Body Class

有時您可能會遇到主題需要為特定瀏覽器添加額外的CSS的問題。好消息是，WordPress會在加載時自動檢測瀏覽器，並將此信息臨時存儲為一個全局變量。您只需檢查WordPress是否檢測到特定的瀏覽器，然後將其作為自定義CSS類別添加。只需將以下代碼粘貼到主題的 functions.php 文件或代碼片段插件中：

function wpb_browser_body_class($classes) {
 global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
 if ($is_iphone) $classes[] = 'iphone-safari';
elseif ($is_chrome) $classes[] = 'google-chrome';
elseif ($is_safari) $classes[] = 'safari';
elseif ($is_NS4) $classes[] = 'netscape';
elseif ($is_opera) $classes[] = 'opera';
elseif ($is_macIE) $classes[] = 'mac-ie';
elseif ($is_winIE) $classes[] = 'windows-ie';
elseif ($is_gecko) $classes[] = 'firefox';
elseif ($is_lynx) $classes[] = 'lynx';
elseif ($is_IE) $classes[] = 'internet-explorer';
elseif ($is_edge) $classes[] = 'ms-edge';
else $classes[] = 'unknown';
 return $classes;
}
//添加過濾器
add_filter('body_class','wpb_browser_body_class');

您然後可以使用類別如：

.ms-edge .navigation {某些項目在這裡}

如果是一個小的填充或邊距問題，那麼這是一個相當簡單的解決方法。

還有許多其他場景，使用body_class函數可以讓您免於編寫冗長的代碼。例如，如果您使用的是像Genesis這樣的主題框架，您可以在子主題中使用它來添加自定義類別。

您可以使用body_class函數為全寬頁面佈局、側邊欄內容、頁首和頁尾等添加CSS類別。

WordPress主題設計專家指南

尋找更多的教程嗎？查看我們關於 WordPress 主題設計的其他指南：如何將視差效果添加到任何 WordPress 主題，如何編輯 WordPress 的頁腳（四種方法），如何在您的 WordPress 博客中添加飄雪效果，如何在不丟失自定義設置的情況下更新WordPress主題，如何在WordPress中獲取網站設計反饋。

我們希望這篇文章能幫助您了解如何在主題中使用WordPress body class。您可能還會希望查看我們有關如何不同樣式化每個WordPress帖子，以及我們的最佳WordPress頁面構建器插件的比較。

如果您喜歡這篇文章，請訂閱我們的YouTube頻道以觀看WordPress視頻教程。您也可以在Twitter和Facebook上找到我們。

步驟 1：添加 JavaScript 淡入效果

首先，您需要將 jQuery 代碼作為單獨的 JavaScript 文件添加到您的 WordPress 主題中。打開一個文本編輯器（如記事本），將其保存為 wpb_fadein_widget.js，並粘貼以下代碼：

jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/
var sidebarElement = $('div#secondary');
// Check if the sidebar exists
if ($(sidebarElement).length > 0) {
// Get the last widget in the sidebar, and its position on screen
var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
// Hide the last widget
$(lastWidget).hide();
// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {
// If the widget has been displayed, we don't need to keep doing a check.
if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;
}
}
});
}
});

這段代碼中的 var sidebarElement = $(‘div#secondary’); 是最重要的一行。這是包含您側邊欄的 div 的 id。由於每個主題可能使用不同的側邊欄容器 div，您需要找出您的主題所用的容器 id。

您可以使用 Google Chrome 的“檢查元素”工具來找到這個 id。右鍵單擊側邊欄並選擇“檢查元素”，在源代碼中您即可看到側邊欄容器 div。

例如，默認的 Twenty Twelve 主題使用的是 secondary，而 Twenty Thirteen 使用的是 teritary。您需要將 secondary 替換為您側邊欄容器 div 的 id。然後使用 FTP 客戶端將此文件上傳到主題目錄中的 js 文件夾。如果您的主題目錄沒有 js 文件夾，則需要創建一個。

步驟 2：在 WordPress 主題中註冊 JavaScript

現在 jQuery 腳本已準備就緒，是時候將其添加到您的主題中了。我們將使用正確的方法將 JavaScript 添加到您的主題中，只需將以下代碼粘貼到主題的 functions.php 文件中：

wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

這樣就完成了，您現在可以在側邊欄中添加一個小工具以淡入效果顯示，然後訪問您的網站查看其效果。

步驟 3：在淡入效果後使最後一個小工具固定

一個常見的需求是使最後一個側邊欄小工具在淡入效果後固定位置。這被稱為浮動小工具或固定小工具。

如果您查看上述 jQuery 代碼，將會注意到淡入效果後我們添加了一個 wpbstickywidget CSS 類。您可以使用這個 CSS 類使最後的小工具在淡入後固定位置。只需將以下 CSS 粘貼到主題的樣式表中：

.wpbstickywidget {
position:fixed;
top:0px;
}

您可以根據需要修改 CSS，更改背景顏色或字體，讓小工具更加突出。您甚至可以在最後一個小工具旁邊添加平滑返回頂部的效果，讓用戶快速返回頁面頂部。

我們希望這篇文章能幫助您在 WordPress 側邊欄中添加最後一個小工具的淡入效果。更多 jQuery 好料，請查看我們的最佳 jQuery 教程。

如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲得 WordPress 視頻教程。您還可以在 Twitter 和 Google+ 上找到我們。

為什麼要在上一篇和下一篇文章鏈接中顯示縮略圖？

您的 WordPress 部落格提供了一些有助於訪客找到新內容並在網站中導航的功能。

這些功能包括導航選單、搜索欄和文章檔案小工具。另一個有用的導航功能是在每篇 WordPress 博文的底部，您會在那裡找到到您網站上上一篇和下一篇博文的鏈接。

當訪客讀完一篇博文後，他們通常會尋找其他內容閱讀。添加縮略圖會使這些鏈接看起來更具互動性。另外，這也是吸引讀者注意力的一個好方法，特別是您的高效博文。例如，您可能有一些主題內容已經帶來大量流量並轉換這些讀者為電子郵件訂閱者。添加縮略圖將有助於您建立電子郵件列表並發展您的小型企業。

在 WordPress 的上一篇和下一篇文章鏈接中使用縮略圖

要在上一篇和下一篇文章鏈接中添加縮略圖，您需要將代碼添加到您的 WordPress 主題文件中。如果您之前沒有這樣做過，請參見我們的指南了解如何在 WordPress 中複製和粘貼代碼。

使用 WPCode 添加代碼

第一步是使用 WPCode 這類插件添加以下代碼片段。WPCode 是最好的代碼片段插件，它允許您添加代碼而不會破壞您的網站。它還提供許多預製模板，因此您不需要從頭開始編寫代碼。

首先，您需要安裝並激活 WPCode 插件。更多細節請參見我們的指南了解如何安裝 WordPress 插件。

然後，前往 Code Snippets » + Code Snippets 頁面，點擊「新增」。

在這裡，您將進入一個代碼片段庫，您可以在其中找到大量預製模板。

在「添加自定義代碼」下，點擊「使用代碼片段」。給代碼片段起個名字，以便您以後可以參考它。

然後，在 WPCode 文本編輯器中複製以下代碼。請確保選擇「PHP 代碼片段」作為代碼類型。

function wpb_posts_nav(){
    $next_post = get_next_post();
    $prev_post = get_previous_post();
    
    if ( $next_post || $prev_post ) : ?>
    
        

            

                
                    <a href="">
                        

                            

                                
                            
                        
                        

                            
                                
                                
                            
                            

                        
                    
                
            
            

                
                    <a href="">
                        

                            
                                
                                
                            
                            

                        
                        

                            

                                
                            
                        
                    
                
            
        
 
    <?php endif;
}

接下來，將按鈕從「未啟用」切換為「啟用」。這樣代碼片段將生效。然後，您只需點擊「更新」按鈕。

接下來，返回 Code Snippets » +Add Snippet 頁面。在「添加自定義代碼」選項下，您將選擇「使用代碼片段」。給代碼片段起個名字，以便您以後可以參考它。然後，在 WPCode 文本編輯器中複製以下代碼。請確保選擇「PHP 代碼片段」作為代碼類型。

wpb_posts_nav();

這段代碼告訴 WordPress 在何處顯示帶有特色圖片的導航。

接下來，向下滾動到插入部分。您需要點擊位置旁邊的下拉菜單。在此處，轉到「頁面特定」並選擇「在文章後插入」。這樣，縮略圖會正確顯示在鏈接旁。

最後，通過切換「啟用」按鈕使代碼片段生效。然後點擊「更新」。當您保存更改後，這個功能可以從模板中調用，顯示帶有縮略圖的上一篇和下一篇文章鏈接。

現在，當您在網站上查看一篇文章時，您會看到文章底部的上一篇和下一篇鏈接中現在有了縮略圖。

請注意，如果其中一個鏈接的文章沒有設置特色圖片，那麼您將看不到縮略圖。

要了解如何在文章中添加縮略圖，請參見我們的指南了解如何在 WordPress 中添加特色圖片或文章縮略圖。

替代方法：顯示帶縮略圖的熱門文章

另一種在讀者讀完文章後吸引他們的方法是顯示每篇文章後的熱門文章列表。這將給讀者一個機會查看您最好的內容，而不是僅僅查看剛發布的上一篇和下一篇文章。

您的熱門文章包含您最成功的內容。向訪客展示這些文章將建立信任，改善社會認證，並確保訪客在您的網站上停留更長時間。

當您檢查我們的指南中的第一種方法時，您將了解到使用 MonsterInsights 插件添加熱門文章是多麼容易。MonsterInsights 的「熱門文章小工具」提供多種吸引人的主題和大量自定義選項。

您可能還想查看我們的指南了解如何在 WordPress 中添加自定義的文章後小工具，您可以學習如何在每篇博文的末尾添加各種類型的內容。

我們希望本教程幫助您學會如何在 WordPress 中使用縮略圖與上一篇和下一篇文章鏈接。您還可能想了解如何加快 WordPress 性能或查看我們的 WordPress 最佳社交媒體插件列表。

如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道，觀看 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。

為什麼添加 jQuery 提示？

提示是在用戶將鼠標懸停在某個項目上時顯示的，通常是提供該項目的描述。在這個教程中，我們將添加 jQuery 提示來顯示像 ‘請在評論表單字段中使用真實姓名’ 這樣的提示信息。通過添加 jQuery 提示，可以提升用戶體驗，使您的評論表單看起來更好。

如何添加 jQuery 提示

首先，在桌面上創建一個文件夾，命名為 wpb-comment-tooltips。在這個文件夾中，需要創建以下三個文件：

• wpb-comment-tooltips.php
• wpb-tooltip.css
• wpb-tooltip.js

使用像 Notepad 這樣的純文本編輯器來創建這些文件。創建好文件後，打開 wpb-comment-tooltip.php 文件，複製並粘貼以下代碼：

<?php
/**
Plugin Name: WPressize Me's Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by WPressize Me
Version: 1.0
Author: WPressize Me
Author URI: https://www.wpressizeme.com
License: GPL2
*/

// Only load our scripts and style when a comment form is displayed
add_action('comment_form_before', 'wpb_comment_tooltips');
function wpb_comment_tooltips() { 
wp_enqueue_script('wpb-tooltip-jquery', plugins_url('/wpb-tooltip.js', __FILE__), array('jquery-ui-tooltip'), '', true);
wp_enqueue_style('wpb-tooltip-css', plugins_url('/wpb-tooltip.css', __FILE__), false, null);
}

// Modify comment form fields and add title attribute to form input fields
function alter_comment_form_fields($fields){
$fields['email'] = '
' . __('Email', 'twentythirteen') . ' ' .
($req ? '*' : '') .
'
';
$fields['url'] = '
' . __('Website', 'twentythirteen') . '' .
'
';
$fields['author'] = '
' . __('Name', 'twentythirteen') . ' ' . ($req ? '*' : '') .
'
';
return $fields;
}
add_filter('comment_form_default_fields','alter_comment_form_fields');
?>

在上述代碼中，我們首先創建了一個插件標頭，並給予這插件一個名稱與描述。接下來，我們加載了 JavaScript 和 CSS 文件（請參考我們的教程來了解如何在 WordPress 中添加 JavaScript 和樣式）。我們確保這些文件僅在顯示評論表單時被加載，接著修改了默認的評論表單並在輸入字段中添加了 title 屬性。這些 title 屬性包含了我們希望在提示中顯示的消息。例如，在 author 字段中，我們使用了 title=’Please use your real name, no keywords.’

現在您已經創建了插件文件，接下來我們需要添加一些 jQuery。在 wpb-tooltip.js 文件中添加如下代碼：

(function($) {
$("#commentform").tooltip({
position: {
my: "center bottom-10",
at: "center top",
using: function(position, feedback) {
$(this).css(position);
$("
")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}
);
})(jQuery);

在這段代碼中，#commentform 是 jQuery 顯示提示的選擇器，.tooltip 是我們定義提示位置的部分。

最後一步是在 wpb-tooltip.css 文件中添加一些 CSS。簡單複製並粘貼如下代碼：

.ui-tooltip, .arrow:after {
background: #356aa0;
border: 2px solid white;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px #356aa0;
max-width: 350px;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px #356aa0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}

您可以根據需要自由修改這個 CSS 文件。

這就是全部內容。您現在已順利創建了一個在 WordPress 評論表單中添加 jQuery 提示的插件。只需使用 FTP 客戶端（例如 Filezilla）將 wpb-comment-tooltips 文件夾從桌面上傳到您的網絡伺服器的 /wp-content/plugins/ 目錄中。上傳插件後，前往 WordPress 管理區的插件頁面並啟用插件。

我們希望這個教程能幫助您學習如何在 WordPress 評論表單中添加 jQuery 提示。我們鼓勵您修改這些代碼並嘗試將提示添加到其他地方。例如，查看我們如何在我們的網站上添加提示推薦信。在下面留言以提供反饋和問題。