Crear o personalizar un formulario de búsqueda en wordpress

Deja un comentario / Wordpress / Por

Por defecto WordPress nos trae un formulario de búsqueda que nos permite buscar entradas, páginas o cualquier otro tipo de contenido personalizado. El aspecto del formulario de búsqueda en WordPress viene determinado por el tema que tengamos instalado. No obstante, podemos personalizarlo para incluir nuevos campos, crear un formulario alternativo, o simplemente ajustarlo a la apariencia que más nos interesa.

Archivo responsable de representar el formulario: searchform.php

Efectivamente, como ocurre con las páginas, entradas o cualquier otro elemento en WordPress, los formularios de búsqueda se renderizan gracias al archivo searchform.php. No debemos preocuparnos, si este archivo no está incluido en nuestro tema, ya que en ese caso WordPress crea un formulario muy simple que consiste en un cuadro de texto con un botón.

Sabiendo esto, crear un formulario de búsqueda en WordPress es muy sencillo, tan solo debemos crear, o modificar, el archivo searchform.php dentro de nuestro tema principal y añadir nuestro código HTML, mezclado con algo de PHP.

Código de nuestro formulario de búsqueda.

Se sobreentiende que si has llegado hasta aquí, es porque dominas WordPress y su terminología. Por tanto, conoces que es una taxonomía, y que es un custom post type (o entrada personalizada). No obstante, dejo los enlaces de cada definición, por si necesitas indagar, antes de avanzar.

Nuestro formulario debe proveernos herramientas que nos permitan filtrar los resultados en función de la categoría a la que pertenezcan, o por alguna coincidencia que se encuentre en el título, o contenido. Un cuadro de texto nos permite buscar por coincidencia, pero los selectores de opción, o las casillas de verificación permiten afinar la búsqueda. Lógicamente, todas estas herramientas están intrinsecamente relacionadas con la unidad de información que deseamos buscar.

Así pues, supongamos que tenemos una inmobiliaria que consta de inmuebles. Los inmuebles disponen de las siguientes características:

  • Pertenecen a una ciudad, (o provincia)
  • Tienen un precio
  • Tienen un número de camas
  • Se alquilan o se venden.
  • Existen diferentes tipos de inmuebles: Casa, piso, comercio, etc.
  • Disponen de diferentes características, no excluyentes: Garage, chimenea, cocina, etc.

Por tanto para buscar los inmuebles de nuestra inmobiliaria, necesitaremos crear un formulario de búsqueda como el de la imagen:

Formulario de búsqueda de https://www.keyplushomes.com
Formulario de búsqueda de WordPress

Pasos para construir un formulario de búsqueda en WordPress

Primero creamos nuestro formulario con las etiquetas HTML <form></form> y dentro indicamos con un campo oculto, el tipo de dato que queremos buscar. En nuestro caso, los inmuebles están definidos como un tipo de entrada personalizada -CPT- llamado: ‘propiedades’

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <input type="hidden" name="post_type" value="propiedades" />
  <input type="submit" class="search-submit" value="Buscar" />
</form>

Ahora debemos ir metiendo los diferentes controles:

Crear el cuadro de búsqueda principal del formulario

<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />

Lo realmente importante aquí, es que el atributo name de nuestro cuadro de búsqueda coincide con el parámetro de búsqueda principal de nuestra url. Generalmente, en WordPress el parámetro de búsqueda principal es la ‘s’. Por ejemplo:

https://sitioweb.com/?s=san+juan&tipo_de_propiedad=&tipo_de_oferta=&ciudad=&habitaciones=&precio_min=&precio_max=&post_type=propiedades

El parámetro ‘s’, es el responsable de buscar los inmuebles por coincidencia en sus títulos, contenido u otro metadato que hayamos configurado.

Utilizar un campo SELECT para filtrar por taxonomía

Nuestro Custom Post Type -CPT- utiliza las siguientes taxonomías: ‘Tipo de propiedad‘, ‘Tipo de Oferta‘ y ‘Ciudad‘. Por tanto, para poder filtrar por «Tipo de propiedad» insertamos el siguiente código:

<?php
$arguments = array(
               'taxonomy' => 'tipo_de_propiedad',
               'orderby' => 'name',
               'order'   => 'ASC'
           );
?>
<select id="category_property_type" name="tipo_de_propiedad">
    <option value="">Tipo de inmueble</option>
    <!-- Leemos los términos que componen nuestra categoría -->
    <?php $categories = get_categories($arguments);
	foreach ($categories as $key => $category) { ?>
	    <option value="<?php echo $category->slug;?>" <?php echo (isset($_GET['tipo_de_propiedad']) && $_GET['tipo_de_propiedad']==$category->slug)?"selected":''; ?>><?php echo $category->name;?> </option>
        <?php } //Fin del foreach ?>
</select> <!-- Tipo de propiedad -->

Para filtrar por ‘Tipo de Oferta‘ insertamos el siguiente código:

<?php
    $arguments = array(
	'taxonomy' => 'tipo_de_oferta',
	'orderby' => 'name',
	'order'   => 'ASC'
	);
	?>
<select id="category_offer_type" name="tipo_de_oferta">
	<option value="">Tipo de oferta</option>
        <!-- Leemos los términos que componen la categoría Tipo de oferta -->
	<?php $categories = get_categories($arguments);
	foreach ($categories as $key => $category) {?>	
		<option value="<?php echo $category->slug;?>"  <?php echo (isset($_GET['tipo_de_oferta']) && $_GET['tipo_de_oferta']==$category->slug)?"selected":''; ?>><?php echo $category->name;?></option>
        <?php } //Fin del foreach ?>
</select> <!-- Tipo de oferta -->

Por último, la taxonomía ‘Ciudad‘ consta de términos padres e hijos ya que las ciudades se agrupan por provincias. Nuestro SELECT mostrará por tanto, las ciudades agrupadas por provincias, tal y como muestra la imagen:

Control de formulario SELECT que muestra campos agrupados
SELECT box con campos agrupados por provincias
<?php
    $arguments = array(
	         'taxonomy' => 'ciudad',
	         'orderby' => 'name',
	         'order'   => 'ASC'
	        );
?>

<select id="category_city_type" name="ciudad">
	<option value="">Selecciona ciudad</option>
	<?php $categories = get_categories($arguments);
	foreach ($categories as $key => $category) {?>
		<?php if ($category->category_parent == 0) { //Si es una categoría padre ?>
		<optgroup label="<?php echo $category->name; ?>">
		<?php $terminos_ciudades=get_terms( 'ciudad', array( 'child_of' => $category->term_id ) ); 
		foreach ($terminos_ciudades as $ciudad) {?>
			<option value="<?php echo $ciudad->slug;?>" <?php echo (isset($_GET['ciudad']) && $_GET['ciudad']==$ciudad->slug)?"selected":''; ?>><?php echo $ciudad->name;?></option>
		<?php } //Fin del foreach ?>  
		</optgroup>
		<?php } //Fin del if donde se pregunta si es categoria padre?>
	<?php } //Fin del foreach principal ?>
</select> <!-- Ciudad -->

Utilizar campos SELECT para filtrar las búsquedas a partir de metadatos.

Nuestro Custom Post Type ‘Propiedades‘ además de un título y un contenido, contiene información más especifica sobre el inmueble, como son el precio y el número de camas. Es por tanto habitual que los usuarios quieran buscar por precio o por número de camas disponibles.

El código implicado para buscar por precio:

<div class="flex">
<?php 
$valor=null;
if (isset($_GET['precio_min']) && $_GET['precio_min']!=null)
	$valor=$_GET['precio_min'];
?>
<select id="precio_min" name="precio_min">
	<option value="" <?php echo ($valor==null)?"selected":''; ?>>Precio mínimo</option>
	<option value="10000" <?php echo ($valor==10000)?"selected":''; ?>>10.000€</option>
	<option value="50000" <?php echo ($valor==50000)?"selected":''; ?>>50.000€</option>
	<option value="100000" <?php echo ($valor==100000)?"selected":''; ?>>100.000€</option>
	<option value="200000" <?php echo ($valor==200000)?"selected":''; ?>>200.000€</option>
	<option value="300000" <?php echo ($valor==300000)?"selected":''; ?>>300.000€</option>
	<option value="400000" <?php echo ($valor==400000)?"selected":''; ?>>400.000€</option>
	<option value="500000" <?php echo ($valor==500000)?"selected":''; ?>>500.000€</option>
	<option value="600000" <?php echo ($valor==600000)?"selected":''; ?>>600.000€</option>
	<option value="700000" <?php echo ($valor==700000)?"selected":''; ?>>700.000€</option>
	<option value="800000" <?php echo ($valor==800000)?"selected":''; ?>>800.000€</option>
	<option value="900000" <?php echo ($valor==900000)?"selected":''; ?>>900.000€</option>
	<option value="1000000" <?php echo ($valor==1000000)?"selected":''; ?>>1.000.000€</option>
</select> <!-- Precio mínimo -->
<?php 
$valor=null;
if (isset($_GET['precio_max']) && $_GET['precio_max']!=null)
	$valor=$_GET['precio_max'];
?>
<select id="precio_max" name="precio_max">
	<option value="" <?php echo ($valor==null)?"selected":''; ?>>Precio máximo</option>
	<option value="10000" <?php echo ($valor==10000)?"selected":''; ?>>10.000€</option>
	<option value="50000" <?php echo ($valor==50000)?"selected":''; ?>>50.000€</option>
	<option value="100000" <?php echo ($valor==100000)?"selected":''; ?>>100.000€</option>
	<option value="200000" <?php echo ($valor==200000)?"selected":''; ?>>200.000€</option>
	<option value="300000" <?php echo ($valor==300000)?"selected":''; ?>>300.000€</option>
	<option value="400000" <?php echo ($valor==400000)?"selected":''; ?>>400.000€</option>
	<option value="500000" <?php echo ($valor==500000)?"selected":''; ?>>500.000€</option>
	<option value="600000" <?php echo ($valor==600000)?"selected":''; ?>>600.000€</option>
	<option value="700000" <?php echo ($valor==700000)?"selected":''; ?>>700.000€</option>
	<option value="800000" <?php echo ($valor==800000)?"selected":''; ?>>800.000€</option>
	<option value="900000" <?php echo ($valor==900000)?"selected":''; ?>>900.000€</option>
	<option value="1000000" <?php echo ($valor==1000000)?"selected":''; ?>>1.000.000€</option>
</select> <!-- Precio máximo -->
</div>

Por otra parte, el código implicado para buscar por número de camas sería:

<select id="habitaciones" name="habitaciones">
<?php 
$valor=null;
if (isset($_GET['habitaciones']) && $_GET['habitaciones']!=null)
	$valor=$_GET['habitaciones'];
?>
	<option value="" <?php echo ($valor==null)?"selected":''; ?>>Número de habitaciones</option>
	<option value="1" <?php echo ($valor==1)?"selected":''; ?>>1</option>
	<option value="2" <?php echo ($valor==2)?"selected":''; ?>>2</option>
	<option value="3" <?php echo ($valor==3)?"selected":''; ?>>3</option>
	<option value="4" <?php echo ($valor==4)?"selected":''; ?>>4</option>
	<option value="5" <?php echo ($valor==5)?"selected":''; ?>>5</option>
	<option value="6" <?php echo ($valor==6)?"selected":''; ?>>6</option>
	<option value="7" <?php echo ($valor==7)?"selected":''; ?>>7</option>
	<option value="8" <?php echo ($valor==8)?"selected":''; ?>>8</option>
