Zo toon of verberg je de inhoud van blokken in WordPress

Controle hebben over welke inhoud wordt gezien en onder welke omstandigheden is een waardevol hulpmiddel voor elke WordPress ontwikkelaar of ontwerper.

Gelukkig zijn er veel plugins in het WordPress ecosysteem die je daarbij kunnen helpen. Hier bespreken we vier plugins waarmee je:

• Conceptuele content kan verbergen op een live pagina.
• Weergavevoorwaarden kan toepassen op groepen, headers en footers.
• Content kan tonen op basis van datum en tijd.
• Verschillende ontwerpen kan weergeven afhankelijk van het apparaattype.

Een belangrijk verschil tussen de plugins die we hebben bekeken is hoe gemakkelijk – of moeilijk – het is om deze acties uit te voeren.

Onze geselecteerde plugins richten zich op het tonen of verbergen van inhoud binnen blokken. We behandelen geen bredere oplossingen zoals lidmaatschapsplugins die de toegang tot pagina’s beperken, noch bespreken we hoe je blokken zelf kunt vergrendelen, ontgrendelen of verbergen. Zie daarvoor ons artikel Zo schakel je Gutenberg blokken uit en vergrendel je ze.

Alle vier de plugins zouden moeten werken met blok-, hybride of klassieke thema’s. Ze ondersteunen ook patterns, gedeeltelijk gesynchroniseerde patterns en volledig gesynchroniseerde patronen gemaakt met blokken.

Hoewel custom code niet altijd de beste manier is om blokken te tonen of te verbergen, geven we enkele codefragmenten als voorbeeld.

Plugins om inhoud van blokken te tonen of te verbergen in WordPress

De plugins die we onderzoeken hebben vergelijkbare mogelijkheden, maar zijn op verschillende manieren geïmplementeerd. De meeste bevatten globale instellingen in WP Admin > Settings, behalve de laatste twee plugins die worden genoemd in het gedeelte Other Plugins, die deze opties niet hebben.

Ze bieden echter allemaal per blok zichtbaarheid controles in het Inspector panel (de rechter zijbalk) binnen de editor, of je nu werkt met een pagina, bericht, custom berichttype of de Site Editor.

Block Visibility

Block Visibility is een van de bekendste plugins in deze niche. Hij is al beschikbaar sinds de begindagen van de Block Editor en biedt de meest uitgebreide functieset met een intuïtieve gebruikersinterface (UI) en is helemaal gratis zonder premium versie.

Je kunt zichtbaarheidscontroles instellen op elk blok op basis van verschillende voorwaarden, afzonderlijk of in combinatie:

• Browser & apparaat – Laat een blok zien of verberg het afhankelijk van de browser van de bezoeker (Chrome, Firefox, Safari, enz.) of het apparaattype (desktop, tablet, mobiel).
• Cookie – Controleer de zichtbaarheid op basis van of een specifieke cookie aanwezig is in de browser van de gebruiker, handig voor personalisatie.
• Datum & tijd – Plan inhoud zo dat deze zichtbaar is tijdens bepaalde uren of op bepaalde data, zoals het weergeven van een bericht alleen tijdens kantooruren.
• Blok verbergen – Een directe opheffing die een blok volledig verbergt, ongeacht andere voorwaarden.
• Locatie – Toon of verberg inhoud op basis van de geografische locatie van de bezoeker (land, regio of stad).
• Metadata – Bepaal de zichtbaarheid met behulp van aangepaste metadatawaarden, vaak handig voor dynamische inhoud in aangepaste posttypes.
• Querystring – Blokken weergeven of verbergen op basis van URL-parameters (zoals een blok alleen weergeven als ?promo=true in de URL staat).
• Verwijzingsbron – Wijzig de zichtbaarheid afhankelijk van waar de bezoeker vandaan kwam (zoals het verbergen van een speciale aanbieding als de gebruiker via Google binnenkwam).
• Schermgrootte – Pas de zichtbaarheid aan op basis van schermbreedte, zodat verschillende inhoud wordt weergegeven voor mobiele, tablet- of desktopgebruikers.
• URL-pad – Blokken tonen of verbergen op basis van de URL van de pagina, handig om inhoud alleen weer te geven op specifieke pagina’s of delen van de site.
• Gebruikersrol – Beperk de zichtbaarheid op basis van de rol van de ingelogde gebruiker, zoals het tonen van exclusieve inhoud aan admins of leden.

De plugin bevat ook extra features voor het beheren van de zichtbaarheid van blokken:

• Zichtbaarheid presets – Voorgedefinieerde zichtbaarheidsinstellingen opslaan en toepassen op meerdere blokken.
• Instellingen kopiëren en importeren – Zichtbaarheidsinstellingen eenvoudig dupliceren voor verschillende blokken.

