FacetWP titels gebruiken i.p.v. widget titels

FacetWP facet titel gebruiken

FacetWP is een geavanceerde filtering plugin voor WordPress waarmee je snel en gemakkelijk zoekformulieren kunt maken voor je website. In dit artikel zullen we bespreken hoe je titels kunt toevoegen aan de FacetWP widgets, om je gebruikers een meer gebruiksvriendelijke ervaring te bieden.

Als je de titels van de opgegeven facets gebruikt en niet de standaard widget titel die toegevoegd wordt aan de shortcode is het voordeel dat je als er een lege facet getoond zal worden die geen resultaat geeft ook geen titel te zien krijgt.

Stap 1: code toevoegen
De eerste stap om titels aan je FacetWP widgets toe te voegen is door de volgende code toe te voegen aan de functions.php van je thema of in de Code Snippets plugin:

function fwp_add_facet_labels() {
?>
<script>
(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-facet').each(function() {
            var $facet = $(this);
            var facet_name = $facet.attr('data-name');
            var facet_label = FWP.settings.labels[facet_name];

            if ($facet.closest('.facet-wrap').length < 1 && $facet.closest('.facetwp-flyout').length < 1) {
                $facet.wrap('<div class="facet-wrap"></div>');
                $facet.before('<h3 class="facet-label">' + facet_label + '</h3>');
            }
        });
    });
})(jQuery);
</script>
<?php
}
add_action( 'wp_head', 'fwp_add_facet_labels', 100 );

Deze functie maakt gebruik van jQuery om te handelen zodra FacetWP is geladen op de pagina. Voor elke facet op de pagina, haalt het de naam van het facet op en zoekt het bijbehorende label op uit de FacetWP instellingen.

Als het facet nog niet is ingepakt in een .facet-wrap div en het bevindt zich niet binnen een .facetwp-flyout, dan wordt het facet ingepakt en wordt het label voor het facet geplaatst.

Aanpassingen en styling

Na het implementeren van de code kun je verder gaan met het aanpassen van de labels en de styling ervan. Je kunt CSS regels toevoegen aan je thema om de labels te stylen naar wens. Bijvoorbeeld:

.facet-label { 
font-size: 16px; 
font-weight: bold; 
margin-bottom: 10px; 
}