您是否想在 WordPress 中為不同頁面使用多個佈景主題？

您可以自訂您網站頁面的外觀和布局，並為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢？

本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

為什麼要在 WordPress 中為頁面使用多個佈景主題？

當您建立 WordPress 網站時，您會仔細選擇一個吸引人的佈景主題來展示您的內容。預設情況下，該佈景主題會使網站上的每個頁面具有相同的外觀和布局。

但是如果您希望網站的一個部分看起來完全不同呢？或者您希望網站上的某些頁面從其他頁面中脫穎而出，例如，您可能希望您的隱私政策頁面沒有側邊欄，或者使用不同的布局為您的 404 頁面。

以下是如何在 WordPress 中為頁面使用多個佈景主題的方法。我們將介紹兩種方法，您可以使用以下快速鏈接跳轉到您想要使用的方法：

方法一：通過插件使用多個 WordPress 佈景主題

方法二：使用自訂頁面建構器建立多個模板

注意：在開始之前，我們建議您對 WordPress 網站進行完整備份，以便在發生問題時能夠恢復。還建議您關閉任何緩存插件，例如 W3 Total Cache 或 WP Super Cache，因為這些插件有時會顯示頁面的舊版本，您可能看不到最新的更改。

方法一：通過插件使用多個 WordPress 佈景主題

在此方法中，我們將使用 Multiple Themes 插件在 WordPress 站點上同時使用多個佈景主題。如果您有特定的佈景主題希望在網站不同部分使用，這是最佳方法。

首先，您需要安裝並啟用 Multiple Themes 插件。有關詳細信息，請參閱我們關於如何安裝 WordPress 插件的分步指南。確保您想要使用的佈景主題已安裝在 WordPress 中。您一次只能啟用一個佈景主題，但可以安裝任意多的佈景主題。要了解更多，請參閱我們關於如何安裝 WordPress 佈景主題的指南。

此插件提供豐富的選項，我們將介紹三種最常見的用例。然而，您可以為幾乎任何頁面或區域使用不同的佈景主題。

1. 為首頁使用不同佈景主題

啟用後，請前往外觀 » Multiple Themes 插件來配置插件。確保您處於「設置」標籤下。

您需要向下滾動到「站點主頁」部分，然後從下拉菜單中選擇一個主題。然後，點擊「保存所有變更」按鈕來存儲您的設置。這樣簡單！您的首頁現在使用了不同的佈景主題。

2. 為博客使用不同佈景主題

也許您對佈景主題在博客文章上的外觀感到滿意，但不喜歡其他重要頁面的外觀。您可以為文章使用一個佈景主題，而為頁面使用另一個佈景主題。這種方法無論您的博客是位於首頁還是為博客文章創建了單獨的頁面都適用。首先，確保您希望為博客使用的佈景主題是啟動的。

接下來，會像之前一樣使用相同的插件。在 WordPress 儀表板中，前往設置 » Multiple Themes 插件。一旦到那裡，應點擊「高級設置」標籤。

向下滾動到「選擇所有頁面的佈景主題」部分。在這裡，您可以選擇一個新佈景主題，該佈景主題將在查看網站上的頁面時使用。完成後，確保點擊「保存所有變更」按鈕。

3. 為 WooCommerce 商店使用不同佈景主題

您的 WooCommerce 商店在選擇適合 WooCommerce 的佈景主題時效果最佳。預設的 Storefront 主題或其他主要的 WooCommerce 佈景主題將同時用於您的商店和網站。但是，如果您希望網站或博客使用與您的商店不同的佈景主題呢？這是另一個需要使用多個佈景主題的情況。

為此，我們將保持目前的 Storefront 主題啟動，然後為您的首頁、頁面和文章使用不同的佈景主題。像之前的方法一樣，前往設置 » Multiple Themes 插件。首先，您需要像上面所述更改網站首頁的佈景主題。在「設置」標籤下，向下滾動並更改網站主頁的佈景主題。

接下來，需要點擊「高級設置」標籤並向下滾動到「選擇所有頁面的佈景主題」部分。在這裡，需要從下拉菜單中更改頁面和文章的佈景主題。

還差一步就完成了，如果為博客文章創建了單獨的頁面，則需要完成這一步。返回「設置」標籤並向下滾動到「為單個頁面設置」部分。接下來，從下拉菜單中選擇相同的佈景主題，然後在「頁面、文章、前綴或其他的 URL」字段中鍵入您的博客頁面的 URL。您可以通過導航到網站上的博客頁面來發現正確的 URL。它可能看起來像這樣：https://example.com/blog/。一旦點擊「保存所有變更」按鈕，即完成。您的網站和 WooCommerce 商店將使用不同的佈景主題。

如何自訂第二佈景主題的外觀

根據上面的步驟，您選擇了一個用於網站某些部分的第二佈景主題。但是，如果您想自訂第二佈景主題的外觀怎麼辦？

應用第二佈景主題並未改變活動佈景主題。這意味著，如果您想配置替代佈景主題，則需要臨時啟動它。例如，假設您為網站使用了 Astra 主題，但為博客選擇了 Twenty Twenty 主題。要配置 Twenty Twenty 的主題選項，只需前往外觀 » 主題並啟動 Twenty Twenty 主題。現在，您可以自由使用外觀 » 自訂來更改主題。

您可以參閱我們的最終指南來學習如何使用 WordPress 主題自訂器。如果您使用的是塊狀 WordPress 佈景主題，則需要使用完整網站編輯器來自訂佈景主題。可以通過儀表板的外觀 » 編輯器訪問此功能。

