Masquer ou faire apparaître le contenu d’un bloc dans WordPress

Avoir le contrôle sur le contenu qui est vu et dans quelles conditions est un outil précieux pour tout développeur ou concepteur WordPress.

Heureusement, il existe de nombreuses extensions parmi lesquelles choisir dans l’écosystème WordPress et qui peuvent vous aider. Ici, nous discutons de quatre extensions qui vous permettent de :

• Masquer le contenu d’une ébauche sur une page en direct.
• Appliquer des conditions d’affichage aux groupes, aux en-têtes et aux pieds de page.
• Afficher le contenu en fonction de la date et de l’heure.
• Afficher des designs différents en fonction du type d’appareil.

Une différence clé entre les extensions que nous avons examinés est la facilité – ou la difficulté – avec laquelle il est possible d’effectuer ces actions.

Les extensions que nous avons sélectionnées se concentrent sur l’affichage ou le masquage du contenu dans les blocs. Nous ne couvrons pas les solutions plus larges comme les extensions d’adhésion qui restreignent l’accès aux pages, et nous ne discutons pas non plus de la façon de verrouiller, déverrouiller ou masquer les blocs eux-mêmes. Pour cela, consultez notre article Comment désactiver et verrouiller les blocs de Gutenberg.

Les quatre extensions devraient fonctionner avec des thèmes basés sur des blocs, hybrides ou classiques. Ils prennent également en charge les compositions, les compositions partiellement synchronisées et les compositions entièrement synchronisées réalisées avec des blocs.

Bien que le code personnalisé ne soit pas toujours la meilleure façon d’afficher ou de masquer les blocs, nous fournissons quelques extraits de code à titre d’exemple.

Plugins pour afficher ou masquer le contenu des blocs dans WordPress

Les extensions que nous examinons ont des capacités similaires mais sont mises en œuvre de différentes manières. La plupart incluent des réglages globaux dans Admin WP > Réglages, à l’exception des deux dernières extensions mentionnées dans la section Autres extensions, qui ne disposent pas de ces options.

Cependant, elles offrent tous des contrôles de visibilité par bloc dans le panneau Inspecteur (la colonne latérale droite) au sein de l’éditeur, que vous travailliez avec une page, un article, un type de publication personnalisé ou l’éditeur de site.

Block Visibility

Block Visibility est l’une des extensions les plus connues dans cet espace. Elle est disponible depuis les premiers jours de l’éditeur de blocs. Elle offre l’ensemble de fonctionnalités le plus complet avec une interface utilisateur (UI) intuitive, et elle est entièrement gratuite sans version premium.

Vous pouvez définir des contrôles de visibilité sur n’importe quel bloc en fonction de différentes conditions, individuellement ou en combinaison :

• Navigateur et appareil – Affiche ou masque un bloc en fonction du navigateur du visiteur (Chrome, Firefox, Safari, etc.) ou du type d’appareil (ordinateur de bureau, tablette, mobile).
• Cookie – Contrôle la visibilité en fonction de la présence ou non d’un cookie spécifique dans le navigateur de l’utilisateur, utile pour la personnalisation.
• Date et heure – Planifie le contenu pour qu’il soit visible pendant des heures spécifiques ou à certaines dates, par exemple l’affichage d’un message uniquement pendant les heures de bureau.
• Masquer le bloc – Un remplacement direct qui masque complètement un bloc, quelles que soient les autres conditions.
• Emplacement – Afficher ou masquer le contenu en fonction de l’emplacement géographique du visiteur (pays, région ou ville).
• Métadonnées – Contrôle la visibilité à l’aide de valeurs de métadonnées personnalisées, souvent utile pour le contenu dynamique dans les types de publication personnalisés.
• Chaîne de requête – Affiche ou masque les blocs en fonction des paramètres de l’URL (par exemple, n’affiche un bloc que si ?promo=true figure dans l’URL).
• Source de référence – Modifie la visibilité en fonction de l’origine du visiteur (comme masquer une offre spéciale si l’utilisateur est arrivé par Google).
• Taille de l’écran – Ajuste la visibilité en fonction de la largeur de l’écran, ce qui permet d’afficher un contenu différent pour les utilisateurs de mobiles, de tablettes ou d’ordinateurs de bureau.
• Chemin d’URL – Affiche ou masque les blocs en fonction de l’URL de la page, utile pour afficher le contenu uniquement sur des pages ou des sections spécifiques du site.
• Rôle de l’utilisateur – Restreint la visibilité en fonction du rôle de l’utilisateur connecté, par exemple en montrant un contenu exclusif aux administrateurs ou aux membres.

