Tecnología y Coaching para Emprendedores

Cómo crear un campo de búsqueda en WordPress

wordpress-busqueda

Cuando queremos implementar un tema de WordPress desde cero, una de las cosas que nos vamos a preguntar es cómo creamos un formulario de búsqueda que funcione. Buenas noticias: es mucho más fácil de lo qué parece.

Lo primero que tenemos que hacer es crear el archivo search.php. Para que lo entendamos, esta va a ser una página más del sitio web en la que mostraremos los resultados de búsuqeda. Y aquí no hay que implementar la búsuqeda, sino sólo cómo se verá la página. Lógicamente hemos de incluir el loop de WordPress, porque en otro caso difícilmente veremos los resultados.

El archivo search.php

A continuación vamos a ver cómo implementar el archivo search.php. Por favor ten en cuenta que lo habrás de retocar un poco para que se adapte a tu plantilla. Mi consejo es que partas de index.php o cualquier otro archivo de tu tema que contenga el loop.


	<?php get_header(); ?>

	<div class="wrapper"> <!-- Esta clase depende de tu tema -->

		<h2>Resultados de la búsqueda</h2>

		<!-- Inicio del loop de WordPress -->
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	        <h2 class="title"> <!-- La clase y el tipo de heading depende de tus necesidades -->
	        	<!-- Muestra el título del artículo -->
	        	<a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace permanente a <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
	        </h2>
	        <!-- Muestra la fecha de publicación, el autor y las etiquetas del post -->
	        <small>Publicado el <?php the_time('j/m/Y') ?> por <?php the_author_posts_link() ?> <span> |  <?php the_tags('Etiquetas: ', ', ', ''); ?></span> </small>
	        &lt;!-- Mostrar la <a href="http://www.esandra.com/out/graphicriver" title="GraphicRiver" class="pretty-link-keyword" target="_blank">imagen</a> destacada de la entrada --&gt;
	        &lt;?php
	            if ( has_post_thumbnail() ) { // comprobar si el post tiene un thumbnail.
	                        the_post_thumbnail();
	            }
	        ?&gt;
			&lt;!-- Muestra el extracto de la entrada --&gt;
	        &lt;?php the_excerpt(); ?&gt;

	 &lt;?php endwhile; ?&gt;
			&lt;!-- Aquí insertamos nuestro código para la paginación --&gt;
	&lt;?php  else: ?&gt;
	&lt;?php _e('Lo sentimos, no hay resultados con este término de búsqueda.'); ?&gt;
	&lt;?php endif; ?&gt;

	 &lt;/div&gt; &lt;!-- Fin de wrapper. De nuevo ten en cuenta la estructura  tu plantilla--&gt;

	&lt;?php  get_sidebar()?&gt;
	&lt;?php get_footer(); ?&gt;

Una vez hemos creado el archivo search.php, es cuando podemos implementar el buscador de WordPress:

	<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
		<input type="text" placeholder="Buscar…" value="<?php the_search_query(); ?>" name="s" id="s" />
		<button type="submit" class="icon-only"  id="searchsubmit"></button>
	</form>

Por simple que parezca, ya tenemos un formulario de búsqueda que funcione en WordPress. Ahora nos falta el diseño web del formulario, para que se ajuste al resto del diseño. Y es cuando entra en juego el CSS, con el que podemos dar formato al mismo.

¿Te ha gustado el artículo? Deja un comentario.


Comentarios

  • Matias

    Muchas gracias, Sandra. Eres una genia. Gracias por compartir tus conocimientos.

    • Sandra

      jaja, Matías, muchas gracias, es la primera vez que me llaman genia, me ha hecho sonreír :-)

  • Laura

    Gracias!!!

  • calevano

    La verdad estoy siguiendo el “Aprender a crear un tema de WordPress desde cero.” y esta claro en lo que explicas, soy desarrollador web y la verdad quiero entrar al mundo de WordPress, tengo conocimientos claros en PHP, HTML5, Css3… gracias Sandra, saludos desde Perú.

    • eSandra

      A ti por comentar :-)

      un abrazo,
      Sandra

  • Jocksan

    Eres otro nivel Sandra. Te agradezco en demasía.

    • eSandra

      jajaja, gracias Jocksan