您是否想在 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 上找到我們。