La gestion des cookies est un enjeu majeur pour tout site WordPress, tant sur le plan juridique que pour l’expérience utilisateur. Depuis l’entrée en vigueur du RGPD (Règlement Général sur la Protection des Données), les sites doivent informer clairement les visiteurs sur l’utilisation des cookies et obtenir leur consentement. Pourtant, beaucoup de propriétaires de sites hésitent à installer un plugin supplémentaire, par crainte d’alourdir leur site ou de complexifier la maintenance.
Heureusement, il est tout à fait possible d’afficher un avis de cookies sur WordPress sans recourir à un plugin. Cette solution manuelle offre plusieurs avantages : pas de dépendance à un tiers, un contrôle total sur le design et le fonctionnement, et une meilleure optimisation des performances. Dans ce guide, nous allons explorer les méthodes les plus efficaces pour implémenter un bandeau de cookies conforme, en utilisant uniquement les fonctionnalités natives de WordPress et quelques lignes de code PHP.
Pourquoi afficher un avis de cookies sur WordPress ?
Les obligations légales liées aux cookies
Le RGPD impose aux sites web de recueillir le consentement explicite des utilisateurs avant de déposer des cookies non essentiels. Cela inclut les cookies de suivi (Google Analytics, Facebook Pixel), les cookies publicitaires ou ceux utilisés pour personnaliser l’expérience utilisateur. Un site qui ne respecte pas ces règles s’expose à des sanctions pouvant atteindre 4% du chiffre d’affaires mondial, comme l’a rappelé la CNIL en France.
En France, la loi impose également d’afficher un bandeau de cookies dès l’arrivée du visiteur, avec des options claires pour accepter, refuser ou paramétrer les cookies. Ce bandeau doit être visible sans nécessiter de défilement et ne doit pas perturber la navigation. Un avis de cookies bien conçu améliore donc la crédibilité de votre site tout en vous protégeant juridiquement.
Les bénéfices d’une solution sans plugin
Opter pour une solution manuelle présente plusieurs atouts par rapport à l’utilisation d’un plugin :
- Performance optimisée : Moins de requêtes HTTP et pas de code superflu, ce qui améliore le temps de chargement.
- Personnalisation totale : Vous contrôlez l’apparence, le positionnement et le comportement du bandeau.
- Sécurité renforcée : Pas de risque de faille liée à un plugin tiers.
- Conformité RGPD simplifiée : Vous pouvez adapter le script exactement à vos besoins spécifiques.
Cependant, cette approche nécessite une bonne compréhension des bases de WordPress et du PHP. Nous allons détailler les étapes pour une implémentation réussie.
Méthode 1 : Utiliser les fonctions natives de WordPress
Créer un bandeau de cookies avec le Customizer
WordPress propose un outil intégré, le Customizer, qui permet de modifier certains aspects du thème sans toucher au code. Bien qu’il ne gère pas directement les cookies, il peut servir de base pour afficher un message personnalisé.
Voici comment procéder :
- Accédez à Apparence > Personnaliser dans votre tableau de bord WordPress.
- Cliquez sur CSS additionnel (ou « Additional CSS » selon votre thème).
- Ajoutez le code CSS suivant pour créer un bandeau fixe en bas de page :
#cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: #333; color: #fff; padding: 15px; z-index: 9999; text-align: center; } #cookie-banner p { margin: 0; font-size: 14px; }
#cookie-banner a { color: #4CAF50; text-decoration: underline; }
Ce code crée un bandeau simple avec un texte et un lien vers votre politique de confidentialité. Pour l’afficher, vous devrez ajouter un peu de HTML dans le fichier footer.php de votre thème enfant.
Ajouter le HTML dans footer.php
Pour intégrer le bandeau, modifiez le fichier footer.php de votre thème enfant (ne modifiez jamais les fichiers du thème parent directement) :
<div id="cookie-banner"> <p>Nous utilisons des cookies pour améliorer votre expérience. En continuant à naviguer, vous acceptez leur utilisation. <a href="/politique-de-confidentialite/">En savoir plus</a></p> <button id="accept-cookies">Accepter</button> <button id="reject-cookies">Refuser</button> </div>Ce code affiche un bandeau avec deux boutons : un pour accepter les cookies et un pour les refuser. Pour le rendre fonctionnel, nous allons ajouter du JavaScript.
Ajouter le JavaScript pour gérer le consentement
Créez un fichier nommé cookie-banner.js dans le dossier /js/ de votre thème enfant. Ajoutez-y ce code :
document.addEventListener('DOMContentLoaded', function() { const cookieBanner = document.getElementById('cookie-banner'); const acceptBtn = document.getElementById('accept-cookies'); const rejectBtn = document.getElementById('reject-cookies'); // Vérifier si les cookies ont déjà été acceptés if (localStorage.getItem('cookies_accepted') === 'true') { cookieBanner.style.display = 'none'; }
// Gérer l'acceptation des cookies acceptBtn.addEventListener('click', function() { localStorage.setItem('cookies_accepted', 'true'); cookieBanner.style.display = 'none'; // Ici, vous pouvez ajouter du code pour activer les scripts de suivi });
// Gérer le refus des cookies rejectBtn.addEventListener('click', function() { localStorage.setItem('cookies_accepted', 'false'); cookieBanner.style.display = 'none'; // Désactiver les scripts de suivi si nécessaire }); });
Pour que ce script soit chargé, ajoutez cette ligne dans le fichier functions.php de votre thème enfant :
function enqueue_cookie_banner_script() { wp_enqueue_script( 'cookie-banner', get_stylesheet_directory_uri() . '/js/cookie-banner.js', array(), '1.0', true ); } add_action('wp_enqueue_scripts', 'enqueue_cookie_banner_script');Cette méthode est simple et efficace, mais elle nécessite que vous gériez manuellement l’activation des scripts de suivi (comme Google Analytics) en fonction du consentement de l’utilisateur.
Méthode 2 : Utiliser un snippet PHP pour une solution plus avancée
Créer une fonction personnalisée dans functions.php
Pour une solution plus robuste, vous pouvez créer une fonction PHP qui gère à la fois l’affichage du bandeau et le stockage du consentement. Cette méthode est idéale si vous souhaitez intégrer des fonctionnalités supplémentaires, comme la désactivation automatique des scripts de suivi.
Ajoutez ce code dans le fichier functions.php de votre thème enfant :
// Fonction pour afficher le bandeau de cookies function display_cookie_banner() { // Vérifier si le bandeau doit être affiché if (!isset($_COOKIE['cookies_accepted'])) { echo '<div id="cookie-banner">'; echo '<p>Ce site utilise des cookies pour vous garantir la meilleure expérience. <a href="/politique-de-confidentialite/">Politique de confidentialité</a></p>'; echo '<button id="accept-cookies" class="cookie-btn">Accepter</button>'; echo '<button id="reject-cookies" class="cookie-btn">Refuser</button>'; echo '</div>'; } } add_action('wp_footer', 'display_cookie_banner'); // Gérer l'acceptation/refus des cookies via AJAX function handle_cookie_consent() { if (isset($_POST['action']) && $_POST['action'] === 'set_cookie_consent') { $consent = sanitize_text_field($_POST['consent']); setcookie('cookies_accepted', $consent, time() + (30 * DAY_IN_SECONDS), '/'); wp_send_json_success(); } } add_action('wp_ajax_set_cookie_consent', 'handle_cookie_consent'); add_action('wp_ajax_nopriv_set_cookie_consent', 'handle_cookie_consent');
Ce code affiche le bandeau si le cookie cookies_accepted n’est pas défini. Il inclut également une fonction AJAX pour gérer le consentement de manière asynchrone.
Ajouter le JavaScript pour gérer les interactions
Créez ou modifiez le fichier cookie-banner.js pour inclure ce code :
document.addEventListener('DOMContentLoaded', function() { const acceptBtn = document.getElementById('accept-cookies'); const rejectBtn = document.getElementById('reject-cookies'); // Gérer l'acceptation des cookies acceptBtn.addEventListener('click', function() { sendCookieConsent('true'); });
// Gérer le refus des cookies rejectBtn.addEventListener('click', function() { sendCookieConsent('false'); });
function sendCookieConsent(consent) { const data = { action: 'set_cookie_consent', consent: consent };
fetch(ajaxurl, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: new URLSearchParams(data).toString() }) .then(response => response.json()) .then(data => { if (data.success) { document.getElementById('cookie-banner').style.display = 'none'; // Ici, vous pouvez activer les scripts de suivi } }); } });
Cette méthode est plus avancée et permet une gestion plus fine du consentement, notamment en utilisant des cookies persistants et des requêtes AJAX.
Méthode 3 : Désactiver les scripts de suivi conditionnellement
Intégrer Google Analytics de manière conditionnelle
Si votre site utilise Google Analytics ou d’autres scripts de suivi, vous devez les désactiver tant que l’utilisateur n’a pas donné son consentement. Voici comment procéder :
Dans votre fichier functions.php, ajoutez cette fonction pour charger Google Analytics uniquement si les cookies sont acceptés :
function load_google_analytics() { if (isset($_COOKIE['cookies_accepted']) && $_COOKIE['cookies_accepted'] === 'true') { echo '<script async src="https://www.googletagmanager.com/gtag/js?id=VOTRE_ID_GA"></script>'; echo '<script>'; echo 'window.dataLayer = window.dataLayer || [];'; echo 'function gtag(){dataLayer.push(arguments);}'; echo 'gtag('js', new Date());'; echo 'gtag('config', 'VOTRE_ID_GA');'; echo '</script>'; } } add_action('wp_footer', 'load_google_analytics');Remplacez VOTRE_ID_GA par l’identifiant de votre compte Google Analytics. Cette méthode garantit que le script ne se charge que si l’utilisateur a accepté les cookies.
Gérer d’autres scripts de suivi
Pour les autres scripts (comme Facebook Pixel ou Hotjar), utilisez la même logique. Par exemple, pour Facebook Pixel :
function load_facebook_pixel() { if (isset($_COOKIE['cookies_accepted']) && $_COOKIE['cookies_accepted'] === 'true') { echo '<script>'; echo '!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?'; echo 'n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;'; echo 'n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;'; echo 't.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,'; echo 'document,'script','https://connect.facebook.net/en_US/fbevents.js');'; echo 'fbq('init', 'VOTRE_ID_PIXEL');'; echo 'fbq('track', 'PageView');'; echo '</script>'; echo '<noscript><img height="1" width="1" src="https://www.facebook.com/tr?id=VOTRE_ID_PIXEL&ev=PageView&noscript=1"/></noscript>'; } } add_action('wp_footer', 'load_facebook_pixel');Cette approche vous permet de contrôler précisément quels scripts sont exécutés en fonction du consentement de l’utilisateur.
Personnalisation avancée du bandeau de cookies
Adapter le design avec CSS
Pour que votre bandeau de cookies s’intègre parfaitement à votre thème, vous pouvez personnaliser son apparence avec CSS. Voici un exemple de style moderne et épuré :
#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e0e0e0; padding: 20px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 9999; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; } #cookie-banner p { margin: 0; font-size: 14px; color: #555; flex: 1; min-width: 300px; }
.cookie-btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; }
#accept-cookies { background: #4CAF50; color: white; }
#accept-cookies:hover { background: #45a049; }
#reject-cookies { background: #f44336; color: white; }
#reject-cookies:hover { background: #d32f2f; }
@media (max-width: 600px) { #cookie-banner { flex-direction: column; text-align: center; }
#cookie-banner p { min-width: auto; } }
Ce style utilise Flexbox pour un affichage responsive et des couleurs contrastées pour une meilleure visibilité. Vous pouvez bien sûr l’adapter à votre charte graphique.
Ajouter une option de paramétrage des cookies
Pour offrir une expérience plus transparente, vous pouvez ajouter un bouton « Paramètres » qui redirige vers une page dédiée où l’utilisateur peut choisir quels cookies activer. Voici comment modifier votre bandeau pour inclure cette option :
<div id="cookie-banner"> <p>Nous utilisons des cookies pour améliorer votre expérience. Vous pouvez <a href="/parametres-cookies/">personnaliser vos préférences</a>.</p> <button id="accept-cookies" class="cookie-btn">Tout accepter</button> <button id="reject-cookies" class="cookie-btn">Refuser</button> <button id="settings-cookies" class="cookie-btn" style="