您可以在我們的初學者指南中了解更多關於 WordPress 完整網站編輯的功能。一旦對主題設置感到滿意，請保存您的更改，然後返回 WordPress 管理面板的外觀 » 主題並重新啟動 Twenty Twenty-One 主題。對於更高階的主題選項，請查看插件的設置頁面的「主題選項」標籤。

此方法的缺點是，您在自訂選項時會臨時更改所有網頁的活動主題。為避免這種情況，您可以使用下面的方法二。

Multiple Themes 插件能夠進行更複雜的操作。例如，您可以為匹配通配符或查詢的頁面使用不同的主題。有關更多信息，請參閱插件在 WordPress.org 上的支持頁面。

方法二：使用頁面建構器建立多個模板

另一種建立完全不同外觀的頁面方法是使用拖放頁面建構器插件。這些插件允許您自訂網站上每個頁面的外觀和布局，無需使用任何代碼如 PHP、CSS 或 HTML。

這可能是一個更具成本效益的選擇，因為與其支付多個高級主題的費用，您可以通過一次購買一個插件來建立多個自訂主題。

SeedProd 是市場上速度和易用性最佳的 WordPress 頁面建構器。它提供了超過 300 個美麗的預製模板和站點套件，可以單獨應用到不同頁面上。雖然有免費版本的 SeedProd，但本教程將使用高級插件，因為它具有更多功能並允許您建立多個自訂主題。

首先，您需要安裝並啟用 SeedProd 插件。更多詳細信息，請參閱我們的分步指南來學習如何安裝 WordPress 插件。啟用後，系統會要求您輸入許可證密鑰。您可以在 SeedProd 網站上的帳戶中找到這些信息。

1. 為特定頁面建立自訂布局

SeedProd 可以用作頁面建構器插件，因此您可以建立具有完全自訂布局的頁面。為此，請前往 SeedProd » 登陸頁面，然後點擊「建立新登陸頁面」按鈕。

現在，您可以為此特定頁面選擇主題。SeedProd 附帶數百個美麗的頁面模板，您可以為每個頁面選擇不同的模板作為起點。如果您想從空白頁開始，則只需選擇「空白模板」。

系統會要求您提供頁面的標題和 URL。之後，請點擊標有「保存並開始編輯頁面」的按鈕繼續。

這將加載 SeedProd 頁面建構器界面。這個簡單的拖放建構器會在右側顯示頁面的即時預覽，左側是一個工具欄。如果您選擇了空白模板，則首先需要為頁面選擇一個布局。可以選擇沒有側邊欄的布局，也可以選擇左側或右側有側邊欄的布局，或使用多欄布局。在不同頁面上，您可以選擇完全不同的布局。

如果您選擇了另一個模板作為起點，您的頁面將已有一些內容。您可以通過點擊每個塊來編輯和自訂該內容。您還可以通過拖放向頁面添加新塊。

您可以在我們的指南中了解更多關於如何自訂頁面和添加新塊的信息，該指南介紹了如何使用 WordPress 建立登陸頁面。一旦完成頁面的建立，請點擊「保存」旁邊的下拉菜單，然後點擊「發布」來存儲頁面並在您的網站上公開。

2. 使用不同的布局建立您網站的自訂主題

SeedProd 也可以作為完全自訂的主題建構器使用。使用 SeedProd，您可以為網站的各個部分建立自訂設計。這意味著您可以為您的博客和網站的其餘部分選擇完全不同的布局，或者為您的電子商務商店和首頁選擇不同的布局。

要開始，請前往 SeedProd » 主題建構器，然後點擊「主題」按鈕。

從這裡，您可以選擇一個主題布局作為起點。它們完全可自訂，因此您可以僅作為起點使用它們。選擇一個主題後，SeedProd 將生成網站不同區域所需的所有模板。每個模板都是完全可自訂的。實質上，您可以使每個部分看起來像完全不同的主題。您還可以添加自己的模板，這些模板可以條件地在網站的不同區域使用。例如，您可以建立一個僅在您的博客文章中使用的側邊欄。或者，您可以僅為產品頁面建立一個自訂頁面布局。

更多使用 SeedProd 的詳情，請查看以下指南：

• 如何輕鬆建立自訂 WordPress 主題（無需任何代碼）
• 如何使用 SeedProd 在 WordPress 中建立美麗的即將推出頁面
• 如何在 WordPress 中建立銷售頁面（轉換率高）
• 如何在 WordPress 中建立自訂頁面

我們希望這個教程能幫助您了解如何在 WordPress 中為頁面使用多個佈景主題。您可能還想了解如何建立電子郵件通訊，或查看我們的增長網站必備插件列表。如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您還可以在 Twitter 和 Facebook 上找到我們。

您是否想在 WordPress 網站上添加回頂效果？這種效果在頁面較長時非常有用，可以讓用戶輕鬆返回頁面頂部，提升網站的用戶體驗。

本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

什麼是平滑回頂效果？什麼時候應該使用？

除非網站具有固定的標頭菜單，否則用戶在滾動到頁面的底部時需要手動返回頂部，這可能會讓人感到厭煩，甚至可能因此離開網站。因此，您需要一個按鈕，快速將用戶送回到頁面的頂部。

您可以簡單地添加一個文本鏈接實現此功能，無需 jQuery，如下所示：

<a href="#" title="返回頂部">^頂部</a>

它會在幾毫秒內將用戶返回頁面頂部，但效果可能會顯得生硬，就像突然遇到颠簸一般。相反，平滑回頂效果可以讓用戶以視覺上愉悅的方式返回頂部，顯著改善網站的用戶體驗。

接下來，讓我們看看如何使用 WordPress 插件和 jQuery 添加平滑回頂效果。

使用 WordPress 插件添加平滑回頂效果

