FacetWP met WP Recipe Maker

Wil je recepten indexeren in FacetWP en maak je gebruik van de WP Recipe Maker? Als je deze gratis add-on van FacetWP installeert krijg je extra facets waarmee je de mogelijkheid hebt om een filter op basis van WP Recipe Maker velden te tonen aan bezoekers van je foodblog.

WP Recipe Maker en FacetWP

Als je naar de website van FacetWP gaat vind je de gratis add-on. Je hebt wel de premium plugin van FacetWP nodig. Na het installeren van de add-on krijg je de mogelijkheid om extra opties in je facets te selecteren.

Deze add-on is overigens niet specifiek voor WP Recipe Maker maar ook geschikt voor Tasty Recipes.

Bronnen voor facets met WP Recipe Maker

Je kunt kiezen voor de volgende filter opties.

• Author name
• Average rating
• Servings
• Estimated cost
• Prep time
• Cook time
• Custom time
• Total time
• Courses
• Cuisines
• Diets
• Keywords
• Ingredients
• Ingredient units
• Equipment
• Calories
• Any WPRM-added custom fields
• Any WPRM-added custom taxonomies
• Any WPRM-added custom nutrition labels

FacetWP indexering

Wanneer WP Recipe Maker is geïnstalleerd, zie je een extra optie Indexeer receptgegevens onder Instellingen > FacetWP > Instellingen.

De twee opties die je kunt kiezen zijn blog posts of recepten.

Blogposts indexeren

Dit zorgt ervoor dat FacetWP de inhoud van blogposts scant op bijgevoegde recepten en vervolgens de receptgegevens koppelt aan de blogposts zelf. Dit is standaard. Het werkt goed voor de meeste receptindexpagina’s, aangezien deze pagina’s over het algemeen zijn geconfigureerd om lijsten met berichten weer te geven.

Recepten indexeren

Dit zorgt ervoor dat FacetWP de wprm_recipe items direct indexeert. Dit is bedoeld voor aangepaste zoekopdrachten (of grid builders) waarbij je wprm_recipe items in plaats van berichten opsomt.

Meer informatie vind je op de website van FacetWP.

FacetWP is een krachtige filter tool die je kunt gebruiken om geavanceerde zoek- en filterfunctionaliteiten toe te voegen aan je WordPress website. In combinatie met het Elementor als WordPress thema biedt het een gebruiksvriendelijke ervaring voor gebruikers die producten of inhoud willen doorzoeken. Hier is een uitleg over hoe FacetWP werkt binnen Elementor.

FacetWP met Elementor

Als je FacetWP optimaal wilt gebruiken dan heb je een extra gratis te downloaden add-on van FacetWP voor het Elementor nodig.

Deze Elementor add-on stelt je in staat om facetten weer te geven naast een reeks Elementor lijstwidgets. Deze widgets zijn beschikbaar wanneer je Elementor Pro gebruikt of een van de genoemde Elementor-plugins.

Met deze add-on geïnstalleerd, voegt FacetWP ook drie eigen widgets toe, voor het toevoegen van facetten, Listing Builder-lijsten en FacetWP-gerelateerde knoppen. Deze widgets werken ook met de gratis versie van Elementor.

Hierna kun je ook de facets toevoegen in je widgets. Meer hierover vind je in dit artikel over FacetWP facets toevoegen.

Voorbeeld voor FacetWP filters

Stel je voor dat je een online kledingwinkel hebt die is opgebouwd met het Elementor. Je wilt dat klanten snel kunnen filteren op kledingcategorie, maat, kleur en prijs. Door FacetWP filters te integreren, kun je deze filters eenvoudig op je productpagina’s toevoegen. Klanten kunnen nu bijvoorbeeld alle rode jurken in maat M onder €50 vinden door simpelweg de filters te gebruiken zonder dat de pagina opnieuw wordt geladen.

FacetWP is een krachtige filter tool die je kunt gebruiken om geavanceerde zoek- en filterfunctionaliteiten toe te voegen aan je WordPress website. In combinatie met het Flatsome WordPress thema biedt het een gebruiksvriendelijke ervaring voor gebruikers die producten of inhoud willen doorzoeken. Hier is een uitleg over hoe FacetWP werkt binnen het Flatsome thema.

FacetWP met Flatsome

Als je FacetWP optimaal wilt gebruiken dan heb je een extra gratis te downloaden add-on van FacetWP voor het Flatsome thema nodig.

Wanneer je de gratis Flatsome-integratie add-on installeert, wordt FacetWP automatisch ingesteld op je standaard WooCommerce winkelpagina.

De add-on lost enkele compatibiliteitsproblemen op met het Flatsome-thema, waaronder het niet updaten van het aantal resultaten en dat de afbeeldingslightbox en andere interactie niet werken na AJAX verversen.

