Cómo Agregar un Efecto de Alternar Búsqueda en WordPress

¿Ha visto el ícono de búsqueda con efecto toggle en muchos sitios web populares? Echa un vistazo a nuestro proyecto hermano List25 para ver un ejemplo. La idea es mostrar un icono de búsqueda simple, y cuando el usuario hace clic en él, los formularios de búsqueda se deslizan hacia fuera, también conocido como el efecto toggle. Es un efecto limpio que también ahorra espacio y permite a los usuarios centrarse en el contenido. Por no mencionar, esto es genial para los temas que responden a los móviles. En este artículo, le mostraremos cómo añadir un efecto de conmutación 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. Se aconseja a los usuarios de nivel principiante que practiquen primero en el servidor local.

Mostrar el formulario de búsqueda de WordPress

WordPress añade clases CSS predeterminadas a HTML generadas por varias etiquetas de plantilla dentro de un tema. Los temas de WordPress utilizan una 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 compatibles con HTML5. Si su tema tiene una línea add_theme_support('html5', array('search-form')) en el archivo functions.php, entonces esta etiqueta de plantilla producirá un formulario de búsqueda HTML5. De lo contrario, generará un formulario de búsqueda en HTML4.

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

Esta es la etiqueta de plantilla form get_search_form() que se mostrará cuando el tema no tenga soporte para HTML5:

123456"> Buscar:         div>form>

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

1234567"> Buscar:         label> form>

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

1add_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 conmutación.

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

Lo primero que necesitará es un icono de búsqueda. El tema por defecto Veintitrés en WordPress viene con un pequeño icono muy bonito, y lo usaremos en nuestro tutorial. Sin embargo, siéntase libre de crear el suyo propio en Photoshop o descargarlo de la web. Sólo asegúrese de que el archivo se llame search-icon.png.

Ahora necesitas subir este icono de búsqueda a la carpeta de imágenes de tu tema. Conéctese a su sitio web utilizando un cliente FTP como Filezilla y abra el directorio temático.

Este es el paso final y el más crucial. Necesita agregar este CSS a la hoja de estilo de su tema:

123456789101112131414151617171819202122232425262728293031323334.site-header .search-form { posición: absoluta; derecha: 200px; arriba: 200px;}.site-header .search-field { color de fondo: transparente; fondo-imagen: url(images/search-icon.png); fondo-posición: 5pxcenter; fondo-repetición: no repetición; tamaño del fondo: 24px24px; borde: ninguno; cursor: puntero; altura: 37px; margen: 3px0; relleno: 00034px; posición: relativa; -webkit-transición: anchura 400ms facilidad, fondo 400ms facilidad; transición: anchura 400ms facilidad, fondo 400ms facilidad; anchura: 0;} .site-header .search-field:focus { color de fondo: #fff; frontera: 2pxsolid#c3c0ab; cursor: text; outline: 0; width: 230px;}.search-form.search-submit { display:none;}

Lo importante a tener en cuenta en esta CSS, son los efectos de transición CSS3 que nos permiten crear el efecto toggle con facilidad. También tenga en cuenta que todavía 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 le haya ayudado a añadir el efecto de alternancia de búsqueda en su tema de WordPress. ¿Qué opina sobre el formulario de búsqueda de la palanca? Estamos viendo más y más sitios que usan este efecto. Deje sus comentarios y preguntas en los siguientes comentarios o únase a nosotros en la conversación en Google+.