¿En qué podemos ayudarte?
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.
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
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
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.
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
Hola Vega, Gracias por el comentario y me alegro que te haya sido útil el artículo. Para tener los resultados en cuadrícula, tendrás que hacer modificar el loop principal en search.php. Una posible solución sería que cada resultado encontrado vaya dentro de un con el ancho ajustado al número de columnas que deseas. Por ejemplo para 2 columnas podría ser podrías usar algo como: El resultado sería parecido a este: Yo uso OceanWP, pero seguramente tendrás el while (have_posts()) … endwhile; en tu tema Desde luego que hay que retocar el css, hacerlo responsive y adaptarlo a los productos, etc;… Read more »