Cómo agregar una superposición de búsqueda a 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 lo hayas visto en sitios populares como Wired. Cuando un usuario hace clic en el ícono 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, te mostraremos cómo agregar una superposición de búsqueda a pantalla completa en WordPress.

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

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

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

Para hacerlo fácil, hemos creado un tutorial en video sobre cómo agregar una superposición de búsqueda a pantalla completa que puedes ver a continuación.

Sin embargo, si solo deseas seguir instrucciones de texto, puedes seguir nuestro tutorial paso a paso sobre cómo agregar una superposición de búsqueda a pantalla completa en WordPress.

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

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

El plugin WordPress Full Screen Overlay Search funciona de inmediato y no hay configuraciones que debas ajustar.

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

Ten 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 predeterminada de WordPress.

Desafortunadamente, este plugin no funciona con Búsqueda Personalizada de Google.

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

El plugin WordPress Full Screen Search Overlay viene con su propia hoja de estilos. Para cambiar la apariencia de la superposición de búsqueda, tendrás que editar el archivo CSS del plugin o usar !important en CSS.

Primero, necesitarás conectarte a tu sitio web usando un cliente FTP. Si eres nuevo usando FTP, entonces échale un vistazo a nuestra guía sobre cómo subir archivos a WordPress usando FTP.

Una vez que estés conectado, necesitas localizar la carpeta CSS del plugin. La encontrarás bajo la siguiente ruta:

tudominio.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.

Abre el archivo que acabas de descargar en un editor de texto plano como el Bloc de notas. Puedes hacer cualquier cambio en este archivo. Por ejemplo, queríamos cambiar el color de fondo y de fuente para que coincidiera 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 hemos cambiado el color de fondo en la línea 62 y hemos agregado el color de fuente en la línea 150. Si dominas CSS, siéntete libre de cambiar otras reglas de estilo también.

Una vez que hayas terminado, puedes subir este archivo de vuelta a la carpeta CSS del plugin usando FTP. Ahora podrás ver tus cambios visitando tu sitio web.

Nota importante:

Si estás usando esto en tu propio tema, entonces es mejor usar etiquetas !important para que las actualizaciones del plugin no anulen ningún cambio.

Para desarrolladores y consultores, también puedes simplemente renombrar el plugin y agruparlo como parte de tu tema o servicios.

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

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

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para tutoriales de video de WordPress. También puedes encontrarnos en Twitter y Facebook.