Implementando un filtrado animado de publicaciones por categoría

¿Alguna vez quisiste hacer una buena presentación en columna de publicaciones con filtros de categoría arriba que mezclan y filtran las publicaciones con una buena animación? Entonces este es el tutorial para ti.

Lo que haremos en este tutorial es una lista de todas las publicaciones (preferiblemente dentro de un tipo de publicación personalizada, como empleados) en columnas y con sus imágenes destacadas. Sobre las publicaciones generamos filtros para la taxonomía conectada. Al hacer clic en un filtro, las publicaciones se mezclarán con una bonita animación y ocultarán las publicaciones que no están presentes en la categoría elegida.

Para ello hacemos uso de una librería Javascript para el filtrado. Hay muchos disponibles, algunos requieren jQuery y otros no, algunos son de código abierto y otros requieren una licencia comercial. Los más populares son MixItUp e Isotope. Sin embargo, ambos requieren una licencia comercial. Para mi proyecto, necesitaba una biblioteca que hiciera el truco y que fuera completamente gratuita para usar en proyectos comerciales. He probado varios y el mejor que he encontrado hasta ahora es FilterizR. ¡Comencemos este tutorial consiguiendo esta biblioteca!

La biblioteca de FilterizR

Consulte la demostración en la página de inicio de FilterizR para ver si esta biblioteca es para usted. Incluso puedes jugar con las opciones en tiempo real. Esta biblioteca admite el filtrado (que es lo que haremos en este tutorial), la reproducción aleatoria (orden aleatorio), la búsqueda y la clasificación. Es receptivo y está optimizado para dispositivos móviles. Lejos de lo que he experimentado, también logra configurar muy bien la altura automática en el contenedor en cada elemento.

FilterizR ofrece tres tipos diferentes de uso:

• Vanilla Javascript: Expone FilterizR como una función global para llamar en Javascript estándar.
• jQuery: Le permite usar jQuerypara inicializarlo y configurarlo.
• Biblioteca de Javascript puro/npm: para usar en importaciones de ES6 (por ejemplo, si escribe bloques personalizados para Gutenberg).

La segunda opción es la más fácil para las personas que no están familiarizadas con Javascript. La mayoría de la gente comienza con jQuery. Pero tenga en cuenta que jQuery es una biblioteca grande y pesada para cargar en su proyecto, y si se puede evitar, debe hacerlo. En este tutorial usaremos el método Vanilla Javascript. Si está implementando esto en un bloque personalizado de Gutenberg, debería considerar usar la tercera opción. Luego, simplemente puede instalarlo npme importar la biblioteca en su código de bloque.

Descarga y configuración de los archivos.

¡Consigamos el archivo apropiado! Vaya a Github de FilterizR para descargar. A menos que esté instalando a través de npm (tercera opción), puede ir a la carpeta ‘ dist‘ y descargar la biblioteca minificada que necesita. Como lo usaré con Vanilla Javascript en este tutorial, descargaré el vanilla.filterizr.min.jsarchivo y lo colocaré en mi theme-folder/assets/js/carpeta. El lugar donde coloque la biblioteca, por supuesto, depende completamente de usted, solo ajuste la ruta más abajo.

También necesitaremos otro archivo Javascript para inicializar y decidir las opciones. Voy a crear un archivo theme-folder/assets/js/filtering-main.js. Volveremos a este archivo más adelante. Por supuesto, esto no es necesario si está implementando esto en un bloque de Gutenberg personalizado.

Para que WordPress incluya los scripts, debemos poner en cola ambos scripts en el wp_enqueue_scriptsenlace. Esto se puede agregar en algún lugar del archivo functions.php. Al igual que:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('filterizr', get_template_directory_uri(). '/assets/js/vanilla.filterizr.min.js', [], false, true);
    wp_enqueue_script('filtering-script', get_template_directory_uri(). '/assets/js/filtering-main.js', ['filterizr'], false, true);
});

Ajuste los nombres de archivo y/o las rutas para que se ajusten a su proyecto/tema. El código anterior pone en cola el script filterizR vainilla y, en segundo lugar, el filtering-main.jsscript que depende del script filterizR. Esto asegura que el script de inicialización se cargue después de la biblioteca necesaria.

Renderizando la plantilla

El siguiente paso es tener un lugar donde queremos mostrar esta lista de publicaciones. Esto depende totalmente de usted. Para simplificar este tutorial, usaré una plantilla de página en mi tema. Si está implementando esto en un bloque de Gutenberg, puede representarlo con PHP (para bloques dinámicos) o con Javascript en el savemétodo del bloque. La parte importante es representar correctamente el HTML que rodea las publicaciones y los filtros.

Renderizando los filtros

Crearé una plantilla de página template-filters.phpen mi carpeta de temas y agregaré mi código PHP para generar el resultado allí.

En este tutorial asumimos que queremos mostrar publicaciones dentro de un tipo de publicación personalizada. Puede hacer esto con publicaciones y categorías estándar, pero las publicaciones generalmente se convertirán en bastantes, lo que no es factible de usar para este tipo de visualización. Supongamos, por ejemplo, un tipo de publicación personalizada para empleados con una taxonomía personalizada conectada para el departamento. No mostraré cómo agregar el tipo de publicación personalizada en este tutorial, solo tenga en cuenta que el nombre del tipo de publicación es employeesy el nombre de la taxonomía personalizada es department. Cambie los nombres para su tipo de publicación y taxonomía. Si no está seguro de cómo agregar un tipo de publicación personalizada, tengo una publicación tutorial sobre cómo crear taxonomías y tipos de publicaciones personalizadas.

