如何在 WordPress 中添加搜索切換效果
最後更新：2024 年 7 月 23 日 | 由編輯部撰寫 | 評審：Syed Balkhi
編者註：我們從 WPBeginner 的合作夥伴連結中賺取佣金。佣金不會影響我們編輯的意見或評估。更多資訊請參閱我們的編輯流程。
添加搜索切換效果，使您的 WordPress 網站看起來時尚現代，這是因為它去除了笨重的搜索表單，取而代之的是一個簡單的圖標。單擊該圖標後，搜索表單會平滑滑出，這樣可以保持網站的整潔和用戶友好。
在本指南中，我們將教您如何在 WordPress 網站中添加搜索切換效果。這很簡單，不需要任何編碼技能。
什麼是WordPress 中的搜索切換效果？
搜索切換效果是一種改善 WordPress 網站搜索體驗的網頁設計技術。與其顯示搜索表單，不如顯示一個搜索圖標。當用戶點擊圖標後，搜索表單會帶有滑出動畫出現。
默認的 WordPress 搜索表單外觀不佳，許多頂級 WordPress 主題已經用他們的樣式替換了默認表單。不過，如果您的主題仍使用靜態的簡單搜索表單，您可以使用這個教程來使它更易用。
了解這一點後，我們來看看如何輕鬆在 WordPress 中添加搜索切換效果，使您的網站更加互動！
在 WordPress 中添加搜索切換效果
要在 WordPress 中添加搜索切換效果，首先需要在網站上放置搜索表單區塊或小工具，然後添加一些自訂 CSS 語法。首先，確保您的網站上有搜索表單。
如果您使用的是具有完整網站編輯功能的 WordPress 區塊主題，可以按照以下步驟添加搜索表單。前往您的 WordPress 儀表板中的「外觀」»「編輯器」。在編輯屏幕中，添加「搜索」區塊到您希望顯示搜索表單的地方。然後點擊「儲存」按鈕保存更改。
在其他 WordPress 主題中添加搜索表單
如果使用的 WordPress 主題沒有完整網站編輯功能，您可以將搜索區塊或小工具添加到側邊欄或任何支持小工具的區域。打開 WordPress 儀表板中的「外觀」»「小工具」，然後將「搜索」區塊/小工具添加到您希望顯示搜索表單的側邊欄。
添加搜索圖標
接下來，找到一張透明的搜索圖標圖片，適合深色背景。若需自製搜索圖標，建議創建不超過 50×50 像素的透明 PNG 圖片。接著，將圖標上傳到您的網站，方法是前往「媒體」»「新增」，點擊「選擇文件」上傳圖標圖片。
上傳後，點擊「複製網址到剪貼簿」按鈕，將網址貼到純文字編輯器如 Notepad 或 TextEdit 中。
自訂 CSS
現在，您需要在 WordPress 網站中添加一些自訂 CSS。我們建議使用 WPCode 外掛來保存自訂語法。WPCode 讓您輕鬆添加自訂代碼片段到 WordPress 中，不受主題更新或更換的影響。
安裝並啟用免費的 WPCode 外掛，如果需要幫助，可以查看我們的逐步指南。啟用後，前往 WordPress 管理儀表板中的「代碼片段」頁面，點擊上方的「新增」按鈕。在下一個屏幕中，為代碼片段提供一個標題，幫助您識別片段。將「代碼類型」改為「HTML 片段」。這是因為您將使用 HTML 將自訂 CSS 加載到網站頭部。現在，將以下代碼貼到「代碼預覽」框中：
<style type="text/css">
.wp-block-search__inside-wrapper .wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper .wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form .search-submit { display:none; }
</style>
重要提示：不要忘記將 /url/to/search-icon.png 替換為您之前複製的圖片網址。將「停用」切換為「啟用」，然後點擊「儲存片段」按鈕。
現在，您可以訪問網站，查看搜索表單的切換效果。
搜索表單切換效果排除故障
上述方法適用於大多數使用小工具區塊的現代 WordPress 主題。但對於某些主題，此方法可能無效。如果您使用的 WordPress 主題搜索表單沒有 wp-block-search__inside-wrapper 和 wp-block-search__input 類，則需使用檢查工具找出主題使用的 CSS 類。例如，截圖中顯示我們的演示主題使用這些 CSS 類。
現在，可以修改代碼並使用這些 CSS 類。下面是一個示例：
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor:text;
outline: 0;
width: 230px;
}
.search-form .search-submit { display:none; }
</style>
最後，您可以測試網站查看效果。
額外提示：為您的網站添加更好的 WordPress 搜索功能
搜索切換效果只是讓您的 WordPress 搜索表單變得更好看，並不影響搜尋結果的質量。默認的 WordPress 搜索功能非常基本，常常慢、準確性差、甚至顯示空白結果。
這時，可以使用 SearchWP。SearchWP 是市場上最好的 WordPress 搜索外掛，它讓您輕鬆替換默認搜索功能，提供強大的搜索引擎。SearchWP 自動替換搜索表單，無需編輯主題文件，並在您的網站中搜索所有內容，大大提高搜尋結果的質量。
它還提供實時搜索擴展，即時顯示用戶的搜索結果，並且完全支持電子商務，讓您可以在網店中創建智慧的 WooCommerce 搜索體驗。詳細指導請參閱我們的指南。
我們希望本文幫助您瞭解如何在 WordPress 中添加搜索切換效果。接下來，您可能還想看看如何為網站添加語音搜索能力，以及如何排除 WordPress 搜索結果中的頁面。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道，觀看 WordPress 視頻教程。還可以在 Twitter 和 Facebook 上找到我們。