Hierna kun je de facets toevoegen in je widgets. Meer hierover vind je in dit artikel over FacetWP facets toevoegen.

Voorbeeld voor FacetWP filters

Stel je voor dat je een online kledingwinkel hebt die is opgebouwd met het Flatsome thema. Je wilt dat klanten snel kunnen filteren op kledingcategorie, maat, kleur en prijs. Door FacetWP filters te integreren, kun je deze filters eenvoudig op je productpagina’s toevoegen. Klanten kunnen nu bijvoorbeeld alle rode jurken in maat M onder €50 vinden door simpelweg de filters te gebruiken zonder dat de pagina opnieuw wordt geladen.

Om afbeeldingen of andere elementen op een WordPress website in grijstinten (wij noemen het ook vaak zwart-wit maar technisch gezien is dat hetzelfde) weer te geven met CSS, kun je de CSS-eigenschap filter gebruiken. Deze eigenschap maakt het mogelijk om verschillende grafische effecten toe te passen zoals vervaging, verzadiging en kleurverschuiving, direct vanuit je stylesheet, zonder de originele inhoud te wijzigen. Voor zwart-wit effecten gebruiken we het grayscale() filter.

Grayscale filter in CSS

Het grayscale() filter converteert de kleuren van een element naar grijstinten. Het percentage dat je aan grayscale() meegeeft, bepaalt hoeveel een kleur naar grijs wordt omgezet:

• grayscale(100%) maakt een element volledig zwart-wit;
• grayscale(0%) laat de kleuren van het element ongewijzigd.

Hoe gebruik je het filter grayscale?

/* Toepassen op een afbeelding */
.img-zwart-wit {
filter: grayscale(100%);
}

/* Toepassen op een div of een ander element */
.div-zwart-wit {
filter: grayscale(100%);
}

Grayscale bij hover gebruiken

Je kunt ook interactieve effecten creëren waarbij de afbeelding of het element verandert naar zwart-wit wanneer de gebruiker er met de muis overheen gaat (hover).

.img-hover-zwart-wit {
    filter: grayscale(0%);
    transition: filter 0.5s ease; /* Maakt de overgang soepel */
}

.img-hover-zwart-wit:hover {
    filter: grayscale(100%);
}

Combineren met andere CSS filters

De filter eigenschap laat toe dat je meerdere filters combineert. Je kunt bijvoorbeeld grayscale() combineren met contrast() om de zichtbaarheid van zwart-wit afbeeldingen te verbeteren.

.img-geavanceerd {
    filter: grayscale(100%) contrast(120%);
}

Browserondersteuning CSS grayscale filter

Het filter attribuut wordt breed ondersteund in alle moderne browsers, inclusief Chrome, Firefox, Safari, en Edge. Internet Explorer ondersteunt deze eigenschap echter niet.

De filter eigenschap biedt een krachtige en flexibele manier om visuele effecten toe te passen met alleen CSS, waardoor je dynamische en aantrekkelijke designs kunt creëren zonder de noodzaak voor beeldbewerkingssoftware of extra grafische bestanden.

Wil je meer weten over CSS Filter opties? Bekijk dan de W3school.

Als je een WooCommerce webshop hebt worden er als je deze upload extra afbeeldingen getoond op de productpagina, de product image gallery.

Formaat gallery thumbnails WooCommerce

Deze gallery thumbnails worden standaard getoond op een formaat van 100 x 100 pixels. Als jouw webdesign in Figma bijvoorbeeld afwijkt hiervan kun je forceren dat de thumbnails op een ander formaat geladen worden. Bijvoorbeeld 300 x 300 pixels of 500 x 500 pixels.

Let wel op dat het thema deze afmetingen ook daadwerkelijk aanmaakt. Je kunt dit snel controleren door naar de uploads folder te gaan en te bekijken welke thumbnail afmetingen je ziet staan. Uiteraard kun je ook een custom formaat inladen als je dit wilt, dit moet je via je WordPress thema inregelen.

Code voor gallery thumbnail aanpassen

Als je deze code toevoegt in de functions.php van je thema of in de CodeSnippets plugin worden direct de nieuwe formaten ingeladen.

// change gallery thumbnail size
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
    return array(
        'width' => 300,
        'height' => 300,
        'crop' => 0,
    );
} );

WooCommerce variabel product

Voordat je een standaard variatie kunt instellen, moet je zorgen dat je product als een variabel product is ingesteld met alle benodigde attributen en variaties. Voorbeeld: als je T-shirts verkoopt, kun je kleuren (rood, blauw, groen) en maten (S, M, L) als attributen hebben.

Standaard variatie variabel product instellen

Als je in jouw WooCommerce webshop een standaard variatie in wilt stellen bij een product heb je hier geen extra WordPress plugins voor nodig. Je gaat het product bewerken, gaat naar variaties en kiest een standaard formulier optie.

Waarom een standaard variatie?

Het instellen van een standaard variatie kan het aankoopproces voor klanten van jouw webshop versnellen. Denk aan een populaire variatie of een gepromote producut variant. Gebruikers hebben minder klikken nodig voordat het product in de winkelmand ligt wat de conversie kan verbeteren.

GeneratePress winkelmand icoon

Wil je de standaard winkelmand icoon die het GeneratePress thema gebruikt vervangen voor je eigen SVG? Dan kun je hiervoor deze code gebruiken. Plaats de code in je functions.php van het child-theme en pas de SVG aan naar wens.


// change cart icon
add_filter( 'generate_svg_icon', function( $output, $icon ) {
if ( 'shopping-cart' === $icon ) {
$svg = '';

return sprintf(
‘
%2$s
‘,
$icon,
$svg
);
}

return $output;
}, 15, 2 );

Het originele topic vind je hier.

De WordPress basis biedt al enkele jaren een basis Resource Hints API. Deze API kan worden gebruikt om bepaalde bronnen die geladen worden op je WordPress website te prefetchen of prerenderen. Hoewel prefetch nuttig kan zijn voor bijvoorbeeld scripts van derden, gaat prerender nog verder door de bron te verwerken en alvast rendering buiten beeld uit te voeren.

WordPress Performance Team

WordPress heeft afgelopen jaren een speciaal WordPress Performance Team opgericht waarbij de nadruk ligt op het optimaliseren van de snelheid van WordPress. Eén van de meest gehoorde nadelen van WordPress is de snelheid. Niet geheel terecht omdat het afhankelijk is van veel factoren zoals bijvoorbeeld hosting en aantal plugins. En het WordPress thema niet te vergeten!

Speculative Loading plugin

Het WordPress Performance team heeft samen met specialisten van Google een plugin ontwikkelt die gebruik maakt van de Resource Hints API. In de basis betekent dit dat een webpagina die achter een link zit alvast ingeladen wordt inclusief scripts voordat iemand op de hyperlink klikt. Je kunt je voorstellen dat het daardoor lijkt alsof de website instant laadt bij het klikken op een link.

De plugin is gratis te downloaden vanuit de WordPress Repository. Meer uitleg over deze snelheids ontwikkeling vind je bij WordPress zelf en ook Kinsta heeft een artikel over Speculative Loading in WordPress geschreven.

Na installatie van de plugin hoef je in principe niets in te stellen. Je vind eventuele extra opties onder de Lezen instellingen van de website.

Speculative Loading

Hoe zet je een WordPress pagina op privé?

Soms wil je misschien een pagina op je WordPress website privé maken, zodat alleen bepaalde mensen deze kunnen bekijken. Dit kan handig zijn voor pagina’s met gevoelige informatie of voor inhoud die nog in ontwikkeling is en nog niet klaar is om publiekelijk getoond te worden.

WordPress maakt het eenvoudig om elke pagina of bericht privé te maken met slechts een paar klikken.

Pagina op privé te zetten in WordPress

Hieronder volgt een stapsgewijze handleiding om een WordPress pagina op privé te zetten:

1. Log in op je WordPress dashboard: Begin door in te loggen op je WordPress dashboard met je gebruikersnaam en wachtwoord.
2. Navigeer naar de pagina of het bericht: Ga naar ‘Pagina’s’ of ‘Berichten‘ in het linkermenu van je dashboard. Zoek de pagina of het bericht dat je privé wilt maken en klik op de titel om het te bewerken.
3. Zoek de zichtbaarheidsopties: In de documentinstellingen aan de rechterkant van de editor, vind je de ‘Publiceren’ box. Klik hier op ‘Bewerken’ naast ‘Zichtbaarheid’, die standaard ingesteld staat op ‘Openbaar’.
4. Verander de zichtbaarheid: In het dropdownmenu dat verschijnt, heb je verschillende opties: ‘Openbaar’, ‘Privé’, en ‘Wachtwoord beveiligd’. Kies ‘Privé’.
5. Update je pagina: Nadat je de zichtbaarheid op ‘Privé’ hebt gezet, klik je op ‘Ok’ om te bevestigen en vervolgens op ‘Bijwerken’ om de wijzigingen op te slaan.

Wanneer een pagina als privé is ingesteld, kan deze alleen worden bekeken door ingelogde gebruikers met ten minste de gebruikersrol van editor of beheerder op je website. Bezoekers die niet zijn ingelogd of die niet de vereiste gebruikersrechten hebben, zullen de pagina niet kunnen zien of toegang hebben tot de inhoud.

Alternatieven

Als alternatief kun je ervoor kiezen om je pagina ‘Wachtwoord beveiligd’ te maken in plaats van privé. Met deze optie kun je een wachtwoord instellen op de pagina. Bezoekers die de pagina willen bekijken, moeten dit wachtwoord invoeren om toegang te krijgen tot de inhoud.