Cómo agregar un efecto de alternancia de búsqueda en WordPress

¿Has visto el icono de búsqueda con efecto de alternar en muchos sitios web populares? Eche un vistazo a nuestro proyecto hermano List25 para ver 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 deslizan hacia afuera, también conocido como efecto de alternancia. Es un efecto ordenado que también ahorra espacio y permite a los usuarios centrarse en el contenido. Sin mencionar que esto es ideal para temas que responden a dispositivos móviles. En este artículo, le mostraremos cómo agregar un efecto de alternancia de búsqueda en Temas de WordPress.

Buscar efecto de alternar en acción

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

Mostrar el formulario de búsqueda de WordPress

WordPress agrega clases CSS predeterminadas al HTML generado por varias etiquetas de plantilla dentro de un tema. Uso de temas de WordPress etiqueta de plantilla para mostrar el formulario de búsqueda. Puede generar dos formas de búsqueda diferentes, una para temas HTML4 y otra para temas con soporte HTML5. Si su tema tiene la línea add_theme_support (‘html5’, array (‘search-form’)) en el archivo functions.php, esta etiqueta de plantilla generará un formulario de búsqueda HTML5. De lo contrario, generará el formulario de búsqueda HTML4.

Otra forma de averiguar qué forma 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á cuando su tema no tenga soporte HTML5:


Y esta es la forma que generará para un tema con soporte HTML5.


Por el bien de este tutorial, utilizaremos 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'));

Una vez que se haya asegurado de que su formulario de búsqueda está generando un formulario HTML5, el siguiente paso es colocar el formulario de búsqueda donde desea mostrarlo con el efecto de alternancia.

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

Lo primero que necesitará es un icono de búsqueda. El tema predeterminado Twenty Thirteen en WordPress viene con un pequeño icono muy agradable, y lo utilizaremos en nuestro tutorial. Sin embargo, siéntase libre de crear el suyo en Photoshop o descargar uno de la web. Solo asegúrese de que el archivo se llame 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 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 CSS3 que nos permiten crear el efecto de alternar con facilidad. También tenga en cuenta que aún tendrá que ajustar la posición del icono de búsqueda y el formulario de acuerdo con el diseño de su tema.

Esperamos que este artículo te haya ayudado a agregar un efecto de alternancia de búsqueda en tu tema de WordPress. ¿Qué piensas sobre el formulario de búsqueda de alternar? Estamos viendo más y más sitios usando este efecto. Deje sus comentarios y preguntas en los comentarios a continuación o únase a nosotros en la conversación en Google+.