Añadir un buscador en la página del blog de Genesis

Dos opciones para añadir un buscador en la página de blog antes del listado de entradas con Genesis Framework


por

Cada vez más en los diseños de las páginas web que incorporan un blog, se tiende a prescindir de la barra lateral o sidebar, donde era costumbre añadir publicidad, listado de últimas entradas, redes sociales, o un buscador.

Las estadísticas demostraban que la ‘ceguera visual‘ de los usuarios provocaba que al final ese espacio lateral lo único que servía era para restar espacio al contenido del blog, que era lo que realmente interesaba a quien llegaba a la web.

Así que, aunque se sigue utilizando la sidebar, cada vez más blogs la han ido eliminando y utilizando CTA’s inline, es decir, llamadas a la acción integradas en el contenido del post o añadidas entre los párrafos.

La cuestión es que al quitar esa barra lateral, para algunos ha sido un problema el colocar el buscador, que puede ser muy práctico, pero que no siempre hay espacio en la cabecera para ponerlo, y en el pie de página pocos lo ven.

Un buen lugar para añadir ese buscador puede ser justo antes del listado de entradas de la página de blog, categoría o etiqueta.

¿Cómo añadimos ese buscador si utilizamos Genesis Framework?

Como en la mayoría de casos en que queremos añadir, quitar o modificar contenido en alguna página de Genesis, tenemos dos formas de hacerlo:

  1. Un snippet en el archivo functions.php del tema hijo o en nuestro plugin propio de funcionalidades
  2. Editando la plantilla de la página a modificar.

1- Código para añadir el buscador en el blog

Con una simple función podemos añadir el buscador allá donde queramos en nuestra web, simplemente deberemos decirle dónde (en que parte de la página) y cuando (en que secciones de la web):

add_action('genesis_before_loop', 'mostrar_buscador');
function mostrar_buscador () {
	if (is_home() || is_archive( )) {
		get_search_form ( true );
	}
}

En este caso, le estamos diciendo que lo añada en el hookgenesis_before_loop‘, y que lo haga si la página es el blog (ojo que ‘is_home()‘, aunque pueda confundir por el nombre, es el condicional para la página de listado de posts por defecto), o la de archive, es decir, el listado de posts por categoría o etiqueta.

get_search_form (); es la función de WordPress por defecto para mostrar el buscador estándar. Si estamos utilizando algún plugin para mejorar las búsquedas, tipo Relevanssi o SearchWP, podemos sustituirlo por el shortcode que nos da el plugin.

2- Editar la plantilla de la página a modificar

Una segunda opción para insertar el buscador, sería editando la plantilla de la página donde queremos mostrarlo, en este caso el archivo home.php

Según el tema hijo que utilices, es posible que ese archivo ya exista, con las modificaciones o particularidades que lleve el theme, o que no aparezca, en cuyo caso tendrás que crearlo.

Para ello, simplemente crearemos un archivo llamado home.php, donde no hace falta poner nada en especial, más que las funciones que quieras que afecten sólo a esa página y la llamada a genesis();

<?php
// ***************** Plantilla de la página de entradas del blog 
add_action( 'genesis_before_loop', 'mostrar_buscador', 15 );
function mostrar_buscador(){
	 get_search_form ( true );
}
genesis();

Y si quisieramos que el buscador apareciera también en la página de categorías o entradas, o cualquier listado de posts genérico, haríamos lo mismo con un archivo llamado archive.php


Obviamente, si lo único que necesitas es mostrar el formulario de búsqueda, es mucho más cómoda la primera opción, sin tener que crear o modificar las plantillas del theme, pero os comento las dos opciones por si además de esta modificación queréis realizar otros cambios en esas páginas o si el child theme que utilizáis ya los tiene creado y queréis agruparlo para que esté todo junto.

¿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 «Añadir un buscador en la página del blog de Genesis»

  1. Avatar de Jaime

    |

    Muy buenos todos los aportes que he encontrado acá, por ello muchas gracias. Con respecto al buscador, cómo puedo cambiar el texto dentro del botón de enviar.
    De nuevo muchas gracias!!

    1. Avatar de esther

      |

      Hola Jaime!
      He encontrado este código para hacerlo:
      add_filter('get_search_form', 'my_search_form_text');

      function my_search_form_text($text) {
      $text = str_replace('value=Send', 'value="Click me"', $text); //set as value the text you want
      return $text;
      }

      Pero depende mucho de como lo tengas configurado, tendrás que revisar si has de adaptarlo a tu sitio para que funcione.

      Saludos!

      1. Avatar de Jaime

        |

        Saludos Esther,
        Lo probaré.

        Muchas gracias.