Souhaitez-vous que vos visiteurs puissent rouvrir leurs choix de cookies depuis n'importe où sur votre site ? WPConsent est livré avec un shortcode, une classe CSS et une méthode JavaScript qui ouvrent tous le même panneau de préférences.

Ce guide explore chaque voie, d'un bouton prêt à l'emploi que vous placez sur une page à une ligne de code de votre propre création. Tout ce dont vous avez besoin est que votre bannière de cookies soit déjà activée.

Cliquez ici pour accepter les cookies marketing et charger ce contenu

Table des matières

• Ajouter le bouton de préférences de cookies
• Changer le libellé du bouton
• Transformer un lien existant en déclencheur
• Ouvrir le panneau depuis votre propre code
• Questions fréquemment posées

Avant de commencer, assurez-vous que WPConsent est installé et activé sur votre site WordPress.

Le panneau accompagne votre bannière de cookies, alors gardez la bannière activée. WPConsent place les deux sur la page ensemble, et chaque voie ci-dessous ouvre le panneau qui est déjà là.

Ajouter le bouton de préférences de cookies

Pour commencer, nous allons placer un bouton prêt à l'emploi sur l'une de vos pages.

WPConsent enregistre un shortcode qui affiche un bouton de préférences de cookies partout où vous le placez. Le bouton arrive avec la classe que WPConsent surveille, il ouvre donc le panneau sans aucune configuration de sa part.

Dans la page ou l'article où le bouton doit se trouver, ajoutez un bloc Shortcode. Le shortcode lui-même va dans le champ du bloc :

[wpconsent_preferences_button]

Une fois la page publiée, le shortcode est remplacé par un bouton dans le style de votre propre thème.

Cliquer sur ce bouton ouvre le panneau des préférences par-dessus la page. WPConsent remplit le panneau à partir de la réponse enregistrée du visiteur, de sorte que les catégories qu'il a déjà autorisées sont activées lorsqu'il s'ouvre.

Notre guide sur le panneau des préférences couvre ce qu'un visiteur y fait.

Le libellé du bouton est à vous de changer, et c'est à cela que servent les attributs du shortcode.

Changer le libellé du bouton

Laissé à lui-même, le shortcode affiche « Cookie Preferences » sur le bouton. Deux attributs modifient ce libellé et ajoutent vos propres classes CSS.

Le libellé est la seule partie du bouton que le visiteur lit. Un libellé qui correspond au reste de votre page évite qu'il ait l'air ajouté à la hâte.

L'attribut text remplace le libellé :

[wpconsent_preferences_button text="Gérer les cookies"]

L'attribut class ajoute vos propres classes CSS à côté de celles de WPConsent, ce qui donne à votre feuille de style quelque chose à cibler :

[wpconsent_preferences_button text="Gérer les cookies" class="footer-cta"]

• text définit le libellé sur le bouton. S'il est omis, le bouton affiche « Cookie Preferences ». Un libellé comportant des espaces nécessite des guillemets.
• class ajoute des classes CSS au bouton, séparées par des espaces. S'il est omis, le bouton ne porte que les classes propres à WPConsent. WordPress nettoie chaque valeur, alors limitez-vous aux lettres, chiffres, tirets et underscores.

Pour un lien ou un bouton qui existe déjà sur votre site, une seule classe fait le même travail.

Transformer un lien existant en déclencheur

Un lien de pied de page, un élément de menu ou un bouton que vous avez déjà créé peut également ouvrir le panneau. WPConsent surveille les clics sur tout élément portant la classe wpconsent-open-preferences, donc l'ajout de cette classe est tout ce qu'il faut.

Dans un de vos liens, la classe se trouve dans la balise ouvrante :

<a href="#" class="wpconsent-open-preferences">Cookie Preferences</a>

Le lien ouvre alors le panneau au lieu de suivre sa propre adresse.

La classe fonctionne également sur un élément qui encapsule le lien, ce qui rend les éléments de menu et les blocs simples.

Un élément de menu WordPress conserve sa classe sur l'élément de liste autour du lien. Dans l'éditeur de blocs, le champ CSS additionnel (classe(s)) le place sur l'élément extérieur d'un bloc. Les deux ouvrent le panneau.

Rien d'autre dans le lien ne change. Il conserve le style de votre thème et le libellé que vous lui avez donné.

Pour un contrôle que d'autres codes dessinent sur la page, WPConsent a sa propre méthode.

Ouvrir le panneau depuis votre propre code

Certains contrôles sont créés par un autre plugin, ou dessinés par JavaScript après le chargement de la page. Pour ceux-là, WPConsent expose le panneau comme une méthode sur son objet front-end, WPConsent.showPreferences().

Appelée depuis un gestionnaire de clics, elle ouvre le panneau exactement comme le fait le bouton Préférences de la bannière :

document.getElementById('cookie-preferences-link').addEventListener('click', function (e) {
    e.preventDefault();
    WPConsent.showPreferences();
});

WPConsent charge son script dans le pied de page de votre page. La méthode appartient donc à un gestionnaire de clics, pas à du code qui s'exécute au chargement de la page. WPConsent.closePreferences() ferme à nouveau le panneau depuis le même endroit.

C'est tout ! Vous savez maintenant comment ouvrir le panneau des préférences WPConsent depuis un bouton de shortcode, depuis un de vos liens, et depuis votre propre JavaScript.

Ensuite, consultez notre guide sur le bouton de consentement flottant. Il place un contrôle permanent dans le coin de chaque page qui ouvre le même panneau.

Questions fréquemment posées

Ci-dessous, nous avons répondu à certaines des questions les plus fréquentes sur l'ouverture du panneau des préférences depuis un de vos liens.

Quelle méthode dois-je utiliser ?

Le shortcode est le plus rapide, car il imprime un bouton fonctionnel sans rien d'autre à configurer. La classe convient à un lien ou un élément de menu que vous avez déjà. La méthode est destinée aux contrôles que d'autres codes placent sur la page.

Où puis-je utiliser le shortcode ?

Partout où WordPress exécute des shortcodes. Cela couvre vos pages et articles, ainsi que toute zone de widget ou partie de modèle qui accepte un bloc Shortcode. Le bouton apparaît à la place du shortcode.

Consultez Comment ajouter un shortcode dans WordPress pour une présentation de chacun de ces endroits.

Puis-je ajouter la classe à un élément de menu de navigation ?

Oui, et c'est un endroit populaire pour cela. WordPress donne à chaque élément de menu un champ CSS Classes sur l'écran Apparence » Menus, et la classe ouvre le panneau à partir de là. Si ce champ n'apparaît pas, les Options de l'écran en haut de l'écran l'activent.

L'ouverture du panneau enregistre-t-elle le consentement ?

Non. L'ouverture du panneau montre seulement à un visiteur la réponse qu'il a donnée précédemment. Son choix est enregistré lorsqu'il utilise Accepter tout ou Enregistrer et fermer dans le panneau.

Mon lien fonctionnera-t-il sur chaque page ?

Cela fonctionne sur chaque page où WPConsent affiche la bannière. Les règles de masquage de bannière qui empêchent l'affichage de la bannière sur certaines pages, ou qui l'éloignent des utilisateurs connectés, empêchent également le panneau de s'afficher sur ces pages.

Notre guide sur les paramètres avancés couvre ces règles.

Puis-je utiliser le shortcode et le bouton flottant ensemble ?

Oui. Ce sont des paramètres distincts, et les deux ouvrent le même panneau. Une configuration courante consiste à garder le bouton flottant sur chaque page et à ajouter également un lien Préférences de cookies dans le pied de page.

Comment puis-je styliser le bouton ajouté par le shortcode ?

Le bouton du shortcode porte les classes wpconsent-open-preferences et button, que la plupart des thèmes stylisent déjà comme leurs propres boutons. Pour tout ce qui est plus spécifique, l'attribut class donne à votre feuille de style une classe propre à cibler.