¿Has visto el ícono de alternar búsqueda en muchos sitios web populares? Mira nuestro proyecto hermano lista25 para un ejemplo. La idea es mostrar un ícono de búsqueda simple y cuando el usuario hace clic en él, los formularios de búsqueda se desplazan, también conocido como el efecto de alternancia. Es un efecto limpio que también ahorra espacio y permite a los usuarios concentrarse en el contenido. Sin mencionar que es excelente para temas móviles receptivos. En este artículo, le mostraremos cómo agregar un efecto de cambio de búsqueda en los temas de WordPress.

Nota: Este tutorial es para usuarios intermedios con conocimientos prácticos de etiquetas de plantilla de WordPress, HTML y CSS. Se recomienda a los usuarios de nivel principiante que practiquen primero en el servidor local.

Ver el formulario de búsqueda de WordPress

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

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

Esta es la etiqueta de plantilla get_search_form () del formulario que se mostrará cuando su tema no sea compatible con 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>

Por el bien de este tutorial, usaremos el formulario de búsqueda HTML5. Si su tema genera un formulario de búsqueda HTML4, agregue esta línea de código en el archivo functions.php de su tema:

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

Después de asegurarse de que el formulario de búsqueda genera un formulario HTML5, el siguiente paso es colocar el formulario de búsqueda donde desea que aparezca con el efecto de alternancia.

Se agregó el efecto Alternar al formulario de búsqueda de WordPress

Lo primero que necesitará es un icono de búsqueda. El tema predeterminado de Twenty Thirteen en WordPress viene con un pequeño ícono muy agradable y lo usaremos en nuestro tutorial. Sin embargo, siéntete libre de crear el tuyo propio en Photoshop o descargar uno de la web. Solo asegúrate de que el archivo se llame search-icon.png.

Ahora debe cargar este ícono de búsqueda en la carpeta de imágenes de su tema. Conéctese a su sitio web utilizando un cliente FTP como Filezilla y abra su directorio de temas.

Ahora bien, este es el paso final y más crucial. Debe agregar este CSS a la hoja de estilo de su 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 sobre este CSS son los efectos de transición de CSS3 que nos permiten crear fácilmente el efecto de alternancia. También tenga en cuenta que aún deberá ajustar el ícono de búsqueda y la ubicación del formulario según el diseño de su tema.

Esperamos que este artículo le haya ayudado a agregar el efecto de cambio de búsqueda en su tema de WordPress. ¿Qué opinas del formulario de búsqueda alternativo? Cada vez vemos más sitios que utilizan este efecto. Deje sus comentarios y preguntas en los comentarios a continuación o únase a nosotros en la conversación en Google+.