Adding a full screen search in WordPress

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 a 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 de pantalla completa en WordPress.

Agregar una búsqueda de pantalla completa en WordPress
La búsqueda en pantalla completa se está convirtiendo lentamente en una tendencia, ya que mejora drásticamente la experiencia de búsqueda para los usuarios de dispositivos móviles. Dado que las pantallas de los dispositivos móviles son muy pequeñas, al proporcionar una superposición de pantalla completa, facilita a los usuarios escribir y encontrar su sitio web. Cuando recibimos esta solicitud de tutorial por primera vez, sabíamos que requeriría código. Nuestro objetivo en MundoCMS es hacer las cosas lo más fáciles posible. Una vez que terminamos de escribir el tutorial, nos dimos cuenta de que el proceso era demasiado complicado y, en cambio, debería estar envuelto en un simple plugin. Para que sea más fácil para usted, hemos creado un video tutorial sobre cómo agregar una superposición de búsqueda de pantalla completa que puede ver a continuación. Suscríbase a MundoCMS Sin embargo, si solo desea seguir las instrucciones basadas en texto, puede seguir nuestro tutorial paso a paso sobre cómo agregar una superposición de búsqueda de pantalla completa en WordPress.

Agregar una superposición de búsqueda de pantalla completa en WordPress

Lo primero que debe hacer es instalar y activar el plugin 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 un plugin de WordPress. El plugin de búsqueda de superposición de pantalla completa de WordPress funciona de inmediato y no hay ajustes para configurar. Simplemente puede visitar su sitio web y hacer clic en el cuadro de búsqueda para ver el plugin en acción.
Búsqueda de pantalla completa
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 en gran medida la búsqueda predeterminada de WordPress. Desafortunadamente, este plugin no funciona con la búsqueda personalizada de Google.

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

El plugin de superposición de búsqueda de pantalla completa de WordPress viene con su propia hoja de estilo. Para cambiar el aspecto de la superposición de búsqueda, deberá editar el archivo CSS del plugin o usar! Importante en CSS. Primero deberá 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 usando FTP. Una vez que haya iniciado sesión, debe ubicar la carpeta CSS del plugin. Lo encontrará en la siguiente ruta: yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/ Encontrará un archivo full-screen-search.css en la carpeta css. Necesita descargar este archivo a su computadora. Abra el archivo que acaba de descargar en un editor de texto sin formato como el Bloc de notas. Puede realizar cambios en este archivo. Por ejemplo, queríamos cambiar el fondo y el color de la fuente para que coincida con nuestro sitio web de demostración. / ** * Restablecer * – Evita que los temas y otros plugins apliquen sus propios estilos a nuestra búsqueda de pantalla completa * / # búsqueda de pantalla completa, # botón de búsqueda de pantalla completa, # botón de búsqueda de pantalla completa cerrar, # forma de búsqueda de pantalla completa, # formulario de búsqueda de div en pantalla completa, # formulario de búsqueda de entrada div en pantalla completa, # formulario de búsqueda div en pantalla completa input.search {familia de fuentes: Arial, sans-serif; fondo: ninguno; borde: 0 ninguno; radio del borde: 0; -webkit-border-radius: 0; -moz-border-radius: 0; flotar: ninguno; tamaño de fuente: 100%; altura: auto; espaciado de letras: normal; estilo de lista: ninguno; esquema: ninguno; posición: estática; decoración de texto: ninguna; sangría de texto: 0; sombra de texto: ninguna; transformación de texto: ninguna; ancho: auto; visibilidad: visible; desbordamiento: visible; margen: 0; acolchado: 0; altura de la fila: 1; tamaño de caja: caja de borde; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-shadow: ninguno; -moz-box-shadow: ninguno; -ms-box-shadow: ninguno; -o-box-shadow: ninguno; cuadro de sombra: ninguno; -aparición del kit de web: ninguna; transición: ninguna; -webkit-transition: ninguno; -moz-transición: ninguna; -o-transición: ninguna; -ms-transición: ninguna; } / ** * Fondo * / # búsqueda a pantalla completa {visibilidad: oculta; opacidad: 0; índice z: 999998; alto: 0; izquierda: 0; ancho: 100%; altura: 100%; fondo: # 1bc69e; / ** * Se agregaron algunas transiciones CSS3 para mostrar la búsqueda a pantalla completa * / transición: opacidad 0.5s lineal; } / ** * Mostrar búsqueda a pantalla completa cuando se abre * / # full-screen-search.open {/ ** * Debido a que usamos visibilidad y opacidad para el soporte de transiciones CSS, * definimos position: fixed; aquí para que la búsqueda a pantalla completa no bloquee * los elementos HTML subyacentes cuando no están abiertos * / posición: fija; visibilidad: visible; opacidad: 1; } / ** * Formulario de búsqueda * / # formulario de búsqueda de pantalla completa {posición: relativa; ancho: 100%; altura: 100%; } / ** * Botón Cerrar * / # botón de búsqueda de pantalla completa. Cerrar {posición: absoluta; índice z: 999999; alto: 20px; derecha: 20px; tamaño de fuente: 30px; peso de la fuente: 300; color: # 999; cursor: puntero; } / ** * Formulario de búsqueda de div * / # Formulario de búsqueda de div de pantalla completa {posición: absoluta; ancho: 50%; altura: 100px; alto: 50%; izquierda: 50%; margen: -50px 0 0 -25%; } / ** * Color del marcador de posición de entrada del formulario de búsqueda * / # formulario de búsqueda de pantalla completa div input :: – webkit-input-placeholder {font-family: Arial, sans-serif; color: #ccc; } # formulario de búsqueda de pantalla completa input div: -moz-placeholder {font-family: Arial, sans-serif; color: #ccc; } # formulario de búsqueda de pantalla completa div input :: – moz-placeholder {font-family: Arial, sans-serif; color: #ccc; } # formulario de búsqueda de pantalla completa input 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 div {width: 100%; altura: 100px; fondo: #eee; relleno: 20px; tamaño de fuente: 40px; altura de la fila: 60px; / * Agregamos nuestro propio color de fuente aquí * / color: # 50B0A6; } En este código, solo cambiamos el color de fondo en la línea 62 y agregamos el color de la fuente en la línea 150. Si eres bueno con CSS, entonces siéntete libre de cambiar otras reglas. Una vez que haya terminado, puede cargar este archivo en la carpeta CSS del plugin mediante FTP. Ahora puede ver sus cambios visitando su sitio web.
Un sitio de WordPress con superposición de búsqueda a pantalla completa
Nota IMPORTANTE:
Si lo está usando en su propio tema, ¡es mejor usarlo! Etiquetas importantes para que las actualizaciones del plugin no deshagan ningún cambio. Para los desarrolladores y consultores, también puede simplemente cambiar el nombre del plugin y agruparlo como parte de su tema o servicios. Solo creamos este plugin porque todas las otras formas de escribir este tutorial habrían sido demasiado complicadas para los usuarios novatos. 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 efecto de alternancia de búsqueda en WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply