« Tutoriales « BlogArtículosDownloads

Creo que una de las grandes razones por las que los desarrolladores y diseñadores le prestan tan poca atención al buscador que viene incorporado a los sitios de WordPress es que éste, por sí solo, ofrece una página de resultados bastante limitada y poco relevante para el usuario.

En este tutorial veremos un par de técnicas y plugins, que de modo muy fácil, volverán el buscador de cualquier sitio WordPress en una herramienta útil y poderosa, al estilo de Google o Yahoo, que ayudará a tus visitantes a encontrar tu contenido con más facilidad.

Para poder aprovechar este tutorial al máximo, la idea es que ya le hayas metido mano a los temas de WordPress, usando Template Tags y cosas por el estilo. Si no es así, puedes de todas formas leer el paso 1, dedicado a los plugins.

El buscador de WordPress predeterminado

Al “sacarlo de la caja”, usándolo, por ejemplo, con el tema “default” (Kubrick), la página de resultados de búsqueda de WordPress (search.php) ofrece la siguiente funcionalidad:

• Ordena los resultados por fecha, y no por relevancia
• No muestra el número de resultados obtenidos
• No muestra un extracto (the_excerpt)
• Si insertamos the_excerpt para mostrar el extracto, se muestra el predeterminado, que no destaca los términos buscados
• Busca en posts y en páginas (eso me da la impresión que es nuevo en 2.5)
• Muestra información irrelevante para la búsqueda (número de comentarios, fecha de publicación)

Veamos cómo podemos mejorar esto.

Paso 1: Plugins

Buscando y buscando, encontré hace un tiempo ya dos plugins que mejoran rápidamente la calidad de los resultados del buscador, y que uso en todos mis proyectos con WordPress. Veamos:

1. Search Reloaded: Básicamente, este plugin ordena los resultados por relevancia. La diferencia en el orden de resultados es notable en comparación a no tenerlo activado. Su uso es muy sencillo: sólo debes activarlo y listo. La página del plugin aquí.
2. Search Excerpt: Este plugin modifica the_excerpt , haciendo que se comporte tal como Google, Yahoo u otros software de gestión de contenido (de hecho, la funcionalidad fue extraída de Drupal). Lo que hace es mostrar sólo las partes del post que contienen los términos buscados, y además los destaca en negrita.
   Para que funcione, es necesario usar the_excerpt en search.php. Aparte de eso, sólo es necesario activar el plugin y listo, sin más configuración. La página del plugin aquí.

Paso 2: Quitar la información no relevante

Examinemos qué hay al interior de The Loop en el search.php que viene con el tema default de WordPress:

<div class="post">
     <h3 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h3>
 <small><?php the_time('l, F jS, Y') ?></small>
 <p class="postmetadata">
<?php the_tags('Tags: ', ', ', '<br />'); ?>
Posted in <?php the_category(', ') ?> |
<?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments »', '1 Comment »',
'% Comments »'); ?></p>
</div>

Hay cosas que considero que no son relevantes para el usuario en una página de resultados de búsqueda (recuerda, menos es más):

• Número de comentarios
• Tags
• Fecha y hora de publicación (lo dejo al criterio de cada cual, pero para mí no es relevante aquí)

Vamos a añadir the_excerpt() para sacarle provecho al plugin Search Excerpt, y vamos a sacar la información no relevante. El código resultante quedaría así:

<div class="post">
     <h3 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
 <p class="postmetadata">
Posted in <?php the_category(', ') ?> </p>
</div>

Paso 3: Mostrar el número de resultados obtenidos

Esto es especialmente importante en un sitio Web. En Google siempre obtendremos miles y miles de resultados y nosotros navegaremos, con suerte, hasta la página 6, pero en un sitio los resultados son más limitados, y es bueno decirle al usuario qué tanto puede esperar encontrar.

El código para hacerlo es sencillo (sirve para WordPress 2.5 o superior):

<p><?php echo $wp_query->post_count; ?>
resultados encontrados para tu búsqueda:
<strong><?php the_search_query(); ?></strong>.</p>

Lo anterior arrojaría algo como ésto (puedes probarlo en el buscador de este mismo sitio):

5 resultados encontrados para tu búsqueda: ‘wordpress’.

Este código debe ser insertado justo antes de The Loop. Veámoslo en contexto:

<?php if (have_posts()) : ?>

<p><?php echo $wp_query->post_count; ?>
resultados encontrados para tu búsqueda:
<strong><?php the_search_query(); ?></strong>.</p>

<?php while (have_posts()) : the_post(); ?>

Paso 4: Mostrar la URL del resultado

Los buscadores siempre muestran la URL de cada resultado, que es la página hacia donde llegará el usuario luego de hacer clic. Esto es importante porque el usuario necesita saber hacia dónde lo llevará su clic, quitándole incertidumbre, y porque esta información extra ayuda al usuario a sentirse más ubicado.

En WordPress esto es sencillísimo. Sólo tenemos que agregar lo siguiente, justo al final de The Loop:

<p><?php the_permalink();?></p>

A este párrafo se le puede dar un color. En páginas con fondos blancos, recomiendo usar verde. Al usuario le resultará muy familiar, aumentando su confianza. Mira este ejemplo del buscador del sitio de Novos.

Resultado final

Con todos los cambios aplicados, el código final quedaría así:

<?php if (have_posts()) : ?>

<p><?php echo $wp_query->post_count; ?>
resultados encontrados para tu búsqueda:
<strong><?php the_search_query(); ?></strong>.</p>

<!--aquí comienza The Loop -->
<?php while (have_posts()) : the_post(); ?>
<div class="post">
     <h3 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
 <p class="postmetadata">
Posted in <?php the_category(', ') ?> </p>
<p><?php the_permalink();?></p></div>

<?php endwhile; ?> <!-- Fin de The Loop -->
<!-- más contenido aquí... -->
<?php endif; ?>

¿Te fue de utilidad este tutorial? Tienes opiniones, dudas, aportes? Hazte parte en los comentarios.