15mn de lecture
🍪 Naviguer dans le monde des sites web aujourd’hui, c’est aussi gérer les avis de cookies de manière efficace ! Saviez-vous qu’il est possible d’afficher un avis de cookies sur votre site WordPress sans utiliser de plugin ? 🚫 Dans cet article, nous allons explorer comment vous pouvez intégrer un avis de cookies personnalisé directement dans votre site WordPress. Que vous soyez soucieux de respecter les réglementations ou simplement à la recherche d’une solution plus légère, vous trouverez ici les étapes détaillées pour y parvenir. 🛠️🔍 Préparez-vous à améliorer l’expérience utilisateur sur votre site tout en restant conforme aux normes légales, le tout sans alourdir votre site avec des plugins supplémentaires !
Objectifs
Dans cet article, vous allez apprendre à afficher l’avis de cookies WordPress sans aucun plugin.
Prérequis
Pour suivre ce tutoriel, vous devez disposer du CMS WordPress installé en local ou sur votre hébergement web. Vous devez par ailleurs pouvoir vous connecter en tant qu’administrateur à son tableau de bord. De plus, il sera nécessaire d’intégrer du code à WordPress, vous devez donc maitriser les bases de ce langage.
Une solution clés en main pour créer un site WordPress ?
LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.
Le rôle des cookies est de stocker de façon temporaire des informations sur ceux qui visitent votre site web. Comme indiqué en introduction, la loi impose l’affichage de l’avis à tous les propriétaires de site web qui en utilisent afin que les visiteurs puissent accepter ou refuser facilement l’utilisation de leurs informations. En respectant cette loi, vous respectez également les règles d’utilisation du CMS WordPress.
Le fait d’afficher l’avis de cookies WordPress sans aucun plugin va vous permettre de respecter cette loi sans aucun souci. L’autre raison pour laquelle il est conseillé d’afficher l’avis de cookies WordPress sans aucun plugin est que cela se fait gratuitement. De plus, n’importe qui peut le faire.
L’utilisation du code est la seule option dont vous disposez pour afficher un avis de cookies WordPress sans utiliser un plugin spécifique.
Avant d’ajouter ces extraits de code, nous vous recommandons de sauvegarder votre site WordPress, car la moindre erreur peut provoquer une panne inattendue. Vous pouvez ainsi ajouter ces extraits de code dans un thème enfant si vous ne souhaitez pas les perdre lors de prochaines mises à jour.
Une fois que vous avez pris en compte ces exigences, accédez aux fichiers thème de votre site en utilisant un client FTP tel que FileZilla ou le gestionnaire de fichiers intégré dans votre compte d’hébergement LWS.
Le code peut être ajouté dans le fichier header.php ou footer.php pour que l’avis soit affiché sur toutes les pages de votre site WordPress.
Une fois que le fichier est ouvert, ajoutez l’extrait suivant :
<?php
if (!isset($_COOKIE['cookie_consent'])) {
echo '<div id="cookieConsentContainer" style="display: none;"> <p>This website uses cookies to ensure you get the best experience on our website.</p>
<button id="acceptCookies">Accept All</button> <button id="declineCookies">Decline All</button> </div>';
}
?>
Ce code doit être ajusté en fonction de paramètres spécifiques de votre site WordPress afin de rester conforme aux RGPD. Il affiche deux boutons permettant aux visiteurs d’accepter ou de refuser l’installation de traceurs et de cookies sur leurs appareils respectifs.
Ensuite, vous devez ajouter le code JavaScript suivant dans le fichier js de votre site WordPress pour rendre dynamique la bannière de l’avis de cookies :
document.getElementById('acceptCookies').onclick = function() {
setCookie('cookie_consent', 'accepted', 365);
document.getElementById('cookieConsentContainer').style.display = 'none';
};
document.getElementById('declineCookies').onclick = function() {
setCookie('cookie_consent', 'declined', 365);
document.getElementById('cookieConsentContainer').style.display = 'none';
};
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
window.onload = function() {
var consent = getCookie('cookie_consent');
if (!consent) {
document.getElementById('cookieConsentContainer').style.display = 'block';
}
};
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';'); f
or(var i=0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return
c.substring(nameEQ.length,c.length);
}
return null;
}
Ce code JavaScript comprend les fonctions pour définir un cookie (setCookie) et pour obtenir un cookie (getCookie).
Il inclut également les gestionnaires d’événements pour les boutons “Accepter tout” et “Refuser tout” qui définissent le cookie cookie_consent en fonction du choix de l’utilisateur.
La fonction window.onload vérifie si le consentement pour les cookies a déjà été défini et si ce n’est pas le cas, affiche le bandeau de consentement pour les cookies.
N’oubliez pas d’inclure ce code JavaScript dans votre fichier HTML ou PHP, idéalement juste avant la balise de fermeture </body>.
Si vous préférez, vous pouvez également le placer dans un fichier .js externe et inclure ce fichier dans votre page web.
Enfin, pour améliorer le style de votre bannière d’avis, ajoutez le code ci-dessous dans le fichier style de votre thème :
CSS Code
```css #cookieConsentContainer {
position: fixed;
bottom: 0;
background-color: #f4f4f4;
padding: 15px;
width: 100%;
text-align: center;
border-top: 1px solid #d3d3d3;
}
#cookieConsentContainer p {
margin: 0; font-size: 14px;
}
#cookieConsentContainer button {
margin-left: 10px;
padding: 5px 10px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#cookieConsentContainer button:hover {
background-color: #0056b3;
}
Pour utiliser ce code CSS, vous disposez de deux options :
- Directement dans le fichier HTML/PHP : vous pouvez placer le CSS dans des balises <style> dans l’en-tête de votre fichier HTML/PHP (<head></head>).
- Dans un fichier CSS séparé : si vous avez une feuille de style externe (style.css par exemple), vous pouvez y ajouter le CSS.
Assurez-vous ensuite que cette feuille de style est bien reliée à vos fichiers HTML/PHP.
Une fois que vous avez terminé, visitez votre site pour vous assurer que la bannière d’avis s’affiche correctement et que son design est visuellement attrayant pour vos visiteurs.
Besoin d’un hébergement WordPress rapide et de qualité ?
LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.
Conclusion
Dans cet article, nous avons appris à afficher l’avis de cookie WordPress sans aucun plugin. Cette méthode ne vous demande aucune ressource particulière, et elle est facile à mettre en œuvre. Elle est basée sur la manipulation de quelques lignes de codes, et de quelques actions à mener. Le fait d’afficher l’avis de cookies sur votre site web vous permet de respecter les règles de l’union européenne par rapport aux cookies, et aussi les règles de WordPress. 😉
Si vous avez des préoccupations ou des questions, n’hésitez pas à nous les faire connaître en commentaires.
Commentaires (2)