La versión de FacetWP se ha actualizado y aquí tenéis el nuevo tutorial para crear un buscador avanzado en WordPress con FacetWP.
Para seguir este tutorial necesitas el plugin FacetWP, lo puedes comprar o si eres miembro premium lo tienes disponible en la zona premium totalmente gratis.
Si no estás suscrito a la Zona Premium te puedes dar de alta por 10€/mes aquí
Tutorial en Vídeo
Suscríbete a mi canal:
El plugin FacetWP nos sirve para filtrar información, para ello lo que vamos a hacer es instalar el plugin Advanced Custom Fields en su versión gratuita para crear campos con información que posteriormente filtraremos.
Concretamente vamos a crear dos campos, uno precio y otro marca de coche:
Una vez que hemos creado los campos personalizados, si creamos una nueva entrada veremos esos campos para poder rellenarlos, vamos a hacerlo para poder luego filtrar por esa información:
Una vez que añadimos información llega el momento de construir el filtro gracias al plugin FacetWP, para ello vamos a Ajustes –> FacetWP y dentro vamos a la primera pestaña Facets.
Aquí creamos los filtros deseados, es mi caso un filtro de precio y otro filtro de marca:
Ahora tenemos que añadir el filtro en nuestra web, en mi caso lo voy a añadir a través de los widgets gracias a los shortcodes
Ahora que ya tenemos los filtros creados, volvemos a Ajustes –> FacetWP y vamos a la pestaña Templates.
Aquí podremos ver una plantilla para mostrar los resultados de la manera que queramos, como hay ya una plantilla de ejemplo podemos usarla y en esta plantilla podemos elegir los campos que queramos añadir, filtros, lo que nosotros queramos.
Ahora creamos una página en la que se mostraran los resultados, lo haremos de la siguiente manera:
Ahora si vemos nuestra página ya podemos ver que funciona y filtra perfectamente.
Tenemos que tener la precaución de que nuestra página tenga lateral con los widgets que configuramos con los FacetWP:
En el vídeotutorial podéis ver como he añadido los campos imágenes, enlaces para que cada elemento te lleve a su contenido ampliado.
En el vídeo podéis ver también que he añadido un poco de css para poder colocar los elementos a mi gusto ;)
FacetWP nos da una barbaridad de opciones.
En muchas ocasiones recibo preguntas referentes a la creación de filtros y búsquedas avanzadas en nuestra página hecha en WordPress.
Crear filtros avanzados es una característica que necesitaremos si en nuestra web tenemos información que el visitante necesita investigar. Por ejemplo si tenemos una web de coches o una inmobiliaria nuestros visitantes querrán buscar entre nuestros productos para ver cuál le convence más.
En este vídeo tutorial os explico como hacerlo con un plugin llamado facetWP.
Para seguir el tutorial necesitaréis los siguiente:
Plugin FacetWP: Los que seáis miembros de la zona premium lo podéis descargar de forma gratuita desde el área de miembros y quien prefiera comprarlo lo puede hacer aquí por 79$
Plugin Advanced Customs Fields: Es gratis y lo puedes descargar de aquí
El siguiente código para tener la misma plantilla de facetWP:
<?php while ( have_posts() ) : the_post(); ?>
<div><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<div style="float: left;margin-right: 20px;"> <?php the_post_thumbnail( array(300,300) ); ?> </div>
<div><strong>Precio:</strong> <?php echo '<p>' . get_field('precio') . '</p>'; ?></div>
<div><strong>Marca:</strong> <?php echo '<p>' . get_field('marca') . '</p>'; ?></div>
<div style="margin-bottom:50px;"><a href="<?php the_permalink(); ?>">Más Detalles</a></div>
<?php endwhile; ?>
Y sin más aquí tenéis el tutorial:
Espero que os haya gustado ;)
Me parece un tema muy interesante y por ello haré muchos más tutoriales sobre este plugin en breve.
Saludos
Óscar