如何在 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。您需要将此文件下载到您的计算机上。

打开您刚刚在记事本等纯文本编辑器中下载的文件。您可以对此文件进行任何更改。例如，我们想要更改背景和字体颜色以匹配我们的演示网站。

1234567891011121314151617 号18192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 /*** Reset* - Prevents Themes and other Plugins from applying their own styles to our full screen search*/#full-screen-search,#full-screen-search button,#full-screen-search button.close,#full-screen-search form,#full-screen-search form div,#full-screen-search form div input,#full-screen-search form div input.search { font-family: Arial, sans-serif; background:none; border:0none; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; float:none; font-size:100%; height:auto; letter-spacing:normal; list-style:none; outline:none; position:static; text-decoration:none; text-indent:0; text-shadow:none; text-transform:none; width:auto; visibility:visible; overflow:visible; margin:0; padding:0; line-height:1; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none; -webkit-appearance:none; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none;}/*** Background*/#full-screen-search { visibility: hidden; opacity: 0; z-index: 999998; top: 0; left: 0; width: 100%; height: 100%; background: #1bc69e; /** * Add some CSS3 transitions for showing the Full Screen Search */ transition: opacity 0.5s linear;}/*** Display Full Screen Search when Open*/#full-screen-search.open { /** * Because we're using visibility and opacity for CSS transition support, * we define position: fixed; here so that the Full Screen Search doesn't block * the underlying HTML elements when not open */ position: fixed; visibility: visible; opacity: 1;}/*** Search Form*/#full-screen-search form { position: relative; width: 100%; height: 100%;}/*** Close Button*/#full-screen-search button.close { position: absolute; z-index: 999999; top: 20px; right: 20px; font-size: 30px; font-weight: 300; color: #999; cursor: pointer;}/*** Search Form Div*/#full-screen-search form div { position: absolute; width: 50%; height: 100px; top: 50%; left: 50%; margin: -50px00-25%;}/*** Search Form Input Placeholder Color*/#full-screen-search form div input::-webkit-input-placeholder { font-family: Arial, sans-serif; color: #ccc;}#full-screen-search form div input:-moz-placeholder { font-family: Arial, sans-serif; color: #ccc;}#full-screen-search form div input::-moz-placeholder { font-family: Arial, sans-serif; color: #ccc;}#full-screen-search form div input:-ms-input-placeholder { font-family: Arial, sans-serif; color: #ccc;}/*** Search Form Input*/#full-screen-search form div input { width: 100%; height: 100px; background: #eee; padding: 20px; font-size: 40px; line-height: 60px; /* We have added our own font color here */ color:#50B0A6; }