Recientemente, uno de nuestros lectores preguntó si podíamos escribir un tutorial sobre cómo agregar una superposición de búsqueda de pantalla completa en WordPress. Probablemente hayas visto esto en sitios populares como Wired. Cuando un usuario hace clic en el ícono de búsqueda, el cuadro de búsqueda se abre y cubre toda la pantalla, lo que puede mejorar la experiencia del usuario en dispositivos móviles. En este artículo, le mostraremos cómo agregar una superposición de búsqueda de pantalla completa en WordPress.
La búsqueda de pantalla completa se está convirtiendo lentamente en una tendencia porque mejora drásticamente la experiencia de búsqueda para los usuarios móviles. Dado que las pantallas móviles son muy pequeñas, al ofrecer una superposición de pantalla completa, facilita que los usuarios escriban y busquen en su sitio web.
Cuando recibimos esta solicitud de tutorial por primera vez, sabíamos que requeriría algo de código. Nuestro objetivo en AprenderWP es hacer las cosas lo más simples posible.
Una vez que terminamos de escribir el tutorial, nos dimos cuenta de que era un proceso demasiado complicado y que debería incluirse en un complemento simple.
Para hacerlo más fácil, hemos creado un video tutorial sobre cómo agregar una superposición de búsqueda de pantalla completa que puede ver a continuación.
Sin embargo, si solo desea seguir las instrucciones de texto, puede seguir nuestro tutorial paso a paso sobre cómo agregar una superposición de búsqueda de pantalla completa en WordPress.
Agregar superposición de búsqueda de pantalla completa en WordPress
Lo primero que debe hacer es instalar y activar el Superposición de búsqueda de pantalla completa de WordPress enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
El complemento de búsqueda de superposición de pantalla completa de WordPress funciona de forma inmediata y no hay configuraciones para configurar.
Simplemente puede visitar su sitio web y hacer clic en el cuadro de búsqueda para ver el complemento en acción.
Tenga en cuenta que el complemento funciona con la función de búsqueda predeterminada de WordPress. También funciona muy bien con SearchWP, que es un complemento premium que mejora en gran medida la búsqueda predeterminada de WordPress.
Desafortunadamente, este complemento no funciona con la búsqueda personalizada de Google.
Personalización de la superposición de búsqueda de pantalla completa
El complemento de superposición de búsqueda de pantalla completa de WordPress viene con su propia hoja de estilo. Para cambiar la apariencia de la superposición de búsqueda, deberá editar el archivo CSS del complemento o usar !importante en CSS.
Primero deberá conectarse a su sitio web mediante un cliente FTP. Si es nuevo en el uso de FTP, eche un vistazo a nuestra guía sobre cómo cargar archivos en WordPress usando FTP.
Una vez que esté conectado, debe ubicar la carpeta CSS del complemento. Lo encontrarás en la siguiente ruta:
yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/
Encontrarás un archivo full-screen-search.css dentro de la carpeta css. Necesitas descargar este archivo a tu computadora.
Abra el archivo que acaba de descargar en un editor de texto sin formato como el Bloc de notas. Puede realizar cualquier cambio en este archivo. Por ejemplo, queríamos cambiar el fondo y el color de la fuente para que coincidieran con nuestro sitio web de demostración.
/**
* 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:0 none;
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: -50px 0 0 -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;
}
En este código, solo hemos cambiado el color de fondo en la línea 62 y hemos agregado el color de fuente en la línea 150. Si eres bueno con CSS, no dudes en cambiar también otras reglas de estilo.
Una vez que haya terminado, puede volver a cargar este archivo en la carpeta CSS del complemento mediante FTP. Ahora puede ver sus cambios visitando su sitio web.
Nota IMPORTANTE:
Si está usando esto en su propio tema, entonces es mejor usar las etiquetas !important para que las actualizaciones del complemento no anulen ningún cambio.
Para desarrolladores y consultores, también puede simplemente cambiar el nombre del complemento y agruparlo como parte de su tema o servicios.
Solo creamos este complemento porque todas las demás formas de escribir este tutorial habrían sido demasiado complicadas para los usuarios principiantes.
Esperamos que este artículo lo haya ayudado a agregar una superposición de búsqueda de pantalla completa a su sitio de WordPress. También puede consultar nuestra guía sobre cómo agregar un efecto de cambio de búsqueda en WordPress
.