Buscador personalizado en WordPress

Como personalizar totalmente tus formularios para que en las búsquedas de WordPress aparezca exactamente lo que quieras. Vamos a aprender a mejorar las búsquedas de WordPress. Por defecto, cuando introducimos una palabra en el buscador de WordPress y presionamos Enter, se buscan artículos que tengan en el título y/o contenido la palabra escrita. Existe una […]

Como personalizar totalmente tus formularios para que en las búsquedas de WordPress aparezca exactamente lo que quieras.

Vamos a aprender a mejorar las búsquedas de WordPress. Por defecto, cuando introducimos una palabra en el buscador de WordPress y presionamos Enter, se buscan artículos que tengan en el título y/o contenido la palabra escrita.

Existe una forma bastante sencilla de personalizar esta búsqueda a nuestro antojo. Lo primero que tenemos que tener en cuenta es cómo funciona la clase “WP_Query” de WordPress que es la que se encarga se hacer las consultas a la base de datos.

Es bastante sencillo, solo hay que crear un array con los parámetros que queremos recibir nuestros datos (os dejo un enlace donde veréis todos los parámetros que acepta la clase “WP_Query“). Por ejemplo si queremos seleccionar las 5 primeras noticias de la categoría “CSS”, con la etiqueta “CSS3” y por orden alfabético inverso en función del título.

array(
'posts_per_page' => 5, // 5 artículos
'category_name' => 'css', // categoría CSS - se utiliza el slug de la   categoría
'tag' => 'css3', // etiqueta CSS3 - también con el slug
'orderby' => 'title', // ordeno por el título
'order' => 'DESC' // y lo hago alfabéticamente inverso (c, b, a)
);

$the_query = new WP_Query( $args ); // hacemos la query y obtenemos datos
// Creamos el bucle para recorrer lo que hayamos recibido de la query
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
// Hacemos lo que necesitemos con cada artículo obtenido
endwhile;
endif;

// Reseteamos los datos globales de WordPress para que no haya ningún otro problema con las demás querys de WP
wp_reset_postdata();

Bien, ahora que estamos familiarizados con la clase “WP_Query” de WordPress vamos a crear nuestro buscador personalizado.

El buscador por defecto de WordPress es este:


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

Lo único que tenemos que hacer para que nuestro buscador busque exactamente lo que queremos es añadir campos ocultos con el nombre igual al parámetro de la query de WordPress que queremos buscar y su valor correspondiente. Por ejemplo, para crear un buscador que solo busque en la categoría CSS de nuestros artículos crearemos un HTML como este:


<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div>
<label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
<!-- esto hace que la query que se ejecuta en la búsqueda lo haga solo en esta categoría -->
<input type="hidden" name="category_name" value="css" />
<input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
</div>
</form>

Así que nuestro buscador con los parámetros que pusimos de ejemplo al principio (5 primeras noticias de la categoría “CSS”, con la etiqueta “CSS3” y por orden alfabético inverso en función del título) quedará así:


<form id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?><p>" method="get"><form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div>
<label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label>
<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
<!-- categoría css -->
<input type="hidden" name="category_name" value="css" />
<!-- etiqueta css3 -->
<input type="hidden" name="tag" value="css3" />
<!-- orden de la búsqueda -->
<input type="hidden" name="orderby" value="title" />
<input type="hidden" name="order" value="DESC" />
<!-- número de artículos que busca -->
<input type="hidden" name="posts_per_page" value="5" />
<input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
</div>
</form>