Agrupar los resultados de búsqueda en WordPress

[ hace 11 meses ] [ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

mejoras

Es posible que si usas la búsqueda por defecto de WordPress te presente los resultados ordenados por fecha, sin embargo pueden aparecer mezclados páginas, entradas, productos, etc. En este artículo veremos cómo agrupar esos resultados por tipo de contenido.
 

Resultado Final

Al final queremos obtener algo similar a lo que se muestra en la siguiente imagen en donde se ven los grupos de tipos de contenido en el resultado de la búsqueda.

Ordenando por tipo de contenido

En un artículo anterior habíamos visto cómo excluir páginas de la búsqueda de WordPress, usaremos el mismo Hook, pero esta vez para ordenar los tipos de contenido.

Con este orden conseguirás que primero se ordenen los tipos de contenido y seguidamente se ordenen en base a la fecha de publicación de forma descendente.

<?php // No copiar esta línea

add_action( 'pre_get_posts', 'dcms_sort_post_type_search_results' );
function dcms_sort_post_type_search_results( $query ) {
	if ( $query->is_search && $query->is_main_query() ) {
		$query->set( 'orderby', [ 'post_type' => 'ASC', 'date' => 'DESC' ] );
	}
}

Modificando los archivos del Theme

Si deseas colocar un texto descriptivo por cada grupo de contenido entonces será necesario modificar el archivo search.php de tu tema.

En estos archivos usualmente encontrarás una estructura de bucle o loop. Simplemente modificamos esa estructura para que contemple el cambio de tipo de contenido o CPT.

<?php // No copiar esta línea

while ( have_posts() ) :
	the_post();

	// Codigo agregado
	if ( ! isset( $post_type ) || $post_type !== get_post_type()  ) {
		$obj_pt = get_post_type_object(get_post_type());

		$post_type_name = $obj_pt->labels->name;
		echo "<h2 class='section-search'>Resultados de: $post_type_name </h2>";
	}
	$post_type = get_post_type();
	// Fin de codigo
	
	get_template_part( 'content', get_post_format() );
endwhile;

Si tus resultados se muestran como grid, posiblemente tengas que adaptar el texto de agrupación para que ocupe todo el ancho, podrías usar el siguiente código CSS:

body.search .section-search {
    flex: 1 1 100%;
    clear: both;
    width: 100%;
}

Conclusión

Como has podido comprobar, puedes hacer modificaciones a los resultados de búsqueda, en este artículo hemos visto cómo cambiar la consultas para agregar un orden personalizado, además de cómo agregar texto de separación entre diferentes tipos de contenido, hemos realizado estos cambios directamente a través de código.

Valora este artículo : (1 votos, promedio: 5,00 de 5)

Cargando...