這種方法適合初學者，無需編寫任何代碼即可在 WordPress 網站上添加平滑回頂效果。首先，您需要安裝並激活 WPFront Scroll Top 插件。如果需要幫助，請參閱我們的 WordPress 插件安裝指南。

啟用插件後，您可以從 WordPress 後台導航到 設定 » Scroll Top 在這裡進行插件配置並自定義平滑回頂效果。首先，您需要勾選「啟用」選項，以激活網站上的回頂按鈕。接下來，您可以修改滾動偏移、按鈕大小、不透明度、淡出持續時間、滾動持續時間等。

下拉並找到更多選項，例如自動隱藏時間、在小設備上隱藏按鈕以及在 wp-admin 屏幕上隱藏按鈕。您還可以編輯按鈕的操作，默認情況下，它會滾動到頁面頂部，但您可以將其更改為滾動到文章中的特定元素，甚至鏈接到一個頁面。

插件還提供了多種預建按鈕設計可供選擇，您能夠輕鬆找到適合網站的設計。如果找不到合適的預建圖片按鈕，您也可以從 WordPress 媒體庫上傳自定義圖片。

完成設置後，點擊「保存更改」按鈕即可。您現在可以訪問網站，查看回頂按鈕的效果。

使用 jQuery 在 WordPress 中添加平滑回頂效果

這種方法不適合初學者，適合那些對編輯主題感到舒適的人，因為它需要在網站上添加代碼。我們將使用 jQuery、一些 CSS 和一行 HTML 代碼在您的 WordPress 主題中添加平滑回頂效果。

首先，打開文本編輯器（如 Notepad），創建一個文件，並將其保存為 smoothscroll.js。接下來，將以下代碼複製並粘貼到文件中：

jQuery(document).ready(function($){
	$(window).scroll(function(){
    if ($(this).scrollTop() < 200) {
		$('#smoothup').fadeOut();
    } else {
		$('#smoothup').fadeIn();
    }
});
$('#smoothup').on('click', function(){
	$('html, body').animate({scrollTop:0}, 'fast');
	return false;
	});
});

保存文件並將其上傳到您的 WordPress 主題目錄中的 /js/ 文件夾中。如果您的主題沒有 /js/ 目錄，可以創建一個並將 smoothscroll.js 上傳其中。更多詳細步驟，請參閱我們的 FTP 上傳文件指南。

接下來需要在主題中加載 smoothscroll.js 文件。為此，我們將在 WordPress 中掛載腳本。將以下代碼複製並粘貼到主題的 functions.php 文件中。我們不建議直接編輯主題文件，因為即使是最細微的錯誤都可能導致您的網站崩潰。相反，您可以使用像 WPCode 這樣的插件，並參閱我們的如何在 WordPress 中添加自定義代碼片段教程。

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );

在上述代碼中，我們告訴 WordPress 加載我們的腳本，同時加載 jQuery 庫，因為我們的插件依賴於它。

現在，我們已經添加了 jQuery 部分，接下來讓我們在 WordPress 站點中添加一個將用戶返回頂部的鏈接。將以下 HTML 粘貼到主題的 footer.php 文件中。如果需要幫助，請參閱我們的如何在 WordPress 中添加頁眉和頁腳代碼教程。

<a href="#top" id="smoothup" title="返回頂部"></a>

您可能注意到 HTML 代碼中包含一個鏈接，但沒有錨文本。這是因為我們將使用向上的箭頭圖標作為顯示返回頂部按鈕。在此示例中，我們使用 40x40 像素的圖標。簡單地在主題的樣式表中添加以下自定義 CSS。

#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
#smoothup:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
background: url('') no-repeat;
}

在上述 CSS 中，請確保將 https://www.example.com/wp-content/uploads/2013/07/top_icon.png 替換為您想使用的圖片 URL。您可以使用 WordPress 媒體上傳器上傳自己的圖標，然後複製圖片 URL 並將其粘貼到代碼中。

希望這篇文章幫助您在您的網站上使用 jQuery 添加平滑回頂效果。您可能還想查看我們專家推薦的小型企業最佳 WordPress 插件，以及我們的逐步指南，了解如何創建網上商店。

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

如何在 WordPress 中創建自定義頁面

更新於2024年5月3日；由編輯部撰寫 | 審閱者：Syed Balkhi

您是否想在 WordPress 中創建一個自定義頁面？自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。

在這篇文章中，我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

為什麼要在 WordPress 中創建自定義頁面？

每當您創建新頁面時，WordPress 主題使用模板文件來控制該頁面的外觀。這個 page.php 模板會影響您在 WordPress 中創建的所有單一頁面。然而，您可能不希望每次都使用相同的設計。

登陸頁面通常具有與常規頁面不同的內容，比如大型的主圖像或行動呼籲 (CTA)。這意味著它們往往與網站的其他部分看起來完全不同。然而，使用標準頁面模板創建獨特設計可能會花費大量時間。您還受到 page.php 模板的限制，可能無法創建您想要的精確設計。

那麼，讓我們看看如何在 WordPress 中創建自定義頁面，精確設計、佈局和內容您想要的外觀。

方法1：使用區塊編輯器創建自定義頁面 (無需插件)

區塊編輯器使得使用您已熟悉的工具設計自己的模板變得簡單。這是一個很好的選擇，如果您計劃在多個頁面上重複使用相同的設計，因為您可以簡單地應用相同的模板。

要開始，請打開任何頁面或文章。然後，在右側菜單中選擇“頁面”選項卡並點擊“模板”旁邊的文本。彈出窗口中，點擊“添加模板”圖標，輸入模板名稱然後點擊“創建”。這將啟動模板編輯器，與 WordPress 的內容編輯器類似。

