Personalizar y ampliar los resultados de la búsqueda en Genesis Framework

La página de resultados de la búsqueda que viene por defecto con Genesis deja mucho que desear… pero podemos modificarla y ampliarla de forma relativamente fácil, añadiendo y agrupando además los custom post type que nos interesa.


por

Cuando tenemos un blog, una web formativa o incluso una tienda online, la funcionalidad de la búsqueda y el formato en que se muestran los resultados puede ser crítico para que los usuarios encuentren lo que necesitan o por el contrario vayan a buscar a otro sitio (aún cuando nosotros disponemos lo que están buscando).

Con Genesis Framework, como en muchos otros themes, el formato de la página de resultados deja bastante que desear… pero es relativamente sencillo modificarlo y ajustarlo según lo que queramos mostrar.

En este artículo vamos a:

  • Crear la plantilla en nuestro child theme, si no existe
  • Modificar los textos que viene por defecto
  • Seleccionar qué custom post types queremos que se muestren y agruparlos para que aparezcan ordenados.

1. Crear el archivo search.php para el child theme

Si nuestro child theme no trae una plantilla específica para los resultados de búsqueda (algo bastante habitual), podremos crear uno fácilmente partiendo del que viene con el framework.

Lo primero que haremos es acceder por FTP a nuestro sitio y navegar hasta la carpeta del tema hijo: wp-content/themes/tema_hijo, y mirar si existe un archivo llamado search.php

  • Si existe, significa que nuestro tema ya trae personalizaciones para la página de resultados, podemos descargarlo si no nos convence y realizar los cambios que veremos a continuación.
  • Si no existe, navegaremos a la carpeta del framework: wp-content/themes/genesis y descargaremos el archivo search.php para modificarlo y subirlo a nuestro child theme (no al tema padre, porque en ese caso, aunque funcionaría, se sobreescribirían los cambios en la siguiente actualización de Genesis)


El archivo search.php que viene con Genesis
es muy sencillo, y simplemente muestra el título de la página junto al término que se ha buscado:

add_action( 'genesis_before_loop', 'genesis_do_search_title' );
/**
 * Echo the title with the search term.
 *
 * @since 1.9.0
 */
function genesis_do_search_title() {
	$title = sprintf( '<div class="archive-description"><h1 class="archive-title">%s %s</h1></div>', apply_filters( 'genesis_search_title_text', __( 'Search Results for:', 'genesis' ) ), get_search_query() );
	echo apply_filters( 'genesis_search_title_output', $title ) . "\n";  
}
genesis();

Lo que obviamente queda bastante pobre como resultado:

 

2. Modificando los textos que viene por defecto

Lo primero que podemos hacer es modificar y completar la información que viene por defecto, aprovechando para traducir las cadenas en inglés, si es necesario.

Os pongo un ejemplo y os explico debajo que significaría cada cosa:

add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
add_action( 'genesis_before_loop', 'genesis_do_search_title' );
 
function genesis_do_search_title() {
	$title = sprintf( '<div class="archive-description"><h1 class="archive-title">%s %s</h1></div>', apply_filters( 'genesis_search_title_text', __( 'Search Results for:', 'genesis' ) ), get_search_query() );
	echo apply_filters( 'genesis_search_title_output', $title ) . "\n";  
}
 
add_filter( 'genesis_search_title_text', 'esl_search_title_text' );
function esl_search_title_text() {
    return 'Resultados de la búsqueda:';
}
add_filter( 'genesis_noposts_text', 'esl_change_search_text', 15, 2 );
function esl_change_search_text( $text ) {
 	$text= __( 'No hemos encontrado ningún contenido de este tipo para tu búsqueda', 'genesis-sample' );
	$text .= get_search_form( false );
	return '<p class="noresults">'.$text.'</p>';
}
  • Con «add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );» lo que hacemos es forzar que la página se muestre a ancho completo, es decir, sin sidebar o barra lateral, ya que igual la tenemos activada por defecto para otros contenidos, pero para esta página no la queremos.

  • Después llamamos la función por defecto genesis_do_search_title, que ya teníamos en la plantilla de base, y la modificaremos añadiendo el siguiente filtro.

  • genesis_search_title_text: nos permite modificar la cadena de texto que aparece como título, y en ese ejemplo aprovechamos para traducirla.

  • genesis_noposts_text: este filtro nos permite modificar lo que se muestra en caso de no encontrar resultados. Lo utilizaremos para traducirlo y añadir un formulario de búsqueda (get_search_form( false )) para que el usuario tenga opción de modificarla o cambiar las palabras utilizadas

 

3. Filtrar y agrupar los resultados de la búsqueda por Custom Post Type

Algo muy útil si en nuestra web tenemos otro tipo de contenido además de páginas y posts, es poder filtrar que custom post type queremos que incluya en la búsqueda y que además los muestre agrupados y ordenados.

Lo haremos eliminando el loop por defecto y creando uno personalizado que incluya los tipo de posts y los agrupe:

/* Eliminamos el loop por defecto */
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'esl_do_search_loop' );
/* Añadimos un loop personalizado */
function esl_do_search_loop() {
	
	// seleccionamos los tipos de post que queremos que aparezcan
	$post_types = array('post', 'product','page', 'course'); 
	
	echo '<div class="search-content">';
	foreach ( $post_types as $post_type ) {
		 
		$s = isset( $_GET["s"] ) ? $_GET["s"] : "";
		 
		$args = (array(
			's' => $s,
			'post_type' => $post_type,
			'posts_per_page' => 15,
			'order' => 'ASC',
			'orderby' => 'title'
		));
		
		$post_type_obj = get_post_type_object( $post_type ); 
 
		echo '<div class="post-type '.$post_type .'"><h3 class="post-type-heading">'. $post_type_obj->labels->name . '</h3>';
			
		/* Personalizamos cómo se muestran los resultados	*/
		
			add_filter( 'genesis_pre_get_option_content_archive_limit', function () { return '150'; });
		
			add_filter( 'get_the_content_more_link', function () { return '... <a class="more-link" href="' . get_permalink() . '">Continue Reading</a>';} );		
			
			remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
			remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );
			remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
			
		/* llamamos al loop con los argumentos indicados */
		
			genesis_custom_loop( $args );
		echo '</div>';
	}
	echo '</div>';  
}
 

 

  • Sustituimos el genesis_do_loop por nuestra función esl_do_search_loop

  • Seleccionamos los custom post type que queremos incluir en la búsqueda: $post_types = array(‘post’, ‘product’,’page’, ‘course’); En este caso, además de posts y páginas, queremos añadir productos y cursos. El orden en el que indiquemos los CPT será el mismo en que se muestren en los resultados.

  • Creamos el array con los argumentos para la consulta (la cadena a buscar (‘s’), el post_type, el orden y número de resultados que queremos)

  • Creamos una capa para agrupar los resultados y mostramos un encabezado con el título del custom post type ($post_type_obj->labels->name), dándole una clase de CSS que nos permita darle los estilos que queramos.

  • Personalizamos los resultados con los filtros adecuados según queramos mostrar el contenido o el extracto, si queremos que muestre la información del post (autor, fecha, etc…) y la información del pie (etiquetas, categorías, etc…). 

  • Por último llamamos a genesis_custom_loop( $args ); para crear el loop personalizado con los argumentos que hemos definido. 

 

A partir de aquí, y jugando un poco con estilos de CSS, podemos ajustar el aspecto que tendrá cada bloque de resultados, consiguiendo que en sitios de mucho contenido, la información quede mucho más organizada y sea más práctica para nuestras visitas.

Recuerda que también es importante escoger bien que contenido se muestra, ocultando aquellas páginas que no nos interesa que se vean o que no aportan nada. Puedes ver cómo hacerlo en este otro artículo: Excluir páginas o posts en los resultados de búsqueda de WordPress

Como ves, aunque lleva algo de tiempo, personalizar la página de los resultados de búsqueda en Genesis Framework no es complicado y vale mucho la pena.

 

 

¿Eres implementador o desarrollador WordPress?

En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:

ACCEDER AHORA
 

Comentarios

3 respuestas a «Personalizar y ampliar los resultados de la búsqueda en Genesis Framework»

  1. Avatar de Laura

    |

    Buenos días, Esther, y ante todo mil gracias por el contenido que compartes.
    Verás, estaba implementando los cambios en la página de resultados de búsqueda que propones… y, si no me equivoco, al hacer:
    remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
    add_action( ‘genesis_loop’, ‘esl_do_search_loop’ );
    Lo que hago es cargarme el genesis_loop, y por tanto cambio TODAS las páginas de mi blog donde se utiliza (es decir, todas): la de cursos, la del blog, la página principal…
    ¿Puede ser que esté mal y haya que cambiar otro hook?
    Gracias de antemano y un saludo!
    Laura.

  2. Avatar de Laura

    |

    Nada, olvídalo… me acabo de dar cuenta de que lo estaba metiendo todo en un pluggin que me he creado yo, personalizado, y debía hacerlo en el archivo search.php.
    ¡Siento las molestias!

    1. Avatar de esther

      |

      Hola Laura! Genial, me alegra que al final te haya funcionado.

      Un saludo!