¿Ha visto el ícono de alternar búsqueda en muchos sitios web populares? Eche un vistazo a nuestro proyecto hermano List25 como 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 afuera, también conocido como efecto de alternancia. Es un efecto elegante que también ahorra espacio y permite a los usuarios concentrarse en el contenido. Sin mencionar que es ideal para temas móviles receptivos. En este artículo, le mostraremos cómo agregar un efecto de alternancia de búsqueda en los temas de WordPress.
Notar: Este tutorial está destinado a usuarios intermedios con conocimientos prácticos 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.
Visualización del formulario de búsqueda de WordPress
Contents
WordPress agrega clases CSS predeterminadas a 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 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 esa etiqueta de plantilla mostrará un formulario de búsqueda HTML5. De lo contrario, mostrará el formulario de búsqueda HTML4. Otra forma de averiguar qué forma está generando tu tema es mirar el código fuente del formulario de búsqueda. Aquí está la etiqueta de plantilla de formulario get_search_form () que se muestra cuando su tema no es compatible con HTML5:«>
Y este es el formulario que generará para un tema que admita HTML5.«>
Para los propósitos 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 al 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 genera un formulario HTML5, el siguiente paso es colocar el formulario de búsqueda donde desea que se muestre 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 ícono realmente agradable, y lo usaremos en nuestro tutorial. Sin embargo, siéntase libre de crear el suyo propio en Photoshop o subir uno a la web. Solo asegúrese de que el archivo se llame search-icon.png. Ahora necesita descargar este icono de búsqueda en la carpeta de imágenes de su tema. Inicie sesión en su sitio web utilizando un cliente FTP como Filezilla y abra su directorio de temas. Ahora es el paso final y más crucial. Necesita agregar este CSS a la hoja de estilo de su tema: .site-header .search-form {position: absolute; derecha: 200px; alto: 200 px; } .site-header .search-field {color de fondo: transparente; background-image: url (images / search-icon.png); posición de fondo: centro 5px; repetición de fondo: sin repetición; tamaño de fondo: 24px 24px; borde: ninguno; cursor: puntero; altura: 37px; margen: 3px 0; relleno: 0 0 0 34px; posición: relativa; -webkit-transición: instalación de ancho de 400ms, instalación de fondo de 400ms; transición: facilidad de ancho 400ms, facilidad de fondo 400ms; ancho: 0; } .sitio-encabezado .search-field: focus {background-color: #fff; borde: 2px sólido # c3c0ab; cursor: texto; contorno: 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 fácilmente el efecto de alternancia. También tenga en cuenta que aún deberá 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 agregar un efecto de balancín de búsqueda a su tema de WordPress. ¿Qué opinas del formulario de búsqueda oscilante? 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+.