要向自定義頁面設計中添加區塊，只需點擊藍色的“+”按鈕。您可以拖放添加區塊。當模板看起來令人滿意時，點擊“發布”按鈕並保存。現在您可以將此模板應用到任何頁面，只需在編輯器中打開該頁面，選擇新模板並添加內容。

方法2：使用全站編輯器創建自定義頁面 (僅限區塊主題)

如果您使用的是區塊主題，那麼您可以使用全站編輯器創建自定義頁面，這允許您更改個別頁面的佈局，而不需要創建自定義模板。

首先正常創建頁面，然後轉到外觀 > 編輯器。在左側菜單中點擊“頁面”，找到您想重新設計的頁面並點擊它進行編輯。使用全站編輯器工具進行編輯，比如添加新的區塊或自定義現有區塊。完成更改後，點擊“保存”按鈕。

方法3：使用 SeedProd 創建自定義頁面 (推薦)

我們推薦使用頁面構建器來創建自定義頁面。SeedProd是一個最佳的拖放頁面構建器，擁有超過350個模板，允許您創建自定義頁面而不需要編寫任何代碼。首先，您需要安裝並啟用 SeedProd 插件，然後進入 SeedProd > 登陸頁面並點擊“添加新登陸頁面”按鈕，選擇適合的模板並進行自定義設計。

使用 SeedProd 的拖放編輯器，您可以輕鬆自定義選定的模板。完成設計後，點擊“保存和開始編輯頁面”按鈕，然後發布頁面。

方法4：使用 Thrive Architect 創建自定義頁面

您還可以使用 Thrive Architect 創建自定義頁面，這是一個流行的拖放頁面構建器。首先安裝並啟用插件，然後進入頁面 > 新增 頁面中，選擇“啟動 Thrive Architect”，選擇適合的模板並進行編輯。

在 Thrive Architect 編輯器中，您可以點擊任何元素來自定義它。完成設計後，點擊“保存工作”旁邊的箭頭按鈕，然後選擇“保存並返回至帖子編輯器”。然後您可以發布頁面，它將顯示在您的 WordPress 網站上。

我們希望這篇文章幫助您了解如何在 WordPress 中創建自定義頁面。您也可以查看我們關於如何提高博客流量的指南，以及我們精選的最佳 WordPress 聯繫表單插件。

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

為何以及誰需要下拉清單展示最近文章？

WordPress 內建的最近文章小工具可以添加至任何側邊欄或準備好放置小工具的區域。這個小工具只是簡單地展示最近文章列表，您可以選擇要展示的文章數量。但是，如果您想展示超過 5-10 篇文章，那麼這個列表會在側邊欄中佔用大量空間。一些 WordPress 用戶可能需要更緊湊的方式來展示最近文章。在這種情況下，使用下拉清單或可折疊列表可以幫助節省空間。

在 WordPress 中顯示簡單的下拉清單最近文章（手動代碼）

此方法使用內建的 wp_get_recent_posts 函數。您只需將以下代碼複製並粘貼到佈景主題的 functions.php 文件或站點特定的插件中。

function wpb_recentposts_dropdown() {
 $string .= '<select id="rpdropdown">
 <option  value="" selected>選擇一篇文章</option>';

 $args = array( 'numberposts' => '5', 'post_status' => 'publish' );
 $recent_posts = wp_get_recent_posts($args);
 foreach( $recent_posts as $recent ){
 $string .= '<option value="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"].'</option> ';
 }

 $string .= '</select>
 <script type="text/javascript"> var urlmenu = document.getElementById( "rpdropdown" ); urlmenu.onchange = function() {
 window.open( this.options[ this.selectedIndex ].value, "_self" );
 };
 </script>';

 return $string;
 } 
 add_shortcode('rp_dropdown', 'wpb_recentposts_dropdown');
 add_filter('widget_text','do_shortcode');

現在您可以在 WordPress 文章、頁面和文本小工具中使用短代碼 [rp_dropdown]。它看起來像這樣：

使用插件添加可折疊的最近文章

上述方法僅僅是將最近文章以下拉形式列表顯示。另一種節省空間的方法是使用可折疊的最近文章列表，當用戶點擊時展開。首先，您需要安裝並激活 Collapse-O-Matic 插件。該插件即插即用，無需配置設置。該插件允許您使用短代碼在可折疊菜單中顯示任何內容。

在使用該插件之前，我們需要一種方法來輕鬆地在任何地方顯示最近文章。只需將下面的代碼添加到您的主題的 functions.php 文件或站點特定的插件中。

function wpb_recentposts() {
 $string .= '<ul>';
 $args = array( 'numberposts' => '5', 'post_status' => 'publish' );
 $recent_posts = wp_get_recent_posts($args);
 foreach( $recent_posts as $recent ){
 $string .= '<li><a href="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"].'</a></li> ';
 }
 $string .= '</ul>';
 return $string;
 }
 add_shortcode('recentposts', 'wpb_recentposts');
 add_filter('widget_text','do_shortcode');

這段代碼允許您使用短代碼 [recentposts] 顯示最近文章列表。現在我們將短代碼添加到 Collapse-O-Matic 短代碼中，創建一個可折疊的最近文章列表。只需這樣添加短代碼：

[expand title=”最近文章”][recentposts][/expand]

您可以將此短代碼添加到文本小工具、WordPress 文章或頁面中。我們的測試站點中，它看起來是這樣的。

就是這樣，我們希望這篇文章幫助您在 WordPress 中以下拉清單顯示最近文章。您可能還希望查看這6條創建殺手級編輯日曆的技巧。如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。

什麼是 Ghost 按鈕？

Ghost 按鈕是一種網站設計術語，用於指代那些融合到背景中的透明按鈕，這些按鈕只能通過它們周圍的邊框來辨認。

