Cómo agregar una superposición de búsqueda de pantalla completa en WordPress
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. Es posible que haya visto esto en sitios populares como Wired. Cuando el usuario toca el ícono de búsqueda, el cuadro de búsqueda se abre y cubre toda la pantalla, lo que mejora 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 a pantalla completa se está convirtiendo lentamente en una tendencia, ya que mejora en gran medida la experiencia de búsqueda para los usuarios de dispositivos móviles. Debido a que las pantallas móviles son tan pequeñas, al proporcionar una superposición de pantalla completa, puede facilitar que los usuarios escriban y busquen en su sitio.
Cuando recibimos esta solicitud de tutorial por primera vez, sabíamos que necesitaba algo de código. Nuestro objetivo en AprenderWP es mantener las cosas lo más simples posible.
Después de escribir el tutorial, nos dimos cuenta de que el proceso era demasiado complicado y debería haberse incluido en un complemento simple.
Para su comodidad, hemos creado un tutorial en video sobre cómo agregar una superposición de búsqueda a pantalla completa, que puede ver a continuación.
Suscríbete a WPBeginner
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 complemento de superposición de búsqueda de pantalla completa de WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.
El complemento de búsqueda de superposición de pantalla completa de WordPress funciona de inmediato y no necesita configurar ninguna configuración.
Simplemente puede visitar su sitio web y hacer clic en el cuadro de búsqueda para ver los complementos en acción.
Tenga en cuenta que este complemento funciona con la funcionalidad de búsqueda predeterminada de WordPress. También funciona con SearchWP, 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.
Superposición de búsqueda personalizada a 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, debe editar el archivo CSS del complemento o usar !important en el CSS.
Primero, debe conectarse a su sitio web mediante un cliente FTP. Si es nuevo en el uso de FTP, consulte nuestra guía sobre cómo cargar archivos en WordPress mediante FTP.
Una vez conectado, debe encontrar 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, queremos cambiar el fondo y el color de la fuente para que coincida 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 cambiamos el color de fondo en la línea 62 y agregamos el color de fuente en la línea 150. Si está familiarizado con CSS, también puede cambiar otras reglas de estilo.
Una vez hecho esto, puede usar FTP para volver a cargar este archivo en la carpeta CSS del complemento. Ahora puede ver sus cambios visitando su sitio web.
Nota IMPORTANTE:
Si lo está usando en su propio tema, es una buena idea usar la etiqueta !important para que las actualizaciones del complemento no sobrescriban ningún cambio.
Para desarrolladores y consultores, también puede cambiar el nombre del complemento y agruparlo como parte de un tema o servicio.
Solo creamos este complemento porque todas las demás formas de escribir este tutorial son demasiado complicadas para los principiantes.
Esperamos que este artículo le 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 botón de búsqueda en WordPress
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