L’extension comprend également des fonctionnalités supplémentaires pour gérer la visibilité des blocs :

• Pre-sets de visibilité – Enregistre et applique des réglages de visibilité prédéfinis à plusieurs blocs.
• Copier et importer les réglages – Pour dupliquer facilement les réglages de visibilité sur différents blocs.

De plus, une bascule Masquer le bloc à tout le monde est disponible directement dans la barre d’outils du bloc, offrant un moyen rapide de masquer complètement n’importe quel bloc.

Voyons deux exemples courants d’utilisation de cette extension.

Date et heure

L’extension Block Visibility offre un contrôle total sur la programmation du contenu en fonction de la date et de l’heure. Vous pouvez définir des plages de temps spécifiques, des dates ou des combinaisons des deux.

Par exemple, nous voulons afficher un titre lorsque la boutique est ouverte et un autre lorsqu’elle est fermée :

• « Notre boutique est ouverte actuellement » doit être visible entre 8 heures et 17 heures.
• « Nous sommes fermés actuellement » doit être visible à tout autre moment.

Si c’est la première fois que vous le faîtes, cliquez sur l’icône plus (+) ou sur le menu d’options à trois points pour faire apparaître les options de contrôle de l’extension et sélectionnez Date et heure. Faîtes cela pour les deux blocs d’en-tête.

Appliquez la condition 8 h – 17 h à l’en-tête « Notre boutique est ouverte actuellement ».

Le titre « Notre boutique est fermée actuellement » nécessite deux ensembles de données pour combler le changement de jour à minuit.

La configuration obtenue affiche les titres tels qu’ils ont été définis dans la condition de visibilité.

Source de référence

Pour cet exemple, nous masquons un bouton si la source de référence contient une partie quelconque d’une URL prescrite. Nous aurions également pu choisir d’afficher le bouton si la source de référence contient une partie quelconque d’une URL prescrite.

Enfin, dans Réglages > Visibilité du bloc, vous trouverez trois sections principales :

• Réglages généraux
• Contrôles de visibilité
• Gestionnaire de blocs

Pour une expérience optimale, nous vous recommandons d’activer le mode contrôle total dans les réglages généraux. Cela garantit que les réglages de visibilité sont disponibles pour chaque bloc.

Certains blocs, comme le bloc Bouton, nécessitent ce réglage car les contrôles de visibilité de l’extension ne sont pas activés par défaut dans le panneau Inspecteur.

Content Control

À ne pas confondre avec l’extension Restrict Content, l’extension Content Control propose deux conditions pour masquer ou afficher du contenu.

• Règles de l’appareil – Contrôle la visibilité du bloc en fonction du type d’appareil (ordinateur de bureau, tablette ou mobile).
• Règles d’utilisateur – Affiche un bloc en fonction des rôles des utilisateurs, qui peuvent être définis pour les utilisateurs connectés, les utilisateurs déconnectés, tous les rôles, les rôles spécifiques ou les rôles exclus.

Ces règles peuvent être utilisées séparément ou combinées pour créer des conditions de visibilité flexibles. Par exemple, nous utilisons les règles relatives aux appareils pour afficher une image optimisée pour différentes tailles d’écran. L’image la plus grande est définie pour apparaître uniquement sur les ordinateurs de bureau.

• A : Dans l’éditeur de pages, les vues Mobile et Tablette sont désactivées.
• B : Sur la page d’accueil, l’image est correctement dimensionnée pour les ordinateurs de bureau.

De même, l’image optimisée pour les mobiles est définie pour apparaître uniquement sur les tablettes et les appareils mobiles.

• A : Dans l’éditeur de pages, la vue Ordinateur est désactivée.
• B : Sur l’interface publique, l’image est affichée pour les tablettes et les appareils mobiles.

Cette configuration garantit que les utilisateurs voient la taille d’image la plus appropriée à leur appareil, ce qui améliore les performances et l’expérience utilisateur.

En outre, chaque bloc comprend également quatre réglages optionnels, accessibles via le menu d’options à trois points :

• Copier – Copie les réglages du bloc.
• Coller – Applique les réglages copiés à un autre bloc.
• Restaurer la valeur par défaut – Réinitialise toutes les conditions de visibilité du bloc.
• Désactiver les règles de l’appareil / Désactiver les règles de l’utilisateur – Désactive temporairement les conditions de visibilité sans les supprimer.

Nous vous recommandons vivement d’utiliser les options Désactiver les règles d’appareil ou Désactiver les règles d’utilisateur lorsque vous testez l’extension. Cela facilite la réinitialisation et l’ajustement des réglages de visibilité si nécessaire.

Dans Admin WP > Réglages, vous trouverez plusieurs réglages globaux pour l’extension, comme la définition des points de rupture. Voici les valeurs par défaut pour les trois appareils.

Vous pouvez également désactiver l’extension pour n’importe quel bloc dans ces réglages. La version premium de cette extension comprend ces fonctionnalités et bien d’autres encore :

• Planification des blocs – Définis des conditions de visibilité basées sur le temps.
• Règles WooCommerce – Contrôle la visibilité des blocs en fonction des réglages de WooCommerce.
• Règles Easy Digital Downloads – Restreindre le contenu pour les clients des produits numériques.
• Règles booléennes – Utilise des conditions logiques pour la visibilité des blocs.
• Moteur de règles pour les blocs – Créer des conditions de visibilité personnalisées avec une plus grande flexibilité.

Autres plugins

En plus des options les plus populaires, il existe deux extensions moins connues avec moins d’installations actives qui offrent également des contrôles de visibilité des blocs :

Conditional Blocks – Advanced Content Visibility.

Cette extension Conditional Blocks vous permet de contrôler la visibilité des blocs WordPress à l’aide d’une logique avancée, le tout dans une interface modale simple. Vous pouvez définir des conditions pour déterminer quand et où un bloc doit être visible.

La version gratuite de Conditional Blocks comprend des contrôles de visibilité de base, tels que :

• Verrouiller le bloc pour tout le monde – Masque complètement un bloc.
• Visibilité réactive – Affiche ou masque les blocs en fonction du type d’appareil (mobile, tablette ou ordinateur de bureau).
• Conditions de statut de l’utilisateur – L’option Utilisateur connecté affiche les blocs uniquement pour les utilisateurs connectés, tandis que l’option Utilisateur déconnecté affiche les blocs uniquement pour les utilisateurs déconnectés.
• Logique des conditions ET/OU – Combine plusieurs règles pour créer des conditions de visibilité complexes.

La version Pro élargit les fonctionnalités grâce à des fonctions supplémentaires, notamment :

• Gestionnaire de pré-réglages – Sauvegarde des groupes de règles et les applique à plusieurs blocs sur votre site pour une gestion efficace.
• Points de rupture avancés – Définis des tailles d’écran personnalisées pour différents appareils.
• Contrôle de la géolocalisation – Affiche ou masque les blocs en fonction de l’emplacement de l’utilisateur (nécessite une clé API).
• Réglages de la barre d’outils – Gère les conditions de visibilité directement à partir de la barre d’outils des blocs.
• Visibilité basée sur le rôle de l’utilisateur – Restreint les blocs en fonction des rôles de l’utilisateur (tels que les administrateurs, les abonnés, les clients).
• Options de planification – Régler les blocs pour qu’ils n’apparaissent que dans des plages de dates ou à des heures spécifiques.
• Intégrations WooCommerce et adhésion – Contrôler la visibilité en fonction du contenu du panier, de l’adhésion de l’utilisateur, et plus encore.

Pour ceux qui ont besoin d’une plus grande flexibilité et d’une logique conditionnelle avancée, la version Pro fournit une boîte à outils complète pour gérer la visibilité du contenu à l’échelle.

Wicked Block Conditions

L’extension Wicked Block Conditions est une extension gratuite qui vous permet de masquer ou d’afficher des blocs en fonction de différents critères :

• Statut de connexion de l’utilisateur – Afficher ou masquer les blocs selon qu’un utilisateur est connecté ou non.
• Rôle de l’utilisateur – Restreindre la visibilité en fonction des rôles de l’utilisateur.
• Date et heure – Planifie l’apparition ou la disparition du contenu à des heures précises.
• Catégories ou étiquettes de publications – Affiche le contenu en fonction de la catégorie ou de l’étiquette attribuée.
• Statut de publication – Contrôler la visibilité en fonction du fait qu’une publication est publiée, en brouillon, en attente, etc.
• Réglage de chaîne de requête – Ajuste la visibilité en fonction des valeurs contenues dans l’URL.
• Fonction PHP personnalisée – Exécute une logique personnalisée pour un contrôle avancé de la visibilité.

