Cómo insertar una caja de búsqueda a pantalla completa en WordPress

Uno de nuestros lectores, vía redes sociales, nos ha preguntado que cómo podía insertar en su WordPress una caja de búsqueda a pantalla completa en WordPress. Probablemente las hayas visto en sitios web tan famosos como Wired. Cuando el usuario hace clic en el icono de la lupa, se abre una caja de texto que cubre toda la pantalla, lo cual puede mejorar la experiencia de navegación del usuario en dispositivos móviles. En este artículo, vamos a ver cómo añadir una caja de búsqueda a pantalla completa en WordPress.

Las cajas de búsqueda a pantalla completa son tendencia del diseño web hoy en día. Mejora la forma de navegar del usuario que utiliza dispositivos móviles de manera drástica. Dado que las pantallas de los móviles son pequeñas, mostrar una caja de búsqueda a pantalla completa hace que introducir una búsqueda en dichos aparatos sea mucho más sencillo.

WPBeginner, la prestigiosa web sobre tutoriales de WordPress, en su día, creó un plugin para que el hecho de insertar una caja de búsqueda a pantalla completa fuese coser y cantar. Hoy te explicaremos cómo funciona este plugin y como integrarlo en tu instalación de WordPress.

Sin más dilación, vamos a ver cómo insertar una caja de búsqueda a pantalla completa en WordPress.

Insertar una caja 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 ello, ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.

También te puede interesar: Cómo añadir Google Search en WordPress

Teclea el nombre del plugin (que como te hemos indicado es “WordPress Full Screen Search Overlay”) y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como el primer resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.

El plugin WordPress Full Screen Search Overlay funciona out of the box, por lo que no tendrás que configurar nada para hacerlo funcionar.

Ahora, simplemente visita la parte pública de tu web y haz clic en el caja de búsqueda para ver el plugin en acción.

caja de búsqueda

Es importante recalcar que el plugin funciona con el búscador por defecto de WordPress. También se lleva bastante bien con el genial plugin SearchWP, el cual mejora la caja de búsqueda integrada en WordPress a niveles estratosféricos.

Personalizando nuestra caja de búsqueda a pantalla completa

El plugin WordPress Full Screen Search Overlay viene con su propia hoja de estilos. Si deseas cambiar la apariencia del modo pantalla completa, tendrás que editar el archivo CSS del plugin o utilizar el atributo !important en CSS.

Lo primero que debes hacer es entrar al alojamiento de tu sitio web mediante un cliente FTP. No te preocupes si no sabes hacerlo, tenemos una guía que te indica paso por paso cómo llevarlo a cabo: Cómo editar ficheros de WordPress mediante un cliente FTP.

Una vez ya conectado, debes ir a la carpeta CSS del plugin. La encontrarás en la seiguiente ruta:

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

El archivo que nos interesa de esa carpeta es el full-screen-search.css. Así que bájatelo a tu equipo que, más tarde lo editaremos.

Abre el fichero que acabas de descargar con un algún editor de texto plano como Notepad o el Bloc de notas. Si cuentas con conocimientos de CSS, eres libre de hacer los cambios que quieras. Nosotros te mostramos aquí el diseño propuesto por los propios desarrolladores del plugin para que la caja de búsqueda luzca de manera profesional. Hemos traducido los comentarios del fichero, claro está:

/**
* Reset
* Evitamos que otras hojas de estilo colapsen nuestro diseño
*/
#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;
}

/**
* Fondo
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1bc69e;

    /**
    * Añadimos transiciones de CSS3 para mostrar la búsqueda a pantalla completa
    */
    transition: opacity 0.5s linear;
}

/**
* Mostrar la caja de búsqueda a pantalla completa
*/
#full-screen-search.open {
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Formulario de búsqueda
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Botón Cerrar
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Div del formulario de búsqueda
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Color del placeholder de la caja de búsqueda
*/
#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;
}

/**
* Caja de búsqueda
*/
#full-screen-search form div input {
    width: 100%;
    height: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    color:#50B0A6; 
}

Una vez tengas los cambios, puedes volver a subir el fichero a su ubicación original volviendo a utilizar el cliente FTP. Ahora puedes ver los cambios volviendo a visitar la parte pública de tu web.

También te puede interesar: Cómo añadir la función de búsqueda por voz en WordPress

Y hasta aquí nuestro artículo sobre cómo insertar una caja de búsqueda a pantalla completa en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo ha sido extraido de WPBeginner, y el icono de la imagen destacada es obra de il Capitano. ¡Nos leemos!

1 Comentario

  1. Hola buenas!
    Muy interesante. Estoy buscando algo parecido. Quiero que al pulsar el botón de búsqueda, me aparezca un panel lateral que me ocupe media pantalla más o menos, con su caja de búsqueda y, qué demonios, puestos a pedir, resultados de la busqueda en tiempo real…. Básicamente busco una app, widget, plugin que me deje insertar slidins, o slidings al pulsar un botón.

    Muchas gracias!

Dejar respuesta

Please enter your comment!
Please enter your name here