En mi plantilla empiezo generando los filtros. Buscaré todos los términos que no estén vacíos en mi taxonomía personalizada [get_terms](https://developer.wordpress.org/reference/functions/get_terms/)()y los agregaré en una lista desordenada.

Antes de generar los elementos para cada término en la taxonomía, me aseguraré de crear un elemento para "Todos" (línea #6). Para que el filtrado de FilterizR funcione, debemos proporcionar el atributo de datos " data-filter" a cada elemento de filtro. El contenido debe significar de forma única un valor de filtrado único, en nuestro caso, el slug del término (puede usar el ID del término o algo más si lo desea). Esto significa que también necesito agregar los slug del término como atributos de datos a las publicaciones (ver más adelante) para que FilterizR puede saber qué publicaciones pertenecen a qué filtro.

Con el código anterior, debería obtener una lista con "Todos" seguido de todos los términos que no estén vacíos. ¡Excelente!

Ahora, justo debajo de esto, comenzaré a renderizar las publicaciones.

renderizando las publicaciones

Al renderizar las publicaciones, debe recordar dos cosas. Una es envolver todas las publicaciones dentro de un contenedor, al que le daré el nombre de clase filter-container. Esta clase es lo que necesitamos apuntar con Javascript para que FilterizR funcione. Y en segundo lugar, cada elemento debe tener un atributo de datos " data-category" que enumere todos los términos separados por comas. Los valores aquí deben corresponder a los valores que generó en el data-filteratributo " " de los filtros.

Consulto todas las publicaciones del tipo de publicación personalizada [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)y recorro las publicaciones. Lo que muestres por publicación depende completamente de ti, pero el siguiente ejemplo muestra la imagen destacada, el título de la publicación y una única meta de publicación personalizada para el título del trabajo. Todo envuelto dentro de enlaces que van al empleado individual.

La consulta en la línea #2-7se asegura de que obtenga todas las publicaciones publicadas de los empleados del tipo de publicación, ordenadas alfabéticamente. Antes de representar el envoltorio divpara cada publicación, en la línea #13, utilizo [wp_get_object_terms](https://developer.wordpress.org/reference/functions/wp_get_object_terms/)()para obtener todos los términos asignados a esta publicación. Como parámetro pido solo los slugs de los términos. El retorno es una matriz de cualquier slug de término asignado. Luego uso la función PHP [implode](https://www.php.net/manual/en/function.implode.php)()para crear una cadena de todos los elementos en la matriz separados por comas. Esto se repite como el data-categoryatributo requerido para la raíz div, lo que hace que los filtros funcionen.

En cuanto al contenido de cada publicación, el resultado es bastante estándar. Generamos la imagen destacada de la publicación usando un tamaño de imagen personalizado (‘ employees-thumb‘), el título de la publicación y el valor de una única meta de publicación personalizada (para el título del trabajo). Todo está envuelto dentro de un enlace que va a la vista única para ese empleado. También agregué algunas clases y contenedores para que sea más fácil apuntar con CSS. El resultado de cada elemento, por supuesto, depende completamente de usted.

En este punto, el renderizado de PHP debería estar completo. Le invitamos a diseñar y hacer que se vea bien, pero no se moleste en diseñar columnas. FilterizR generará columnas (flexbox) para usted. ¡El siguiente paso es en realidad inicializar el script de filtrado!

Inicializar el script de filtro

La última parte es editar el filtering-main.jsguión. Simplemente necesitamos decirle a FilterizR que inicialice el filtrado en nuestro contenido renderizado. Sin embargo, hay algunas cosas a tener en cuenta aquí:

FilterizR se asegurará de que el contenedor de envoltura de todas las publicaciones tenga el tamaño automático para adaptarse a la vista. Por ejemplo, si el filtro activo muestra publicaciones en una fila y hacemos clic en otro filtro que tiene cuatro filas, el contenedor se escalará automáticamente a la altura correcta. Por lo tanto, asegurándose de que cualquier contenido que viene después no se oculte detrás. Pero para que este cambio de tamaño automático funcione, todas las imágenes deben haberse cargado primero. En algunos casos, el script puede cargarse y ejecutarse antes de que termine de cargarse cada imagen, y esto hace que el contenedor se contraiga automáticamente a una altura de 0. Esto no es bueno. Entonces, debemos colocar el código de inicialización dentro de una función donde sabemos que las imágenes terminaron de cargarse. Para vainilla Javascript esto es window.onload. Para jQuery usarías $(window).load().

En segundo lugar, queremos asegurarnos de que nuestro script solo inicialice FilterizR si de hecho hay un contenedor filtrable presente. Si inicializamos FilterizR y la página actual no tiene la clase contenedora necesaria, se producirá un error de Javascript. Podemos resolver esto verificando si la clase contenedora existe primero. En Vanilla Javascript puedes usar document.getElementById()o document.getElementsByClassName(). Vea el ejemplo a continuación. Para jQuery, usaría jQuery('<selector>').lengthpara verificar esto.

La forma de inicializar FilterizR por Vanilla Javascript es crear una nueva instancia de Filterizr, proporcionando el selector de contenedor como primer parámetro y, opcionalmente, un objeto de configuración como segundo parámetro. Este es un ejemplo de los más básicos:

La inicialización ocurre en la línea #4. Proporcionamos el nombre de la clase al contenedor que envuelve nuestras publicaciones con un punto al frente, lo que significa un selector de clase. Con el código anterior, FilterizR ahora debería hacerse cargo de sus publicaciones y colocarlas en columnas. ¡Debido a que usamos los atributos de datos apropiados, los filtros también deberían funcionar automáticamente!

Personalización de las opciones de FilterizR

Solo tengo algunos consejos finales para optimizar FilterizR, que podemos hacer al proporcionar un objeto de configuración. Recomiendo echar un vistazo a las posibles opciones de FilterizR para ver qué puedes hacer. ¡Puedes controlar la velocidad de la animación, el tipo de animación y más!

Para que las columnas funcionen de manera óptima en tamaños receptivos, descubrí que configurar layout‘ sameWidth‘ hace que FilterizR funcione mejor con publicaciones que tienen diferentes alturas. Esto da como resultado un estilo de "mampostería". En nuestro ejemplo, hacemos eco del contenido adicional después de la imagen, y esto puede resultar en diferentes alturas (los nombres pueden ser más largos y forzarlo en varias filas). Esto puede resultar en un comportamiento extraño.

Por defecto, cada elemento no tiene espacio entre ellos. Si desea algo de espacio entre cada elemento, puede establecer el tamaño del espacio en px para gutterPixels. En el ejemplo anterior, he usado 10px como tamaño de espacio. PD: el tamaño del espacio también se agrega al contenedor de envoltura. Puede que esto no siempre sea lo que quieres. Para anular esto, simplemente agregué estilo padding: 0!importanta .filter-container.

Aquí está el código ajustado para inicializar FilterizR con mis opciones:

Con un estilo menor, el resultado es algo como esto:

¡Tenga en cuenta que filtrar es solo una de las cosas que FilterizR puede hacer! Consulte los ejemplos en ‘Tutoriales’ en su página de inicio. Puede agregar controles para ordenar, mezclar y/o buscar. Y también tiene más opciones para controlar el diseño.