• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Agrupar los resultados de búsqueda en WordPress

Agrupar los resultados de búsqueda en WordPress

Agrupar los resultados de búsqueda en WordPress

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

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Agrupación búsqueda resultado final

 

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

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Personalizar el Loop de WooCommercePersonalizar el Loop de WooCommerce
  • Loop de WordPress¿Qué es el Loop de WordPress?
  • Excluir páginas de la búsquedaExcluir páginas de la búsqueda de WordPress
  • Página de inicio y página de entradasPágina de inicio y Página de entradas en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Botones para el campo de cantidad en WooCommerce

Guardar las búsquedas internas en WordPress

Remover el slug de la página padre en WordPress

Agregar login y logout en un menú de WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados