Cómo añadir un efecto de alternancia de búsqueda en WordPress

¿Has visto el icono de búsqueda con efecto de palanca en muchos sitios web populares? Echa un vistazo a nuestro proyecto hermano Lista25 para ver un ejemplo. La idea es mostrar un simple icono de búsqueda, y cuando el usuario hace clic en él, los formularios de búsqueda se deslizan hacia fuera, lo que se conoce como efecto de alternancia. Es un efecto limpio que además ahorra espacio y permite a tus usuarios centrarse en el contenido. Por no hablar de que es estupendo para los temas responsivos para móviles. En este artículo, te mostraremos cómo añadir un efecto de búsqueda en los temas de WordPress

Nota: Este tutorial es para usuarios intermedios con conocimientos de las etiquetas de las plantillas de WordPress, HTML y CSS. Se aconseja a los usuarios de nivel principiante que practiquen primero en un servidor local

Mostrar el formulario de búsqueda de WordPress

WordPress añade clases CSS por defecto al HTML generado por varias etiquetas de plantilla dentro de un tema. Los temas de WordPress utilizan <?php get_search_form(); ?> para mostrar el formulario de búsqueda. Puede mostrar dos formularios de búsqueda diferentes, uno para temas HTML4 y otro para temas con soporte HTML5. Si tu tema tiene add_theme_support('html5', array('search-form')) en el archivo functions.php, esta etiqueta de plantilla mostrará un formulario de búsqueda en HTML5. De lo contrario, mostrará un formulario de búsqueda en HTML4

Otra forma de averiguar qué formulario genera tu tema, es mirar el código fuente del formulario de búsqueda

Este es el formulario que la etiqueta de plantilla get_search_form() mostrará cuando tu tema no tenga soporte HTML5

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

Y este es el formulario que generará para un tema con soporte HTML5

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
	</label>
	<input type="submit" class="search-submit" value="Search" />
</form>

Para este tutorial, utilizaremos el formulario de búsqueda en HTML5. Si tu tema genera un formulario de búsqueda en HTML4, añade esta línea de código en el archivo functions.php de tu tema

add_theme_support('html5', array('search-form'));

Una vez que te hayas asegurado de que tu formulario de búsqueda está generando un formulario HTML5, el siguiente paso es colocar el formulario de búsqueda donde quieras mostrarlo con el efecto de alternancia

Añadir el efecto de alternancia al formulario de búsqueda de WordPress

Lo primero que necesitarás es un icono de búsqueda. El tema predeterminado Twenty Thirteen de WordPress viene con un pequeño icono muy bonito, y lo utilizaremos en nuestro tutorial. Sin embargo, puedes crear el tuyo propio en Photoshop o descargar uno de la web. Sólo asegúrate de que el archivo se llame search-icon.png

Ahora tienes que subir este icono de búsqueda a la carpeta de imágenes de tu tema. Conéctate a tu sitio web utilizando un cliente FTP como Filezilla, y abre el directorio de tu tema

Ahora este es el paso final y más crucial. Tienes que añadir este CSS a la hoja de estilos de tu tema

.site-header .search-form {
	position: absolute;
	right: 200px;
	top: 200px;
}

.site-header .search-field {
	background-color: transparent;
	background-image: url(images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;
}

.site-header .search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;
}
.search-form
.search-submit { 
display:none;
}

Lo importante a tener en cuenta de este CSS, son los efectos de transición CSS3 que nos permiten crear el efecto de alternancia con facilidad. Ten en cuenta también que tendrás que ajustar el posicionamiento del icono de búsqueda y del formulario según el diseño de tu tema

Esperamos que este artículo te haya ayudado a añadir el efecto de alternancia de búsqueda en tu tema de WordPress. ¿Qué opinas sobre el formulario de búsqueda alternante? Cada vez vemos más sitios que utilizan este efecto. Deja tus opiniones y preguntas en los comentarios de abajo o únete a la conversación en Google+.