Cómo crear una pantalla de búsqueda superpuesta y a pantalla completa

Crear una pantalla de búsqueda superpuesta y a pantalla completa

Crear una pantalla de búsqueda superpuesta y a pantalla completa

En este artículo vamos a aprender a crear una pantalla de búsqueda superpuesta y a pantalla completa para nuestro WordPress, probablemente hayas visto este efecto 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.

Agregar una búsqueda a pantalla completa en WordPress

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

Este artículo requiere de algo de código, pero para hacerlo lo más sencillo posible (como siempre), utilizaremos un plugin. En este caso se trata del plugin WordPress Full Screen Search Overlay.

Este plugin te permitirá crear una superposición de búsqueda a pantalla completa en WordPress. No hay configuraciones para este plugin. Simplemente actívalo y funcionará.

Una vez que el plugin esté activado, visita tu página web y haz clic en el cuadro de búsqueda para ver el plugin en acción, se te mostrará la superposición de búsqueda de pantalla completa. Básicamente, este plugin mostrará una pantalla de búsqueda superpuesta y a pantalla completa en los formularios de búsqueda de WordPress.

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 en gran medida la búsqueda predeterminada de WordPress.

Desafortunadamente no es compatible con el plugin Google Custom Search.

Pantalla de búsqueda superpuesta y a pantalla completa

 

 

Personalizar el plugin WordPress Full Screen Search Overlay

El plugin viene con su propia hoja de estilo, por lo que, para cambiar la apariencia de la pantalla de búsqueda superpuesta y a pantalla completa, tendremos que editar el archivo CSS del plugin o usar la etiqueta !important en el CSS.

Primero necesitarás conectarte a tu sitio web usando un cliente FTP. Una vez que estés conectado, debes ubicar la carpeta CSS del plugin. La encontrarás en la siguiente ruta:

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

Encontrarás un archivo llamado full-screen-search.css dentro de la carpeta css. Debes descargar este archivo en tu pc para no estropear el archivo original.

Abre el archivo que acabas de descargar en un editor de texto plano como el Bloc de notas para poder realizar cambios en este archivo. Por ejemplo, puedes cambiar el fondo y el color de la fuente para que coincidan con los colores de tu sitio web.

/**
* 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 la fuente en la línea 150. Si sabes manejar CSS, entonces también puedes cambiar otras reglas de estilo.

Una vez que hayas terminado, puedes subir este archivo a la carpeta CSS del plugin. Para ver los cambios visita tu página web.

Búsqueda a pantalla completa

Nota importante

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

Conclusión

Ya has visto lo fácil que es crear una pantalla de búsqueda superpuesta y a pantalla completa para tu WordPress: tan sencillo como descargar y activar un plugin.

 

 

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puede que también te interese...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *