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 a pantalla completa se está convirtiendo lentamente en una tendencia porque mejora drásticamente la experiencia de búsqueda para los usuarios de dispositivos móviles. Dado que las pantallas móviles son muy pequeñas, al ofrecer una superposición de pantalla completa, facilita a los usuarios escribir y buscar en su 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 debería estar envuelto en un simple complemento.

Para que sea más fácil, 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íbete a WPBeginner

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 en 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 de 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 desde el primer momento y no hay opciones para configurar.

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

Búsqueda de pantalla completa

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

Desafortunadamente, este complemento no funciona con la búsqueda personalizada de Google.

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

El complemento de superposición de búsqueda de pantalla completa de WordPress 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 usar! Important en CSS.

Primero deberá conectarse a su sitio web mediante un cliente FTP. Si es nuevo en el uso de FTP, eche un vistazo a nuestra guía sobre cómo cargar archivos en WordPress usando FTP.

Una vez que esté conectado, debe ubicar la carpeta CSS del complemento. Lo encontrará en la siguiente ruta:

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

/**
* 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 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, no dudes en cambiar también otras reglas de estilo.

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

Un sitio de WordPress con superposición de búsqueda de pantalla completa

Nota IMPORTANTE:

Si está usando esto en su propio tema, entonces es mejor usar las etiquetas! Important para que las actualizaciones del complemento no anulen ningún cambio.

Para los 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 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 agregar una superposición de búsqueda a pantalla completa a su sitio de WordPress. Es posible que también desee ver 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 tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Botón volver arriba