La possibilité d’utiliser des fonctions PHP personnalisées rend cette extension particulièrement utile pour les développeurs qui souhaitent ajouter leur propre logique directement dans l’interface utilisateur.

Code personnalisé pour afficher ou masquer le contenu des blocs

Si votre cas d’utilisation est simple et que vous préférez ne charger que ce qui est nécessaire, vous pouvez utiliser un code personnalisé au lieu d’une extension. Vous pouvez le faire en codant votre propre extension ou en ajoutant des fonctions directement dans votre fichier functions.php.

Vous trouverez ci-dessous trois exemples basés sur PHP, mais si les performances sont une priorité, JavaScript pourrait être un meilleur choix.

Masquage du contenu en fonction du statut de connexion de l’utilisateur

L’exemple suivant masque tous les éléments de paragraphe (<p>) lorsqu’un utilisateur est connecté :

add_action( 'wp_head', 'kinsta_toggle_paragraphs_visibility' );

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

La fonction vérifie si un utilisateur est connecté à l’aide de is_user_logged_in(). Si la condition est vraie, elle injecte du CSS dans la section <head>, masquant tous les éléments <p> en utilisant display: none;. Bien que le balisage reste dans la source de la page, il n’est pas visible pour les utilisateurs.

Vous pouvez modifier ce comportement en remplaçant is_user_logged_in() par :

• !is_user_logged_in() – Masquer le contenu lorsque l’utilisateur est déconnecté.
• is_user_logged_out() – Une fonction alternative pour détecter les utilisateurs déconnectés.

• !is_user_logged_out() – Une autre façon de vérifier si l’utilisateur est connecté.

Masquage du contenu en fonction de la géolocalisation

Supposons que vous souhaitiez masquer du contenu pour les utilisateurs d’un lieu donné. Il n’y a pas de limite à ce que vous pouvez montrer ou masquer, mais ici, nous avons adopté une approche générale et caché toutes les images des utilisateurs basés aux États-Unis.

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

Remarque :

• $_SERVER['REMOTE_ADDR'] L’API n’est pas toujours fiable et peut renvoyer des adresses IP incorrectes.
• Appeler l’API à chaque chargement de page peut avoir un impact sur les performances. Une meilleure approche consisterait à mettre la réponse en cache en utilisant un transient WordPress pour stocker temporairement les données.

Masquer une image mise en avant par catégorie

Aucune des extensions que nous avons examinées ne permettait d’afficher ou de masquer les titres des pages ou les images mises en avant, car ce ne sont pas des blocs. Ici, nous masquons l’image mise en avant pour tous les articles dont la catégorie est « 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"
}

Ce filtre vérifie si l’article appartient à la catégorie Books à l’aide de has_category(). Si la condition est true, il supprime l’image mise en avant en renvoyant une chaîne vide. Dans le cas contraire, il conserve l’image mise en avant inchangée.

Tester votre implémentation

Avant de déployer l’extension ou le code personnalisé que vous avez choisi, nous vous recommandons de procéder à des tests approfondis afin d’éviter les problèmes involontaires, tels que la restriction du contenu par rapport au public visé. Voici quelques étapes clés des tests :

• S’assurer de la compatibilité – Vérifiez que l’extension ou le code personnalisé fonctionne de façon transparente, en particulier avec les extensions de blocage tierces.
• Examiner la sortie du code source – Certaines méthodes masquent le contenu à l’aide de CSS, tandis que d’autres le suppriment entièrement du balisage. Considérez l’impact de chaque approche sur le référencement avant de prendre une décision.
• Utiliser un environnement de staging – Kinsta fournit des environnements WordPress de staging pour tous les comptes, ce qui vous permet de tester les changements en toute sécurité avant de les appliquer à un site en direct.

Résumé

Le contrôle de la visibilité du contenu est un outil essentiel pour la gestion d’un site WordPress. L’approche que vous choisissez – qu’il s’agisse d’une extension prête à l’emploi ou d’un code personnalisé – dépend de vos besoins spécifiques et de votre expertise technique.

Si vous voulez un hébergeur qui facilite la prise en charge du développement, le test des extensions et la sécurisation de votre site, essayez Kinsta.

Les failles de sécurité peuvent être un réel problème, mais avec Kinsta, vous bénéficiez d’une analyse automatique des logiciels malveillants toutes les trois minutes, de pare-feux de niveau professionnel et d’une plateforme optimisée pour la vitesse et la fiabilité. Commencez dès aujourd’hui avec 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.