Agrupar los resultados de búsqueda en WordPress

[ hace 3 semanas ] [ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

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' ] );
	}
}

Puedes agregar este código en el archivo functions.php de tu tema hijo, o usando algún plugin de Snippets.

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;

Puedes copiar el archivo search.php desde tu tema padre hacia el tema hijo. Si no hay un archivo search.php, tendrás que basarte en algún otro según la jerarquía de archivos de un tema WordPress.

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%;
}

Para agregar código CSS puedes usar el archivo style.css de tu tema hijo, también puedes revisar otras formas de agregar CSS en el artículo de agregar código CSS en WordPress.

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.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores