La guía definitiva para el filtrado de publicaciones y páginas de WordPress

Si alguna vez ha comprado en Amazon, es probable que ya aprecie el poder de los filtros para profundizar en una gran cantidad de contenido y ubicar exactamente lo que está buscando. Cuando busca un producto en Amazon, siempre hay una barra lateral llena de filtros que lo ayudan a refinar su búsqueda, devolviendo solo los resultados que cumplen con sus requisitos más importantes. Filtros como calificación del cliente, marca, si el producto es para hombres o mujeres, estado (nuevo/usado) y muchos más.

Dado lo útiles que son los filtros de contenido, probablemente no debería sorprender que la capacidad de crearlos para su contenido de WordPress esté integrada directamente en WordPress Core. Y con un poco de conocimiento, puede llevar ese poder a los visitantes de su sitio, permitiéndoles navegar por su contenido con más agilidad que nunca.

En esta publicación, lo guiaremos a través del proceso de creación de opciones de filtrado de contenido para sus usuarios con un complemento.

¡Empecemos!

¿Por qué filtrar publicaciones y páginas de WordPress?

WordPress es increíblemente flexible. El núcleo le permite tener un control completo sobre todo en su sitio. El filtrado de publicaciones y páginas es una de las características más poderosas de WordPress. Hay varias funciones integradas para publicaciones, páginas y contenido personalizado. Además, hay muchas formas de seleccionar, agrupar y filtrar elementos almacenados en la base de datos. Puede crear listas clasificables de resultados de búsqueda por plantilla de página, tipos de publicaciones, términos de taxonomía, jerarquía de plantillas, páginas de productos o cualquier otra cosa que desee.

Por defecto, WordPress viene con una función de búsqueda integrada. Sin embargo, esa función de búsqueda deja mucho que desear y no ayuda cuando tus lectores quieren filtrar los resultados de una manera particular. Ahí es donde entra en juego la ayuda de un complemento de terceros.

¿Qué hace el complemento de búsqueda y filtro?

El complemento Search & Filter es un complemento fácil de usar que lleva el cuadro de búsqueda predeterminado de WordPress al siguiente nivel. Permite a sus visitantes buscar un término en particular y filtrar los resultados según categorías, etiquetas, tipos de publicaciones personalizadas, taxonomías personalizadas , rango de fechas o incluso una combinación de todos ellos para una búsqueda más refinada y resultados más precisos.

Usar el complemento es muy simple. Después de instalar y activar el complemento, accederá a la página de configuración con una explicación detallada de cómo usarlo. En pocas palabras, puede usar un código abreviado en cualquier lugar de sus publicaciones, páginas o cualquier barra lateral con widgets. Alternativamente, si te sientes valiente y no te importa ensuciarte las manos con un pequeño código, puedes pegar una sola línea de código en tu archivo de tema.

Echemos un vistazo a algunos ejemplos.

Cómo filtrar publicaciones con búsqueda y filtro

El uso más básico del complemento es el código abreviado que permite a los visitantes buscar en todas sus categorías y etiquetas. El código abreviado predeterminado se ve así:

01
[searchandfilter fields="search,category,post_tag"]

Puede insertarlo en cualquier publicación, página o widget de texto y mostrará las opciones de filtrado con campos de búsqueda, categoría y etiquetas en la parte frontal:

Si desea permitir que los visitantes seleccionen más de una categoría o una etiqueta, puede hacerlo fácilmente modificando el código abreviado para incluir casillas de verificación en lugar de un menú desplegable y etiquetando cada campo:

01
[searchandfilter headings="Select categories:" types="checkbox" fields="category"]

Los ejemplos anteriores muestran cómo usar el complemento en la barra lateral. Sin embargo, también puede usarlo dentro de su archivo de tema para mostrarlo en cualquier página. En el siguiente ejemplo, el formulario se muestra en la página del blog. Todo lo que tienes que hacer es pegar la siguiente línea de código:

01
<?php echo do_shortcode('[searchandfilter fields="search,category,post_tag"]'); ?>

En nuestro caso, lo hemos agregado a la plantilla de índice principal del tema Twenty Seventeen .

¿Cómo filtrar taxonomías personalizadas?

Los ejemplos anteriores muestran un uso muy básico del complemento. Pero, el complemento de búsqueda y filtro también acepta otros parámetros. Puede usar un código abreviado que permita a sus visitantes filtrar los resultados de búsqueda solo para taxonomías personalizadas.

Supongamos que tiene una tienda en su sitio con WooCommerce. Si desea incluir categorías de productos en los resultados de búsqueda, todo lo que tiene que hacer es agregar el siguiente código abreviado:

01
[searchandfilter taxonomies="search,category,post_tag,product_cat" headings=",Categories,Tags,Product Categories"]

En este ejemplo, también agregué encabezados antes de cada campo para que a los visitantes les resulte más fácil distinguir entre campos:

Si desea mostrar esto en una página de su tema, todo lo que necesita hacer es pegar la siguiente línea de código en la plantilla de página adecuada en Apariencia > Temas > Editor :

01
<?php echo do_shortcode('[searchandfilter taxonomies="search,category,post_tag,product_cat" headings=",Categories,Tags,Product Categories"]'); ?>

¿Cómo filtrar publicaciones por rango de fechas?

Otro caso de uso es si desea permitir que sus visitantes busquen publicaciones en una categoría particular dentro de un cierto rango de fechas. En ese caso, simplemente pegue la siguiente línea de código en su archive.php :

01
<?php echo do_shortcode('[searchandfilter fields="search,post_date" types=",daterange" headings=",Post Date"]'); ?>

¿Cómo filtrar formatos de publicación y páginas?

En el ejemplo final, echemos un vistazo al filtrado de formatos de publicación y páginas. Si publica publicaciones de video o audio, este código abreviado permitirá a los visitantes encontrar publicaciones que pertenezcan al formato de publicación que especifique:

01
[searchandfilter fields="search,post_format" types=",select" headings=",Post Format" submit_label="Filter"]

Si desea que los visitantes filtren páginas o publicaciones, todo lo que necesita es un código abreviado que acepte tipos de publicaciones como parámetros:

01
[searchandfilter fields="search,post_types" post_types="post,page" headings=",Post Types"]

Además de los ejemplos anteriores, el complemento le permite ser aún más específico al incluir parámetros para ordenar los resultados en orden jerárquico, para mostrar el recuento de publicaciones en categorías específicas, agregar clases, filtrar autores y mucho más.

Cómo filtrar publicaciones manualmente

Al igual que con todo lo relacionado con WordPress, hay una manera de hacerlo sin el uso de un complemento. Supongamos que desea crear un formulario simple que permita a los visitantes filtrar publicaciones de una determinada categoría.

Primero, necesitas crear un formulario simple:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <?php
        if( $terms = get_terms( 'category', 'orderby=name' ) ) :
            echo '<select name="categoryfilter"><option>Select category...</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            endforeach;
            echo '</select>';
        endif;
    ?>
    <label>
        <input type="radio" name="date" value="ASC" /> Date: Ascending
    </label>
    <label>
        <input type="radio" name="date" value="DESC" selected="selected" /> Date: Descending
    </label>
    <button>Apply filters</button>
    <input type="hidden" name="action" value="customfilter">
</form>
<div id="response"></div>

En el formulario anterior, la primera parte simplemente le permite al usuario seleccionar las taxonomías usando la función get_terms . Puede usar esto para categorías y etiquetas predeterminadas, así como para taxonomías personalizadas. La siguiente parte agrega los botones de radio que permiten a los visitantes mostrar los resultados en orden ascendente o descendente. Finalmente, la última parte es el botón del formulario que les permite aplicar los filtros seleccionados.

El formulario completo se agregó a la plantilla sidebar.php en Apariencia > Temas > Editor .

El siguiente paso es usar jQuery para que los resultados se puedan mostrar sin tener que recargar la página:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
jQuery(function($){
    $('#filter').submit(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('button').text('Applying Filters...');          },
            success:function(data){
                filter.find('button').text('Apply filters');                $('#response').html(data);
            }
        });
        return false;
    });
});

El último fragmento de código es agregar una función al archivo function.php que procesará el resultado en función de los filtros seleccionados. Buscará en la categoría seleccionada y, siempre que haya publicaciones, las mostrará por la fecha en que se publicaron en orden ascendente o descendente. Si no se encuentran publicaciones en la categoría, se mostrará el mensaje No se encontraron publicaciones:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function my_filters(){
    $args = array(
        'orderby' => 'date',
        'order' => $_POST['date']
    );
  
        if( isset( $_POST['categoryfilter'] ) )
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $_POST['categoryfilter']
            )
        );
   
    $query = new WP_Query( $args );
  
    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();
            echo '<h2>' . $query->post->post_title . '</h2>';
        endwhile;
        wp_reset_postdata();
    else :
        echo 'No posts found';
    endif;
  
    die();
}
  
  
add_action('wp_ajax_customfilter', 'my_filters');
add_action('wp_ajax_nopriv_customfilter', 'my_filters');

El resultado final muestra así el front-end:

Por qué debería permitir que sus lectores filtren publicaciones y páginas en WordPress

Los métodos anteriores son una excelente manera de permitir que los usuarios filtren sus publicaciones. Pero, ¿por qué querrías hacer eso?

WordPress ya le permite organizar sus publicaciones con categorías y etiquetas, pero solo permite a los usuarios ver una sola categoría o etiqueta a la vez. Además, si usa tipos de publicaciones personalizadas que usan sus propias categorías, esas categorías no serán visibles junto con las que se usan para las publicaciones regulares.

El complemento de búsqueda y filtro es especialmente útil no solo cuando tiene muchas categorías y etiquetas diferentes combinadas con el contenido de un año, sino que también es útil si ha agregado tipos de publicaciones personalizadas como cartera, galería, testimonio y más.

Otro ejemplo es que sus visitantes pueden usar fácilmente este complemento para filtrar sus productos y encontrar lo que están buscando. Y si está familiarizado con el código, hacerlo manualmente le permite tener aún más control sobre la forma en que se muestran los resultados de la búsqueda y qué parámetros se utilizan.

Terminando

Asegurarse de que su sitio web sea fácil de usar al permitir que sus visitantes encuentren rápidamente el contenido que desean es una excelente manera de brindarles una experiencia de usuario agradable y alentarlos a regresar. Si su sitio es rico en contenido, considere implementar el filtrado de páginas y publicaciones para asegurarse de que obtengan el contenido que quieren ver más.

Nos encantaría escuchar su experiencia con la búsqueda y el filtrado de WordPress. Háganos saber en los comentarios a continuación.

Imagen en miniatura del artículo de graphicglobe / shutterstock.com