¿En qué podemos ayudarte?

Personalizar los resultados de búsqueda en WordPress

Como regla no prestamos mucha atención a la página de resultados de búsqueda y nos conformamos con la que trae por defecto el tema que tenemos instalado. Sin embargo, una página de resultados bien diseñada ayudará a nuestros visitantes a encontrar información relevante para ellos en nuestro sitio. Las ventajas son obvias: tendremos más visitas y recomendaciones, menos rebotes y un mejor prestigio de cara a nuestra audiencia. Por tanto es un punto que no podemos pasar por alto.

Los temas profesionales y plugins especializados como Woocommerce, Inmobiliarias y otros suelen tener páginas de resultados adaptadas al tipo de contenido que gestionan. Por eso en esta guía nos centraremos en modificar la página de resultados para el contenido estándar de WordPress.

La página de resultados de búsqueda de WordPress

Si nos interesa la lógica que utiliza WordPress para  generar las  páginas, aquí encontraremos el esquema completo. En el caso de las búsquedas, los resultados se visualizan usando el archivo search.php  y en su defecto el index.php del tema activo. 

Los temas estándar nos darán  el total de resultados encontrados y a continuación la lista de títulos y contenidos correspondientes. No es especialmente atractiva, y por tanto no sorprende que temas modernos como OceanWP intenten mejorar la presentación.

resultados busqueda wordpress

Es mucho mejor, pero cuando no se hay resultados, el resultado es igual de decepcionante. 

La página está en blanco y no hay ninguna sugerencia. Ves esto y posiblemente te vayas con tu búsqueda a otra web.

Para mejorar esta situación debemos debemos sugerir otros contenidos relevantes, y guiar al visitante para que pueda encontrarlos. Si ofrecemos resultados una opción es permitirle al usuario interactuar con ellos. Veamos un ejemplo de como hacerlo.


Como mejorar los resultados de búsqueda de OceanWP

OceanWP me encanta porque desde el personalizador podemos ajustar muchas opciones y cuando no queda más remedio que ir al código, está todo perfectamente documentado y con ejemplos. Lógicamente tendremos que utilizar un tema hijo si no le hemos hecho ya. 

Optimizando la cabecera

Podemos mejorar la cabecera modificando el título para incluir los términos buscados, a la vez que eliminamos las migas de pan. De paso haremos que la cabecera ajuste su altura al contenido. Así aprovecharemos mejor el espacio. Este es el código a añadir al functions.php

function rjc_search_header_title($title) {
      if ( is_search() ) {
         global $wp_query;
        $title = '<span id="search-results-count">'. $wp_query->found_posts .'</span> <small>'.
                     esc_html__( 'results for', 'rolando_owp' ).'</small><br>'.
                    '<span id="search-results-terms">'.get_search_query().'</span> ';
      }
     return $title;
}
add_filter( 'ocean_title', 'rjc_search_header_title', 20 );

function rjc_search_subheading( $subheading ) {
     if ( is_search() ) {$subheading = '';}
     return $subheading;
}
add_filter( 'ocean_post_subheading', 'rjc_search_subheading' );

function rjc_search_breadcrumbs( $showbrc ) {
      if ( is_search() ) {$showbrc = false;}
     return $showbrc;
}
add_filter( 'ocean_display_breadcrumbs', 'rjc_search_breadcrumbs' );

Para la altura del encabezado, modificaremos partials/page-header.php y sustituiremos la línea 44 por. 

if (is_search()) {$estilo=' style="height:auto;"';} else {$estilo='';}
<header class="<?php echo esc_attr( $classes ); ?>" <?php echo $estilo; ?>>

Deberíamos tener una cabecera por el estilo de

Mejorando el contenido

En primer lugar, quiero indicar que OceanWP nos permite tener barras laterales específicas para la página de búsqueda. Lo haremos directamente en el personalizador desde Opciones Generales => Ajustes Generales

En Apariencias => Widgets seleccionaremos los complementos que irán en la barra lateral de búsquedas.

Veamos como añadir las categorías de cada resultado encontrado. En este caso nos tocará modificar el archivo partials/search/header.php al que añadiremos en la línea 14 (justo debajo de  <header class="search-entry-header clr">)  lo siguiente


<?php
   global $post;
   $post_categories = wp_get_post_categories( $post->ID );
   $cats='';
   foreach($post_categories as $c) {
      $cat = get_category( $c );
      $cat_id = get_cat_ID( $cat->name );
     if (trim($cats)!=='') {$cats.=', ';}
     $cats .= '<a href="'.get_category_link($cat_id).'" class="search-cat">'.$cat->name.'</a>';
   }
  $cats ='<div class="rpwwt-post-categories search-cat">'.$cats.'</div>'; 
  echo $cats;
?>

Solo nos queda añadir el CSS necesario a nuestro style.css

a.search-cat {background-color:beige;}
div.search-cat {font-size:14px;font-weight:700;}

Y nuestra lista de entradas tendrá un aspecto similar a

resultados búsqueda modificados

Que hacer cuando no hay resultados

Una solución simple para gestionar este caso es mostrar enlaces a nuestra información "más relevante".

Hacerlo no es difícil. Editamos partials/none.php y le agregamos

<div><b><?php esc_html_e( 'May be yo would like to take a look at the most relevant blog categories?', 'rolando_owp' ); ?></b></div>
<?php 
    $categories = get_categories( array('orderby' => 'count','order' => 'DESC','number' => 6) );
    echo '<div>'; 
    foreach( $categories as $category ) {
        $category_link = sprintf( 
               '<a class="button" href="%1$s" alt="%2$s">%3$s</a>',
               esc_url( get_category_link( $category->term_id ) ),
               esc_attr( sprintf( __( 'View all posts in %s', 'rolando_owp' ), $category->name ) ),
               esc_html( $category->name )
.              '<br><small>'. sprintf( esc_html__( '(%s posts)', 'rolando_owp' ), $category->count ).'</small>'
        );
       echo $category_link.' '; 

echo '</div>'; 

Deberíamos conseguir algo similar a la siguiente imagen

resutlados busqueda sin  coincidencias

Con suerte, despertaremos la curiosidad de nuestros visitantes y seguirán curioseando en nuestra web. Misión cumplida.


Conclusiones

Estas son algunas ideas para modificar la página de resultados de búsqueda en WordPress y ofrecer a tus visitantes una experiencia de navegación más agradable. 

Hay muchas formas de hacer estos cambios y posiblemente las necesidades de tu proyecto requieran otras actuaciones. 

Si el artículo se te resiste y tienes dudas puedes escribir un comentario e intentaré ayudarte. 

5 1 vote
Valoración del artículo
Suscribir
Notificar de
guest
2 Comentarios
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Vega
Vega
3 años atrás

Buenas tardes,

He estado leyendo tu post y me ha sido muy útil porque precisamente el problema que estoy teniendo a la hora de diseñar mi página web es el apartado de resultados de búsqueda, me gustaría que fuera en cuadrícula ya que se muestran productos a la venta y así es mucho más visible el producto para los clientes.
¿Cómo tendría que proceder para poder conseguirlo?
Muchas gracias por todo