在 WordPress 中添加 Ghost 按鈕

如前所述，您需要使用一點點 CSS 和 HTML 來在您的 WordPress 主題中添加 Ghost 按鈕。首先，您需要將以下 CSS 代碼添加到您的主題或子主題的樣式表中。

您將需要一個 FTP 客戶端來連接到您的網絡伺服器。一旦連接，導航到 /wp-content/themes/Your-Theme/ 資料夾並定位 style.css 文件。打開這個文件並在文本編輯器中進行編輯，然後將此代碼片段粘貼到文件的底部。

.ghost-button {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
              color 0.2s ease-out;
}
.ghost-button:hover,
.ghost-button:active {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s ease-in,
              color 0.3s ease-in;
}

保存您的更改並將文件重新上傳到伺服器。現在每當您想要顯示按鈕時，只需添加 class=”ghost-button”。

例如，如果您想添加一個下載連結，請像通常一樣創建您的下載連結。接下來，切換到文本編輯器以查看 HTML 格式。

找到您的下載連結的 HTML 代碼，並像這樣添加 CSS 類別：

立即下載

保存或更新您的帖子，然後預覽它。您將看到一個美麗的 Ghost 按鈕，而不是普通的鏈接。

我們希望這篇文章幫助您瞭解如何在您的 WordPress 主題中添加 Ghost 按鈕。您可能還想查看我們的指南，瞭解如何在不使用短代碼的情況下在 WordPress 中添加按鈕。如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您還可以在 Twitter 和 Facebook 上找到我們。

為什麼要在WordPress主題中為文章添加奇數/偶數類別？

許多WordPress主題使用奇數或偶數類別來標示評論，以幫助用戶視覺化每個評論的區分。同樣，您也可以使用這種技術來為您的WordPress文章添加類別。不僅美觀，而且有助於用戶快速瀏覧包含大量內容的頁面，特別適合雜誌或新聞網站的首頁。

如何在WordPress主題中為文章添加奇數/偶數類別

WordPress會自動生成默認的CSS類別並動態添加到網站的不同項目中，這些CSS類別幫助插件和主題開發者添加自定義樣式。

WordPress也提供了一個叫做 post_class 的函數，主題開發者常用這個函數來為文章項目添加類別。 post_class 也是一個過濾器，這意味著您可以將自己的函數掛鉤到它上面。我們將在這裡介紹具體做法。

只需將以下代碼添加到您主題的 functions.php 文件中，或在一個站點專用的插件中，或者在代碼片段插件中：

function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'even' : 'odd';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';

使用WPCode插件添加代碼

我們建議使用WPCode插件來添加這些代碼，它是最好的代碼片段插件之一，安全且方便。

首先，您需要安裝並啟用免費的WPCode插件。具體的安裝方法請參考這篇指南： 如何安裝WordPress插件。

啟用後，進入 WordPress 儀表板的 代碼片段 » 添加片段 頁面。然後，在“添加自定義代碼（新片段）”選項下點擊“使用片段”按鈕。

接下來，給您的代碼片段起一個名字，幫助您記住這段代碼的用途。把上面的代碼粘貼到“代碼預覽”框中，並從右側下拉列表中選擇“PHP代碼片段”作為代碼類型。

之後，將開關從“未激活”切換到“激活”，然後點擊“保存片段”按鈕。

為奇數/偶數類別添加樣式

現在您已經為文章添加了奇數和偶數類別，下一步就是使用CSS進行樣式設置。您可以將自定義的CSS添加到子主題的樣式表、主題定制器，或使用WPCode插件。

以下是一個示例的CSS，可以作為開始的基礎：

.even {
background:#f0f8ff;  
} 
.odd {
background:#f4f4fb;
}

如果您不知道如何使用CSS，請參考我們的指南： 如何簡單地添加自定義CSS到您的WordPress網站。

希望本文幫助您學會如何在WordPress主題中為文章添加奇數/偶數類別。您可能還會對我們的其他指南感興趣，例如如何設計您的WordPress評論佈局和我們推薦的最佳WordPress頁面構建器。

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

何時需要更改 WordPress 的預設側邊欄位置

側邊欄是通常位於 WordPress 網站主內容區域左邊或右邊的一個欄位。在經典的 WordPress 主題中，側邊欄本質上是一個小工具區域，您可以使用 WordPress 小工具添加各種元素，如聯絡表單、搜索欄、社交媒體動態、最新文章等。儘管區塊主題不使用小工具，但“側邊欄”一詞仍常用於描述該特定區域，通常顯示額外內容或導航選項。

有時候，您可能會因應不同需求而需要更改側邊欄的位置。例如，一些網站的用戶閱讀習慣是從右到左，此時將側邊欄放在左側可能更適合他們的閱讀習慣，或是您運行的是電子商務網站，並注意到潛在客戶專注網頁的方式，您希望調整網站佈局，以便讓他們在瀏覽網站時更舒適。

某些網站設計可能也需要特定位放置側邊欄，以達到平衡及視覺上吸引人的佈局效果。

方法1：使用 WordPress 自定義器更改側邊欄位置（經典主題）

此方法適用於使用經典主題的用戶，您仍然可以使用 WordPress 自定義器來設計網站佈局。如果自定義器在您的 WordPress 儀表板中缺失，您可能使用的是區塊主題，需要跳到第三種方法。

首先，前往外觀 » 自訂。我們以 Astra 主題為例。

在這裡，我們看到 Astra 主題具有一個特殊的“側邊欄”選單。我們點擊它。

如您所見，Astra 擁有三個頁面佈局模板：一個無側邊欄、一个左側邊欄、一個右側邊欄。這允許我們通過點擊一次來更改側邊欄位置。此處，我們將側邊欄更改為左側。Astra 還提供更改側邊欄樣式、調整寬度及設定固定選項。

