FacetWP titels gebruiken i.p.v. widget titels

Artikel: Titels Toevoegen aan FacetWP Widgets

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.

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 );

Hoe Werkt Het?

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; 
}

Conclusie

Het toevoegen van titels aan je FacetWP widgets kan de gebruikerservaring verbeteren en helpt bij het organiseren van de filters op je website. Door bovenstaande code te gebruiken, kun je eenvoudig titels invoegen en deze naar wens aanpassen en stylen om beter bij het ontwerp van je website te passen.