最近，我們的一位讀者詢問我們是否可以寫一篇關于如何在 wordpress 中添加全屏搜索覆蓋的教程。您可能在《連線》等熱門網站上看到過這一點。當用戶單擊搜索圖標時，搜索框會打開并覆蓋整個屏幕，這可以改善移動設備上的用戶體驗。在本文中，我們將向您展示如何在 wordpress 中添加全屏搜索覆蓋。

全屏搜索正在慢慢成為一種趨勢，因為它極大地改善了移動用戶的搜索體驗。由于移動設備屏幕非常小，通過提供全屏覆蓋，您可以讓用戶輕松在您的網站上鍵入和搜索。

當我們第一次收到本教程請求時，我們知道它需要一些代碼。我們 WPBeginner 的目標是讓事情盡可能簡單。

當我們完成教程的編寫后，我們意識到這個過程太復雜了，應該將其包裝到一個簡單的插件中。

為了方便起見，我們創建了一個有關如何添加全屏搜索覆蓋的視頻教程，您可以在下面觀看。

https://www.youtube.com/embed/h1Xdeai1Nd8?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent訂閱 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-Static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

但是，如果您只想遵循文本說明，那么您可以按照我們的分步教程了解如何在 wordpress 中添加全屏搜索疊加層。

在 WordPress 中添加全屏搜索覆蓋

您需要做的第一件事是安裝并激活WordPress 全屏搜索覆蓋插件。有關更多詳細信息，請參閱我們有關如何安裝 WordPress 插件的分步指南。

WordPress 全屏覆蓋搜索插件開箱即用，無需您配置任何設置。

您只需訪問您的網站并單擊搜索框即可查看正在運行的插件。

請注意，該插件適用于默認的 WordPress 搜索功能。它還可以與SearchWP配合使用，SearchWP 是一個高級插件，可以極大地改進默認的 WordPress 搜索。

不幸的是，這個插件不能與Google Custom Search一起使用。

自定義全屏搜索覆蓋

WordPress 全屏搜索覆蓋插件帶有自己的樣式表。為了更改搜索疊加層的外觀，您必須編輯插件的 css 文件或在 CSS 中使用 !important。

首先，您需要使用FTP 客戶端連接到您的網站。如果您不熟悉使用 FTP，請查看我們有關如何使用 FTP 將文件上傳到 WordPress 的指南。

連接后，您需要找到插件的 CSS 文件夾。您將在以下路徑下找到它：

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

您將在 css 文件夾中找到一個文件full-screen-search.css。您需要將此文件下載到您的計算機上。

打開您剛剛在記事本等純文本編輯器中下載的文件。您可以對此文件進行任何更改。例如，我們想要更改背景和字體顏色以匹配我們的演示網站。

重要的提示：

如果您在自己的主題中使用它，那么最好使用 !important 標簽，這樣插件更新就不會覆蓋任何更改。

對于開發人員和顧問，您還可以僅重命名插件并將其捆綁為主題或服務的一部分。

我們只創建了這個插件，因為編寫本教程的所有其他方法對于初學者用戶來說都太復雜了。

我們希望本文能幫助您將全屏搜索覆蓋添加到您的 WordPress 網站。您可能還想查看我們有關如何在 WordPress 中添加搜索切換效果的指南