</select>

Utilizar checkbox para filtrar en las búsquedas de WordPress

Por último, nuestro inmueble, también consta de una taxonomía llamada «Características«, que consta de los términos «Piscina«, «Chimenea«, «A estrenar«, etc. Esto es así para permitir a los usuarios filtrar por alguna de estas características del inmueble. El código implicado para generar estos checkbox es como sigue:

<?php 
$caracteristicas=array();
if (isset($_GET['caracteristicas'])) { 
	$caracteristicas=$_GET['caracteristicas'];

} ?>
	<label><input type="checkbox" name="caracteristicas[]" value="a-estrenar" <?php echo (in_array("a-estrenar",$caracteristicas))?'checked':''; ?>>A estrenar</label>
	<label><input type="checkbox" name="caracteristicas[]" value="chimenea" <?php echo (in_array("chimenea",$caracteristicas))?'checked':''; ?>>Con Chimenea</label>
	<label><input type="checkbox" name="caracteristicas[]" value="garage" <?php echo (in_array("garage",$caracteristicas))?'checked':''; ?>>Con Garage</label>
	<label><input type="checkbox" name="caracteristicas[]" value="vistas-al-mar" <?php echo (in_array("vistas-al-mar",$caracteristicas))?'checked':''; ?>>Con Vistas</label>
	<label><input type="checkbox" name="caracteristicas[]" value="ascensor" <?php echo (in_array("ascensor",$caracteristicas))?'checked':''; ?>>Ascensor</label>
	<label><input type="checkbox" name="caracteristicas[]" value="trastero" <?php echo (in_array("trastero",$caracteristicas))?'checked':''; ?>>Trastero</label>
	<label><input type="checkbox" name="caracteristicas[]" value="piscina" <?php echo (in_array("piscina",$caracteristicas))?'checked':''; ?>>Piscina</label>
	<label><input type="checkbox" name="caracteristicas[]" value="terraza" <?php echo (in_array("terraza",$caracteristicas))?'checked':''; ?>>Terraza</label>
	<label><input type="checkbox" name="caracteristicas[]" value="jardin-privado" <?php echo (in_array("jardin-privado",$caracteristicas))?'checked':''; ?>>Jardín Privado</label>
	<label><input type="checkbox" name="caracteristicas[]" value="cocina-independiente" <?php echo (in_array("cocina-independiente",$caracteristicas))?'checked':''; ?>>Cocina independiente</label>
	
</div>

Procesar formulario de búsqueda en el servidor

Ya tenemos nuestro formulario de búsqueda creado. A partir de ahora, cada vez que usemos la función get_search_form() aparecerá nuestro formulario búsqueda, listo para ser usado. Los usuarios pueden filtrar por taxonomía: ciudad, tipo de oferta, … o por metadatos: precio, numero de camas, número de referencia,…

Cada vez que los usuarios realicen una búsqueda en WordPress, el formulario generará una URL que contendrá los parámetros de búsqueda que serán procesados por el servidor. Lamentablemente, nuestro formulario de búsqueda aún no funciona porque necesitamos explicarle, a través de WordPress, como filtrar los resultados de búsqueda a partir de los datos enviados.

Pasar de un formulario sencillo que busca por título y/o contenido a un formulario que busca por metadatos o taxonomías requiere de dos partes principales:

  • Crear el formulario de búsqueda con los controles necesarios para que los usuarios envíen sus peticiones.
  • Configurar WordPress para que extienda las búsquedas y sea capaz de filtrar por categoria, taxonomia o metadatos.

La primera parte está hecha, ahora queda configurar WordPress para crear las consultas a partir de los datos enviados por el formulario. Pero eso lo dejamos para el próximo tutorial.

Deja un comentario

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