Añadiendo búsqueda de texto a tu tema

Añadir la función de búsqueda de texto a nuestro tema es extremadamente fácil, y, en principio, no precisa crear ningún archivo de plantilla adicional, ya que esta función la realiza index.php. Ahora bien, nosotros buscaremos una correcta implantación en nuestro tema, y aprovecharemos para aprender más del funcionamiento de los archivos de plantilla.

La función get_search_form() nos genera automáticamente un pequeño formulario de búsqueda. Como es tan pequeño, y porque queda muy bien, como se puede ver en eSandra.com, quiero introducirlo en la barra superior del menú, a la derecha.

Para ello, tendré que crear una caja que contenga tanto el menú como el formulario de búsqueda, quedando así el <header>…</header> del archivo header.php así:

Ahora, para que esta caja se vea como una sola unidad, realizamos las siguientes modificaciones en el archivo de estilos style.css:

  • Quitamos el fondo de la clase .menu y se lo ponemos a la caja ‘barrasuperior’, a la que también le damos una altura de 50 píxeles (height: 50px).
  • La clase .menu la hacemos flotar a la izquierda.
  • La clase .searchform la hacemos flotar a la derecha y le incorporamos una separación de los elementos colindantes de 15 px (padding: 15px;).
  • Finalmente, eliminamos la etiqueta ‘Buscar:’ mediante display: none.

Con esto, obtenemos el siguiente resultado:

menucompleto

Que, de momento, era lo que yo buscaba, si bien en un próximo capítulo incorporaremos Bootstrap a nuestro tema y mejoraremos este resultado.

Las jerarquías de plantillas en WordPress

Si quisiéramos, ya habríamos terminado, ya que el funcionamiento del formulario de búsqueda es muy sencillo: introduces una cadena, y WordPress genera un resultado, que se mostrará según el archivo de plantilla search.php, o, en su defecto, con index.php. Como ya tenemos el archivo index.php, no necesitaríamos hacer nada más.

Este es el sistema de jerarquías que emplea WordPress con los temas. Busca un archivo de plantilla específico a lo que va a mostrar por pantalla, y, si no lo encuentra utiliza uno más genérico; si éste tampoco lo encuentra va subiendo por la jerarquía, acabando en el archivo index.php.

El archivo search.php

El archivo quedaría así, tal cual:

Si nos fijamos bien, la única diferencia entre este archivo y el index.php es la cabecera <h1>Resultados de la búsqueda</h1>.

La función get_template_part() de WordPress

En WordPress existe una función, get_template_part ( $fichero, $especial ), que nos permite anexar una parte de una plantilla que tenemos en otro fichero, que se encuentra ubicado donde indica el primer parámetro. El segundo parámetro $especial, sirve para diferenciar tipos de ese fichero a incluir en nuestra plantilla.

Lo vemos sobre la marcha. En el directorio de nuestro tema creamos una sub-carpeta de nombre ‘partes’, y allí creamos un nuevo archivo articulo.php, con el siguiente contenido:

Estas líneas son las que visualizan cada uno de los artículos que genera el ‘loop’.

Ahora, en el archivo search.php eliminamos esas mismas líneas, sustituyéndolas por get_template_part( ‘partes/articulo’ ), con lo que obtenemos el siguiente resultado:

Con esto, conseguimos un sistema de plantillas modular. Ahora, si queremos modificar la forma en que se visualizan los artículos dentro del ‘loop’, sólo deberemos modificar el archivo articulo.php que hemos creado, y el cambio que hagamos se producirá tanto en index.php como en search.php, sin tener que modificar estos archivos.

Por cierto, acordaros de realizar el cambio también en index.php.

 

Así pues, en este artículo hemos visto cómo incluir un formulario de búsqueda de texto fácilmente en nuestro tema y acoplarlo perfectamente con su estética. Lo podríamos haber desarrollado directamente en código HTML, como hace Sandra Sanmartí en su fabuloso blog eSandra.com (toda una fuente de inspiración), pero he preferido aprovechar la función get_search_form() que provee WordPress. También hemos creado el archivo de plantilla search.php, y finalmente hemos visto una manera de crear plantillas modulares mediante el uso de la función get_template_part(), la cual os aseguro que volveremos a emplear.

 

2 opiniones en “Añadiendo búsqueda de texto a tu tema”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *