Índice de contenidos

Modificar la página de resultados de búsqueda en WordPress

La página de resultados de búsqueda, no es una página a la que se le preste mucha atención, sin embargo ayuda a nuestros usuarios a encontrar información relevante para ellos. En la mayoría de temas, no existe un archivo propio que ejecute este contenido y hacen uso del archivo page o index del tema. Si quieres ofrecer un contenido diferenciado a tus usuarios, en esta entrada aprenderás a crear o modificar la página de resultados de búsqueda en WordPress. 

Modificar el buscador en WordPress

Si necesitas ayuda para insertar un buscador en tu blog WordPress, puedes leer los siguientes artículos:

Añadir buscador a la barra de menú WordPress.

Modificar el buscador en WordPress.

Modificar los resultados de búsqueda en WordPress

Introducción

Cuando un usuario utiliza el buscador interno de tu blog para localizar más artículos o contenidos de su interés, estos se visualizan en pantalla empleando el archivo page.php, index.php, search.php… dependiendo del tema que tengas activado.

Muchos temas no cuentan con una plantilla search.php y muestran el contenido de búsqueda en pantalla ejecutando la página por defecto del tema, page o index.

jerarquiaplantillawp

Autor imagen: Chip Bennett

En la mayoría de los casos la página de resultados de búsqueda (page, index, search…) es muy simple, compuesta de un loop o bucle con llamadas al título y contenido de cada artículo, y en caso de no encontrar ningún resultado, un aviso tipo: «lo sentimos, no hemos encontrado ningún artículo»

Vamos a modificar la página de resultados de búsqueda en WordPress variando el diseño y el contenido. Vamos a añadir una cabecera con las categorías del blog, el buscador… y para los términos de búsqueda no encontrados un botón de acceso a todos los contenidos del sitio (índice de todas las entradas).

Crear archivo search.php

Lo primero que debes comprobar es que archivo utiliza tu tema para mostrar los resultados de búsqueda. Abre la carpeta de tu tema: wp-content/themes/tema-activo y comprueba si existe el archivo search.php. Si no lo encuentras tu tema está utilizando index.php o page.php, en este post te explico un método rápido para saber que archivo se está ejecutando en cada página.

Si el archivo existe puedes abrirlo y pasar al apartado de edición de la página search.php

En caso de que tu tema no cuente con este archivo, vamos a crearlo. Para hacerlo fácil abre el archivo index o page.php (el que utilice tu tema para mostrar resultados), copia el código en un nuevo archivo php y lo guardas dentro de la carpeta del tema con el nombre de: search.php

Importante:

1.- no confundir el archivo search.php con searchform.php

2.- Recuerda que también puedes filtrar los resultados que mostrará el buscador, por ejemplo buscar sólo en post, buscar sólo en post de una categoría…

Edición de la página search.php

Antes de editar y modificar el archivo comprueba que tenga una estructura *similar a la siguiente: 

*depende de tu tema pero en general debes tener; llamada al head, cuerpo de página con el loop, llamada a título y contenido del post y llamada al footer o pie de página.

<!--llamada a la cabecera; logo, menú...-->
<?php
get_header();
?>
<!--contenido principal-->
<div id="main-content">
	<div class="container">
		<div id="content-area" class="clearfix">
			<div id="left-area">
                        <!--el loop-->
			<?php while ( have_posts() ) : the_post(); ?>
                               <!-- recopilando info de cada post -->
				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                        <!-- título del post -->
					<h1 class="entry-title main_title"><?php the_title(); ?></h1>
					<!-- contenido del post -->
                                        <div class="entry-content">
					<?php
						the_content();
					?>
					</div> <!-- fin contenido post -->
				</article> <!-- fin info de cada post -->
			<?php endwhile; ?><!-- fin del loop -->
			</div> <!-- termina contenido derecha -->

			<?php get_sidebar(); ?><!-- barra lateral -->
		</div> <!-- fin de div contentarea -->
	</div> <!-- fin de div container -->
