如何在 WordPress 中添加全屏搜索覆盖

最近，我们的一位读者询问我们是否可以写一篇关于如何在 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 中添加搜索切换效果的指南

以上就是如何在 WordPress 中添加全屏搜索覆盖的详细内容，更多请关注php中文网其它相关文章！