WordPress 主题 - WPressize Me

Home
Category: WordPress 主题

WordPress 主题

如何建立適合手機的響應式WordPress選單

為什麼要建立適合手機的響應式WordPress選單？

一個設計良好的導航選單能幫助訪客快速找到他們需要的內容。然而，一個在桌面電腦上看起來很好的選單，不一定能在手機和平板電腦上呈現同樣的效果。行動裝置的使用者佔據了大約58%的網絡流量，因此若你的選單在行動裝置上無法正常顯示，將會嚴重影響用戶體驗，進而降低你的轉換率。

這將使你難以達成如增長電子郵件名單、促成銷售和推動業務增長等關鍵目標。因此，我們將教你如何創建一個在智慧手機和平板電腦上都能美觀運作的響應式選單。你可以使用以下的方法直接跳轉到你想使用的部分。

方法一：建立適合手機的響應式滑動面板選單

滑動面板是一種導航選單，當訪客點擊或觸碰切換按鈕時，選單會滑入屏幕。這樣，選單始終易於訪問，但不會佔用屏幕空間，這對於較小螢幕的裝置來說尤其重要。

添加滑動面板的最簡便方法是使用Responsive Menu外掛。雖然該外掛有高級版本，但我們將使用其免費版，因為它提供了建立響應式選單所需的一切功能。

首先，你需要安裝並啟用Responsive Menu外掛。更多詳細信息，請參考我們的WordPress外掛安裝教程。啟用後，你可以使用該外掛自訂任何你之前創建的WordPress選單。如果你需要創建新的選單，請參考我們的初學者導航選單指南。

若你的主題已包含內建的手機選單，你需要知道該選單的CSS類名以便隱藏它。若跳過這一步，手機用戶將會看到兩個重疊的選單。詳盡的步驟，請參見我們的指南。

完成上述步驟後，前往WordPress管理側邊欄的Responsive Menu » Menus頁面，點擊「Create New Menu」按鈕。你會看到一些可用於選單的手機響應主題。我們使用「Default Theme」，但你可以選擇任何你喜歡的主題。

接下來，為選單輸入一個名字。這僅供參考，因此你可以使用任意名稱。你還需要點擊「Link WordPress Menu」並選擇你要使用的選單。

若你的主題已包含內建的手機選單，請將其CSS類名填入「Hide Theme Menu」字段。高級版使用者可以使用額外的設定，如隱藏某些頁面或裝置上的選單。

完成設定後，點擊「Create Menu」。你會在屏幕右側看到WordPress網站的預覽圖，左側是一些設定選項。若要查看手機上的網站狀態，點擊左下角的手機或平板圖示。

然後，選擇「Mobile Menu」，並點擊「Container」。在此，你可以找到各種設定項目。當你進行更改時，即時預覽通常會自動更新，這有助於你監控手機選單的外觀。

預設情況下，外掛會添加標題和一些「Add more content…」文字。你可以用自己的訊息替換這些文字，或完全刪除它們。點擊展開「Title」區域，自訂標題文字。接下來，你可以更改背景色、文字色、字體大小等。

若不需要標題文字，可以停用「Title」。沒有標題文字，會為手機導航選單中的鏈接和其他內容騰出更多空間。

類似地，若想更換「Add more content here…」文字，展開「Additional Content」區域，你可以輸入自己的文字、更改文字色、對齊方式等。若要完全刪除文字，只需停用相應選項，這在螢幕較小的手機和平板電腦上尤其有用。

預設情況下，Responsive Menu會將所有選單項目顯示為單列表形式。若選單短標籤較多，你可能會傾向於多列佈局，這樣可以在不顯得凌亂的情況下顯示更多項目。試試不同的列佈局，點擊展開「Menu」區域，選擇「Menu container columns」下拉選單中的列數。

此外，外掛還會在WordPress選單中添加搜索框，這雖然有助於訪客找到感興趣的內容，但也會佔用屏幕空間。若更喜歡，可以停用搜索框。

配置完選單後，點擊「Update」。然後，用手機訪問你的WordPress網站看看新選單的效果。

方法二：建立適合手機的全螢幕響應選單

另一種選項是添加全螢幕響應選單。這種選單會自動適應不同的螢幕大小，因此無論訪客使用何種裝置，導航選單都能保持良好外觀。

建立全螢幕選單的最簡便方法是使用FullScreen Menu外掛。啟用後，訪問「Fullscreen Menu Options」頁面，勾選「Activate Animated Fullscreen Menu」。我們建議先勾選「Show the menu only for Admin users」箱子，以便在配置選單時訪客不會看到變更。

預設情況下，該外掛會在所有裝置上顯示全螢幕選單。如果只想在智慧手機和平板電腦上顯示，勾選「Mobile only」。接下來，點擊「Design / Appearance」選項卡配置顏色、字體和動畫設定。

選擇完顏色後，滾動到「Menu Appearance」區域更改字體顏色、字體系列和字體大小。選擇額外字體可能會影響網站性能和加載速度，這對於處理能力較弱的手機裝置和網速較差的移動網絡連接來說並不理想。

設定完動畫效果後，點擊「Menu Content」選項卡添加內容。打開「Select Menu」下拉選單，選擇希望顯示的選單。如果沒有建立導航選單，請參見我們的導航選單指南。

如果希望在選單中顯示額外內容，可以將它們添加到「Free HTML / Shortcodes」框中。此外，你可以勾選選項添加隱私政策頁面的鏈接，還可以添加社交媒體圖示和搜索框等。

配置好選單後，點擊「Save Changes」，用手機訪問你的网站查看選單效果。

額外提示：如何將響應式選單添加到登陸頁面

如果你正在創建登陸頁面或銷售頁面，則需要確保其在行動裝置上同樣美觀。我們建議使用SeedProd，它是最好的WordPress頁面建立工具，擁有超過300個專業設計模板。

使用SeedProd創建設計後，你可以使用Nav Menu區塊將響應式選單添加到頁面。這個區塊允許你為行動裝置和桌面電腦創建不同的選單，甚至可以根據用戶的裝置顯示不同的鏈接。

欲了解更多信息，請參見我們的指南。添加Nav區塊後，點擊高級選項卡，展開「Device Visibility」區域，然後激活「Hide on Desktop」選項。

我們希望這篇文章能幫助你學會如何建立適合手機的響應式WordPress選單。你或許還會對我們的初學者指南如何增加博客流量或專家推薦的最佳分析解決方案感興趣。若你喜歡這篇文章，請訂閱我們的YouTube頻道以獲取更多WordPress視頻教學，同時也可以在Twitter和Facebook上關注我們。

WordPress 主题

如何在網站標頭添加 WordPress 小工具（兩種方法）

您的網站標頭是訪問者訪問您的 WordPress 網站時看到的第一個部分。通過將 WordPress 小工具添加到標頭，您可以優化這個區域以幫助吸引讀者的注意。大多數網站標頭都會包含一個自定義標誌和導航菜單，以幫助訪問者瀏覽您的網站。您還可以在這個區域的上方或下方添加一個標頭小工具，以展示有用的內容、橫幅廣告、限時優惠、單行表單等。

在 WPressize Me，我們在導航菜單的下方直接添加了呼籲行動的標頭。

大多數 WordPress 主題都在側邊欄和頁腳區域提供小工具就緒區域，但並非每個主題都在標頭添加小工具就緒區域。

編者註：如果您的主題沒有小工具就緒的標頭區域，您現在可以從頭開始創建完全自定義的 WordPress 主題（無需任何編碼）。

首先，讓我們一步步了解如何在現有主題的網站標頭添加 WordPress 小工具。您可以使用以下快速鏈接直接跳轉到您要使用的方法：

方法 1：在 WordPress 主題設置中添加 WordPress 小工具到您的網站標頭
方法 2：通過添加代碼到 WordPress 在網站標頭中添加 WordPress 小工具

方法 1：在 WordPress 主題設置中添加 WordPress 小工具到您的網站標頭

許多最佳的 WordPress 主題包括一個可自定義的標頭小工具區域。首先，您需要查看當前的 WordPress 主題是否支持標頭中的 WordPress 小工具區域。您可以通過訪問 WordPress 主題自定義器或 WordPress 管理面板的小工具區域來找到它。導航到 外觀 » 自定義，查看是否有編輯標頭的選項。

注意：如果您使用的是區塊主題，則不會在管理側邊欄中看到此選項。相反，您應該參考我們的關於如何使用 WordPress 全站編輯器自定義標頭的指南。

在這個示例中，免費的 Astra 主題有一個名為「Header Builder」的選項。我們將向您展示如何在 Astra 中使用此功能，但請注意，這會根據您使用的主題而有所不同。

如果您點擊它，它會將您帶到一個編輯標頭並添加小工具的屏幕。在屏幕底部，您可以完全自定義標頭以及標頭上下方的區域。只需將鼠標懸停在空白區域之一上，然後點擊「加號」圖標。

這會彈出一個菜單，您可以在其中選擇「Widget 1」。還有其他選項可供選擇，但您需要選擇一個「小工具」選項來讓標頭支持小工具。

要添加小工具區域到標頭，請點擊標頭自定義器部分中的「Widget 1」框。這會彈出一個添加小工具的選項。接下來，點擊左側菜單中的「加號」圖標。這會彈出一個窗口，您可以在其中選擇要添加到標頭的小工具。

您可以繼續自定義標頭並添加任意多的小工具。一旦完成，請確保點擊「發布」按鈕以保存您的更改。現在，您可以查看添加了小工具後的標頭區域。

這是我們演示網站上顯示的樣子。

不使用 Astra？

要查看您的主題是否已經有一個 WordPress 標頭小工具，您可以導航到 WordPress 管理面板中的 外觀 » 小工具。看看是否有標為「標頭」或類似名稱的小工具區域。如果有，則只需點擊「加號」圖標以彈出小工具菜單。然後，您可以點擊要添加的小工具。

確保點擊「更新」按鈕以保存您對標頭小工具區域的更改。

方法 2：通過添加代碼到 WordPress 在網站標頭中添加 WordPress 小工具

如果您的 WordPress 主題在標頭中沒有小工具區域，則您需要通過添加代碼到 WordPress 來手動添加。如果您之前沒做過，請查看我們的指南，了解如何在 WordPress 中複製和粘貼代碼。

然後，您可以將以下代碼片段添加到 functions.php 文件中，或使用代碼片段插件如 WPCode（推薦）：

