La librairie FilterizR<\/h2>\n
D\u00e9couvrez la d\u00e9mo sur la page d’ accueil de FilterizR<\/a> pour voir si cette biblioth\u00e8que est faite pour vous. Vous pouvez m\u00eame jouer avec les options en temps r\u00e9el. Cette biblioth\u00e8que prend en charge le filtrage (ce que nous allons faire dans ce didacticiel), le brassage (ordre al\u00e9atoire), la recherche et le tri. Il est r\u00e9actif et optimis\u00e9 pour les appareils mobiles. Si loin de ce que j’ai v\u00e9cu, il g\u00e8re \u00e9galement tr\u00e8s bien le r\u00e9glage de la hauteur automatique du conteneur sur chaque article.<\/p>\n FilterizR propose trois types d’utilisation diff\u00e9rents :<\/p>\n La deuxi\u00e8me option est la plus simple pour les personnes qui ne connaissent pas Javascript. La plupart des gens commencent avec jQuery. Mais gardez \u00e0 l’esprit que jQuery est une biblioth\u00e8que volumineuse et lourde \u00e0 charger dans votre projet, et si cela peut \u00eatre \u00e9vit\u00e9, vous devriez le faire. Dans ce tutoriel, nous utiliserons la m\u00e9thode Javascript vanilla. Si vous impl\u00e9mentez cela dans un bloc Gutenberg personnalis\u00e9, vous devriez envisager d’utiliser la troisi\u00e8me option. Ensuite, vous pouvez simplement l’installer via Prenons le dossier appropri\u00e9\u00a0! Allez sur le Github de FilterizR<\/a> pour t\u00e9l\u00e9charger. Sauf si vous installez via npm (troisi\u00e8me option), vous pouvez aller dans le dossier ‘ Nous aurons \u00e9galement besoin d’un autre fichier Javascript pour initialiser et d\u00e9cider des options. Je vais cr\u00e9er un fichier Pour que WordPress inclue les scripts, nous devons mettre les deux scripts en file d’attente dans le Ajustez les noms de fichiers et\/ou les chemins en fonction de votre projet\/th\u00e8me. Le code ci-dessus met en file d’attente le script vanilla filterizR, et deuxi\u00e8mement le La prochaine \u00e9tape consiste \u00e0 avoir un endroit o\u00f9 nous voulons rendre cette liste de messages. Cela d\u00e9pend enti\u00e8rement de vous. Pour rester simple dans ce tutoriel, je vais utiliser un mod\u00e8le de page dans mon th\u00e8me. Si vous l’impl\u00e9mentez dans un bloc Gutenberg, vous pouvez le rendre soit avec PHP (pour les blocs dynamiques), soit avec Javascript dans la Je vais cr\u00e9er un mod\u00e8le de page Dans ce didacticiel, nous supposons que nous voulons rendre les publications dans un type de publication personnalis\u00e9. Vous pouvez le faire avec des publications et des cat\u00e9gories standard, mais les publications deviendront g\u00e9n\u00e9ralement assez nombreuses, ce qui n’est pas r\u00e9alisable pour ce type d’affichage. Supposons par exemple un type de publication personnalis\u00e9 pour les employ\u00e9s avec une taxonomie personnalis\u00e9e connect\u00e9e pour le service. Je ne montrerai pas comment ajouter le type de publication personnalis\u00e9 dans ce didacticiel, gardez simplement \u00e0 l’esprit que le nom du type de publication est Dans mon mod\u00e8le, je commence par g\u00e9n\u00e9rer les filtres. Je vais r\u00e9cup\u00e9rer tous les termes non vides dans ma taxonomie personnalis\u00e9e en utilisant Avant de g\u00e9n\u00e9rer les \u00e9l\u00e9ments pour chaque terme de la taxonomie, je m’assurerai de cr\u00e9er un \u00e9l\u00e9ment pour "Tous" (ligne Avec le code ci-dessus, vous devriez obtenir une liste avec "Tous" suivi de tous les termes non vides. Super!<\/p>\n Maintenant, juste en dessous, je vais commencer \u00e0 rendre les messages.<\/p>\n Lors du rendu des messages, vous devez vous rappeler deux choses. L’une consiste \u00e0 envelopper tous les messages dans un conteneur, auquel je donnerai le nom de la classe J’interroge tous les messages du type de message personnalis\u00e9 avec La requ\u00eate \u00e0 la ligne En ce qui concerne le contenu de chaque publication, la sortie est assez standard. Nous g\u00e9n\u00e9rons l’image s\u00e9lectionn\u00e9e de la publication en utilisant une taille d’image personnalis\u00e9e (‘ \u00c0 ce stade, le rendu PHP devrait \u00eatre termin\u00e9. Vous \u00eates invit\u00e9s \u00e0 styliser et \u00e0 lui donner une belle apparence, mais ne vous emb\u00eatez pas \u00e0 styliser les colonnes. FilterizR g\u00e9n\u00e9rera des colonnes (flexbox) pour vous. La prochaine \u00e9tape consiste en fait \u00e0 initialiser le script de filtrage\u00a0!<\/p>\n La derni\u00e8re partie est l’\u00e9dition du FilterizR s’assurera que le conteneur d’emballage de tous les messages est automatiquement dimensionn\u00e9 pour s’adapter \u00e0 la vue. Par exemple, si le filtre actif affiche les publications sur une ligne et que nous cliquons sur un autre filtre comportant quatre lignes, le conteneur se redimensionnera automatiquement \u00e0 la bonne hauteur. Assurez-vous ainsi que tout contenu qui vient apr\u00e8s ne soit pas cach\u00e9 derri\u00e8re. Mais pour que ce redimensionnement automatique fonctionne, toutes les images doivent avoir \u00e9t\u00e9 charg\u00e9es en premier. Dans certains cas, le script peut \u00eatre charg\u00e9 et ex\u00e9cut\u00e9 avant la fin du chargement de chaque image, ce qui entra\u00eene la r\u00e9duction automatique du conteneur \u00e0 une hauteur de 0. Ce n’est pas bon. Nous devons donc placer le code d’initialisation dans une fonction o\u00f9 nous savons que les images sont charg\u00e9es. Pour le Javascript vanille, c’est Deuxi\u00e8mement, nous voulons nous assurer que notre script n’initialise FilterizR que s’il existe effectivement un conteneur filtrable. Si nous initialisons FilterizR et que la page actuelle n’a pas la classe wrapper n\u00e9cessaire, cela entra\u00eenera une erreur Javascript. Nous pouvons r\u00e9soudre ce probl\u00e8me en v\u00e9rifiant d’abord si la classe de conteneur existe. En Javascript vanille, vous pouvez utiliser La fa\u00e7on d’initialiser FilterizR par vanilla Javascript est de cr\u00e9er une nouvelle instance de L’initialisation a lieu \u00e0 la ligne J’ai juste quelques derniers conseils pour optimiser FilterizR, ce que nous pouvons faire en fournissant un objet de param\u00e8tres. Je vous recommande de jeter un \u0153il aux options possibles<\/a> pour FilterizR pour voir ce que vous pouvez faire. Vous pouvez contr\u00f4ler la vitesse d’animation, le type d’animation et bien plus encore\u00a0!<\/p>\n Afin que les colonnes fonctionnent de mani\u00e8re optimale dans des tailles r\u00e9actives, j’ai constat\u00e9 que le r\u00e9glage Par d\u00e9faut, chaque \u00e9l\u00e9ment n’a pas d’espace entre les autres. Si vous vouliez un espacement entre chaque \u00e9l\u00e9ment, vous pouvez d\u00e9finir la taille de l’\u00e9cart en px pour Voici le code ajust\u00e9 pour initialiser FilterizR avec mes options\u00a0:<\/p>\n Avec quelques styles mineurs, le r\u00e9sultat ressemble \u00e0 ceci\u00a0:<\/p>\n Gardez \u00e0 l’esprit que le filtrage n’est qu’une des choses que FilterizR peut faire\u00a0! Consultez les exemples sous "Tutoriels" sur leur page d’accueil<\/a>. Vous pouvez ajouter des commandes pour trier, m\u00e9langer et\/ou rechercher. Et vous avez \u00e9galement plus d’options pour contr\u00f4ler la mise en page.<\/p>\n\n
jQuery<\/code>pour l’initialiser et le configurer.<\/li>\nnpm<\/code>et importer la biblioth\u00e8que dans votre code de bloc.<\/p>\nT\u00e9l\u00e9chargement et configuration des fichiers<\/h2>\n
dist<\/code>‘ et t\u00e9l\u00e9charger la biblioth\u00e8que minifi\u00e9e dont vous avez besoin. Comme je vais l’utiliser avec vanilla Javascript dans ce tutoriel, je vais t\u00e9l\u00e9charger le vanilla.filterizr.min.js<\/code>fichier et le placer dans mon theme-folder\/assets\/js\/<\/code>dossier. L’endroit o\u00f9 vous placez la biblioth\u00e8que d\u00e9pend bien s\u00fbr enti\u00e8rement de vous, ajustez simplement le chemin plus bas.<\/p>\ntheme-folder\/assets\/js\/filtering-main.js<\/code>. Nous reviendrons sur ce dossier ult\u00e9rieurement. Ce n’est bien s\u00fbr pas n\u00e9cessaire si vous l’impl\u00e9mentez dans un bloc Gutenberg personnalis\u00e9.<\/p>\nwp_enqueue_scripts<\/code>crochet. Cela peut \u00eatre ajout\u00e9 quelque part dans le fichier functions.php<\/code>. Ainsi:<\/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 qui a une d\u00e9pendance au script filterizR. Cela garantit que le script d’initialisation est charg\u00e9 apr\u00e8s la biblioth\u00e8que n\u00e9cessaire.<\/p>\nRendu du mod\u00e8le<\/h2>\n
save<\/code>m\u00e9thode du bloc. L’important est de restituer correctement le code HTML entourant les publications et les filtres.<\/p>\nRendu des filtres<\/h3>\n
template-filters.php<\/code>dans mon dossier de th\u00e8me et ajouter mon code PHP pour y rendre la sortie.<\/p>\nemployees<\/code>et que le nom de la taxonomie personnalis\u00e9e est department<\/code>. Changez les noms de votre type de publication et de votre taxonomie. Si vous ne savez pas comment ajouter un type de publication personnalis\u00e9, j’ai un tutoriel sur la cr\u00e9ation de types de publication et de taxonomies personnalis\u00e9s<\/a>.<\/p>\n[get_terms](https:\/\/developer.wordpress.org\/reference\/functions\/get_terms\/)()<\/code>et les ajouter dans une liste non ordonn\u00e9e.<\/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>). Pour que le filtrage FilterizR fonctionne, nous devons fournir l’attribut de donn\u00e9es "data-filter<\/code>\u00a0" \u00e0 chaque \u00e9l\u00e9ment de filtre. Le contenu doit signifient de mani\u00e8re unique une valeur de filtrage unique, dans notre cas le slug du terme (vous pouvez utiliser l’ID de terme ou autre chose si vous le souhaitez).Cela signifie que je dois \u00e9galement ajouter les slugs du terme en tant qu’attributs de donn\u00e9es aux messages (voir plus tard) donc FilterizR peut savoir quels messages appartiennent \u00e0 quel filtre.<\/p>\nRendre les messages<\/h3>\n
filter-container<\/code>. Cette classe est ce que nous devons cibler avec Javascript pour faire fonctionner FilterizR. Et deuxi\u00e8mement, chaque \u00e9l\u00e9ment doit avoir un attribut de donn\u00e9es "data-category<\/code>" qui r\u00e9pertorie tous les termes s\u00e9par\u00e9s par une virgule. Les valeurs ici doivent correspondre aux valeurs que vous avez g\u00e9n\u00e9r\u00e9es dans l’ data-filter<\/code>attribut " " des filtres.<\/p>\n[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>et parcourt les messages. Ce que vous affichez par publication d\u00e9pend enti\u00e8rement de vous, mais l’exemple ci-dessous affiche l’image en vedette, le titre de la publication et une seule m\u00e9ta de publication personnalis\u00e9e pour le titre du poste. Tous les liens int\u00e9rieurs envelopp\u00e9s qui vont \u00e0 l’employ\u00e9 unique.<\/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>s’assure que je r\u00e9cup\u00e8re tous les messages publi\u00e9s des employ\u00e9s de type post, class\u00e9s par ordre alphab\u00e9tique. Avant de rendre l’habillage div<\/code>de chaque article, \u00e0 la ligne #13<\/code>, j’utilise [wp_get_object_terms](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_object_terms\/)()<\/code>pour r\u00e9cup\u00e9rer tous les termes attribu\u00e9s \u00e0 cet article. En param\u00e8tre, je ne demande que les slugs des termes. Le retour est un tableau de tous les slugs de terme attribu\u00e9s. J’utilise ensuite la fonction PHP [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>pour cr\u00e9er une cha\u00eene \u00e0 partir de tous les \u00e9l\u00e9ments du tableau s\u00e9par\u00e9s par une virgule. Ceci est renvoy\u00e9 comme data-category<\/code>attribut requis \u00e0 la racine div<\/code>– ce qui fait fonctionner les filtres.<\/p>\nemployees-thumb<\/code>‘), le titre de la publication et la valeur d’une seule m\u00e9ta de publication personnalis\u00e9e (pour le titre du poste). Tout est envelopp\u00e9 dans un lien qui m\u00e8ne \u00e0 la vue unique de cet employ\u00e9. J’ai \u00e9galement ajout\u00e9 des classes et des wrappers pour faciliter le ciblage avec CSS. La sortie de chaque \u00e9l\u00e9ment d\u00e9pend bien s\u00fbr enti\u00e8rement de vous.<\/p>\nInitialisation du script de filtre<\/h2>\n
filtering-main.js<\/code>script. Nous devons simplement dire \u00e0 FilterizR d’initialiser le filtrage sur notre contenu rendu. Il y a cependant quelques \u00e9l\u00e9ments \u00e0 garder \u00e0 l’esprit ici\u00a0:<\/p>\nwindow.onload<\/code>. Pour jQuery, vous utiliseriez $(window).load()<\/code>.<\/p>\ndocument.getElementById()<\/code>ou document.getElementsByClassName()<\/code>. Voir l’exemple ci-dessous. Pour jQuery, vous utiliseriez jQuery('<selector>').length<\/code>pour v\u00e9rifier cela.<\/p>\nFilterizr<\/code>, en fournissant le s\u00e9lecteur de conteneur comme premier param\u00e8tre et \u00e9ventuellement un objet de param\u00e8tres comme deuxi\u00e8me param\u00e8tre. Voici un exemple des plus basiques :<\/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>. Nous fournissons le nom de la classe au conteneur qui entoure nos messages avec un point devant, signifiant un s\u00e9lecteur de classe. Avec le code ci-dessus, FilterizR devrait maintenant reprendre vos messages et les placer dans des colonnes. Parce que nous avons utilis\u00e9 les attributs de donn\u00e9es appropri\u00e9s, les filtres devraient \u00e9galement fonctionner automatiquement\u00a0!<\/p>\nPersonnalisation des options de FilterizR<\/h3>\n
layout<\/code>sur ‘ sameWidth<\/code>‘ permet \u00e0 FilterizR de mieux fonctionner avec des publications de hauteurs diff\u00e9rentes. Il en r\u00e9sulte un style "Ma\u00e7onnerie". Dans notre exemple, nous r\u00e9percutons le contenu suppl\u00e9mentaire apr\u00e8s l’image, ce qui peut entra\u00eener des hauteurs variables (les noms peuvent \u00eatre plus longs, le for\u00e7ant sur plusieurs lignes). Cela peut entra\u00eener un comportement \u00e9trange.<\/p>\ngutterPixels<\/code>. Dans l’exemple ci-dessus, j’ai utilis\u00e9 10px comme taille d’\u00e9cart. PS\u00a0: la taille de l’espace est \u00e9galement ajout\u00e9e au conteneur d’emballage. Ce n’est peut-\u00eatre pas toujours ce que vous voulez. Pour remplacer cela, j’ai simplement ajout\u00e9 un style padding: 0!important<\/code>\u00e0 .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![\"Mettre](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152296-61e4d54c4aa2b.png\")
<\/a><\/p>\n