Daarnaast is er een knop om blokken voor iedereen te verbergen direct beschikbaar in de werkbalk van de blokken, zodat je snel een blok volledig kunt verbergen.

Laten we eens kijken naar twee veelvoorkomende voorbeelden van hoe deze plugin kan worden gebruikt.

Datum & tijd

De Block Visibility plugin biedt volledige controle over het plannen van inhoud op basis van datum en tijd. Je kunt specifieke tijdbereiken, datums of combinaties van beide instellen.

We willen bijvoorbeeld een rubriek weergeven als de winkel open is en een andere als hij gesloten is:

• “Onze winkel is nu open” moet zichtbaar zijn tussen 8.00 en 17.00 uur.
• “We zijn nu gesloten” moet zichtbaar zijn op alle andere tijdstippen.

Als dit je eerste keer is, klik dan op het plus (+) icoon of het drie-puntige optiemenu om de besturingsopties van de plugin te openen en selecteer Date & Time. Doe dit voor beide koppen.

Pas de voorwaarde 8.00 – 17.00 uur toe op de rubriek “Onze winkel is nu open”.

Voor de kop “We zijn nu gesloten” zijn twee gegevenssets nodig om de wisseling van de dag om middernacht te overbruggen.

De resulterende opstelling geeft de koppen weer zoals ingesteld in de zichtbaarheidsvoorwaarde.

Verwijzingsbron

In dit voorbeeld verbergen we een knop als de verwijzingsbron een deel van een voorgeschreven URL bevat. We hadden er ook voor kunnen kiezen om de knop weer te geven als de verwijzing een deel van een voorgeschreven URL bevat.

Tot slot vind je in Settings > Block Visibility drie hoofdsecties:

• Algemene instellingen
• Zichtbaarheidscontroles
• Blomanager

Voor de beste ervaring raden we aan om Full Controle Mode in te schakelen bij General Settings. Dit zorgt ervoor dat de zichtbaarheidsinstellingen voor elk blok beschikbaar zijn.

Voor sommige blokken, zoals het Button blok, is deze instelling nodig omdat de zichtbaarheidscontroles van de plugin standaard niet zijn ingeschakeld in het Inspector-paneel.

Content Control

Niet te verwarren met de Restrict Content plugin. De Content Control plugin biedt twee voorwaarden voor het verbergen of tonen van inhoud.

• Apparaatregels – Regelt de zichtbaarheid van blokken op basis van het apparaattype (desktop, tablet of mobiel).
• Gebruikersregels – Toont een blok op basis van gebruikersrollen, die kunnen worden ingesteld voor ingelogde gebruikers, uitgelogde gebruikers, alle rollen, specifieke rollen of uitgesloten rollen.

Deze regels kunnen afzonderlijk worden gebruikt of gecombineerd om flexibele zichtbaarheidsvoorwaarden te maken. We gebruiken bijvoorbeeld de Apparaatregels om een afbeelding weer te geven die geoptimaliseerd is voor verschillende schermformaten. De grotere afbeelding is ingesteld om alleen op desktops te verschijnen.

• A: In de pagina-editor zijn de weergaven Mobile en Tablet uitgeschakeld.
• B: Op de voorkant heeft de afbeelding de juiste grootte voor desktops.

De voor mobiel geoptimaliseerde afbeelding is ook zo ingesteld dat deze alleen wordt weergegeven op tablets en mobiele apparaten.

• A: In de pagina-editor is de Desktop weergave uitgeschakeld.
• B: Op de voorkant wordt de afbeelding weergegeven voor tablets en mobiele apparaten.

Deze opzet zorgt ervoor dat gebruikers de meest geschikte afbeeldingsgrootte voor hun apparaat zien, waardoor de prestaties en gebruikerservaring verbeteren.

Daarnaast heeft elk blok ook vier optionele instellingen, die toegankelijk zijn via het menu met drie puntvormige opties:

• Copy– Kopieert de blokinstellingen.
• Paste– Past de gekopieerde instellingen toe op een ander blok.
• Restore Default – Zet alle zichtbaarheidsvoorwaarden voor het blok terug.
• Disable Device Rules / Disable User Rules – Schakelt de zichtbaarheidvoorwaarden tijdelijk uit zonder ze te verwijderen.

We raden sterk aan om de opties Disable Device Rules of Disable User Rules te gebruiken tijdens het testen van de plugin. Dit maakt het makkelijker om zichtbaarheidsinstellingen te resetten en aan te passen als dat nodig is.

Binnen WP Admin > Settings vind je verschillende globale instellingen voor de plugin, zoals het definiëren van de onderbrekingspunten. Hier zijn de standaardinstellingen voor de drie apparaten.

Je kunt de plugin ook uitschakelen voor elk blok binnen deze instellingen. De premium versie van deze plugin bevat deze en nog veel meer functies:

• Blokplanning – Stel op tijd gebaseerde zichtbaarheidsvoorwaarden in.
• WooCommerce regels – Bepaal de zichtbaarheid van blokken op basis van WooCommerce instellingen.
• Easy Digital Downloads regels – Beperk inhoud voor klanten van digitale producten.
• Booleaanse regels – Gebruik logische voorwaarden voor de zichtbaarheid van blokken.
• Rule engine voor blokken – Maak aangepaste zichtbaarheidsvoorwaarden met meer flexibiliteit.

Andere plugins

Naast de populairdere opties zijn er twee minder bekende plugins met minder actieve installaties die ook controle bieden over de zichtbaarheid van blokken:

Conditional Blocks – Advanced Content Visibility

Met deze Conditional Blocks plugin kun je de zichtbaarheid van WordPress blokken regelen met behulp van geavanceerde logica, allemaal binnen een eenvoudige modale interface. Je kunt voorwaarden instellen om te bepalen wanneer en waar een blok zichtbaar moet zijn.

De gratis versie van Conditional Blocks bevat basis zichtbaarheidscontroles, zoals:

• Blokkeer blok voor iedereen – Verbergt een blok volledig.
• Responsieve zichtbaarheid – Laat blokken zien of verberg ze op basis van het apparaattype (mobiel, tablet of desktop).
• Voorwaarden voor gebruikersstatus – De optie User Logged In geeft alleen blokken weer voor ingelogde gebruikers, terwijl de optie User Logged Out alleen blokken weergeeft voor uitgelogde gebruikers.
• AND/OR voorwaardelijke logica – Combineer meerdere regels om complexe zichtbaarheidsvoorwaarden te maken.

De Pro versie breidt de functionaliteit uit met extra features, waaronder:

• Preset Manager – Sla regelgroepen op en pas ze toe op meerdere blokken op je site voor efficiënt beheer.
• Geavanceerde breekpunten – Definieer aangepaste schermformaten voor verschillende apparaten.
• Geolocatiecontrole – Laat blokken zien of verberg ze op basis van de locatie van een gebruiker (API-sleutel vereist).
• Werkbalkinstellingen – Beheer de zichtbaarheid direct vanuit de blokkenwerkbalk.
• Op gebruikersrol gebaseerde zichtbaarheid – Beperk blokken op basis van gebruikersrollen (zoals admins, abonnees, klanten).
• Planningsopties – Stel in dat blokken alleen verschijnen binnen bepaalde datumbereiken of tijden.
• Integraties met WooCommerce en Lidmaatschap – Bepaal de zichtbaarheid op basis van de inhoud van de winkelwagen, lidmaatschappen van gebruikers en meer.

Voor degenen die meer flexibiliteit en geavanceerde voorwaardelijke logica nodig hebben, biedt de Pro-versie een complete toolkit om de zichtbaarheid van inhoud op grote schaal te beheren.

Wicked Block Conditions

De Wicked Block Conditions plugin is een gratis plugin waarmee je blokken kunt verbergen of tonen op basis van verschillende criteria:

• Inlogstatus gebruiker – Laat blokken zien of verberg ze afhankelijk van of een gebruiker is ingelogd.
• Gebruikersrol – Beperk de zichtbaarheid op basis van gebruikersrollen.
• Datum en tijd – Plan dat inhoud op bepaalde tijden verschijnt of verdwijnt.
• Postcategorieën of tags – Inhoud weergeven op basis van de toegewezen categorie of tag.
• Berichtstatus – Bepaal de zichtbaarheid op basis van of een post gepubliceerd, concept, in behandeling, enz. is.
• Querystring parameter – Pas de zichtbaarheid aan op basis van waarden in de URL.
• Custom PHP functie – Aangepaste logica uitvoeren voor geavanceerde zichtbaarheidscontrole.

De mogelijkheid om custom PHP functies te gebruiken maakt deze plugin bijzonder nuttig voor ontwikkelaars die hun eigen logica direct in de UI willen toevoegen.

Custom code om blokinhoud te tonen of te verbergen

Als je een eenvoudige use case hebt en liever alleen laadt wat nodig is, kun je custom code gebruiken in plaats van een plugin. Dit kun je doen door je eigen plugin te coderen of rechtstreeks functies toe te voegen aan je functions.php bestand.

Hieronder staan drie op PHP gebaseerde voorbeelden, maar als prestaties een prioriteit zijn, is JavaScript misschien een betere keuze.

Inhoud verbergen op basis van aanmeldstatus gebruiker

Het volgende voorbeeld verbergt alle alinea (<p>) elementen wanneer een gebruiker is ingelogd:

add_action( 'wp_head', 'kinsta_toggle_paragraphs_visibility' );

function kinsta_toggle_paragraphs_visibility() {
   if (is_user_logged_in() ) {
       echo 'p { display: none !important; }';
   }
}

De functie controleert of een gebruiker is ingelogd met is_user_logged_in(). Als de voorwaarde waar is, wordt CSS geïnjecteerd in de sectie <head> en worden alle elementen <p> verborgen met display: none;. De opmaak blijft in de paginabron staan, maar is niet zichtbaar voor gebruikers.

Je kunt dit gedrag wijzigen door is_user_logged_in() te vervangen door:

• !is_user_logged_in() – Inhoud verbergen wanneer de gebruiker is uitgelogd.
• is_user_logged_out() – Een alternatieve functie voor het detecteren van afgemelde gebruikers.

• !is_user_logged_out() – Een alternatieve manier om te controleren of de gebruiker is ingelogd.

Inhoud verbergen op basis van geolocatie

Stel dat je inhoud wilt verbergen voor gebruikers van een bepaalde locatie. Er is geen limiet aan wat je kunt tonen of verbergen, maar hier hebben we voor een algemene aanpak gekozen en alle afbeeldingen voor gebruikers uit de VS verborgen.

add_action('wp_head', 'kinsta_hide_images_for_us_visitors');

function kinsta_hide_images_for_us_visitors() {
   // Get visitor's IP address
   $user_ip = $_SERVER['REMOTE_ADDR'];
   $geo_api_url = "https://ipapi.co/{$user_ip}/json/";

   // Fetch geolocation data
   $response = wp_remote_get($geo_api_url);

   if ( is_wp_error($response) ) {
       return; // Exit if API request fails
   }

   $data = json_decode( wp_remote_retrieve_body($response) );

   // Check if the user is from the U.S.
   if ( isset($data->country_code) && $data->country_code === 'US' ) {
       echo 'h1, h2, h3, h4, h5, h6 { display: none !important; }';
   }
}

Opmerking:

• $_SERVER['REMOTE_ADDR'] De API is niet altijd betrouwbaar en kan onjuiste IP’s retourneren.
• Het aanroepen van de API bij elke paginalading kan de prestaties beïnvloeden. Een betere benadering zou zijn om het antwoord in de cache op te slaan met behulp van een WordPress transient om de gegevens tijdelijk op te slaan.

Een uitgelichte afbeelding verbergen per categorie

Geen van de plugins die we bekeken had een manier om paginatitels of uitgelichte afbeeldingen te tonen of te verbergen, omdat het geen blokken zijn. Hier verbergen we de uitgelichte afbeelding voor alle berichten met de categorie Books.

add_filter('post_thumbnail_html', 'kinsta_hide_featured_image_for_books_category', 10, 2);

function kinsta_hide_featured_image_for_books_category($html, $post_id) {
   // Check if the post belongs to the "Books" category
   if (has_category('books', $post_id)) {
       return ''; // Hide the featured image by returning an empty string
   }
   return $html; // Show the featured image if the category is not "Books"
}

Dit filter controleert met has_category() of het bericht tot de categorie Books behoort. Als de voorwaarde true is, wordt de uitgelichte afbeelding verwijderd door een lege string te retourneren. Anders blijft de afbeelding ongewijzigd.

Je implementatie testen

Voordat je de door jou gekozen plugin of custom  code implementeert, raden we aan deze grondig te testen om onbedoelde problemen te voorkomen, zoals het beperken van inhoud voor het beoogde publiek. Hier zijn enkele belangrijke teststappen:

• Zorg voor compatibiliteit – Controleer of de plugin of aangepaste code naadloos werkt, vooral met blokplugins van derden.
• Bekijk de uitvoer van de broncode – Sommige methoden verbergen inhoud met CSS, terwijl andere de inhoud helemaal uit de opmaak verwijderen. Overweeg hoe elke aanpak SEO beïnvloedt voordat je een beslissing neemt.
• Gebruik een testomgeving – Kinsta biedt WordPress testomgevingen gratis bij alle accounts, zodat je wijzigingen veilig kunt testen voordat je ze toepast op een live site.

Samenvatting

Het beheren van de zichtbaarheid van inhoud is een essentieel hulpmiddel voor het beheren van WordPress sites. De aanpak die je kiest – een kant-en-klare plugin of je eigen code – hangt af van je specifieke behoeften en technische expertise.

Als je een host wilt die het gemakkelijk maakt om met de ontwikkeling om te gaan, plugins te testen en je site veilig te houden, probeer dan Kinsta.

Kwetsbaarheden in de beveiliging kunnen een echte zorg zijn, maar met Kinsta krijg je elke drie minuten automatische scans op malware, firewalls op zakelijk niveau en een platform dat is geoptimaliseerd voor snelheid en betrouwbaarheid. Begin vandaag nog met Kinsta.

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.