Cómo añadir una sobreimpresión de búsqueda a pantalla completa en WordPress

Recientemente, uno de nuestros lectores nos preguntó si podíamos escribir un tutorial sobre cómo añadir una superposición de búsqueda a pantalla completa en WordPress. Usted probablemente ha visto esto en sitios populares como Wired. Cuando un usuario hace clic en el icono de búsqueda, se abre el cuadro de búsqueda y cubre toda la pantalla, lo que puede mejorar la experiencia del usuario en los dispositivos móviles. En este artículo, le mostraremos cómo añadir una superposición de búsqueda a pantalla completa en WordPress.

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

Cuando recibimos por primera vez esta solicitud de tutorial, sabíamos que requeriría algún código. Nuestra meta en AprenderWP es hacer las cosas tan simples como sea posible.

Una vez que terminamos de escribir el tutorial, nos dimos cuenta de que era un proceso demasiado complicado, y que debería estar envuelto en un simple plugin.

Para hacerlo más fácil, hemos creado un tutorial en vídeo sobre cómo añadir una sobreimpresión de búsqueda a pantalla completa que puede ver a continuación.

Suscribirse a AprenderWP

Sin embargo, si sólo quieres seguir instrucciones de texto, puedes seguir nuestro tutorial paso a paso sobre cómo añadir una superposición de búsqueda a pantalla completa en WordPress.

Adición de la superposición de búsqueda a pantalla completa en WordPress

Lo primero que tienes que hacer es instalar y activar el plugin WordPress Full Screen Search Overlay. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

El plugin de búsqueda de superposición de pantalla completa de WordPress funciona desde la caja, y no hay ninguna configuración que puedas configurar.

Puede visitar su sitio web y hacer clic en el cuadro de búsqueda para ver el plugin en acción.

Tenga en cuenta que el plugin funciona con la función de búsqueda predeterminada de WordPress. También funciona muy bien con SearchWP, que es un plugin premium que mejora enormemente la búsqueda por defecto de WordPress.

Desafortunadamente, este plugin no funciona con Google Custom Search.

Personalización de la sobreimpresión de búsqueda a pantalla completa

El plugin de búsqueda en pantalla completa de WordPress viene con su propia hoja de estilos. Para cambiar la apariencia de la sobreimpresión de búsqueda, deberá editar el archivo CSS del plugin o utilizar !important en CSS.

Primero tendrá que conectarse a su sitio web utilizando un cliente FTP. Si usted es nuevo en el uso de FTP, entonces eche un vistazo a nuestra guía sobre cómo subir archivos a WordPress usando FTP.

Una vez que esté conectado, necesita localizar la carpeta CSS del plugin. Lo encontrará bajo el siguiente camino:

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

Encontrará un archivo full-screen-search.css dentro de la carpeta css. Necesita descargar este archivo a su computadora.

Abra el archivo, que acaba de descargar en un editor de texto plano como el Bloc de notas. Puede realizar cualquier modificación en este fichero. Por ejemplo, queríamos cambiar el fondo y el color de la fuente para que coincidiera con nuestro sitio web de demostración.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151/*** Reiniciar* – Evita que los Temas y otros Plugins apliquen sus propios estilos a nuestra búsqueda en pantalla completa*/#full-screen-search,#Botón de búsqueda de pantalla completa, botón de búsqueda de pantalla completa.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; -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;0; relleno:0; línea-altura:1; tamaño de la caja:border-box; -tamaño de la caja-webkit-box:border-box; -tamaño de la caja-moz-box:border-box; -tamaño de la caja-webkit-box-sombra:none; -tamaño de la caja-moz-box-sombra:none; -tamaño de la caja-sombra: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;} /*** Visibilidad: oculta; opacidad: 0; índice z: 999998; arriba: 0; izquierda: 0; anchura: 100%; altura: 100%; fondo: #1bc69e; /** * Añadir algunas transiciones CSS3 para mostrar la búsqueda en pantalla completa */ transición: opacidad 0.5s lineal;} /*** Debido a que estamos usando visibilidad y opacidad para el soporte de transición de CSS, * definimos posición: fija; aquí para que la búsqueda a pantalla completa no bloquee * los elementos HTML subyacentes cuando no está abierta */ posición: fija; visibilidad: visible; opacidad: 1;}}. /*** Formulario de búsqueda*/#formulario de búsqueda a pantalla completa { posición: relativa; anchura: 100%; altura: 100%;}}. /*** Botón Cerrar*/#botón de búsqueda en toda la pantalla Cerrar { posición: absoluta; índice z: 999999; arriba: 20px; derecha: 20px; tamaño de fuente: 30px; peso de fuente: 300; color: #999; cursor: puntero;} /*** Search Form Div*/#full-screen-search form div { position: absolute; width: 50%; height: 100px; top: 50%; izquierda: 50%; margen: -50px00-25%;} /*** Search Form Input Placeholder Color*/#full-screen-search form div input::-webkit-input-placeholder { font-family: Arial, sans-serif; color: #ccc;}##búsqueda en pantalla completa de div input:-moz-placeholder { font-family: Arial, sans-serif; color: #ccc;}##búsqueda a pantalla completa en la entrada div::-moz-placeholder { font-family: Arial, sans-serif; color: #ccc;}##búsqueda en pantalla completa de la forma 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; acolchado: 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, sólo hemos cambiado el color de fondo en la línea 62, y añadido el color de fuente en la línea 150. Si usted es bueno con CSS, entonces siéntase libre de cambiar otras reglas de estilo también.

Una vez que hayas terminado, puedes volver a subir este archivo a la carpeta CSS del plugin usando FTP. Ahora puede ver sus cambios visitando su sitio web.

Nota importante:

Si está usando esto en su propio tema, entonces es mejor usar etiquetas importantes para que las actualizaciones del plugin no invaliden ningún cambio.

Para desarrolladores y consultores, también puede renombrar el plugin y agruparlo como parte de su tema o servicios.

Sólo creamos este plugin porque todas las demás formas de escribir este tutorial habrían sido demasiado complicadas para los usuarios principiantes.

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

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario