{"id":37008,"date":"2020-08-18T08:00:00","date_gmt":"2020-08-18T06:00:00","guid":{"rendered":"https:\/\/wpmarmite.com\/?p=37008"},"modified":"2022-05-09T09:21:14","modified_gmt":"2022-05-09T07:21:14","slug":"facetwp","status":"publish","type":"post","link":"https:\/\/wpmarmite.com\/facetwp\/","title":{"rendered":"FacetWP : filtrez vos contenus WordPress en ma\u00eetrisant l&#8217;art de la facette"},"content":{"rendered":"\n<p>Je vous ai r\u00e9cemment pr\u00e9sent\u00e9 <a href=\"https:\/\/wpmarmite.com\/wpgridbuilder\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Grid Builder<\/a>, l\u2019une des extensions de filtrages de contenu les plus r\u00e9centes et performantes. Vous ne vous en souvenez pas ? C&#8217;est sans doute que vous n&#8217;\u00eates pas encore inscrit \u00e0 <a href=\"https:\/\/wpmarmite.com\/newsletter\/\" target=\"_blank\" rel=\"noreferrer noopener\">la newsletter WPMarmite<\/a> \ud83d\ude09<\/p>\n\n\n\n<p>Quoiqu&#8217;il en soit, je ne vous en veux pas, et je vous propose aujourd&#8217;hui de vous parler de son concurrent le plus historique : FacetWP.<\/p>\n\n\n\n<p>Depuis presque 10 ans, FacetWP r\u00e8gne en ma\u00eetre sur la recherche personnalis\u00e9e de nombreux sites WordPress.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facetWP-king.gif\" alt=\"FacetWP King\" class=\"wp-image-37410\"\/><figcaption>Le roi de la facette WordPress vous salue<\/figcaption><\/figure><\/div>\n\n\n\n<p>Difficile de ne pas parler de cette extension lorsque l\u2019on parle de <strong>recherche et filtrage dynamique sur un site WordPress<\/strong>, et nous allons voir comment la mettre en place sur notre site pour filtrer nos articles de blogs suivant diff\u00e9rents crit\u00e8res.<\/p>\n\n\n\n<p>Allez c\u2019est parti !<\/p>\n\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-summary\"><p class=\"wp-block-advanced-gutenberg-blocks-summary__title\">Sommaire<\/p><div class=\"wp-block-advanced-gutenberg-blocks-summary__fold\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-chevron-up\"><polyline points=\"18 15 12 9 6 15\"><\/polyline><\/svg><\/div><ol role=\"directory\" class=\"wp-block-advanced-gutenberg-blocks-summary__list\"><li><a href=\"#facetwp-le-mastodonte-de-la-recherche-par-facettes\">FacetWP : le mastodonte de la recherche par facettes<\/a><ol><\/ol><\/li><li><a href=\"#comment-mettre-en-place-un-syst\u00e8me-de-filtre-d\u2019articles-de-blog-avec-facetwp\">Comment mettre en place un syst\u00e8me de filtre d\u2019articles de blog avec FacetWP<\/a><ol><\/ol><\/li><li><a href=\"#comment-afficher-votre-mod\u00e8le-et-nos-facettes-sur-une-page\">Comment afficher votre mod\u00e8le et nos facettes sur une page<\/a><ol><\/ol><\/li><li><a href=\"#les-addons-de-facetwp-et-leur-int\u00e9r\u00eat\">Les addons de FacetWP et leur int\u00e9r\u00eat<\/a><ol><\/ol><\/li><li><a href=\"#alors-que-penser-de-facetwp\">Alors, que penser de FacetWP ?<\/a><ol><\/ol><\/li><\/ol><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"facetwp-le-mastodonte-de-la-recherche-par-facettes\">FacetWP : le mastodonte de la recherche par facettes<\/h2>\n\n\n\n<p>Peu de concurrence, une extension simple \u00e0 prendre en main et \u00e0 impl\u00e9menter sur WordPress : tout est fait pour nous faciliter la vie.<\/p>\n\n\n\n<p>Comme son nom l\u2019indique, FacetWP permet de <strong>cr\u00e9er des facettes personnalis\u00e9es pour filtrer n\u2019importe quel contenu disponible sur votre site WordPress <\/strong>: les articles de blog, les produits <a href=\"https:\/\/wpmarmite.com\/woocommerce\/\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce<\/a>, les types de contenus personnalis\u00e9s, etc.<\/p>\n\n\n\n<p>Ces facettes peuvent \u00eatre de diff\u00e9rents types (nous allons le voir juste apr\u00e8s) et permettent \u00e0 l\u2019utilisateur de trier finement ce qu\u2019il recherche en fonction des crit\u00e8res disponibles.<\/p>\n\n\n\n<p>Et bien s\u00fbr, tout ceci sans recharger la page, pour une meilleure exp\u00e9rience utilisateur et plus de rapidit\u00e9.<\/p>\n\n\n\n<p>FacetWP est une extension premium, qui ne dispose pas de version gratuite.<br>Elle est disponible <strong>\u00e0 partir de 99$\/an pour une utilisation jusqu\u2019\u00e0 3 sites<\/strong>, et 249$\/an pour 20 sites et la possibilit\u00e9 de filtrer les utilisateurs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"comment-mettre-en-place-un-syst\u00e8me-de-filtre-d\u2019articles-de-blog-avec-facetwp\">Comment mettre en place un syst\u00e8me de filtre d\u2019articles de blog avec FacetWP<\/h2>\n\n\n\n<p>Passons maintenant aux choses s\u00e9rieuses.<\/p>\n\n\n\n<p>Nous avons un blog WordPress, mais pour faciliter la vie de nos visiteurs, nous allons ajouter diff\u00e9rents filtres pour qu\u2019ils puissent trouver rapidement et facilement ce qu\u2019ils cherchent. Parce qu&#8217;on aime chouchouter nos utilisateurs.<\/p>\n\n\n\n<p>Apr\u00e8s avoir t\u00e9l\u00e9charg\u00e9 et install\u00e9 FacetWP, rendons-nous dans les r\u00e9glages pour d\u00e9couvrir ce qu\u2019il propose.<\/p>\n\n\n\n<p>Les param\u00e8tres sont disponibles dans l\u2019administration dans l\u2019onglet <strong>R\u00e9glages &gt; FacetWP<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-default\"><img decoding=\"async\" width=\"1600\" height=\"386\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facetwp-onglet-general.png\" alt=\"Les r\u00e9glages de FacetWP\" class=\"wp-image-37010\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facetwp-onglet-general.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facetwp-onglet-general-300x72.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facetwp-onglet-general-1024x247.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facetwp-onglet-general-768x185.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facetwp-onglet-general-1536x371.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facetwp-onglet-general-1360x328.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>Nous arrivons directement dans l\u2019onglet concernant les facettes disponibles.<br>Un filtre par cat\u00e9gorie est d\u2019ailleurs pr\u00e9alablement cr\u00e9\u00e9 pour commencer \u00e0 trier vos contenus.<\/p>\n\n\n\n<p>Nous allons maintenant cr\u00e9er les n\u00f4tres.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre en place des facettes sur FacetWP<\/h3>\n\n\n\n<p>Une fois que vous aurez cliqu\u00e9 sur <strong>Add New<\/strong>, vous arrivez dans l\u2019interface pour mettre en place notre facette :<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img decoding=\"async\" width=\"1589\" height=\"1073\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/creation-facette-facetwp.png\" alt=\"Cr\u00e9ation de facette sur FacetWP\" class=\"wp-image-37034\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/creation-facette-facetwp.png 1589w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/creation-facette-facetwp-300x203.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/creation-facette-facetwp-1024x691.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/creation-facette-facetwp-768x519.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/creation-facette-facetwp-1536x1037.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/creation-facette-facetwp-1360x918.png 1360w\" sizes=\"(max-width: 1589px) 100vw, 1589px\" \/><\/figure>\n\n\n\n<p>FacetWP n\u2019\u00e9tant pas traduit en fran\u00e7ais, nous allons voir l\u2019utilit\u00e9 de chacun de ces champs :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Label<\/strong> : ce sera le nom de votre facette. N\u2019h\u00e9sitez pas \u00e0 mettre un titre pr\u00e9cis pour la retrouver plus facilement ensuite. Notez \u00e0 c\u00f4t\u00e9 le bouton rouge <code>Copy shortcode<\/code> qui nous permettra ensuite d\u2019ins\u00e9rer notre facette o\u00f9 nous le souhaitons sur le site.<\/li><li><strong>Facet type<\/strong> : ce champ d\u00e9finit le type de facettes que vous cr\u00e9ez. il en existe 13 diff\u00e9rents:<ul><li><strong>Checkboxes<\/strong> : des cases \u00e0 cocher<\/li><li><strong>Dropdown<\/strong> : un champ d\u00e9roulant<\/li><li><strong>fSelect<\/strong> : un champ d\u00e9roulant permettant de s\u00e9lectionner plusieurs options<\/li><li><strong>Hierarchy<\/strong> : un champ qui permet de hi\u00e9rarchiser votre facette par nombre de r\u00e9sultats<\/li><li><strong>Search<\/strong> : un champ de recherche<\/li><li><strong>Autocomplete<\/strong> : une barre de recherche sugg\u00e9rant des termes lorsque vous commencez \u00e0 taper votre mot-cl\u00e9<\/li><li><strong>Slider<\/strong>&nbsp;: un s\u00e9lecteur d\u2019intervalle qui permet de d\u00e9finir un intervalle de nombre pour trier vos contenus (prix, etc\u2026)<\/li><li><strong>Date range<\/strong> : une plage de dates \u00e0 d\u00e9finir<\/li><li><strong>Number range<\/strong> : un intervalle \u00e0 choisir en entrant deux nombres<\/li><li><strong>Proximity<\/strong> : une facette permettant de rechercher des r\u00e9sultats autour d\u2019un point de localisation pr\u00e9cis. Elle n\u00e9cessite cependant l\u2019utilisation d\u2019<a href=\"https:\/\/wpmarmite.com\/glossaire\/champ-personnalise\/\" target=\"_blank\" rel=\"noreferrer noopener\">un champ personnalis\u00e9<\/a> contenant la longitude et latitude pr\u00e9alablement remplies<\/li><li><strong>Radio<\/strong> : des boutons radios \u00e0 cocher<\/li><li><strong>Star rating<\/strong> : un filtrage par nombre d\u2019\u00e9toiles<\/li><li><strong>Pager<\/strong> : une facette de pagination<\/li><\/ul><\/li><li><strong>Data Source <\/strong>: le crit\u00e8re de tri sur lequel va agir la facette. Il est possible de s\u00e9lectionner toutes les valeurs d\u00e9finissant vos types de contenus : date de publication des articles, champs de prix WooCommerce, cat\u00e9gories, \u00e9tiquettes, champs personnalis\u00e9s, etc.<\/li><li><strong>Value Modifiers<\/strong> : pour inclure ou exclure certaines valeurs de vos filtres, par exemple pour exclure un produit, une cat\u00e9gorie ou un article<\/li><li><strong>Show Ghosts<\/strong> : pour afficher ou masquer les items ne renvoyant aucun r\u00e9sultat<\/li><li><strong>Behavior<\/strong> : pour d\u00e9finir si la s\u00e9lection \u00e9largit ou r\u00e9duit les r\u00e9sultats affich\u00e9s<\/li><li><strong>Sort By<\/strong> : pour d\u00e9finir l\u2019ordre d\u2019affichage des \u00e9l\u00e9ments de notre facette (par nombre, par nom, etc)<\/li><li><strong>Count<\/strong> : pour d\u00e9finir le nombre maximum d\u2019\u00e9l\u00e9ments de notre facette affich\u00e9s<\/li><li><strong>Soft Limit <\/strong>: pour afficher un bouton \u201cVoir plus&#8221; dans notre facette si beaucoup d\u2019\u00e9l\u00e9ments sont retourn\u00e9s<\/li><\/ul>\n\n\n\n<p>Dans notre cas, nous allons cr\u00e9er une facette renvoyant nos cat\u00e9gories, et une autre pour filtrer par Auteur de publication.<\/p>\n\n\n\n<p>Pour les Cat\u00e9gories, je choisis d\u2019afficher des cases \u00e0 cocher, et pour les auteurs un champ d\u00e9roulant avec la liste des diff\u00e9rents auteurs ayant publi\u00e9s sur le site.<\/p>\n\n\n\n<p>Voici les r\u00e9glages de mes deux facettes :<\/p>\n\n\n\n<p>La facette Cat\u00e9gorie :<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1138\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-categories-facetwp.png\" alt=\"Facette cat\u00e9gories\" class=\"wp-image-37012\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-categories-facetwp.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-categories-facetwp-300x213.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-categories-facetwp-1024x728.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-categories-facetwp-768x546.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-categories-facetwp-1536x1092.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-categories-facetwp-1360x967.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>La facette Auteur :<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"815\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-auteurs-facetwp.png\" alt=\"Facette auteurs \" class=\"wp-image-37013\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-auteurs-facetwp.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-auteurs-facetwp-300x153.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-auteurs-facetwp-1024x522.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-auteurs-facetwp-768x391.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-auteurs-facetwp-1536x782.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/facette-auteurs-facetwp-1360x693.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>N\u2019h\u00e9sitez pas \u00e0 modifier les options pour affiner vos facettes : de nombreuses possibilit\u00e9s sont disponibles et simples \u00e0 mettre en place.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un mod\u00e8le de page<\/h3>\n\n\n\n<p>Il nous faut maintenant <strong>mettre en place notre mod\u00e8le de page affichant les types de contenus \u00e0 filtrer<\/strong>.<\/p>\n\n\n\n<p>Pour nous ce sera donc des articles de blog.<\/p>\n\n\n\n<p>Nous nous rendons donc dans l\u2019onglet <strong>Templates<\/strong> de FacetWP et voici ce qui nous est propos\u00e9 :<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"830\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modeles-facetwp.png\" alt=\"Mod\u00e8le de page FacetWP\" class=\"wp-image-37014\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modeles-facetwp.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modeles-facetwp-300x156.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modeles-facetwp-1024x531.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modeles-facetwp-768x398.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modeles-facetwp-1536x797.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modeles-facetwp-1360x706.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>Premi\u00e8rement, donnons un nom \u00e0 notre mod\u00e8le : Articles de blog. Simple mais efficace. Un code court sera ensuite g\u00e9n\u00e9r\u00e9 automatiquement \u00e0 partir de celui-ci.<\/p>\n\n\n\n<p>Nous avons ensuite diff\u00e9rentes&nbsp;sections&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>L\u2019onglet&nbsp;<strong>Display<\/strong>&nbsp;: il nous permet de mettre en place visuellement un \u00e9l\u00e9ment de notre grille en s\u00e9lectionnant les diff\u00e9rents champs \u00e0 afficher.<\/li><li>La colonne&nbsp;<strong>Layout<\/strong>&nbsp;: Elle nous permet de d\u00e9finir comment vont s\u2019afficher ces \u00e9l\u00e9ments : le nombre d\u2019items par ligne, l\u2019\u00e9cart entre eux et une classe CSS unique<\/li><li>L\u2019onglet&nbsp;<strong>Query<\/strong>&nbsp;permet de d\u00e9finir la requ\u00eate qu\u2019utilisera notre mod\u00e8le pour afficher les diff\u00e9rents \u00e9l\u00e9ments : par date, par nom, etc<\/li><li>Le lien&nbsp;<strong>Switch to advanced mode<\/strong>&nbsp;: nous n\u2019en parlerons pas ici. Cette partie est utile uniquement si vous entrez tout le code \u00e0 mains nues.<\/li><\/ul>\n\n\n\n<p>Allez c\u2019est parti pour la mise en place de notre mod\u00e8le !<\/p>\n\n\n<style>.elementor-29940 .elementor-element.elementor-element-7b39d73d:not(.elementor-motion-effects-element-type-background), .elementor-29940 .elementor-element.elementor-element-7b39d73d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url(\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/code-css.jpg\");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-29940 .elementor-element.elementor-element-7b39d73d > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(135deg, #67d299 0%, #39a0b8 100%);opacity:0.85;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-29940 .elementor-element.elementor-element-7b39d73d, .elementor-29940 .elementor-element.elementor-element-7b39d73d > .elementor-background-overlay{border-radius:6px 6px 6px 6px;}.elementor-29940 .elementor-element.elementor-element-7b39d73d{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:50px;margin-bottom:50px;padding:1.25em 1.25em 1.25em 1.25em;}.elementor-29940 .elementor-element.elementor-element-2dabb41a > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-29940 .elementor-element.elementor-element-224b7e6d .elementor-heading-title{font-size:1.5em;font-weight:700;line-height:1.1em;text-shadow:0px 0px 6px rgba(0,0,0,0.3);color:#ffffff;}.elementor-29940 .elementor-element.elementor-element-4150402a{font-size:2rem;color:#ffffff;}.elementor-29940 .elementor-element.elementor-element-b9d58e .elementor-button{font-size:0.9em;font-weight:700;text-transform:uppercase;background-color:#ff5b23;}.elementor-29940 .elementor-element.elementor-element-b9d58e .elementor-button:hover, .elementor-29940 .elementor-element.elementor-element-b9d58e .elementor-button:focus{background-color:#e94b14;}.elementor-29940 .elementor-element.elementor-element-b9d58e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-29940 .elementor-element.elementor-element-2dabb41a{width:76.117%;}.elementor-29940 .elementor-element.elementor-element-56ae2888{width:23.965%;}}\/* Start custom CSS for text-editor, class: .elementor-element-4150402a *\/.elementor-29940 .elementor-element.elementor-element-4150402a p{\n    font-size:1.8rem;\n    line-height:1.5em;\n    text-shadow: 0px 0px 6px rgba(0,0,0,0.3);\n}\/* End custom CSS *\/\n\/* Start custom CSS for button, class: .elementor-element-b9d58e *\/.elementor-29940 .elementor-element.elementor-element-b9d58e .elementor-button-link{\n    background-color: #ff5b23 !important;\n    margin:15px 0 0 !important;\n}\n\n.elementor-29940 .elementor-element.elementor-element-b9d58e .elementor-button-link:hover{\n    background-color:#E94B14 !important;\n}\/* End custom CSS *\/<\/style>\t\t<div data-elementor-type=\"section\" data-elementor-id=\"29940\" class=\"elementor elementor-29940\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t<section data-dce-background-overlay-color=\"#67d299\" data-dce-background-image-url=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/code-css.jpg\" class=\"elementor-section elementor-top-section elementor-element elementor-element-7b39d73d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b39d73d\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-2dabb41a\" data-id=\"2dabb41a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div data-dce-title-color=\"#ffffff\" class=\"elementor-element elementor-element-224b7e6d elementor-widget elementor-widget-heading\" data-id=\"224b7e6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Apprenez le CSS une bonne fois pour toutes<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-text-color=\"#ffffff\" class=\"elementor-element elementor-element-4150402a elementor-widget elementor-widget-text-editor\" data-id=\"4150402a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Cr\u00e9ez des sites au rendu impeccable sans y passer des heures avec CSS Express.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-background-color=\"#ff5b23\" class=\"elementor-element elementor-element-b9d58e elementor-widget elementor-widget-button\" data-id=\"b9d58e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/wpmarmite.com\/formation-wordpress\/cssexpress\/\" target=\"_blank\" id=\"CTA_CSSExpressContentFR\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">D\u00e9couvrir la formation<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-56ae2888\" data-id=\"56ae2888\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-35076490 elementor-widget elementor-widget-image\" data-id=\"35076490\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/css-express-300x300.png\" class=\"attachment-medium size-medium wp-image-29941\" alt=\"\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/css-express-300x300.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/css-express-150x150.png 150w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/css-express-768x768.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/css-express-1024x1024.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/css-express.png 1200w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n\n\n<h3 class=\"wp-block-heading\">Mettre en place votre mod\u00e8le<\/h3>\n\n\n\n<p>FacetWP permet de <strong>cr\u00e9er visuellement<\/strong> (avec un design assez aust\u00e8re je vous l\u2019accorde) <strong>notre \u00e9l\u00e9ment pour qu\u2019il soit affich\u00e9 de la mani\u00e8re souhait\u00e9e <\/strong>dans notre mod\u00e8le.<\/p>\n\n\n\n<p>Pour ceci, il suffit d\u2019afficher et styliser ensuite chacun des items souhait\u00e9s.<\/p>\n\n\n\n<p>En cliquant sur le <strong>+<\/strong>, vous aurez acc\u00e8s \u00e0 tous les champs disponibles \u00e0 cet affichage.<\/p>\n\n\n\n<p>Pour n\u2019en citer que quelques uns, vous pouvez par exemple afficher :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Le titre de l\u2019article ou produit<\/li><li>Le contenu de l\u2019article<\/li><li>Le r\u00e9sum\u00e9 de l\u2019article<\/li><li>La date de publication<\/li><li>La date de modification<\/li><li>L\u2019auteur<\/li><li>Le prix&#8230;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"992\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-element-facetwp.png\" alt=\"Mod\u00e8le \u00e9l\u00e9ment FacetWP\" class=\"wp-image-37016\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-element-facetwp.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-element-facetwp-300x186.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-element-facetwp-1024x635.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-element-facetwp-768x476.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-element-facetwp-1536x952.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-element-facetwp-1360x843.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>Pour notre mod\u00e8le, nous allons afficher les informations suivantes :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>L\u2019image \u00e0 la Une<\/li><li>Le titre de l\u2019article<\/li><li>Le r\u00e9sum\u00e9 de l\u2019article<\/li><li>L\u2019auteur<\/li><li>La date de publication<\/li><\/ul>\n\n\n\n<p>Voici ce que donnerait notre mod\u00e8le :<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1434\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-final-facetwp.png\" alt=\"Mod\u00e8le final\" class=\"wp-image-37017\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-final-facetwp.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-final-facetwp-300x269.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-final-facetwp-1024x918.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-final-facetwp-768x688.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-final-facetwp-1536x1377.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/modele-final-facetwp-1360x1219.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>Notez qu\u2019un panneau de modification est disponible lorsque vous cliquez sur un \u00e9l\u00e9ment. Celui-ci permet notamment de :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Modifier la couleur<\/li><li>Ajouter une bordure<\/li><li>D\u00e9finir des marges<\/li><li>D\u00e9finir une taille de texte<\/li><li>D\u00e9finir un alignement<\/li><li>Ajouter une classe CSS personnalis\u00e9e pour ensuite cibler cet \u00e9l\u00e9ment<\/li><\/ul>\n\n\n\n<p>Il en existe d\u2019autres, suivant le type de champ utilis\u00e9.<\/p>\n\n\n\n<p>Il est \u00e9galement possible de <strong>d\u00e9finir un affichage sur plusieurs colonnes<\/strong> en cliquant sur le cadre bleu puis en ajoutant des colonnes :<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"867\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/colonnes-facetwp.png\" alt=\"Colonnes FacetWP\" class=\"wp-image-37025\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/colonnes-facetwp.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/colonnes-facetwp-300x163.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/colonnes-facetwp-1024x555.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/colonnes-facetwp-768x416.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/colonnes-facetwp-1536x832.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/colonnes-facetwp-1360x737.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>Libre \u00e0 vous ensuite d\u2019adapter le design de chaque \u00e9l\u00e9ment pour que le design de votre mod\u00e8le colle \u00e0 vos attentes&#8230; et \u00e0 celles de vos visiteurs, bien s\u00fbr !<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"comment-afficher-votre-mod\u00e8le-et-nos-facettes-sur-une-page\">Comment afficher votre mod\u00e8le et nos facettes sur une page<\/h2>\n\n\n\n<p>Nous avons vu pr\u00e9c\u00e9demment que des codes courts (aussi appel\u00e9s <a href=\"https:\/\/wpmarmite.com\/en\/glossary\/shortcode\/\" target=\"_blank\" rel=\"noreferrer noopener\">shortcodes<\/a>) \u00e9taient g\u00e9n\u00e9r\u00e9s pour chacun de nos \u00e9l\u00e9ments, \u00e0 savoir les facettes et les mod\u00e8les.<\/p>\n\n\n\n<p>Il nous suffit donc de les r\u00e9cup\u00e9rer pour les ins\u00e9rer partout o\u00f9 l\u2019on veut : un widget Gutenberg, Elementor, Divi ou n\u2019importe quel <a href=\"https:\/\/wpmarmite.com\/meilleur-page-builder-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">constructeur de page<\/a>.<\/p>\n\n\n\n<p>Dans le cas de mon mod\u00e8le, le code court g\u00e9n\u00e9r\u00e9 est&nbsp;<code>[facetwp template=\"articles_de_blog\"]<\/code>.<\/p>\n\n\n\n<p>Je les ins\u00e8re de la mani\u00e8re suivante dans ma page construite avec Gutenberg :<strong>&nbsp;<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1166\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/blog-facetwp.png\" alt=\"Rendu du blog avec votre facette WordPress\" class=\"wp-image-37027\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/blog-facetwp.png 1600w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/blog-facetwp-300x219.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/blog-facetwp-1024x746.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/blog-facetwp-768x560.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/blog-facetwp-1536x1119.png 1536w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/blog-facetwp-1360x991.png 1360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p>Et voici le rendu sur le devant de notre site :<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"966\" height=\"1082\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/demo-facetwp.gif\" alt=\"D\u00e9mo du plugin de facettes WordPress\" class=\"wp-image-37028\"\/><\/figure>\n\n\n\n<p>Le design est assez sobre et reste am\u00e9liorable avec quelques lignes de CSS, notamment pour mettre en forme les facettes.<\/p>\n\n\n<style>.elementor-29926 .elementor-element.elementor-element-48b48668 > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(90deg, #100a3d 0%, #0a0726 100%);opacity:0.9;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-29926 .elementor-element.elementor-element-48b48668, .elementor-29926 .elementor-element.elementor-element-48b48668 > .elementor-background-overlay{border-radius:6px 6px 6px 6px;}.elementor-29926 .elementor-element.elementor-element-48b48668{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:50px;margin-bottom:50px;padding:1.25em 1.25em 1.25em 1.25em;}.elementor-29926 .elementor-element.elementor-element-381b21fa > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:0px;}.elementor-29926 .elementor-element.elementor-element-456b455a .elementor-heading-title{font-size:1.5em;font-weight:700;line-height:1.1em;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#ffffff;}.elementor-29926 .elementor-element.elementor-element-661b2225{font-size:2rem;color:#ffffff;}.elementor-29926 .elementor-element.elementor-element-56271a84 .elementor-button{font-size:0.9em;font-weight:700;text-transform:uppercase;background-color:#ff5b23;}.elementor-29926 .elementor-element.elementor-element-56271a84 .elementor-button:hover, .elementor-29926 .elementor-element.elementor-element-56271a84 .elementor-button:focus{background-color:#e94b14;}.elementor-29926 .elementor-element.elementor-element-56271a84 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-29926 .elementor-element.elementor-element-381b21fa{width:76.117%;}.elementor-29926 .elementor-element.elementor-element-72fe4db4{width:23.965%;}}\/* Start custom CSS for text-editor, class: .elementor-element-661b2225 *\/.elementor-29926 .elementor-element.elementor-element-661b2225 p{\n    font-size:1.8rem;\n    line-height:1.5em;\n    text-shadow: 0px 0px 6px rgba(0,0,0,0.3);\n}\/* End custom CSS *\/\n\/* Start custom CSS for button, class: .elementor-element-56271a84 *\/.elementor-29926 .elementor-element.elementor-element-56271a84 .elementor-button-link{\n    background-color: #ff5b23 !important;\n    margin:20px 0 0 !important;\n}\n\n.elementor-29926 .elementor-element.elementor-element-56271a84 .elementor-button-link:hover{\n    background-color:#E94B14 !important;\n}\/* End custom CSS *\/<\/style>\t\t<div data-elementor-type=\"section\" data-elementor-id=\"29926\" class=\"elementor elementor-29926\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t\t<section data-dce-background-overlay-color=\"#100a3d\" class=\"elementor-section elementor-top-section elementor-element elementor-element-48b48668 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"48b48668\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-381b21fa\" data-id=\"381b21fa\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div data-dce-title-color=\"#ffffff\" class=\"elementor-element elementor-element-456b455a elementor-widget elementor-widget-heading\" data-id=\"456b455a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">WPMarmite News, votre antis\u00e8che sur l\u2019actu WordPress<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-text-color=\"#ffffff\" class=\"elementor-element elementor-element-661b2225 elementor-widget elementor-widget-text-editor\" data-id=\"661b2225\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Recevez gratuitement les derni\u00e8res infos de l\u2019\u00e9cosyst\u00e8me WordPress tous les 15 jours et cr\u00e9ez de meilleurs sites.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-dce-background-color=\"#ff5b23\" class=\"elementor-element elementor-element-56271a84 elementor-widget elementor-widget-button\" data-id=\"56271a84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/news.wpmarmite.com\/\" target=\"_blank\" id=\"CTA_WPMNewsContentFR\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">D\u00e9couvrir WPMarmite News<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-72fe4db4\" data-id=\"72fe4db4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1ab777fd elementor-widget elementor-widget-image\" data-id=\"1ab777fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/Bouillon-picto-300x300.png\" class=\"attachment-medium size-medium wp-image-29993\" alt=\"\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/Bouillon-picto-300x300.png 300w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/Bouillon-picto-150x150.png 150w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/Bouillon-picto-768x768.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/Bouillon-picto-1024x1024.png 1024w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/Bouillon-picto-1360x1360.png 1360w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2019\/09\/Bouillon-picto.png 2000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"les-addons-de-facetwp-et-leur-int\u00e9r\u00eat\">Les addons de FacetWP et leur int\u00e9r\u00eat<\/h2>\n\n\n\n<p>FacetWP propose de nombreux addons pour<strong> ajouter des fonctionnalit\u00e9s et possibilit\u00e9s en terme de filtrage<\/strong>, mais permet \u00e9galement de <strong>le rendre compatible avec diverses extensions tierces<\/strong> pour les utiliser conjointement.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1215\" height=\"1600\" src=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/addons-facetwp.png\" alt=\"Les Addons de FacetWP\" class=\"wp-image-37030\" srcset=\"https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/addons-facetwp.png 1215w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/addons-facetwp-228x300.png 228w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/addons-facetwp-778x1024.png 778w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/addons-facetwp-768x1011.png 768w, https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/addons-facetwp-1166x1536.png 1166w\" sizes=\"(max-width: 1215px) 100vw, 1215px\" \/><\/figure>\n\n\n\n<p>Parmi ces addons, nous pouvons retrouver :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Recipes<\/strong>, qui permet de filtrer les contenus provenant des extensions WP Recipe Maker et Tasty Recipes. Utile si vous avez un d\u00e9licieux blog culinaire.<\/li><li><strong>Elementor Integration<\/strong>, qui permet d\u2019ajouter des mod\u00e8les FacetWP et facettes directement via les widgets <a href=\"https:\/\/wpmarmite.com\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a> d\u2019articles ou produits.<\/li><li><strong>Beaver Builder Integration<\/strong>, idem qu\u2019Elementor, mais pour le constructeur de page <a href=\"https:\/\/wpmarmite.com\/beaver-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">Beaver Builder<\/a>.<\/li><li><strong>Flyout<\/strong>, qui permet d\u2019afficher ou masquer les filtres via un menu lat\u00e9ral sur mobile, pratique pour am\u00e9liorer l\u2019exp\u00e9rience utilisateur.<\/li><li><strong>Map Facet<\/strong>, pour cr\u00e9er des cartes filtrables dans le style d\u2019Airbnb.<\/li><li><strong>User Post Type<\/strong>, pour filtrer et trier des utilisateurs.<\/li><li><strong>Caching<\/strong>, qui met en cache les donn\u00e9es de FacetWP pour optimiser les performances de votre site.<\/li><li><strong>Conditional Logic<\/strong>, un addon tr\u00e8s utile qui permet d\u2019afficher ou masquer diff\u00e9rents facettes suivant diff\u00e9rentes conditions<\/li><li><strong>Multilingual<\/strong>, qui permet d\u2019int\u00e9grer FacetWP avec <a href=\"https:\/\/wpmarmite.com\/wordpress-multilingue\/\" target=\"_blank\" rel=\"noreferrer noopener\">les plugins multilingues<\/a> que sont <a href=\"https:\/\/wpmarmite.com\/polylang\/\" target=\"_blank\" rel=\"noreferrer noopener\">Polylang<\/a> et <a href=\"https:\/\/wpmarmite.com\/en\/wpml\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPML<\/a> pour garantir une traduction et un affichage parfait de vos contenus dans toutes les langues<\/li><li><strong>Hierarchy Select<\/strong>, pour hi\u00e9rarchiser vos facettes si elles ont diff\u00e9rents niveaux d\u2019importance<\/li><li><strong>Pods Integration<\/strong>, pour trier vos contenus en utilisant les champs provenant de Pods<\/li><li><strong>Range List<\/strong>, pour cr\u00e9er des facettes utilisant des intervalles de valeur, ce qui peut \u00eatre utile pour des prix de produits par exemple<\/li><li><strong>Time Since<\/strong>, pour filtrer vos contenus par des intervalles de temps relatif comme \u201cLe mois dernier\u201d, \u201cLa semaine derni\u00e8re\u201d, etc<\/li><li><strong>Color<\/strong>, pour afficher des couleurs pour filtrer par&#8230; couleurs (logique). Cet addon n\u00e9cessite des donn\u00e9es pr\u00e9format\u00e9es pour les couleurs : soit des valeurs hexad\u00e9cimales, soit des noms de couleurs<\/li><li><strong>Alphabetical Listing<\/strong>, qui permet de classer les r\u00e9sultats de la grille de contenus par ordre alphab\u00e9tique<\/li><li><strong>Relevanssi Integration<\/strong>, qui permet d\u2019utiliser l\u2019index de recherche de l\u2019extension Relevanssi pour filtrer et trier les r\u00e9sultats de vos contenus<\/li><\/ul>\n\n\n\n<p>Vous le voyez : le choix est large. \u00c0 vous de piocher dans ce qui vous semble int\u00e9ressant pour mettre en place une recherche dynamique et personnalis\u00e9e sur votre site WordPress !<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/facetwp.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">D\u00c9COUVRIR FACETWP<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"alors-que-penser-de-facetwp\">Alors, que penser de FacetWP ?<\/h2>\n\n\n\n<p>FacetWP est<strong> une extension simple \u00e0 prendre en main, permettant d\u2019am\u00e9liorer la filtration de contenus sur votre site WordPress<\/strong> sans avoir besoin de trop de connaissances en terme de code ou de d\u00e9veloppement.<\/p>\n\n\n\t\t<div class=\"wp-block wp-block-modernplugins-modern-ctt is-style-default\" >\n\t\t\t<a class=\"modern-ctt\" href=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwpmarmite.com%2Ffacetwp%2F&#038;text=Besoin+de+filtrer+finement+vos+contenus+%23WordPress+%28pages%2C+articles%2C+produits+%23WooCommerce%E2%80%A6%29+%3F+D%C3%A9couvrez+le+test+du+plugin+%23FacetWP&#038;via=wpmarmite\" target=\"_blank\" rel=\"noopener noreferer\">\n\t\t\t\t\t\t\t\t<div class=\"modern-ctt-content \"><p>Besoin de filtrer finement vos contenus #WordPress (pages, articles, produits #WooCommerce\u2026) ? D\u00e9couvrez le test du plugin #FacetWP<\/p><\/div>\n\t\t\t\t<footer class=\"modern-ctt-footer\">\n\t\t\t\t\t<span class=\"modern-ctt-cta modern-ctt-button\">\n\t\t\t\t\t\t<span class=\"modern-ctt-prompt \">Click to Tweet<\/span>\n\t\t\t\t\t\t<svg class=\"icon icon-twitter \" aria-hidden=\"true\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><rect x=\"0\" fill=\"none\" width=\"24\" height=\"24\"\/><g><path d=\"M22.23 5.924a8.212 8.212 0 01-2.357.646 4.115 4.115 0 001.804-2.27 8.221 8.221 0 01-2.606.996 4.103 4.103 0 00-6.991 3.742 11.647 11.647 0 01-8.457-4.287 4.087 4.087 0 00-.556 2.063 4.1 4.1 0 001.825 3.415 4.09 4.09 0 01-1.859-.513v.052a4.104 4.104 0 003.292 4.023 4.099 4.099 0 01-1.853.07 4.11 4.11 0 003.833 2.85 8.236 8.236 0 01-5.096 1.756 8.33 8.33 0 01-.979-.057 11.617 11.617 0 006.29 1.843c7.547 0 11.675-6.252 11.675-11.675 0-.178-.004-.355-.012-.531a8.298 8.298 0 002.047-2.123z\"\/><\/g><\/svg>\n\t\t\t\t\t<\/span>\t\n\t\t\t\t<\/footer>\n\t\t\t<\/a>\n\t\t<\/div>\n\t\n\n\n<p>Son tarif \u00e9lev\u00e9 et son interface utilisateur le rendent cependant bien moins attrayant que son concurrent direct, WP Grid Builder, dont le prix, la prise en main et les possibilit\u00e9s \u00e9normes en font le num\u00e9ro 1 du secteur.<\/p>\n\n\n\n<p>FacetWP peut n\u00e9anmoins vous \u00eatre utile pour des projets pr\u00e9cis et pour des besoins particuliers, notamment via l\u2019utilisation de certains de ses add-ons.<\/p>\n\n\n\n<p>L\u2019utilisez-vous sur vos sites ? Pour quel type de contenus ? Dites-moi tout en commentaires !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Je vous ai r\u00e9cemment pr\u00e9sent\u00e9 WP Grid Builder, l\u2019une des extensions de filtrages de contenu les plus r\u00e9centes et performantes. Vous ne vous en souvenez pas ? C&#8217;est sans doute que vous n&#8217;\u00eates pas encore inscrit \u00e0 la newsletter WPMarmite&#8230;<\/p>\n","protected":false},"author":1836,"featured_media":37661,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[105],"tags":[],"class_list":["post-37008","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins-wordpress"],"wpm_company_founded_date":null,"wpm_company_url":null,"wpm_company_founders":null,"wpm_company_twitter":null,"wpm_company_linkedin":null,"wpm_pro_ressource_formule":null,"wpm_ressourcewp_lien_aff":null,"wpm_ressourcewp_lien_officiel":null,"wpm_ressource_company":null,"wpm_ressourcewp_short_desc":null,"wpm_ressourcewp_lien_repo":null,"wpm_ressourcewp_lien_ressource":null,"_yoast_wpseo_title":"FacetWP : filtrez vos contenus WordPress en ma\u00eetrisant l'art de la facette","_yoast_wpseo_meta-robots-noindex":null,"_yoast_wpseo_focuskw":"facetwp","_yoast_wpseo_metadesc":"Besoin de filtrer finement vos contenus WordPress (pages, articles, produits WooCommerce...) ? D\u00e9couvrez notre test du plugin FacetWP.","_yoast_wpseo_opengraph-title":null,"_yoast_wpseo_twitter-title":null,"_yoast_wpseo_opengraph-description":null,"_yoast_wpseo_twitter-description":null,"_yoast_wpseo_bctitle":null,"lang":"fr","translations":{"fr":37008,"en":38313},"uagb_featured_image_src":{"full":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp.jpg",1500,830,false],"thumbnail":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp-150x150.jpg",150,150,true],"medium":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp-300x166.jpg",300,166,true],"medium_large":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp-768x425.jpg",768,425,true],"large":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp-1024x567.jpg",1024,567,true],"1536x1536":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp.jpg",1500,830,false],"2048x2048":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp.jpg",1500,830,false],"image-recette":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp-1360x753.jpg",1360,753,true],"gform-image-choice-sm":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp.jpg",300,166,false],"gform-image-choice-md":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp.jpg",400,221,false],"gform-image-choice-lg":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp.jpg",600,332,false],"yarpp-thumbnail":["https:\/\/wpmarmite.com\/wp-content\/uploads\/2020\/07\/cover-facetwp.jpg",120,66,false]},"uagb_author_info":{"display_name":"Julien | WPMarmite","author_link":"https:\/\/wpmarmite.com\/author\/julien-wpmarmite\/"},"uagb_comment_info":9,"uagb_excerpt":"Je vous ai r\u00e9cemment pr\u00e9sent\u00e9 WP Grid Builder, l\u2019une des extensions de filtrages de contenu les plus r\u00e9centes et performantes. Vous ne vous en souvenez pas ? C&#8217;est sans doute que vous n&#8217;\u00eates pas encore inscrit \u00e0 la newsletter WPMarmite...","pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/posts\/37008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/users\/1836"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/comments?post=37008"}],"version-history":[{"count":0,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/posts\/37008\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/media\/37661"}],"wp:attachment":[{"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/media?parent=37008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/categories?post=37008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmarmite.com\/wp-json\/wp\/v2\/tags?post=37008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}