進行更改後，您可以像往常一樣在側邊欄添加可用的小工具。更多資訊，請參閱我們如何在 WordPress 中添加和使用小工具的指南。然後，只需點擊“發布”。

方法2：通過編碼更改側邊欄位置（經典主題）

如果您的經典主題沒有多個側邊欄選項，您可以使用 CSS 編碼手動更改側邊欄位置。我們建議使用暫存網站或子主題來嘗試此方法，這樣即使發生錯誤也不會影響您的父主題和/或線上網站。使用子主題還可以防止在主題更新時覆蓋您的更改。

步驟 1：使用檢查工具定位側邊欄 CSS 類別

首先，打開您的網站。然後，將滑鼠指針懸停在側邊欄區域並使用瀏覽器的檢查工具。如果您使用的是 Chrome，只需在該區域右鍵選擇“檢查”。

現在，將滑鼠指針懸停在頁面右上角的 HTML 和 CSS 行上。當您看到整個側邊欄區域突出顯示時，點擊該行。對我們而言，它是

WordPress 主題小抄初學者指南

更新日期：2018 年 3 月 27 日 | 編輯部審核

您是否正在尋找一份 WordPress 主題小抄，以便快速修改您的主題或創建新的自定義主題？WordPress 提供了許多內建的模板標籤，您可以利用這些標籤快速入門。在本文中，我們將分享一份適用於初學者的 WordPress 主題小抄。

開始之前

WordPress 配備了一個強大的模板引擎，允許主題開發者為 WordPress 網站創建漂亮的設計。您可以為您的網站安裝免費或付費的 WordPress 主題。

每個 WordPress 主題都提供多種自定義選項，這些選項允許您更改顏色、添加頁眉圖片、設置導航菜單等。然而，您仍然受限於主題支持的功能。有時您可能希望對 WordPress 主題進行一些需要編碼的微調。為此，您需要了解一些基本的 PHP、HTML 和 CSS。

首先，您需要熟悉 WordPress 的幕後運作以及主題模板。接下來，有一些最佳實踐可以遵循，例如，創建子主題而不是直接修改主題文件。

您還可以通過在電腦上安裝 WordPress 來練習您的主題設計。話不多說，讓我們來看看為初學者準備的 WordPress 主題小抄。

基本的 WordPress 主題模板

每個 WordPress 主題由不同的文件組成，這些文件稱為模板。所有的 WordPress 主題必須包含樣式表（style.css）和索引文件（index.php），但通常它們還有很多其他文件。

以下是每個主題基本文件的列表：

style.css
header.php
index.php
sidebar.php
footer.php
single.php
page.php
comments.php
404.php
functions.php
archive.php
searchform.php
search.php

如果您正在構建自己的主題，您可以從一個 WordPress 初始主題開始，這些主題帶有準備好使用的 WordPress 模板文件和 CSS，可供您繼續構建。

標題中的模板標籤

WordPress 提供了許多方便的函數，可用於在您的主題中輸出不同的內容，這些函數稱為模板標籤。第一個也是所有標準符合的 WordPress 主題中最重要的函數之一叫做 wp_head，樣例如下：

這段代碼獲取所有必要的 HTML，將其添加到每個頁面的 部分。這對於許多 WordPress 插件的正常運行至關重要。

以下是您通常在主題的 header.php 文件中會找到並使用的模板標籤列表。然而，您可以在需要時在主題的其他地方使用它們。

// 網站名稱

// 特定頁面的標題

// 網站的確切 URL

// 網站的描述

// 主題文件的位置

// 樣式表的位置

// 網站的 RSS Feed URL

// 網站的 Pingback URL

// WordPress 版本號

其他主題文件中的模板標籤

現在讓我們來看看一些其他常用的模板標籤及其功能。

以下模板標籤用於調用和包含其他模板。例如，您的主題的 index.php 文件會使用它們來包括頭部、頁腳、內容、評論和側邊欄模板。

// 顯示 header.php 文件的內容

// 顯示 footer.php 文件的內容

// 顯示 sidebar.php 文件的內容

// 顯示 comment.php 文件的內容

以下模板標籤用於在 WordPress 循環內顯示內容、摘要和帖子元數據。

// 顯示帖子內容

// 顯示帖子的摘要

// 顯示特定帖子的標題

// 顯示特定帖子的連結

// 顯示帖子的分類

// 顯示帖子的作者

// 顯示帖子的 ID

// 顯示編輯帖子的連結，僅對具有編輯權限的登錄用戶可見

// 下一頁的 URL

// 上一頁的 URL

側邊欄中的模板標籤

WordPress 主題具有稱為側邊欄的小工具就緒區域，這些是主題文件中允許用戶拖放 WordPress 小工具的位置。通常主題有多個允許用戶添加小工具的位置。

然而，最常見的小工具區域位於主題佈局的右側或左側欄。請參見我們的有關如何在 WordPress 主題中添加動態小工具就緒側邊欄的指南。

以下是用於在主題中顯示側邊欄的代碼。

<?php
if ( ! is_active_sidebar( ‘sidebar-1’ ) ) {
return;
}
?>

您需要將 sidebar-1 替換為主題為特定小工具就緒區域或側邊欄定義的名稱。

顯示導航菜單的模板標籤

WordPress 帶有一個強大的菜單管理系統，允許用戶為其網站創建導航菜單。一個 WordPress 主題可以有多個導航菜單位置。

請參見我們的有關如何在 WordPress 主題中創建自定義導航菜單的指南。

以下是用於在主題中顯示導航菜單的代碼。

<?php
wp_nav_menu( array (
‘theme_location’ => ‘my-custom-menu’,
‘container_class’ => ‘custom-menu-class’ ) );
?>

主題位置取決於主題用於註冊導航菜單的名稱。CSS 容器類可以稱為您喜歡的任何名稱。它將圍繞您的導航菜單，以便您可以相應地對其進行樣式設置。

其他常用模板標籤

以下是您將在 WordPress 主題中常用的一些標籤。

// 顯示帖子發布日期

// 顯示最後一次修改時間
get_the_modified_time
// 顯示帖子的最後修改時間

// 顯示帖子的縮略圖或特色圖片

// 顯示每月的存檔

// 顯示分類列表

// 顯示用戶的 Gravatar 圖像
// 32 像素是大小，您可以根據需要更改

// 顯示當前帖子作者的 Gravatar 圖像

WordPress 主題中的條件標籤

條件標籤是返回結果為 True 或 False 的函數。這些條件標籤可以在您的主題或插件中使用，以查看是否滿足某些條件，然後相應地執行操作。

例如，檢查當前帖子是否有特定圖片。如果沒有，您可以顯示一個默認的特色圖片。

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo ‘<img src="' . get_bloginfo( 'stylesheet_directory' )
. ‘/images/thumbnail-default.jpg” />’;
}
?>

以下是一些您可以使用的條件標籤。

// 檢查是否正在顯示個別帖子
is_single()
// 檢查是否正在顯示頁面
is_page()
// 檢查是否顯示主博客頁面
is_home()
// 檢查是否顯示靜態首頁
is_front_page()
// 檢查當前查看者是否已登錄
is_user_logged_in()

還有許多其他條件標籤可供使用。條件標籤的完整列表可以在 WordPress Codex 頁面上的條件標籤部分找到。

WordPress 循環

循環或 WordPress 循環是用於獲取和顯示帖子代碼。許多 WordPress 模板標籤可能僅在循環內工作，因為它們與帖子或 post_type 對象相關聯。

以下是一個簡單的 WordPress 循環示例。

<?php
// 檢查是否有匹配查詢的帖子
if (have_posts()) :
// 如果有匹配查詢的帖子，則開始循環
while ( have_posts() ) : the_post();
// 循環中間的代碼將為每個帖重複
?>
<h2 id="post-“><a href="” rel=”bookmark” title=”Permanent Link to “>

發布於： 由

分類於： | 標籤： | <a href="” title=”Leave a comment”>評論

<?php
// 當所有帖子顯示完時停止循環
endwhile;
// 如果未找到任何帖子
else :
?>

對不起，沒有匹配您查詢的帖子。

<?php
endif;
?>

要了解更多關於循環的知識，請查看什麼是 WordPress 循環（信息圖表）。

我們希望這篇文章能幫助您作為初學者的 WordPress 主題小抄。您可能還希望查看我們列表中的 WordPress 功能文件的最有用技巧。

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

什麼是 WordPress 中的自定義欄位

自定義欄位允許您將額外的元數據添加到您的 WordPress 文章中，然後與您的文章內容一起顯示。您可以通過在「屏幕選項」下啟用自定義欄位元框來添加自定義欄位。您還可以在 WordPress 中創建自定義元框，為自定義欄位提供更好的用戶界面。

有關更多詳細信息，請參閱我們的WordPress 自定義欄位初學者指南。由於自定義欄位向文章添加元數據，這些數據可以輕鬆地與其他文章內容一起顯示在 WordPress 迴圈內。不過，有時您可能想在迴圈外顯示它們，例如在側邊欄小工具中。這時候事情就變得有些棘手了。

在 WordPress 迴圈以外顯示自定義欄位數據

我們實際上要向您展示如何在不影響主迴圈的情況下，在 WordPress 主題中使用多個迴圈來顯示自定義欄位數據。

這篇文章需要您將代碼添加到您的 WordPress 主題文件中。如果您之前沒有這樣做過，那麼您可以參考我們的指南，學習如何在 WordPress 中複製和粘貼代碼。

您需要將以下代碼添加到您的主題文件中您希望顯示自定義欄位數據的地方。

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'Your-Custom-Field', true);
wp_reset_query();
?>

該代碼只是加載全局變量 $wp_query 來獲取文章 ID。然後，它使用 get_post_meta() 函數來提取和輸出您的自定義欄位數據。不要忘記將 Your-Custom-Field 替換為您的實際自定義欄位。

您可以自定義代碼以匹配您的需求。您還可以使用其他查詢參數來提取和顯示不同文章和頁面的自定義欄位數據。

讓我們來看看另一個例子。這個例子使用 WP_Query 類，這是一種在您的 WordPress 主題文件中使用多個迴圈的更好且更靈活的方法。

只需將這段代碼添加到您的主題或子主題中您希望顯示自定義欄位的地方。

$args = array ( 
// Post or Page ID
'p' => 231,
);

// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo get_post_meta( get_the_ID(), 'Mood', true);
}

/* Restore original Post Data */
wp_reset_postdata();
} else {
echo 'Nothing found';
}

不要忘記將 Mood 替換為您的自定義欄位名稱，並將文章 ID 替換為您自己的文章或頁面 ID。

就是這樣。

我們希望這篇文章能幫助您了解如何在 WordPress 迴圈以外顯示自定義欄位。您可能還想查看我們的初學者 WordPress 主題備忘單。

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

如何在 WordPress 上避免重複帖子顯示與多個循環

最後更新日期：2024年4月30日 | 編輯部 | 評審：Syed Balkhi

您是否想解決在 WordPress 上使用多個循環時出現的重複帖子顯示問題？

