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í:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<header> <h1><a href="<?php echo get_option( 'home' ); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h2><?php bloginfo( 'description' ); ?></h2> <div id="barrasuperior"> <?php wp_nav_menu( array( 'menu' => 'Principal', 'container_class' => 'menu', 'menu_class' => 'horizontal', )); get_search_form(); ?> </div> </header> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* El menú */ #barrasuperior { background: rgba(28,255,255,0.4); height: 50px; } .menu { float: left; } .searchform { float: right; padding: 15px; } .screen-reader-text { display:none; } |
Con esto, obtenemos el siguiente resultado:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php get_header(); ?> <section id="main"> <h1>Resultados de la búsqueda</h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div id="articulo"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <small>Publicado por <?php the_author(); ?> el <?php the_date(); ?><br></small> <small>Categoría: <?php the_category( '->', 'multiple' ); ?></small> <?php the_excerpt(); ?> </div> <hr> <?php endwhile; else: ?> <p><?php _e('No hay entradas .'); ?></p> <?php endif; ?> </section> <!-- Fin de la sección main --> <?php get_sidebar(); get_footer(); ?> |
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:
|
1 2 3 4 5 6 7 |
<div id="articulo"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <small>Publicado por <?php the_author(); ?> el <?php the_date(); ?><br></small> <small>Categoría: <?php the_category( '->', 'multiple' ); ?></small> <?php the_excerpt(); ?> </div> <hr> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php get_header(); ?> <section id="main"> <h1>Resultados de la búsqueda</h1> <?php if (have_posts()) : while (have_posts()) : the_post(); get_template_part( 'partes/articulo' ); endwhile; else: ?> <p><?php _e('No hay entradas .'); ?></p> <?php endif; ?> </section> <!-- Fin de la sección main --> <?php get_sidebar(); get_footer(); ?> |
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.
Si, eSandra tenía unos post muy interesantes. Yo tambíen me inspiré mucho en ella. Qué lástima que ya se haya abandonado ese proyecto.
Efectivamente, isra. Sin embargo, Sandra Sanmarti, afortunadamente, está inmersa en otros proyectos nuevos.