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

¿Has visto el ícono de búsqueda con efecto de alternancia en muchos sitios web populares? Echa 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 también se conocen como el efecto de alternar. Es un efecto limpio que también ahorra espacio y permite a los usuarios centrarse en el contenido. Sin mencionar, esto es genial para los temas de respuesta móvil. En este artículo, le mostraremos cómo agregar un efecto de alternancia de búsqueda en Temas de WordPress.

Nota: Este tutorial es para usuarios intermedios con conocimientos prácticos de etiquetas de plantilla de WordPress, HTML y CSS. A los usuarios principiantes se les recomienda practicar primero en el servidor local.

Visualización del formulario de búsqueda de WordPress

WordPress agrega clases de CSS predeterminadas al HTML generado por varias etiquetas de plantilla dentro de un tema. Uso de los 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 compatibles con HTML5. Si tu tema tiene add_theme_support ('html5', array ('search-form')) línea en el archivo functions.php, entonces esta etiqueta de plantilla generará un formulario de búsqueda HTML5. De lo contrario, se mostrará 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 forma de la etiqueta de plantilla get_search_form () que se mostrará cuando su tema no sea compatible con HTML5:

 
 Buscar:     

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

   Buscar:     

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 genere un formulario HTML5, el siguiente paso es colocar el formulario de búsqueda en el lugar donde desea mostrarlo con el efecto de alternar.

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

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

Ahora necesitas cargar este ícono de búsqueda en la carpeta de imágenes de tu 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 estilos de su tema:

 .site-header .search-form posición: absoluta; derecha: 200px; superior: 200px;  .site-header .search-field background-color: transparente; imagen de fondo: url (images / search-icon.png); posición de fondo: 5px centro; repetición de fondo: no repetición; tamaño de fondo: 24px 24px; frontera: ninguna; cursor: puntero; altura: 37px; margen: 3px 0; Relleno: 0 0 0 34px; posición: relativa; -webkit-transición: ancho de 400 ms de facilidad, fondo de 400 ms de facilidad; transición: ancho de 400 ms de facilidad, fondo de 400 ms de facilidad; ancho: 0;  .site-header .search-field: focus background-color: #fff; borde: 2px sólido # c3c0ab; cursor: texto; esquema: 0; ancho: 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 el efecto de alternar con facilidad. También tenga en cuenta que todavía tendrá que ajustar la posición del icono de búsqueda y la forma de acuerdo con el diseño de su tema.

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