如果您使用多個 WordPress 查詢來顯示不同的帖子集，那麼可能會遇到重複內容。這是因為某些帖子可能符合多個循環的條件，並因此出現兩次。

在這篇文章中，我們將向您展示如何輕鬆地避免在多個循環中顯示重複的帖子。

重複帖子如何在多個 WordPress 循環中出現

當您在建立自訂的 WordPress 主題或客製頁面範本時，有時候可能需要使用多個 WordPress 循環。例如，您可能希望在網站的熱門帖子旁展示最新的帖子。藉由展示每個類別的所有帖子，您也可以幫助讀者找到有趣的內容。

在所有這些示例中，單個帖子可能符合多個循環的條件。當這種情況發生時，WordPress 會顯示重複的內容。這些重複的內容會讓您的網站看起來雜亂無章，並佔據屏幕空間卻未能增加價值。由於您是動態地為每個循環生成帖子，無法手動預測是否會在多個循環中出現重複的帖子。

在多個 WordPress 循環中避免重複帖子

在本指南中，我們將展示一些導致重複帖子錯誤的範例 WordPress 代碼，然後分享一個解決問題的代碼片段。

當創建 WordPress 子主題或自訂範本時，您的代碼可能完全不同。然而，您可以使用我們的代碼片段作為起點，然後修改它以適應您的網站。

首先，我們來創造一個重複的帖子問題。在以下的範例代碼中，我們展示了 ‘travel’ 類別下的所有帖子和 ‘news’ 類別下的所有帖子，並沒有避免重複的帖子：

/******  The First Query ******/
$first_query = new WP_Query(  array (
'category_name' => 'news',
'posts_per_page'  =>  3
));
// The Loop
if ( $first_query->have_posts() ) {
 echo '<ul>';
 while ( $first_query->have_posts() ) {
 $first_query->the_post();
 //display posts
 echo '<li>';
 echo the_post_thumbnail( array(50, 50) );
 echo get_the_title();
 echo '</li>';
}
 echo '</ul>';
} else {
 // no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
/******  The Second Query ******/
$second_query = new WP_Query(  array (
'category_name' => 'travel',
'posts_per_page'  =>  3
));
// The Loop
if ( $second_query->have_posts() ) {
 echo '<ul>';
 while ( $second_query->have_posts() ) {
 $second_query->the_post();
 echo '<li>';
 echo the_post_thumbnail( array(50, 50) );
 echo get_the_title();
 echo '</li>';
}
 echo '</ul>';
} else {
 // no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
?

如您所見，這段代碼在任何一個查詢中都沒有檢查是否有重複的帖子。如果一篇帖子同時屬於 ‘news’ 和 ‘travel’ 類別，那麼它將顯示兩次。

現在我們來解決這個問題。

為了避免在您的 WordPress 部落格上出現重複的帖子，您需要臨時存儲在第一個循環中顯示的所有帖子的數據。一旦有了這些信息，您就可以修改第二個查詢，讓重複的帖子不會出現在第二個循環中：

/******  The First Query ******/
$first_query = new WP_Query(  array (
'category_name' => 'news',
'posts_per_page'  =>  3
));
// The Loop
if ( $first_query->have_posts() ) {
 echo '<ul>';
 while ( $first_query->have_posts() ) {
 $first_query->the_post();
 // Store Post IDs in an Array to reuse later
 $exclude[] = $post->ID;
 //display posts
 echo '<li>';
 echo the_post_thumbnail( array(50, 50) );
 echo get_the_title();
 echo '</li>';
}
 echo '</ul>';
} else {
 // no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
/******  The Second Query ******/
$second_query = new WP_Query(  array (
'category_name' => 'travel',
'post__not_in'  =>  $exclude, // Tell WordPress to Exclude these posts
'posts_per_page'  =>  3
));
// The Loop
if ( $second_query->have_posts() ) {
 echo '<ul>';
 while ( $second_query->have_posts() ) {
 $second_query->the_post();
 echo '<li>';
 echo the_post_thumbnail( array(50, 50) );
 echo get_the_title();
 echo '</li>';
}
 echo '</ul>';
} else {
 // no posts found
}
/* Restore original Post Data */
wp_reset_postdata();
?

在上面的代碼中，我們將帖子的 ID 存儲在一個名為 $exclude 的數組中。之後，我們在第二個查詢中添加了 post__not_in 參數，這將排除在第一個循環中顯示的帖子。

如果您不熟悉如何向您的網站添加代碼片段，那麼使用 WPCode 可能是更簡單的方法。這是目前最好的 WordPress 代碼片段插件，可以幫助您在不冒險破壞網站的情況下添加自訂代碼。

首先，您需要安裝並激活 WPCode 插件。如果您需要幫助，請參閱我們的 WordPress 插件安裝指南。激活後，您可以從 WordPress 儀表板中進入 Code Snippets + Add Snippet，然後點擊 ‘Add Your Custom Code (New Snippet)’ 選項。

之後，您可以將自訂代碼粘貼到 Code Preview 區域，並在頂部輸入一個標題。您還需要選擇 ‘Code Type’ 為 PHP Snippet，點擊下拉菜單選擇。輸入代碼後，向下滾動至 Insertion 部分。這裡，您可以使用默認設置 ‘Auto Insert’，讓插件自動將代碼添加到您的網站上。完成後，僅需保存片段並激活它。更多詳細信息，請參閱我們的 WordPress 自訂代碼添加指南。現在，訪問您的 WordPress 網站，您將會發現重複的帖子已經消失了。

我們希望這篇文章幫助您學習如何在 WordPress 上避免重複帖子顯示與多個循環。您可能還想看看我們的最佳網頁設計軟件指南，或我們專家精選的最佳拖放式 WordPress 頁面構建器。如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲得更多 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。