La biblioteca de FilterizR<\/h2>\n
Consulte la demostraci\u00f3n en la p\u00e1gina de inicio de FilterizR<\/a> 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\u00f3n aleatoria (orden aleatorio), la b\u00fasqueda y la clasificaci\u00f3n. Es receptivo y est\u00e1 optimizado para dispositivos m\u00f3viles. Lejos de lo que he experimentado, tambi\u00e9n logra configurar muy bien la altura autom\u00e1tica en el contenedor en cada elemento.<\/p>\n FilterizR ofrece tres tipos diferentes de uso:<\/p>\n La segunda opci\u00f3n es la m\u00e1s f\u00e1cil para las personas que no est\u00e1n familiarizadas con Javascript. La mayor\u00eda 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\u00e9todo Vanilla Javascript. Si est\u00e1 implementando esto en un bloque personalizado de Gutenberg, deber\u00eda considerar usar la tercera opci\u00f3n. Luego, simplemente puede instalarlo \u00a1Consigamos el archivo apropiado! Vaya a Github de FilterizR<\/a> para descargar. A menos que est\u00e9 instalando a trav\u00e9s de npm (tercera opci\u00f3n), puede ir a la carpeta ‘ Tambi\u00e9n necesitaremos otro archivo Javascript para inicializar y decidir las opciones. Voy a crear un archivo Para que WordPress incluya los scripts, debemos poner en cola ambos scripts en el Ajuste los nombres de archivo y\/o las rutas para que se ajusten a su proyecto\/tema. El c\u00f3digo anterior pone en cola el script filterizR vainilla y, en segundo lugar, el El siguiente paso es tener un lugar donde queremos mostrar esta lista de publicaciones. Esto depende totalmente de usted. Para simplificar este tutorial, usar\u00e9 una plantilla de p\u00e1gina en mi tema. Si est\u00e1 implementando esto en un bloque de Gutenberg, puede representarlo con PHP (para bloques din\u00e1micos) o con Javascript en el Crear\u00e9 una plantilla de p\u00e1gina En este tutorial asumimos que queremos mostrar publicaciones dentro de un tipo de publicaci\u00f3n personalizada. Puede hacer esto con publicaciones y categor\u00edas est\u00e1ndar, pero las publicaciones generalmente se convertir\u00e1n en bastantes, lo que no es factible de usar para este tipo de visualizaci\u00f3n. Supongamos, por ejemplo, un tipo de publicaci\u00f3n personalizada para empleados con una taxonom\u00eda personalizada conectada para el departamento. No mostrar\u00e9 c\u00f3mo agregar el tipo de publicaci\u00f3n personalizada en este tutorial, solo tenga en cuenta que el nombre del tipo de publicaci\u00f3n es En mi plantilla empiezo generando los filtros. Buscar\u00e9 todos los t\u00e9rminos que no est\u00e9n vac\u00edos en mi taxonom\u00eda personalizada Antes de generar los elementos para cada t\u00e9rmino en la taxonom\u00eda, me asegurar\u00e9 de crear un elemento para "Todos" (l\u00ednea Con el c\u00f3digo anterior, deber\u00eda obtener una lista con "Todos" seguido de todos los t\u00e9rminos que no est\u00e9n vac\u00edos. \u00a1Excelente!<\/p>\n Ahora, justo debajo de esto, comenzar\u00e9 a renderizar las publicaciones.<\/p>\n Al renderizar las publicaciones, debe recordar dos cosas. Una es envolver todas las publicaciones dentro de un contenedor, al que le dar\u00e9 el nombre de clase Consulto todas las publicaciones del tipo de publicaci\u00f3n personalizada La consulta en la l\u00ednea En cuanto al contenido de cada publicaci\u00f3n, el resultado es bastante est\u00e1ndar. Generamos la imagen destacada de la publicaci\u00f3n usando un tama\u00f1o de imagen personalizado (‘ En este punto, el renderizado de PHP deber\u00eda estar completo. Le invitamos a dise\u00f1ar y hacer que se vea bien, pero no se moleste en dise\u00f1ar columnas. FilterizR generar\u00e1 columnas (flexbox) para usted. \u00a1El siguiente paso es en realidad inicializar el script de filtrado!<\/p>\n La \u00faltima parte es editar el FilterizR se asegurar\u00e1 de que el contenedor de envoltura de todas las publicaciones tenga el tama\u00f1o autom\u00e1tico 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\u00e1 autom\u00e1ticamente a la altura correcta. Por lo tanto, asegur\u00e1ndose de que cualquier contenido que viene despu\u00e9s no se oculte detr\u00e1s. Pero para que este cambio de tama\u00f1o autom\u00e1tico funcione, todas las im\u00e1genes 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\u00e1ticamente a una altura de 0. Esto no es bueno. Entonces, debemos colocar el c\u00f3digo de inicializaci\u00f3n dentro de una funci\u00f3n donde sabemos que las im\u00e1genes terminaron de cargarse. Para vainilla Javascript esto es 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\u00e1gina actual no tiene la clase contenedora necesaria, se producir\u00e1 un error de Javascript. Podemos resolver esto verificando si la clase contenedora existe primero. En Vanilla Javascript puedes usar La forma de inicializar FilterizR por Vanilla Javascript es crear una nueva instancia de La inicializaci\u00f3n ocurre en la l\u00ednea Solo tengo algunos consejos finales para optimizar FilterizR, que podemos hacer al proporcionar un objeto de configuraci\u00f3n. Recomiendo echar un vistazo a las posibles opciones<\/a> de FilterizR para ver qu\u00e9 puedes hacer. \u00a1Puedes controlar la velocidad de la animaci\u00f3n, el tipo de animaci\u00f3n y m\u00e1s!<\/p>\n Para que las columnas funcionen de manera \u00f3ptima en tama\u00f1os receptivos, descubr\u00ed que configurar Por defecto, cada elemento no tiene espacio entre ellos. Si desea algo de espacio entre cada elemento, puede establecer el tama\u00f1o del espacio en px para Aqu\u00ed est\u00e1 el c\u00f3digo ajustado para inicializar FilterizR con mis opciones:<\/p>\n Con un estilo menor, el resultado es algo como esto:<\/p>\n \u00a1Tenga en cuenta que filtrar es solo una de las cosas que FilterizR puede hacer! Consulte los ejemplos en ‘Tutoriales’ en su p\u00e1gina<\/a> de inicio. Puede agregar controles para ordenar, mezclar y\/o buscar. Y tambi\u00e9n tiene m\u00e1s opciones para controlar el dise\u00f1o.<\/p>\n\n
jQuery<\/code>para inicializarlo y configurarlo.<\/li>\nnpm<\/code>e importar la biblioteca en su c\u00f3digo de bloque.<\/p>\nDescarga y configuraci\u00f3n de los archivos.<\/h2>\n
dist<\/code>‘ y descargar la biblioteca minificada que necesita. Como lo usar\u00e9 con Vanilla Javascript en este tutorial, descargar\u00e9 el vanilla.filterizr.min.js<\/code>archivo y lo colocar\u00e9 en mi theme-folder\/assets\/js\/<\/code>carpeta. El lugar donde coloque la biblioteca, por supuesto, depende completamente de usted, solo ajuste la ruta m\u00e1s abajo.<\/p>\ntheme-folder\/assets\/js\/filtering-main.js<\/code>. Volveremos a este archivo m\u00e1s adelante. Por supuesto, esto no es necesario si est\u00e1 implementando esto en un bloque de Gutenberg personalizado.<\/p>\nwp_enqueue_scripts<\/code>enlace. Esto se puede agregar en alg\u00fan lugar del archivo functions.php<\/code>. Al igual que:<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('filterizr', get_template_directory_uri(). '\/assets\/js\/vanilla.filterizr.min.js', [], false, true);\n wp_enqueue_script('filtering-script', get_template_directory_uri(). '\/assets\/js\/filtering-main.js', ['filterizr'], false, true);\n});<\/code><\/pre>\nfiltering-main.js<\/code>script que depende del script filterizR. Esto asegura que el script de inicializaci\u00f3n se cargue despu\u00e9s de la biblioteca necesaria.<\/p>\nRenderizando la plantilla<\/h2>\n
save<\/code>m\u00e9todo del bloque. La parte importante es representar correctamente el HTML que rodea las publicaciones y los filtros.<\/p>\nRenderizando los filtros<\/h3>\n
template-filters.php<\/code>en mi carpeta de temas y agregar\u00e9 mi c\u00f3digo PHP para generar el resultado all\u00ed.<\/p>\nemployees<\/code>y el nombre de la taxonom\u00eda personalizada es department<\/code>. Cambie los nombres para su tipo de publicaci\u00f3n y taxonom\u00eda. Si no est\u00e1 seguro de c\u00f3mo agregar un tipo de publicaci\u00f3n personalizada, tengo una publicaci\u00f3n tutorial sobre c\u00f3mo crear taxonom\u00edas y tipos de publicaciones personalizadas<\/a>.<\/p>\n[get_terms](https:\/\/developer.wordpress.org\/reference\/functions\/get_terms\/)()<\/code>y los agregar\u00e9 en una lista desordenada.<\/p>\n<?php\n$departments = get_terms([\n 'taxonomy' => 'department'\n]);\n?><ul class=\"filter-controls\">\n <li data-filter=\"all\"><?php _e('All', 'txtdomain'); ?><\/li><?php\n foreach ($departments as $department) {\n ?><li data-filter=\"<?php echo $department->slug; ?>\"><?php echo $department->name; ?><\/li><?php\n }\n?><\/ul>\n\u00a0<\/code><\/pre>\n#6<\/code>). Para que el filtrado de FilterizR funcione, debemos proporcionar el atributo de datos " data-filter<\/code>" a cada elemento de filtro. El contenido debe significar de forma \u00fanica un valor de filtrado \u00fanico, en nuestro caso, el slug del t\u00e9rmino (puede usar el ID del t\u00e9rmino o algo m\u00e1s si lo desea). Esto significa que tambi\u00e9n necesito agregar los slug del t\u00e9rmino como atributos de datos a las publicaciones (ver m\u00e1s adelante) para que FilterizR puede saber qu\u00e9 publicaciones pertenecen a qu\u00e9 filtro.<\/p>\nrenderizando las publicaciones<\/h3>\n
filter-container<\/code>. 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<\/code>" que enumere todos los t\u00e9rminos separados por comas. Los valores aqu\u00ed deben corresponder a los valores que gener\u00f3 en el data-filter<\/code>atributo " " de los filtros.<\/p>\n[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>y recorro las publicaciones. Lo que muestres por publicaci\u00f3n depende completamente de ti, pero el siguiente ejemplo muestra la imagen destacada, el t\u00edtulo de la publicaci\u00f3n y una \u00fanica meta de publicaci\u00f3n personalizada para el t\u00edtulo del trabajo. Todo envuelto dentro de enlaces que van al empleado individual.<\/p>\n<?php\n$employees = new WP_Query([\n 'post_type' => 'employees',\n 'posts_per_page' => -1,\n 'orderby' => 'name',\n 'order' => 'ASC'\n]);\nif ($employees->have_posts()) {\n ?><div class=\"filter-container\"><?php\n while ($employees->have_posts()) {\n $employees->the_post();\n\u00a0\n $dep = wp_get_object_terms(get_the_ID(), 'department', ['fields' => 'slugs']);\n ?><div class=\"filtr-item\" data-category=\"<?php echo implode(',', $dep); ?>\">\n <a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php\n if (has_post_thumbnail()) {\n the_post_thumbnail('employees-thumb');\n }\n\u00a0\n $job_title = get_post_meta(get_the_ID(), 'job_title', true);\n ?><div class=\"employee-info\">\n <h2><?php the_title(); ?><\/h2>\n <span class=\"job-title\"><?php echo $job_title; ?><\/span>\n <\/div><?php\n\u00a0\n\u00a0\n ?><\/a><\/div><?php\n }\n wp_reset_postdata();\n ?><\/div><?php\n}\n?><\/code><\/pre>\n#2-7<\/code>se asegura de que obtenga todas las publicaciones publicadas de los empleados del tipo de publicaci\u00f3n, ordenadas alfab\u00e9ticamente. Antes de representar el envoltorio div<\/code>para cada publicaci\u00f3n, en la l\u00ednea #13<\/code>, utilizo [wp_get_object_terms](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_object_terms\/)()<\/code>para obtener todos los t\u00e9rminos asignados a esta publicaci\u00f3n. Como par\u00e1metro pido solo los slugs de los t\u00e9rminos. El retorno es una matriz de cualquier slug de t\u00e9rmino asignado. Luego uso la funci\u00f3n PHP [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>para crear una cadena de todos los elementos en la matriz separados por comas. Esto se repite como el data-category<\/code>atributo requerido para la ra\u00edz div<\/code>, lo que hace que los filtros funcionen.<\/p>\nemployees-thumb<\/code>‘), el t\u00edtulo de la publicaci\u00f3n y el valor de una \u00fanica meta de publicaci\u00f3n personalizada (para el t\u00edtulo del trabajo). Todo est\u00e1 envuelto dentro de un enlace que va a la vista \u00fanica para ese empleado. Tambi\u00e9n agregu\u00e9 algunas clases y contenedores para que sea m\u00e1s f\u00e1cil apuntar con CSS. El resultado de cada elemento, por supuesto, depende completamente de usted.<\/p>\nInicializar el script de filtro<\/h2>\n
filtering-main.js<\/code>gui\u00f3n. Simplemente necesitamos decirle a FilterizR que inicialice el filtrado en nuestro contenido renderizado. Sin embargo, hay algunas cosas a tener en cuenta aqu\u00ed:<\/p>\nwindow.onload<\/code>. Para jQuery usar\u00edas $(window).load()<\/code>.<\/p>\ndocument.getElementById()<\/code>o document.getElementsByClassName()<\/code>. Vea el ejemplo a continuaci\u00f3n. Para jQuery, usar\u00eda jQuery('<selector>').length<\/code>para verificar esto.<\/p>\nFilterizr<\/code>, proporcionando el selector de contenedor como primer par\u00e1metro y, opcionalmente, un objeto de configuraci\u00f3n como segundo par\u00e1metro. Este es un ejemplo de los m\u00e1s b\u00e1sicos:<\/p>\nwindow.onload = function() {\n var filterContainer = document.getElementsByClassName('filter-container');\n if (filterContainer.length > 0) {\n filterizr = new Filterizr('.filter-container');\n }\n\u00a0\n}<\/code><\/pre>\n#4<\/code>. 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\u00f3digo anterior, FilterizR ahora deber\u00eda hacerse cargo de sus publicaciones y colocarlas en columnas. \u00a1Debido a que usamos los atributos de datos apropiados, los filtros tambi\u00e9n deber\u00edan funcionar autom\u00e1ticamente!<\/p>\nPersonalizaci\u00f3n de las opciones de FilterizR<\/h3>\n
layout<\/code>‘ sameWidth<\/code>‘ hace que FilterizR funcione mejor con publicaciones que tienen diferentes alturas. Esto da como resultado un estilo de "mamposter\u00eda". En nuestro ejemplo, hacemos eco del contenido adicional despu\u00e9s de la imagen, y esto puede resultar en diferentes alturas (los nombres pueden ser m\u00e1s largos y forzarlo en varias filas). Esto puede resultar en un comportamiento extra\u00f1o.<\/p>\ngutterPixels<\/code>. En el ejemplo anterior, he usado 10px como tama\u00f1o de espacio. PD: el tama\u00f1o del espacio tambi\u00e9n se agrega al contenedor de envoltura. Puede que esto no siempre sea lo que quieres. Para anular esto, simplemente agregu\u00e9 estilo padding: 0!important<\/code>a .filter-container<\/code>.<\/p>\nwindow.onload = function() {\n var filterContainer = document.getElementsByClassName('filter-container');\n if (filterContainer.length > 0) {\n var options = {\n layout: 'sameWidth',\n gutterPixels: 10,\n }\n filterizr = new Filterizr('.filter-container', options);\n }\n\u00a0\n}<\/code><\/pre>\n![\"Implementando](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152296-61e4d54c4aa2b.png\")
<\/a><\/p>\n