SummArg | Cursos y recursos para webmasters

Clase 18: Custom Post Types: Formulario de búsqueda.

El último detalle que nos falta definir para los custom post types está relacionado con la creación de un formulario de búsqueda en donde  podamos listar elementos en base a diferentes parámetros. En nuestro Portfolio hicimos uso de dos custom fields y de taxonomías para clasificar nuestras entradas, y podría interesarnos listar entradas en base a dichos valores.

search

Vamos a crear una página personalizada para esta búsqueda y llamaremos al archivo page-search.php.

<?php
 /* template name: search */
 get_header(); ?>
 <div id="wrapper-dos">
 <form name="searchcpt" class="searchcpt" action="<?php bloginfo('wpurl'); ?>/" method="get">
 <p><strong>Buscador Portfolio</strong></p>
 <input name="" type="button" onclick="submit();" value="Buscar" class="btn" />
 </form>
 </div><!-- end of wrapper-->
 <?php get_sidebar(); get_sidebar('dos'); get_footer(); ?>

Ya colocamos las etiquetas de formulario y elegimos usar el layout que contiene dos barras laterales que construimos clases atrás. Lo primero que necesitamos hacer es establecer una diferencia entre este tipo de búsqueda y otros. Podríamos tener varios CPT o mezclar este formulario con la búsqueda general del sitio, así que sería bueno definir que la búsqueda la realizaremos en el Portfolio, así que le vamos a pasar el parámetro con un input hidden (oculto).

<input type="text" value="portfolio" hidden name="s" id="s" />

El primer custom field que utilizamos fue el que definía el layout así que generamos los radio buttons para que el usuario pueda elegir.

<div class="seccionForm">
 <div class="radiobuscar">
 <input type="radio" name="layout" value="layout1"><div>Layout1</div>
 </div>
 <div class="radiobuscar">
 <input type="radio" name="layout" value="layout2" checked><div>Layout2</div>
 </div>
 </div>

Ahora sería bueno colocar un select que permita seleccionar fácilmente una taxonomía, para lo  que generaremos la función colocando el siguiente código al final de nuestro functions.php

function taxonomy_dropdown($taxonomy) { ?>
 <select name="cat" id="cat" class="postform">
 <option value="">Elija secci&oacute;n</option>
 <?php $terms = get_terms($taxonomy);
 foreach ($terms as $term) {
 printf( '<option class="level-0" value="%s">%s</option>', $term->slug, $term->name );
 } echo '</select>'; ?>
 <?php }
 ?>

Dicha función recorre y lista los términos dentro de la taxonomía que le indiquemos. En nuestra page-search.php colocamos la llamada a la función de la siguiente manera:

<div class="selectArea">
 <?php taxonomy_dropdown( 'portfoliotaxonomies' ); ?>
 </div>

Finalmente nos sería de utilidad listar los socios de cada proyecto, pues cabe esperar que sea un dato que en mas de una oportunidad se repita. Para ello debemos realizar una consulta a la DB mediante $wpdb

<div class="selectArea">
 <select name="socio">
 <option value="">Cualquiera</option>
 <?php
 $metakey = 'socios';
 $socios = $wpdb->get_col($wpdb->prepare("SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key = %s ORDER BY meta_value ASC", $metakey) );
 if ($socios) {
 foreach ($socios as $socio) {
 echo "<option value=\"" . $socio . "\">" . $socio . "</option>";
 }
 }
 ?>
 </select>
 </div>

El CSS para esta sección es el siguiente:

.radiobuscar {
 width: 100px;
 float:left;
 margin: 0 0 5px 0;
 }
 .radiobuscar div{
 float:left;
 }
 .seccionForm {
 width: 380px;
 margin: 0 0 5px 0;
 float:left;
 }
 .selectArea {
 float:left;
 margin: 0 0 10px 0;
 }
 .searchcpt input[type=button] {
 float:left;
 border: 1px solid #7ec5ff;
 background-color: #7ec5ff;
 color: white;
 height:22px;
 font-weight:bold;
 font-size:11px;
 margin: 0 0 0 5px;
 padding: 5px 10px;
 overflow:hidden;
 }

Hasta aquí pudimos construir el formulario, pero ahora debemos resolver la búsqueda. De paso podemos aprovechar a partir el formulario de búsquedas en dos archivos. Vamos a nuestro search.php y colocamos las siguientes líneas en la parte superior. Recuerden que deben cerrar la llave que se abre luego del else.

$search_refer = $_GET["s"];
 if ($search_refer == 'portfolio') { load_template(TEMPLATEPATH . '/search-custom.php'); }
 else {

En esta sección utilizamos el primer input que colocamos en el formulario, que utilizamos únicamente para indicar que la variable “s” tiene por valor “portfolio”, y para tal caso escapa del template search.php y carga el template search-custom.php.

Generamos el archivo search-custom.php y comenzamos a procesar los datos. Como primera medida usamos get_header() para cargar el encabezado y usamos GET para obtener las variables que pasamos por URL desde el formulario.

<?php get_header();
 $layout = $_GET["layout"];
 $cat = $_GET["cat"];
 $socio = $_GET["socio"];

Armamos la consulta con query_posts y pasamos todos los argumentos. En primer lugar indicamos el post_type, luego los términos de “portfoliotaxonomies”. Para los valores de los custom fields utilizamos meta_query, y como usamos dos diferentes necesitamos introducir el parámetro relation para definir si se deben cumplir ambas condiciones o una u otra. Antes de los argumentos colocamos dos condicionales para cubrir las diferentes situaciones.

Si $socio y $layout contienen valores, es decir que el usuario seleccionó algo en ambos campos, entonces la relación que establecemos es AND y significa que se listarán las entradas que contengan los dos valores que pasamos (ej. que pertenezca a “Socio X” y que su Layout sea Layout1).

Si $socio no contiene nada dentro y $layout si, entonces la relación será OR, lo que permite listar las entradas que cumplan una u otra condición.

if ($socio && $layout) { $relation = 'AND';}
if (!$socio && $layout) { $relation = 'OR';}
$args = array(
'post_type' => 'portfolio',
 'portfoliotaxonomies' => $cat,
 'meta_query' => array(
 'relation' => $relation,
 array(
 'key' => 'layout',
 'value' => $layout,
 'compare' => '='
 ),
 array(
 'key' => 'socios',
 'value' => $socio,
 'compare' => '='
 )
 )
);
query_posts( $args );

Llegado este punto ya podemos listar el resto de la plantilla con el bucle y los resultados. Para poder comprobar mejor el funcionamiento del formulario vamos a imprimir al pié de cada elemento el valor “socio”, “layout” y la taxonomía.

seach2

<div id="wrapper">
<h1>Resultados en el Portfolio</h1>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$sociokey = get_post_meta(get_the_id(), 'socios', TRUE);
$layoutkey = get_post_meta(get_the_id(), 'layout', TRUE);
$terms = get_the_terms( $post->ID , 'portfoliotaxonomies' );
foreach ( $terms as $term ) { $taxonomy = $term->name; }
?>
<div class="dos-tercios listado">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_post_thumbnail('thumb'); the_excerpt(); ?>
<?php echo $sociokey.' | '.$layoutkey.' | '.$taxonomy; ?>
</div><!-- end of dos-tercios -->
<?php endwhile; else: ?>
<h2>No encontrado</h2>
<p>Lo sentimos, intente utilizar nuestro formulario de b&uacute;squedas.</p>
<?php endif; ?>
<div class="navigation"><?php posts_nav_link('','<p align="right">Siguientes</p>','<p align="left">Anteriores</p>'); ?></div>
</div><!-- end of wrapper-->
<?php get_sidebar(); get_footer(); ?>

La intención de este trabajo es darles  una idea de cómo se pueden explotar los Custom Post Types. Este formulario puede ampliarse introduciendo la posibilidad de ingresar términos o más custom fields. También llegado este punto podríamos elegir cargar los socios como etiquetas y no como custom fields, ya que también pueden introducirse en la query y son mas fáciles de gestionar. 

Ver el formulario online

Descargar clase: themeTaller 18 (167)

Dejar un comentario

  1. Excelente curso.

Dejar un comentario