¿Ve iconos de búsqueda con interruptores en muchos sitios populares? Tome nuestro proyecto hermano, List25, por ejemplo. La idea es mostrar un ícono de búsqueda simple y cuando el usuario hace clic en él, el formulario de búsqueda se desliza hacia afuera, también conocido como efecto de alternancia. Es un efecto limpio que también ahorra espacio y permite a los usuarios concentrarse en el contenido. Sin mencionar que esto es excelente para temas de respuesta móvil. En este artículo, le mostraremos cómo agregar un efecto de cambio de búsqueda en su tema de WordPress.

Efecto de alternancia de búsqueda en acción

notas: Este tutorial es para usuarios intermedios con un conocimiento práctico de las etiquetas de plantilla de WordPress, HTML y CSS. Se recomienda que los principiantes practiquen primero en el servidor local.

Mostrar formulario de búsqueda de WordPress

WordPress agrega clases CSS predeterminadas al HTML generado por varias etiquetas de plantilla dentro del tema. Uso del tema de WordPress <?php get_search_form(); ?> La pestaña Plantillas muestra 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')) Agregue una línea al archivo functions.php y esta etiqueta de plantilla generará un formulario de búsqueda HTML5. De lo contrario, generará un 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 de formulario get_search_form() que se mostrará si su tema no es compatible con HTML5:

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

Este es el formulario que generará para los temas habilitados para HTML5.

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

En este tutorial, utilizaremos un formulario de búsqueda HTML5. Si su tema genera un formulario de búsqueda HTML4, agregue esta línea de código al archivo functions.php de su tema:

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

Una vez que haya determinado que su formulario de búsqueda está generando un formulario HTML5, el siguiente paso es colocar el formulario de búsqueda donde desea que aparezca utilizando el efecto de transición.

Agregar efecto de alternar al formulario de búsqueda de WordPress

Lo primero que necesitas es un icono de búsqueda. El tema veintitrés predeterminado en WordPress viene con un pequeño ícono realmente agradable que usaremos en nuestros tutoriales. Sin embargo, siéntete libre de crear el tuyo propio en Photoshop o descargar uno de la web. Solo asegúrese de que el nombre del archivo sea search-icon.png.

Ahora debe cargar este icono 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 último y más importante paso. 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;
}

Una cosa importante a tener en cuenta sobre este CSS es el efecto de transición CSS3, que nos permite crear fácilmente efectos de transición. También tenga en cuenta que aún debe ajustar la ubicación del ícono de búsqueda y el formulario de acuerdo con el diseño del tema.

Esperamos que este artículo le haya ayudado a agregar un botón de búsqueda a su tema de WordPress. ¿Qué piensas sobre cambiar los formularios de búsqueda? Cada vez vemos más sitios web que utilizan este efecto. Deje sus comentarios y preguntas en los comentarios a continuación, o únase a nuestra conversación en Google+.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.