function wpb_widgets_init() { register_sidebar( array( 'name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => '', 'after_widget' => '
', 'before_title' => '', 'after_title' => '
', ) ); } add_action( 'widgets_init', 'wpb_widgets_init' );

此代碼會為您的主題註冊一個新的側邊欄或小工具就緒區域。如果您導航到 外觀 » 小工具，則會看到一個標為「Custom Header Widget Area」的新小工具區域。現在，您可以將小工具添加到這個新區域。了解詳情，請查看我們的指南，了解如何在 WordPress 中添加和使用小工具。

在 WordPress 中顯示您的自定義標頭小工具

現在，您已經創建了標頭小工具區域，您需要告訴 WordPress 在網站上顯示該區域。為此，您需要編輯主題的 header.php 文件。接下來，將以下代碼添加到您要顯示小工具的位置：

<?php if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>  <?php dynamic_sidebar( 'custom-header-widget' ); ?> 
 <?php endif; ?>

此代碼會將您早前創建的小工具區域添加到網站標頭區域。現在，您可以訪問您的 WordPress 博客查看已激活的標頭小工具區域。

使用 CSS 樣式化您的 WordPress 標頭小工具區域

根據您的主題，您可能還需要添加 CSS 到 WordPress 以控制標頭小工具區域和其中每個小工具的顯示方式。這可以通過以下幾種方式完成：

如果您使用的是舊版主題，則可以通過訪問 WordPress 儀表板中的 外觀 » 自定義 使用主題自定義器。
如果您使用的是區塊主題，則可以在 WordPress 管理中修復缺失的主題自定義器。
如果您使用的是區塊主題，則可以通過訪問儀表板中的 外觀 » 編輯器 使用全站編輯器來添加額外的 CSS。
您可以使用 WPCode 插件添加自定義 CSS（推薦）。
如果您不懂 CSS，您可以使用像 CSS Hero 這樣的插件。

了解更詳細信息，請查看我們的指南，了解如何輕鬆地將自定義 CSS 添加到您的 WordPress 網站。

在上面的方法 2 中，我們向您展示了如何使用 WPCode 向 functions.php 文件添加代碼片段。您還可以使用此插件添加自定義 CSS。創建新片段時，請確保從右側下拉菜單中選擇代碼類型「CSS 片段」，並確保選擇了「自動插入」選項。

在代碼預覽部分，您需要添加用於樣式化標頭小工具的 CSS。這裡有一些示例 CSS 代碼以幫助您入門：

div#header-widget-area { width: 100%; background-color: #f7f7f7; border-bottom: 1px solid #eeeeee; text-align: center; padding: 20px; } h2.chw-title { margin-top: 0px; text-align: left; text-transform: uppercase; font-size: small; background-color: #feffce; width: 130px; padding: 5px; }

之後，確保切換到「激活」設置，然後點擊屏幕右上角的「保存片段」按鈕。要改用主題自定義器，請導航到 WordPress 管理面板中的 外觀 » 自定義。這會打開 WordPress 主題自定義器面板。請點擊「額外 CSS」標籤。

這允許您直接向主題添加額外 CSS 並實時查看更改。只需將我們前面展示的 CSS 代碼添加到「額外 CSS」框中。一旦完成添加 CSS，請確保點擊「發布」按鈕以保存更改。這就是應用了 CSS 更改後自定義標頭小工具的外觀。

我們希望這篇文章能幫助您了解如何將 WordPress 小工具添加到網站標頭。您可能還想查看我們關於如何選擇最佳 WordPress 託管的指南以及我們為小型企業精選的最佳實時聊天軟件。如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道，以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。

WordPress 主题

如何為 WordPress 選單項目添加第一和最後的 CSS 類別

為什麼要不同樣式化第一和最後的導航項目？

有時候，您可能需要為導航選單中的第一和最後項目添加自定義樣式，這樣可以讓一些重要的鏈接更加醒目，例如網站的聯絡表單或 WooCommerce 購物車頁面的鏈接。在這種情況下，您可以添加自定義的 CSS 類。不過，如果您在之後更改選單順序，這可能會完全破壞自定義樣式。

因此我們建議使用過濾器。在本指南中，我們將向您展示如何樣式化導航選單的第一和最後項目，這樣您可以在不破壞自定義樣式的情況下重新排列選單。

方法 1：使用過濾器添加第一和最後類（推薦）

注意：此方法僅適用於經典 WordPress 主題。如果您使用的是塊主題，請參考方法 2。

樣式化導航選單項目最簡單的方法是向主題添加過濾器。你會經常在 WordPress 教程中發現一些要添加到主題 functions.php 文件的代碼片段。

最大問題是，即使是自定義代碼片段中的一個小錯誤，也可能會破壞您的 WordPress 網站並使其無法訪問。更不用說，如果您更新 WordPress 主題，將會丟失所有自定義設置。

這就是 WPCode 插件的用處所在。這個免費插件可以讓您輕鬆向 WordPress 添加自定義 CSS、PHP、HTML 等，而不會讓您的網站面臨風險。

首先，您需要安裝並激活免費的 WPCode 插件。詳細信息請參考我們的分步指南如何安裝 WordPress 插件。啟動後，前往代碼片段 » 添加片段。

在這裡，簡單地懸停在 ‘添加自定義代碼’ 上。當它出現時，點擊 ‘使用片段’。

首先，為自定義代碼片段輸入一個標題，這可以是任何幫助您在 WordPress 儀表板中識別該片段的內容。

接下來，打開 ‘代碼類型’ 下拉菜單，選擇 ‘PHP 片段’。

您現在可以將以下 PHP 添加到代碼框中：

function wpb_first_and_last_menu_class($items) { $items[1]->classes[] = 'first'; $items[count($items)]->classes[] = 'last'; return $items; } add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

隨後，您準備好將頂部的 ‘待用’ 切換為 ‘啟用’。最後點擊 ‘保存片段’ 以使 PHP 片段生效。

這樣就為您的第一和最後的選單項目創建了 .first 和 .last CSS 類。您現在可以使用這些類來為這些項目應用獨特的樣式。

要實現這點，您需要向 WordPress 網站添加第二個片段。首先，按照上述相同的過程創建新的自定義代碼片段。

受此指南中，我們將簡單地將以下 CSS 格式化添加到代碼框中，使第一和最後選單項目加粗：

.first a {font-weight: bold;} .last a {font-weight: bold;}

完成後，點擊 ‘待用’ 切換到 ‘啟用’。最後點擊 ‘保存片段’ 以使 CSS 片段生效。

現在，如果您訪問您的網站，您將看到更新的選單已生效。

方法 2：使用 CSS 選擇器樣式化第一和最後項（適用於所有主題）

如果您不想使用插件，您可以使用 CSS 選擇器為第一和最後的選單項目進行樣式化。不過此方法可能不適用於某些較舊的瀏覽器，例如 Internet Explorer。鑑於此，建議您在不同的瀏覽器中測試您的 WordPress 網站。

要遵循此方法，您需要向主題樣式表或 WordPress 主題定制器的 ‘額外 CSS’ 部分中添加代碼。如果您之前沒有這樣做過，請參考我們的指南如何輕鬆向您的 WordPress 網站添加自定義 CSS。

首先是編輯主題的 style.css 文件，或前往外觀 » 自定義，然後點擊 ‘額外 CSS’。

接下來，添加以下代碼片段到您的網站：

ul#yourmenuid > li:first-child { } ul#yourmenuid > li:last-child { }

注意，您需要將 ‘yourmenuid’ 替換為導航選單的 ID。選擇器 ‘first-child’ 和 ‘last-child’ 選擇其父級的第一和最後子元素，也就是導航選單的第一和最後項。

例如，我們使用此代碼來加粗我們的 WordPress 部落格中的第一和最後導航菜單項：

ul#primary-menu-list > li:first-child a { font-weight: bold; } ul#primary-menu-list > li:last-child a { font-weight: bold; }

如果您使用的是 WordPress 塊主題，則在 WordPress 管理中將找不到主題定制工具。您需要在瀏覽器中輸入此 URL 以訪問主題定制工具：

https://yourdomainname.com/wp-admin/customize.php

請確保將域名替換為您的網站域名。然後像以前一樣打開 ‘額外 CSS’ 標簽並插入以下代碼。注意，這段代碼看起來有些不同，因為您不需要添加選單 ID。

li:first-child a, li:last-child a { background-color: black; border: none; color: white !important; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 12px; }

隨意根據需要自定義此代碼。在下面的例子中，我們將第一和最後的鏈接變成按鈕。效果如下：

希望本教程幫助您學習如何為 WordPress 導航選單添加 .first 和 .last 類。您可能還想看看我們的指南如何使用 WordPress 創建登陸頁面或查看我們推薦的最佳拖放式頁面構建器列表。

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

WordPress 主题

如何在 WordPress 中使用 Masonry 添加 Pinterest 風格的文章網格佈局

步驟 1：將必要的庫添加到主題中

首先，您需要使用以下代碼將 Masonry 加載到您的主題中：

if (! function_exists('slug_scripts_masonry') ) : if ( ! is_admin() ) : function slug_scripts_masonry() { wp_enqueue_script('masonry'); wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’); } add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' ); endif; //! is_admin() endif; //! slug_scripts_masonry exists

這段代碼加載了 Masonry 並使其可供您的主題模板文件使用。

步驟 2：初始化 JavaScript

下一個函數設置了 Masonry，定義了將與其一起使用的容器，並確保所有操作按正確順序進行。以下是頁腳輸出的初始化腳本：

if ( ! function_exists( 'slug_masonry_init' )) : function slug_masonry_init() { ?>


步驟 3：創建 Masonry 循環
創建一個名為 “content-masonry.php” 的新文件並將其添加到您的主題中，這將允許您將 Masonry 循環添加到任何不同的模板中。以下是代碼：




	
		
		
			
				Read More





	
		
		
			WordPress 主题
		
	


如何在 WordPress 中新增自訂字型

如何在 WordPress 中新增自訂字型
最後更新時間：2024 年 4 月 26 日
您想在 WordPress 中新增自訂字型嗎？自訂字型讓您可以在您的網站上使用美麗的不同字型組合來改善排版和使用者體驗。
除了外觀好看，自訂字型還能幫助您提高可讀性、建立品牌形象，並增加使用者在您 WordPress 網站上的停留時間。
在本文中，我們將展示如何使用 Google Fonts、TypeKit 以及 CSS3 @font-face 方法來新增自訂字型。
注意：載入過多的字型可能會減慢您的網站速度。我們建議選擇兩種字型並在整個網站中使用。我們也會展示如何正確地載入它們而不使網站變慢。
如何找到可在 WordPress 中使用的自訂字型
字型以前很貴，但現在不再如此。有許多地方可以找到優秀的免費網頁字型，如 Google Fonts、Adobe Fonts（前身為 Typekit）、FontSquirrel 和 fonts.com。
如果您不知道如何搭配字型，可以嘗試 Font Pair，它幫助設計師將美麗的 Google 字型搭配在一起。
挑選字型時，請記住使用過多的自訂字型會使您的網站變慢。因此，您應該選擇兩種字型並在整個設計中使用，這也會帶來設計的一致性。
在 WordPress 中新增 Google 字型
方法 1：使用 WordPress 插件新增 Google 字型
如果您想在網站上新增並使用 Google 字型，那麼這種方法對初學者來說是最簡單且最推薦的。
首先，您需要安裝並啟用Google Fonts Typography 插件。詳情請參閱我們的逐步指南。
優惠：如果您想獲得該插件的高級版本，請確保使用我們的Google Fonts for WordPress 優惠券享受 20% 折扣。這將讓您在 WordPress 主題中更改字型顏色和大小等更多功能。
啟用後，您將有機會輸入您的電子郵件地址以接收官方快速入門指南。
接下來，您需要在管理員側邊欄中點擊 Fonts Plugin » Customize Fonts。
這會自動帶您進入 WordPress 主題自訂器，並自動打開新的「Fonts Plugin」部分。
在這裡，您可以在「基本設定」部分選擇您網站的默認字型，並在「高級設定」部分的網站特定部分選擇字型。
首先，點擊「基本設定」。在這裡，您可以為內容、標題以及按鈕和欄位選擇字型。
「字型家族」下拉菜單讓您選擇新字型。您會在頂部找到默認字型，然後是系統字型，最後是一個包含超過 1400 種 Google 字型的巨大全單。
選擇新字型後，預覽會自動更改，顯示效果。
現在，您可以使用插件的高級設定來微調您的字型選擇。您需要點擊頁面左上角的「<」返回箭頭按鈕，然後點擊「高級設定」部分。
在這裡，您會找到不同網站部分的設定，例如網站標題、導航菜單、內容區域、側邊欄和頁腳。
例如，「內容」部分將提供更改不同標題級別和引用的字型選項。您可以從下拉菜單中選擇想要使用的自訂字型。
您可以以類似方式為側邊欄區域選擇自訂字型。只需點擊返回按鈕並進入「側邊欄」設置。那裡有下拉菜單可選擇側邊欄標題和內容的字型。
滿意您的自訂字型選擇後，別忘了點擊「發佈」按鈕保存更改。
方法 2：手動在 WordPress 中新增 Google 字型
此方法需要將代碼新增到 WordPress 主題文件中。如果您以前沒有做過這件事，請參閱我們的指南。
首先，瀏覽 Google 字型庫並選擇您要使用的字型。在字型頁面上，您會看到該字型的可用樣式。
選擇您想在項目中使用的樣式，然後點擊頁面頂部的「查看選擇的家族」按鈕。
這會打開一個側邊欄，您可以在其中複製嵌入代碼。
有兩種方法可以將此代碼新增到您 WordPress 網站中。
首先，您可以編輯主題的 header.php 文件，並將代碼粘貼在  標籤之前。
但是，如果您不熟悉 WordPress 中的代碼編輯，您可以使用插件新增此代碼。只需安裝並啟用 WPCode 插件。詳情請參閱我們的逐步指南。
啟用後，前往代碼片段 » 標頭和頁尾頁面，在「標頭」框中粘貼嵌入代碼。
別忘了點擊「保存變更」按鈕保存更改。插件現在會開始在網站所有頁面上載入 Google 字型嵌入代碼。
您可以在主題的樣式表中這樣使用這個字型：
.h1 site-title {font-family: 'Open Sans', Arial, sans-serif;}
有關詳細信息，請參閱我們的指南。
在 WordPress 中使用 Adobe 字型新增自訂字型
Adobe 字型（以前名為 Typekit）是另一個免費和高級資源，您可以在設計項目中使用很棒的字型。他們有一個付費訂閱以及一個有限的免費計劃。
只需註冊一個 Adobe 字型帳戶，然後訪問「瀏覽字型」部分。從這裡，您需要點擊 </> 按鈕來選擇字型並創建項目。
接下來，您將看到帶有項目 ID 的嵌入代碼。它還會告訴您如何在主題的 CSS 中使用該字型。
您需要將此代碼粘貼到網站的  部分中。
有兩種方法可以將此代碼新增到您 WordPress 網站中。
首先，您可以編輯主題的 header.php 文件，並將代碼粘貼在  標籤之前。
但是，如果您不熟悉 WordPress 中的代碼編輯，您可以使用插件新增此代碼。只需安裝並啟用 WPCode 插件。
啟用後，前往代碼片段 » 標頭和頁尾頁面，在「標頭」框中粘貼嵌入代碼。然後，點擊「保存變更」按鈕。
就是這樣。現在您可以在主題的樣式表中這樣使用您選擇的 Typekit 字型：
h1 .site-title {font-family: gilbert, sans-serif;}
有關詳細指示，請查看我們關於如何使用 Adobe 字型（Typekit）在 WordPress 中新增炫酷排版的教程。
在 WordPress 中使用 CSS3 @font-face 新增自訂字型
在 WordPress 中新增自訂字型的最直接方法是使用 CSS3 @font-face 方法。此方法允許您在網站上使用任何字型。
首先，您需要下載所需字型的網頁格式。如果沒有該字型的網頁格式，您可以使用 FontSquirrel Webfont 生成器進行轉換。
擁有網頁字型檔後，您需要將其上傳到 WordPress 主機伺服器上。最佳位置是將字型上傳到主題或子主題的目錄中的新「字型」文件夾中。
您可以使用 FTP 或 cPanel 的文件管理器上傳字型。
上傳字型後，您需要使用 CSS3 @font-face 規則在主題的樣式表中載入字型，如下所示：
@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
別忘了將字型系列和網址替換為您自己的字體。
之後，您可以在主題的樣式表中這樣使用該字型：
.h1 site-title {
font-family: 'Arvo', Arial, sans-serif;
}
直接使用 CSS3 @font-face 載入字型並不總是最佳解決方案。例如，如果您使用的是 Google 字型或 Typekit 字型，那麼最好從他們的伺服器直接提供字型以獲得最佳性能。
我們希望這個教程能幫助您學習如何在 WordPress 中新增自訂字型。您也可以查閱我們的如何嵌入 Facebook 視頻，或查看我們的最佳 Instagram 插件清單。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道，獲取 WordPress 視頻教程。您也可以在Twitter 和 Facebook 上找到我們。



	
		
		
			
				Read More





	
		
		
			WordPress 主题
		
	


如何找到網站使用的 WordPress 主題

為什麼要找出網站使用的 WordPress 主題？
在創建 WordPress 網站時，選擇主題是一個非常重要的決定。選擇完美的 WordPress 主題涉及很多考量，這個過程容易讓人感到不知所措。如果您喜歡其他網站的佈局、功能、圖標字體和設計，這將是找到適合自己網站主題的捷徑。
一些網站可能使用定制主題，這些主題可能無法公開獲取。然而，許多網站使用的是免費 WordPress 主題或流行的付費主題。在這種情況下，您可以輕鬆找到該主題的名稱，然後下載或購買它。
方法 1：使用 WPBeginner 的 WordPress 主題檢測工具（簡單）
最簡單的檢測 WordPress 主題名稱的方法是使用我們的免費 WordPress 主題檢測工具。只需粘貼或輸入網站的 URL，然後點擊「分析網站」按鈕。
我們的主題檢測工具會掃描網站的代碼，並顯示其 WordPress 主題的名稱。例如果網站使用的是流行的 Divi 主題，您將看到類似的結果。
方法 2：使用 IsItWP 檢測網站的 WordPress 主題（及插件）
另一個選項是使用免費的 IsItWP 工具。IsItWP 不僅告訴您主題名稱，還提供一些額外資訊，例如該網站使用的 WordPress 插件。
只需打開 IsItWP 網站，輸入您要檢查的網站 URL。IsItWP 會首先檢查該網站是否使用 WordPress。如果是，它將嘗試檢測 WordPress 主題並顯示結果。
方法 3：手動檢測網站使用的 WordPress 主題（進階）
一些網站所有者可能會更改其 WordPress 主題的名稱，讓黑客更難找出網站信息並可能突破它。然而，這也可能導致主題檢測工具無法正確工作，包括 WPBeginner 主題檢測工具和 IsItWP。
如果這些工具無法獲取您喜愛網站的資訊，您可以查看 WordPress 網誌或網站的代碼，找出該網站所使用的主題，即使它們已更改名稱或創建了子主題。每個 WordPress 主題都有一個 style.css 文件，該文件包含主題名稱、作者、版本號、自定義字體等資訊。
尋找父主題
有些人會為其 WordPress 網站創建子主題。在這種情況下，您通常可以在子主題的標題中找到父主題的資訊。例如：
*
Theme Name: 我的子主題
Description: 這只是個子主題
Author: Peter Smith
Author URI: 作者的博客或網站 url
Template: hestia
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-child-theme
*/
在上述例子中，您可以看到主題標題區塊中多了一行「Template」，該模板是該網站使用的父主題。



	
		
		
			
				Read More





	
		
		
			WordPress 主题
		
	


如何測試您的 WordPress 主題是否符合最新標準

為什麼要測試您的 WordPress 主題是否符合最新標準？
無論您是 WordPress 網站所有者還是主題開發者，在使用新主題之前檢查其是否符合最新標準是至關重要的，原因如下：
兼容性檢查
測試可以確保主題能夠順利運行於當前版本的 WordPress 並適應未來的更新，避免兼容性問題。
發現錯誤和問題
測試有助於發現並修復可能影響您 WordPress 網站功能或外觀的問題，這對於來自第三方的主題尤為重要。
提升用戶體驗
測試能確保主題遵循現代網頁標準，如無障礙和移動友好。不僅可以使使用該主題的網站更具用戶友好性，還有助於搜索引擎優化（SEO）。
增強安全性
通過檢查最新標準，您可以預防安全漏洞，保護您的網站免受常見威脅。如果您正安裝 WooCommerce 主題，這點尤為重要，因為您需要處理客戶的支付信息。
如何測試您的 WordPress 主題是否符合最新標準
您可以使用下面的快速鏈接來跳轉到特定主題：

WordPress 主題審核團隊檢查哪些標準？
步驟一：在您的 WordPress 網站啟用除錯模式
步驟二：安裝主題檢查插件
還應該測試哪些 WordPress 主題部分？

WordPress 主題審核團隊檢查哪些標準？
WordPress 主題審核團隊在提交主題時會檢查多個方面。您可以在官方的 WordPress 主題要求文檔中了解更多。但以下是您應該知道的重要事項：

確保主題不會默認收集用戶數據。您可以在 readme.txt 文件中檢查數據使用和明確的隱私政策。
在無障礙方面，確保主題具有便捷導航的跳轉連結且鍵盤導航清晰。內容和評論中的鏈接應該加下劃線以方便識別。
檢查是否有 PHP 或 JavaScript 錯誤，並確保主題遵循安全編碼標準。
WordPress 儀表板中的管理通知應易於取消並遵循標準設計。
檢查主題是否推薦 WordPress.org 插件。插件不應在未經用戶許可的情況下自動安裝。
確保主題遵守關於版權和鏈接的規定。避免具有侵入性銷售或垃圾行為的主題。
確保主題使用與 GPL 兼容的許可證，最好是 GPLv2 或更高版本。

如果您正為客戶或個人使用開發主題，這些標準對於開發者來說可能意義不大。但如果您想發布您的 WordPress 主題供他人使用，那麼檢查它是否符合上述最低要求是很好的做法。
步驟一：在您的 WordPress 網站啟用除錯模式
這第一步是可選的，因為您稍後使用的插件將無論是否啟用此步驟都能正常運作。
儘管如此，我們建議在您的 WordPress 網站上啟用除錯模式，並在本地 WordPress 網站或登台網站上測試您的主題。
除錯模式是 WordPress 中一個提供錯誤報告的功能，使得識別和修復問題變得更為簡單。在啟用除錯模式後，WordPress 將顯示任何 PHP 錯誤、警告或關於 WordPress 主題的通知。
然而，不建議在線上網站上啟用除錯模式。這就是為什麼我們建議創建一個本地版網站或使用您的 WordPress 託管提供的登台環境。
您可以閱讀我們的文章了解如何在 WordPress 中啟用除錯模式的詳細步驟。我們推薦使用 WP Debugging 方法。這款 WordPress 插件將啟用除錯模式而無需您編輯網站文件，使得流程更加簡便。
步驟二：安裝主題檢查插件
下一步是安裝主題檢查插件。這個插件是由 WordPress 主題審核團隊開發的，實際上是為主題開發者設計的。
如果您是網站所有者，您也可以使用它來查看主題是否符合最新標準。您可以測試官方主題目錄中的免費主題或高級 WordPress 主題，查看它們是否遵循 WordPress 指南。
如果您需要安裝插件的一些指導，可以閱讀我們的 WordPress 插件安裝初學者指南。
插件啟用後，前往外觀 » 主題檢查。然後，從下拉菜單中選擇您當前的主題或之前的主題並點擊「檢查它！」按鈕。
主題檢查將開始測試您的主題是否符合最新的 WordPress 主題開發標準。完成後，它將顯示在測試過程中發現的警告。
以下是一個通過檢查的主題範例：
另一方面，下面的截圖顯示不通過檢查的主題樣貌。
插件將告知您發現的錯誤並在下方詳細分享這些信息。這些信息是為主題開發者提供反饋，以便他們修復這些問題。
如果您是網站所有者，您可以截取這些反饋的截圖分享給主題開發者，或者找到符合最新標準的其他主題替代方案。
需要一些主題替代方案的靈感嗎？查看我們專家挑選的最佳和最受歡迎的 WordPress 主題。
還應該測試哪些 WordPress 主題部分？
測試 WordPress 主題時，除了主題審核標準外，您還應關注以下幾個關鍵領域：
響應性
檢查主題如何在各種設備和屏幕尺寸下的表現。它應該是完全響應的並能在桌面和移動設備上良好顯示。
性能
測試主題的性能。一個快速加載的主題可以加快您的 WordPress 網站速度，對改善用戶體驗有積極影響。您可以使用像 Google 的 PageSpeed Insights 或 GTmetrix 等工具來分析您的網站速度。
插件兼容性
安裝計劃在您的網站上使用的插件，並測試它們的功能是否與您的新主題兼容。
瀏覽器兼容性
在不同的瀏覽器中測試主題，如 Safari、Chrome、Opera、Firefox 和 Microsoft Edge。
自定義功能
如果您打算通過插件或子主題添加自定義功能，確保它能正確運行於主題。
我們希望這篇文章幫助您了解如何檢查您的 WordPress 主題是否符合最新標準。您可能還想查看我們的如何在無需編碼的情況下創建自定義 WordPress 主題或我們的 WordPress 安全性終極指南。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道，獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。



	
		
		
			
				Read More





	
		
		
			WordPress 主题
		
	


如何將 WordPress 預設的 jQuery 替換為 Google Library

如何將 WordPress 預設的 jQuery 替換為 Google Library
你是否想將 WordPress 預設的 jQuery 腳本替換成來自 Google Hosted Libraries 的 jQuery？
WordPress 預設包含了 jQuery 這個 JavaScript 庫。然而，將其替換為來自 Google Library 的最新版本 jQuery 可以提高網站性能。
在本文中，我們將向你展示如何輕鬆地將 WordPress 預設的 jQuery 腳本替換為 Google Library 來提高性能和速度。
為什麼以及何時應該替換 WordPress 預設的 jQuery
jQuery 是一個受開發者歡迎的 JavaScript 庫，用於創建漂亮的網頁應用。在 WordPress 中，它常被用來添加功能如滑塊、彈出窗口等。
WordPress 包含了與核心軟件一起打包的 jQuery 庫。許多頂級的 WordPress 插件和流行的主題都依賴這個庫來提供基本的功能和特點。
然而，在共享主機伺服器上加載 jQuery 可能會消耗大量資源並使網站變慢，特別是當你使用一些沒有遵循 WordPress 最佳實踐的插件或主題時。
另一個問題是使用 WordPress 包含的 jQuery 版本，這些版本只有在 WordPress 更新時才會被更新。可能會有包含性能或安全修復的新版本，但你將無法使用，直到這些新版本包含在 WordPress 更新中。
有幾個解決方法可以解決這個問題。例如，可以通過 Google 的伺服器或 jQuery 官方的 CDN 加載 jQuery。
Google Hosted Libraries 是一個不錯的選擇，因為他們的伺服器穩定、更新且高度優化，這使得 jQuery 在你的 WordPress 網站上加載更快。
話不多說，讓我們來看看如何輕鬆地將 WordPress 預設的 jQuery 替換為 Google Library。
使用 Google Library 替換 WordPress 預設的 jQuery
WordPress 配備了一種內建方法，可以簡單地添加腳本和樣式表。這也能讓你安全地移除任何使用內建方法加載的腳本或樣式表。
我們將使用這個方法來首先禁用 WordPress 預設的 jQuery。之後，我們將告訴 WordPress 通過 Google Library 加載 jQuery。
你需要將以下代碼添加到主題的 functions.php 文件、特定網站插件或一個代碼片段插件中。
function wpb_modify_jquery() {
  //檢查是否正在查看前台部分
  if (!is_admin()) {
    // 移除 WordPress 預設的 jQuery
    wp_deregister_script('jquery');
    // 註冊通過 Google Library 的新 jQuery 腳本    
    wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
    // 將腳本加入佇列   
    wp_enqueue_script('jquery');
  }
}
// 當 WordPress 初始化時執行該動作
add_action('init', 'wpb_modify_jquery');
我們建議使用 WPCode 代碼片段插件來添加這段代碼到 WordPress 中。這個插件免費且易於使用，即使出現任何問題也不會使你網站崩潰。
注意：WPCode 也有高級版，提供如代碼修訂、自動轉換像素、計劃片段、私人雲端庫等進階功能。
要開始使用，你需要安裝並啟用 WPCode。如果需要幫助，請參見我們的指南 如何安裝 WordPress 插件。
插件啟用後，從 WordPress 輸入檢控台導航到代碼片段»添加片段。從這裡，找到“添加自訂代碼（新片段）”選項，並點擊其下方的“使用片段”按鈕。
接下來，你可以為你的代碼片段添加標題。這個標題可以是任何有助於你記住代碼用途的名稱。
之後，簡單地將上面的代碼粘貼到“代碼預覽”框中，並從下拉菜單中選擇“PHP片段”作為代碼類型。
最後，將開關從“未啟用”切換到“啟用”並點擊“保存片段”按鈕。
這就是全部！WordPress 現在將替換預設的 jQuery，並通過 Google Library 加載它。
注意：這個方法將繼續加載 URL 中指定的 jQuery 版本。將來你可能需要更改 Google Library 的 URL 以使用更新的 jQuery 版本。
Google 不會為你自動更新版本號，因為如果你的主題或插件依賴於不同的版本，這可能會導致兼容性問題。
你可以訪問 Google Hosted Libraries 網站來找到最新的 URL。
從那裡，你還可以找到較舊版本的 jQuery 的 URL，以便在需要時用於故障排除。
替換其它預設的 jQuery 庫
除了核心 jQuery 庫外，WordPress 還包括飛其他一堆jQuery腳本。其中某些腳本，如 jQuery Mobile 和 jQuery UI，在Google 庫上託管。
對於其他庫，你可以使用 jQuery 自己的 CDN 伺服器來更快地加載它們。以下例子中，我們已將 WordPress 的 jquery-ui-core 腳本替換為官方的 jquery-ui 版本。
function wpb_modify_jquery_ui() {
  if (!is_admin()) {
    wp_deregister_script('jquery-ui-core');
    wp_register_script('jquery-ui-core', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', false, '1.12.1');
    wp_enqueue_script('jquery-ui-core');
  }
}
add_action('init', 'wpb_modify_jquery_ui');
就像 Google Libraries 一樣，你需要在一段時間後替換 URL 以使用最新版本的腳本。
完全禁用 WordPress 中的 jQuery
鑑於其廣泛使用，我們不建議完全禁用 WordPress 網站上的 jQuery。即使你的 WordPress 主題不使用 jQuery，許多流行的 WordPress 插件仍然需要它。
但是，如果你確信自己的網站不需要 jQuery，那麼你可以安全地禁用它。
簡單地將以下代碼添加到主題的 functions.php 文件、特定網站插件或一個代碼片段插件，如 WPCode。
if ( !is_admin() ) wp_deregister_script('jquery');
這就是全部。此代碼將簡單地禁用 jQuery 腳本從 WordPress 網站的前端加載。
解決 WordPress 中的 jQuery 相關問題
jQuery 的新版本有時可能會廢棄或移除舊的方法和函數。如果你網站上的某個 WordPress 插件使用了較舊的方法，那麼這可能會破壞某些功能。
你可能會在檢查工具的控制台區域中看到警告，或者注意到一些功能停止工作。
WordPress 以前使用一個名為 jQuery-migrate 的腳本來提供對較舊版本 jQuery 的兼容性支持。然而，從 WordPress 5.5 開始，這個腳本已經從 WordPress 中移除了。
如果你想添加回 jQuery-migrate 腳本或在不同 jQuery 版本之間進行故障排除，那麼你可以嘗試以下方法。
簡單地安裝並激活 Version Control for jQuery 插件。詳細信息請參見我們的分步指南 如何安裝 WordPress 插件。
激活後，你需要訪問設置» jQuery 版本控制頁面。從這裡，你可以選擇要使用的 jQuery 版本。
插件將自動從官方 jQuery CDN 加載該版本。
該插件還會加載 jQuery-migrate 腳本。如果你願意，你可以在故障排除期間禁用它。
不要忘記點擊“保存更改”按鈕來保存你的更改。
我們希望本文幫助你學習如何用 Google Library 替換 WordPress 預設的 jQuery。你可能還會感興趣於這些有用的 jQuery 教程或參見我們完整的 WordPress 性能優化指南。
如果你喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。你也可以在 Twitter 和 Facebook 上找到我們。



	
		
		
			
				Read More





	
		
		
			WordPress 主题
		
	


WordPress 模板層次結構初學者指南（速查表）

為什麼要了解 WordPress 模板層次結構？
所有現代 WordPress 主題都由模板樣式表、JavaScript 和圖像組成。這些文件共同控制您的網站對用戶的外觀。
WordPress 有一個標準的模板層次結構，這意味著具有特定文件名的模板會影響您網站的特定區域。它還告訴您哪個模板名稱用於特定項目。
大多數現代 WordPress 主題都配備了顯示分類、日期、存檔、單篇文章、自定義頁面等的模板。作為用戶，您可以通過創建子主題來創建更多模板。
可視化 WordPress 模板層次結構（速查表）
WordPress 使用易於理解且有意義的模板名稱模式。下面的快速參考圖表解釋了用於顯示 WordPress 網站上不同頁面的模板文件。
主頁使用哪些模板文件？
默認情況下，WordPress 在您的網站主頁上顯示博客文章。您還可以通過訪問 WordPress 管理區域的設置 » 閱讀頁來設置使用自定義主頁（也稱為前頁）。
具體查找順序如下：
1. front-page.php – 如果您使用靜態前頁，則 WordPress 會首先查找此模板文件並使用它來顯示前頁。
2. home.php – 如果您使用靜態前頁，並且您的主題中沒有 front-page.php 模板，則 WordPress 會查找 home.php 模板。它也用於在主頁顯示默認博客文章。
3. index.php – 如果 front-page.php 或 home.php 不存在，則 WordPress 回退到 index.php 模板來顯示主頁。這個模板是 WordPress 顯示任何頁面的默認回退模板。
單篇文章使用哪些模板文件？
WordPress 查找以下文件來顯示單篇文章。
1. single-{post-type}-{slug}.php – 用此模板修改特定個別文章的顯示。例如，如果文章類型是 ‘review’ 且文章 slug 是 acme-phone，則 WordPress 會查找 single-review-acme-phone.php。
2. single-{post-type}.php – 接著 WordPress 會檢查是否有模板來顯示這種特定文章類型。例如，如果文章類型是 review，則 WordPress 會查找 single-review.php。
3. single.php – WordPress 會回退到 single.php。
4. singular.php – 這個模板增加了另一個回退選項來顯示來自任何文章類型的單個項目。
5. index.php – 最後，如上所述，WordPress 最終回退到 index.php。
單頁使用哪些模板文件？
WordPress 頁面是預設的文章類型之一。它們允許您在網站上創建靜態頁面，而不是文章。請參見我們關於文章與頁面區別的指南。
1. 自定義頁面模板 – 分配給頁面的頁面模板。請參見如何在 WordPress 中創建自定義頁面模板。
2. page-{slug}.php – 如果頁面 slug 是 contact-us，WordPress 會使用 page-contact-us.php。
3. page-{id}.php – 如果頁面 ID 是 17，則 WordPress 會查找名為 page-17.php 的模板文件。
4. page.php – 用於顯示所有靜態頁面的模板。
5. singular.php – 此模板是所有單篇文章類型項目的默認回退選項。
6. index.php – 默認回退模板。
分類存檔使用哪些模板文件？
WordPress 使用這些文件來顯示分類相關頁面。
1. category-{slug}.php – 這個模板用於顯示特定分類的存檔頁。例如，如果分類 slug 是 reviews，則 WordPress 會查找 category-reviews.php 模板。
2. category-{id}.php – 接著 WordPress 會查找具有分類 ID 的模板。例如，如果分類 ID 是 17，則 WordPress 會查找 category-17.php。
3. category.php – 這是用於顯示所有分類存檔頁的默認模板。
4. archive.php – 這是 WordPress 用於顯示任何存檔頁的默認模板。
5. index.php – 默認回退模板。
標籤存檔使用哪些模板文件？
WordPress 使用這些文件來顯示標籤存檔頁。
1. tag-{slug}.php – 如果標籤的 slug 是 fruits，WordPress 會查找 tag-fruits.php。
2. tag-{id}.php – 如果標籤的 ID 是 17，WordPress 會查找 tag-17.php 模板。
3. tag.php – 用於標籤存檔的默認模板。
4. archive.php – 用於任何存檔頁的默認模板。
5. index.php – 默認回退模板。
自定義分類目錄使用哪些模板文件？
分類和標籤是兩個默認的 WordPress 分類法。用戶還可以創建自己的自定義分類。這是 WordPress 如何查找模板來顯示自定義分類頁。
1. taxonomy-{taxonomy}-{term}.php – 如果您有一個名為 genre 的自定義分類，且有一個術語 ‘thriller’，則 WordPress 會查找 taxonomy-genre-thriller.php。
2. taxonomy-{taxonomy}.php – 如果分類是 genre，WordPress 會查找 taxonomy-genre.php。
3. taxonomy.php – 顯示所有自定義分類目錄的默認模板。
4. archive.php – 所有存檔頁的默認回退模板。
5. index.php – WordPress 的默認回退模板。
自定義文章類型使用哪些模板文件？
這是 WordPress 如何查找模板來顯示自定義文章類型存檔。
1. archive-{post_type}.php – 如果文章類型是 review，WordPress 會查找 archive-review.php。
2. archive.php – 顯示所有存檔頁的默認模板。
3. index.php – WordPress 的默認回退模板。
顯示作者存檔使用哪些模板文件？
WordPress 為您的網站上的每位作者生成存檔頁。這是它如何查找作者存檔模板。
1. author-{nicename}.php – 如果作者的友好名稱是 matt，WordPress 會查找 author-matt.php。
2. author-{id}.php – 如果作者的用戶 ID 是 6，則 WordPress 會查找 author-6.php。
3. author.php – 用於顯示作者存檔頁的默認模板。
4. archive.php – 顯示所有存檔頁的默認模板。
5. index.php – WordPress 的默認回退模板。
日期存檔使用哪些模板文件？
WordPress 也顯示您的文章在基於日期的存檔頁上，如月份和年份。這是它如何查找這些頁面的模板。
1. date.php – 用於基於日期的存檔頁的默認模板。
2. archive.php – 用於顯示作者存檔頁的默認模板。
3. index.php – WordPress 的默認回退模板。
搜索頁面使用哪些模板文件？
1. search.php – WordPress 中顯示搜索結果的默認頁面。
2. searchform.php – 用於顯示 WordPress 搜索表單的模板。
3. index.php – WordPress 的默認回退模板。
404 錯誤頁面使用哪些模板文件？
當 WordPress 無法找到請求的內容時，顯示 404 錯誤頁面。請參見我們的如何改進 404 頁面模板的指南。
1. 404.php – 用於顯示 WordPress 404 錯誤頁面的默認模板。
2. index.php – WordPress 的默認回退模板。
附件頁面使用哪些模板文件？
1. MIME_type.php – MIME_type 代表文件類型。例如，image.php、video.php、application.php。
2. attachment.php – 用於顯示附件頁面的默認模板。
3. single-attachment.php – 顯示單個附件。
4. single.php – 顯示單個文章類型項目的默認模板。
5. index.php – WordPress 的默認回退模板。
嵌入顯示使用哪些模板文件？
自 WordPress 4.5 起，您可以使用模板來渲染嵌入到 WordPress 中的文章。
1. embed-{post-type}-{post_format}.php – WordPress 會首先查找文章類型和文章格式模板。例如，如果您有一個帶視頻的評論帖子，則 WordPress 會查找 embed-review-video.php。
2. embed-{post-type}.php – 如果文章類型是 review，WordPress 會查找 embed-review.php。
3. embed.php – 所有嵌入的默認回退模板。
希望這個教程幫助您了解 WordPress 模板層次結構。您可能還想查看我們推薦的最佳拖放 WordPress 頁面構建器列表。如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。



	
		
		
			
				Read More





	
		
		
			WordPress 主题
		
	


如何在 WordPress 中建立分類模板

為什麼要在 WordPress 中建立分類模板
WordPress 會為所有分類生成單獨的頁面。您可以通過訪問類似 https://example.com/category/news/ 的 URL 查看這些頁面。大多數熱門的 WordPress 主題都內建了模板來優化展示分類頁面，這些模板會凸顯分類標題並在其下方顯示分類描述。
然而，有些主題可能處理得不夠理想，或者您希望自訂分類頁面。通過建立分類模板，您可以為分類頁面添加特定功能。例如，允許用戶訂閱分類、添加分類圖片、顯示分類描述，並為每個分類選擇不同的布局。
WordPress 分類頁面的模板層次結構
WordPress 擁有強大的模板系統，讓您可以為網站的不同部分建立不同的模板。在顯示任意頁面時，WordPress 會按照預定的層次結構查找模板。
要顯示一個分類頁面，它會按以下順序查找模板：category-slug.php → category-id.php → category.php → archive.php → index.php。首先，WordPress 會查找一個特定於該分類的模板，使用分類別名（slug），例如category-design.php 來顯示 ‘Design’ 分類。如果找不到 category-slug 模板，那麼將查找帶有分類 ID 的模板，如category-6.php。之後，會查找通用的分類模板（通常是category.php）。如果沒有通用的分類模板，WordPress 將查找通用的歸檔模板（例如archive.php）。最後，會使用index.php模板顯示分類。
為主題建立分類模板
首先，我們來看看一個典型的 category.php 模板：






Category: 








 by 








Sorry, no posts matched your criteria.








開發特定於個別分類的模板
假設您有一個名為 “Design” 的分類，其分類別名為 “design”，並希望此分類顯示的頁面與其他分類不同。為此，您需要為該分類創建一個模板。進入 外觀 » 主題編輯器，從右側的主題文件列表中點擊 category.php。如果沒有 category.php 檔案，請查找 archive.php。
如果都找不到這些模板，則可能您使用的是 WordPress 主題框架，本教程對您可能無法使用。建議參考您使用的特定框架的相關文件。如果找到上述文件，將 category.php 的所有內容複製並貼入例如 Notepad 的文字編輯器，將此文件保存為 category-design.php。然後，使用 FTP 客戶端連接到您的 WordPress 主機，並進入 /wp-content/themes/your-current-theme/，將 category-design.php 上傳到您的主題目錄。
現在，您對此模板所做的任何更改僅會出現在該特定分類的歸檔頁面中。使用這種技術，您可以為任意多分類創建模板，只需使用 category-{分類別名}.php 作為文件名。在 WordPress 管理區域中訪問分類部分，您可以找到分類別名。
以下是一個 category-slug.php 模板的示例。請注意，我們使用了與 category.php 相同的模板，僅做了一些更改。由於我們已經知道該模板將用於設計分類，因此我們可以手動添加標題、描述或其他詳情。還請注意，我們用  代替了 。








Design Articles

Articles and tutorials about design and the web.





 by 








Sorry, no posts matched your criteria.







使用分類 ID 建立模板
如果您不想使用 category-slug 模板，也可以使用 category-id 模板。以下是如何找到 WordPress 中的分類 ID。
使用條件標籤設置分類
在為您的主題建立模板時，您需要確定是否真的需要單獨的模板來實現您所想要的效果。在某些情況下，您所想要的更改並不複雜，可以使用通用模板內的條件標籤實現，例如 category.php 或 archive.php。WordPress 內建支持許多條件標籤，主題作者可以在模板中使用它們。
一個條件標籤的例子是 is_category()。使用這個條件標籤，您可以更改模板以在匹配條件時顯示不同的輸出。例如，假設您有一個名為 “Featured” 的精選帖子分類，現在您希望在該分類的歸檔頁面上顯示一些額外信息。為此，在 category.php 檔案中  之後添加以下代碼：



	Featured Articles:

	Category Archive:  




使用 Beaver Themer 建立分類模板
Beaver Themer 可讓您建立主題的佈局。您可以選擇希望使用模板的個別分類，然後使用拖放工具進行編輯。
首先，您需要進入 Beaver Builder » Themer Layouts » Add New 頁面。
您需要為其命名標題。然後，在 ‘位置’ 選項下選擇您的分類。
接下來，您將能夠使用 Beaver Builder 的拖放編輯器來自訂您的分類佈局頁面。Beaver Themer 提供了許多模組，您可以使用並移動來設計您的分類佈局頁面。
完成後，只需點擊 ‘完成’ 按鈕，然後選擇 ‘發布’ 以應用您的分類模板。現在，您可以訪問您的 WordPress 網站來查看分類模板的效果。
我們希望這篇文章能幫助您瞭解如何在 WordPress 中建立分類模板。您可能還想查看我們對比的最佳可拖放 WordPress 頁面構建器，以創建自訂佈局，以及我們的指南，了解如何建立會員網站，以便您可以根據分類限制內容。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲得 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。



	
		
		
			
				Read More