</div> <!-- fin de div contenido principal -->

<?php get_footer(); ?><!-- llamada al pie de página -->

1ª modificación: que muestre un extracto del post en lugar de todo el contenido

La primera variación que vamos a realizar en la página de resultados es cambiar la llamada al contenido del post para que muestre sólo un extracto de cada artículo. No nos interesa que se muestre todo el contenido de cada post, piensa como sería una página con muchos resultados de búsqueda, creo que terrible para nuestro usuario.

Si tu página ya llama a la función the_excerpt(), no necesitas hacer nada.

Vamos al código de nuestra página, y donde veamos la función:

<?php
   the_content();
?>

la cambiamos por:

<?php
   the_excerpt(); 
?>
<a href="<?php the_permalink();?>">Leer más...</a>

Los extractos pueden recoger el contenido del principio del post o del campo extracto de la ventana de edición del post. 

Encontrarás más información referente al funcionamiento de los extractos en el codex de WordPress.

2ª modificación: cabecera de página con todas las categorías de nuestro blog

Vamos a añadir a nuestra página de resultados de búsqueda un título general tipo: «Resultados de su  búsqueda:» y una lista horizontal de todas las categorías del blog con enlaces a los post según categorías.

Nos situamos antes del comienzo del loop o bucle:

<!--el loop-->
<?php while ( have_posts() ) : the_post(); ?>

y copiamos el siguiente código:

<h1>Resultados de su B&uacute;squeda:</h1>
	<span class="et_pb_fullwidth_header_subhead"> Encontrar&aacute; m&aacute;s informaci&oacute;n en:
	      <?php $categories = get_categories();
		   foreach ( $categories as $category ) { 
		       if (!each($categories)){?>
			  <a href="<?php echo esc_url( get_category_link(get_cat_ID($category->name)))?>"> <?php echo esc_html( $category->name )?> </a>
		       <?php } 
                       else {?>
                          <a href="<?php echo esc_url( get_category_link(get_cat_ID($category->name)))?>"> <?php echo esc_html( $category->name )?> >></a>
		       <?php } 
               } ?>
	</span>

Ahora mismo, el contenido de nuestra página, debe ser similar al siguiente:

Modificar página search en WordPress

3ª modificación: añadir buscador

En algunos casos, los resultados de búsqueda encontrados pueden no satisfacer las necesidades del cliente. Para solucionar este inconveniente podemos agregar un buscador a la página.

Para agregar esta opción, debemos añadir una llamada la buscador antes del bucle. Copia y pega el siguiente código:

<div class="buscador center"><?php echo get_search_form(); ?></div>
<!--debajo comienza el loop-->

4ª modificación: ofrecer distintas opciones si no hay ningún resultado de búsqueda

En ocasiones el usuario introduce un término de búsqueda que no coincide con información de nuestros artículos. En algunos temas, cuando no hay resultados se muestra un aviso del estilo: «No hemos encontrado ningún resultado«… en otros ni eso, simplemente aparece una página en blanco sin más información.

Debes fijarte si tu tema tiene un aviso del tipo que indico. Si es así sustituye el aviso por otro tipo de información. Por ejemplo, un enlace a la página categorías de tu blog, un texto de invitación para que realice una nueva búsqueda, una lista con los post más leídos o comentados…

Si tu tema no contempla la posibilidad de falta de resultados, tenemos que modificar el archivo search.php 

En primer lugar, antes del bucle, vamos a añadir una condición «if» que compruebe si hay entradas de búsqueda. Si la condición se cumple ejecutará el bucle:

<?php if ( have_posts() ) : ?>
<!--debajo comienza el loop-->

Si la condición no se cumple, saltamos al «else» y ofrecemos otras posibilidades al usuario:

<?php endwhile; ?>
<!--Termina el bucle y añadimos el nuevo código else-->
<?php else: 
     echo '<p>si no hay entradas de resultados de búsqueda hacer algo</p>'; 
endif;?>
<!--Fin del if else-->

el «else» debes copiarlo después de cerrar el bucle (endwhile) y vaciar la consulta (wp_reset_query).

Además del aviso, puedes añadir alguna otra opción, por ejemplo un enlace a todos los artículos del blog.

<?php else: ?>
  <p>No hemos encontrado resultados para su b&uacute;squeda. Encontrar&aacute; un &iacute;ndice con todas las entradas de este blog en:</p>
  <div id="enlace-todas-las-entradas">
      <h1> <a href="https://laprogramaciondehoy.com/indice-entradas-blog-lph/">>> Ver todas las entradas del Blog Lph</a></h1>
  </div> 
<?php endif;?>

El resultado de la página de búsqueda sin resultados, es el siguiente:

Página de búsqueda sin resultados

Código completo

Código completo para modificar la página de resultados de búsqueda en WordPress:

<!--llamada a la cabecera; logo, menú...-->
<?php
get_header();
?>
<!--contenido principal-->
<div id="main-content">
	<div class="container">
		<div id="content-area" class="clearfix">
			<div id="left-area">
                          <!--título general-->
                          <h1>Resultados de su B&uacute;squeda:</h1>
	                  <span class="et_pb_fullwidth_header_subhead"> Encontrar&aacute; m&aacute;s informaci&oacute;n en:
	                  <!--las categorías del blog-->
                          <?php $categories = get_categories();
		               foreach ( $categories as $category ) { 
		                 if (!each($categories)){?>
			             <a href="<?php echo esc_url( get_category_link(get_cat_ID($category->name)))?>"> <?php echo esc_html( $category->name )?> </a>
		                 <?php } 
                                 else {?>
                                     <a href="<?php echo esc_url( get_category_link(get_cat_ID($category->name)))?>"> <?php echo esc_html( $category->name )?> >></a>
		                 <?php } 
                             } ?>
	                </span>
                        <!--buscador-->
                        <div class="buscador center"><?php echo get_search_form(); ?></div>
                        <!--si hay post, entra en el bucle-->
                        <?php if ( have_posts() ) : ?>
                        <!--el loop-->
			<?php while ( have_posts() ) : the_post(); ?>
                               <!-- recopilando info de cada post -->
				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                        <!-- título del post -->
					<h1 class="entry-title main_title"><?php the_title(); ?></h1>
					<!-- contenido del post -->
                                        <div class="entry-content">
					<?php
                                             the_excerpt(); 
                                        ?>
                                        <a href="<?php the_permalink();?>">Leer más...</a>
					</div> <!-- fin contenido post -->
				</article> <!-- fin info de cada post -->
			<?php endwhile; ?><!-- fin del loop -->
                        <!-- si no hay post de búsqueda -->
                        <?php else: ?>
                        <p>No hemos encontrado resultados para su b&uacute;squeda. Encontrar&aacute; un &iacute;ndice con todas las entradas de este blog en:</p>
                         <div id="enlace-todas-las-entradas">
                          <h1> <a href="https://laprogramaciondehoy.com/indice-entradas-blog-lph/">>> Ver todas las entradas del Blog Lph</a></h1>
                         </div> 
                        <?php endif;?>

			</div> <!-- termina contenido derecha -->

			<?php get_sidebar(); ?><!-- barra lateral -->
		</div> <!-- fin de div contentarea -->
	</div> <!-- fin de div container -->
</div> <!-- fin de div contenido principal -->

<?php get_footer(); ?><!-- llamada al pie de página -->

Conclusión

Estas son algunas ideas para modificar la página de resultados de búsqueda en WordPress, las opciones que añadas a esta página dependen de las necesidades de tu proyecto. Por supuesto hay más formas de lograr estos cambios.

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