Cómo agregar una superposición de búsqueda de pantalla completa en WordPress

Recientemente, uno de nuestros lectores preguntó si podríamos escribir un tutorial sobre cómo agregar una superposición de búsqueda en pantalla completa en WordPress. Probablemente hayas visto esto en sitios populares como Wired. Cuando un usuario hace clic en el icono 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 en pantalla completa en WordPress.

La búsqueda en pantalla completa se está convirtiendo lentamente en una tendencia porque mejora drásticamente la experiencia de búsqueda para usuarios móviles. Dado que las pantallas móviles son muy pequeñas, al ofrecer una superposición de pantalla completa, facilita a los usuarios la escritura y la búsqueda en su sitio web.

Cuando recibimos esta solicitud de tutorial por primera vez, sabíamos que requeriría algún código. Nuestro objetivo en WPBeginner es hacer las cosas lo más simples posible..

Una vez que habíamos terminado de escribir el tutorial, nos dimos cuenta de que era un proceso demasiado complicado, y que debería ser envuelto en un simple complemento..

Para hacerlo más fácil, hemos creado un video tutorial sobre cómo agregar una superposición de búsqueda en 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 a 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 en pantalla completa de WordPress. 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 manera 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 de WordPress predeterminada..

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 plugin WordPress Full Screen Search Overlay 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 utilizarlo. Importante en CSS.

Primero deberá conectarse a su sitio web utilizando un cliente FTP. Si no está familiarizado con el uso de FTP, consulte nuestra guía sobre cómo cargar archivos en WordPress mediante FTP..

Una vez que esté conectado, debe localizar la carpeta CSS del complemento. Lo encontrarás en el siguiente camino:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Encontraras 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 plano como el Bloc de notas. Puede hacer cualquier cambio en este archivo. Por ejemplo, quisimos cambiar el fondo y el color de la fuente para que coincidan con nuestro sitio web de demostración..

 / ** * Restablecer *: evita que los temas y otros complementos apliquen sus propios estilos a nuestra búsqueda en pantalla completa * / # búsqueda en pantalla completa, # botón de búsqueda en pantalla completa, # botón de búsqueda en pantalla completa.cerrar, # formulario de búsqueda en pantalla completa, # formulario de búsqueda en pantalla completa div, # formulario de búsqueda en pantalla completa div input, # formulario de búsqueda en pantalla completa div input.search font-family: Arial, sans-serif; fondo: ninguno; borde: 0 ninguno; radio del borde: 0; -webkit-border-radius: 0; -moz-border-radio: 0; flotar: ninguno; tamaño de letra: 100%; altura: auto; espaciado entre letras: normal; estilo de lista: ninguno; esquema: ninguno; posición: estática; texto-decoración: ninguno; texto-sangría: 0; texto-sombra: ninguno; transformación de texto: ninguna; ancho: auto; visibilidad: visible; desbordamiento: visible; margen: 0; relleno: 0; línea de altura: 1; tamaño de caja: caja de borde; -webkit-box-dimensionamiento: cuadro de borde; -mano-caja de tamaño: cuadro de borde; -webkit-box-shadow: ninguno; -moz-box-shadow: ninguno; -ms-box-shadow: ninguno; -o-caja-sombra: ninguna; caja de sombra: ninguna; -webkit-apariencia: ninguno; transición: ninguna; -webkit-transición: ninguna; -moz de transición: ninguna; -o-transición: ninguna; -ms-transición: ninguna;  / ** * Fondo * / # búsqueda en pantalla completa visibilidad: oculta; opacidad: 0; índice z: 999998; arriba: 0; izquierda: 0; ancho: 100%; altura: 100%; fondo: # 1bc69e; / ** * Agregue algunas transiciones CSS3 para mostrar la búsqueda en pantalla completa * / transition: opacity 0.5s linear;  / ** * Mostrar búsqueda en pantalla completa al abrir * / # full-screen-search.open / ** * Debido a que estamos usando la visibilidad y la opacidad para el soporte de transición de CSS, * definimos position: fixed; aquí para que la búsqueda en pantalla completa no bloquee * los elementos HTML subyacentes cuando no está abierto * / position: corregido; visibilidad: visible; opacidad: 1;  / ** * Formulario de búsqueda * / # formulario de búsqueda de pantalla completa posición: relativo; ancho: 100%; altura: 100%;  / ** * Botón de cierre * / # botón de búsqueda de pantalla completa.cerrar posición: absoluta; índice z: 999999; superior: 20px; derecha: 20px; tamaño de letra: 30px; peso de la fuente: 300; color: # 999; cursor: puntero;  / ** * Div. Formulario de búsqueda * / # formulario de búsqueda en pantalla completa div posición: absoluta; ancho: 50%; altura: 100px; superior: 50%; izquierda: 50%; margen: -50px 0 0 -25%;  / ** * Color de marcador de posición de entrada de formulario de búsqueda * / # formulario de búsqueda de pantalla completa div input :: - webkit-input-placeholder fuente-familia: Arial, sans-serif; color: #ccc;  # entrada de pantalla completa búsqueda div: -moz-placeholder font-family: Arial, sans-serif; color: #ccc;  # búsqueda de pantalla completa formulario de entrada div :: - moz-placeholder font-family: Arial, sans-serif; color: #ccc;  # entrada de pantalla completa búsqueda div: -ms-input-placeholder font-family: Arial, sans-serif; color: #ccc;  / ** * Entrada de formulario de búsqueda * / # entrada de formulario de búsqueda de pantalla completa ancho: 100%; altura: 100px; fondo: #eee; relleno: 20px; tamaño de fuente: 40px; altura de línea: 60px; / * Hemos añadido nuestro propio color de fuente aquí * / color: # 50B0A6;  

En este código, solo hemos cambiado el color de fondo en la línea 62, y hemos agregado color de fuente en la línea 150. Si eres bueno con CSS, entonces puedes cambiar otras reglas de estilo también..

Una vez que haya terminado, puede volver a cargar este archivo en la carpeta CSS del complemento mediante FTP. Ahora puedes ver tus cambios visitando tu sitio web..

Nota IMPORTANTE:

Si está usando esto en su propio tema, entonces es mejor usar etiquetas importantes 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 otras formas de escribir este tutorial habrían sido demasiado complicadas para los usuarios principiantes..

Esperamos que este artículo le haya ayudado a agregar una superposición de búsqueda en pantalla completa a su sitio de WordPress. También puede querer ver nuestra guía sobre cómo agregar un efecto de alternancia de búsqueda en WordPress

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..