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

¿Has visto el ícono de alternar búsqueda en muchos sitios web populares? Echa un vistazo a nuestro proyecto hermano Lista25 para 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 también se muestran como un efecto de alternancia. Es un efecto elegante que también ahorra espacio y permite a los usuarios concentrarse en el contenido. Sin mencionar que esto 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.

Nota: Este tutorial es para 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.

Ver el formulario de búsqueda de WordPress

WordPress agrega clases CSS predefinidas al HTML generado por varias etiquetas de plantilla dentro de un tema. Uso de temas de WordPress <?php get_search_form(); ?> 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 con soporte HTML5. Si tu tema tiene add_theme_support('html5', array('search-form')) en su archivo functions.php, por lo que esta etiqueta de plantilla producirá un formulario de búsqueda HTML5. De lo contrario, producirá el formulario de búsqueda HTML4.

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

Esta es la etiqueta de plantilla get_search_form () que se mostrará cuando el tema no sea compatible con HTML5:

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

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

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

Por el bien 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 en el archivo functions.php de su tema:

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

Después de asegurarse de que el formulario de búsqueda genera un formulario HTML5, el siguiente paso es colocar el formulario de búsqueda donde desea mostrarlo con el efecto de alternancia.

Se agregó el efecto de alternancia 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 usaremos en nuestro tutorial. Sin embargo, siéntase libre de crear el suyo propio 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 bien, este es el paso final y más crucial. Necesita agregar este CSS a la hoja de estilo del 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 de CSS3 que nos permiten crear el efecto de alternancia con facilidad. También tenga en cuenta que aún deberá ajustar la ubicación del icono de búsqueda y el formulario según el diseño de su tema.

Esperamos que este artículo le haya ayudado a agregar el efecto de alternancia de búsqueda en su tema de WordPress. ¿Qué opinas del formulario de búsqueda habilitar / deshabilitar? 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+.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *