最近，我们的一位读者问我们是否可以写一篇关于如何在WordPress中添加全屏搜索覆盖的教程。你可能在像Wired这样的热门网站上看到过这种情况。当用户点击搜索图标时，搜索框打开并覆盖整个屏幕，这可以改善用户在移动设备上的体验。在本文中，我们将向您展示如何在WordPress中添加全屏搜索覆盖。
全面屏搜索正逐渐成为一种趋势，因为它极大地改善了移动用户的搜索体验。由于手机屏幕非常小，通过提供全屏覆盖，你可以让用户更容易地在你的网站上输入和搜索。
当我们第一次收到这个教程请求时，我们知道它需要一些代码。我们在wpbeginners的目标是让事情尽可能简单。
一旦我们写完教程，我们意识到这是一个太复杂的过程，它应该被包装成一个简单的插件。
为了方便起见，我们制作了一个关于如何添加全屏搜索覆盖的视频教程，您可以在下面观看。
然而，如果你只是想按照文字说明，那么你可以按照我们的一步一步的教程，如何在WordPress中添加一个全屏搜索覆盖。
添加WordPress全屏搜索覆盖
你需要做的第一件事是安装并激活WordPress全屏搜索覆盖插件。有关更多细节，请参阅我们关于如何安装WordPress插件的一步一步指南。
WordPress全屏覆盖搜索插件开箱即用，没有设置供您配置。
你可以简单地访问你的网站，点击搜索框，看看插件在行动。
请注意，该插件与默认的WordPress搜索功能一起工作。它也可以很好地与SearchWP一起工作，这是一个高级插件，大大改善了默认的WordPress搜索。
不幸的是，这个插件不与谷歌自定义搜索工作。
自定义全屏搜索覆盖
WordPress全屏搜索覆盖插件自带样式表。为了改变搜索叠加的外观，你必须编辑插件的CSS文件或在CSS中使用!important。
首先，您需要使用FTP客户端连接到您的网站。如果你是使用FTP的新手，那么看看我们的指南，看看如何使用FTP上传文件到WordPress。
连接后，您需要找到plugin’s CSS文件夹。你会在以下路径下找到它:
yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/
你会在css文件夹下找到一个文件full-screen-search.css。你需要把这个文件下载到你的电脑上。
打开刚刚下载的文件，在记事本这样的纯文本编辑器中。您可以对该文件进行任何更改。例如，我们想改变背景和字体颜色来匹配我们的演示网站。
重要提示:
如果你在自己的主题中使用这个标签，那么最好使用重要标签，这样插件更新就不会覆盖任何更改。
对于开发人员和顾问，你也可以重命名插件并将其捆绑为主题或服务的一部分。
我们只创建了这个插件，因为所有其他方式编写本教程会’对于初学者来说太复杂了。
我们希望这篇文章能帮助你在你的WordPress站点上添加全屏搜索覆盖。你可能还想看看我们关于如何在WordPress
和。
中添加搜索开关效果的指南。
RSS