Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Mise en Oeuvre de la loi Européenne sur les Cookies sur Votre Site WordPress

by
Difficulty:IntermediateLength:MediumLanguages:

French (Français) translation by Christophe Thomas (you can also view the original English article)

Si vous vivez en Europe, vous avez probablement entendu parler de la loi sur les cookies. La loi exacte varie d'un pays à l'autre et certaines lignes directrices sont peu claires sur la façon de les mettre en oeuvre.

Cet article n'est pas là pour discuter cette loi, mais pour vous montrer une méthode de création d'un plugin simple permettant de mettre en oeuvre la loi sur les cookies.

Le code de ce plugin est simple et pourrait directement aller dans le fichier functions.php de votre thème, mais je pense que la meilleure implémentation sera sous la forme d'un plugin, puisque ce n'est pas le genre de fonctionnalité que vous souhaitez perdre en changeant de thème.

Les Fonctionnalités

La mise en oeuvre va être aussi simple que possible. Nous obtiendrons une barre en haut de l'écran qui affiche un message et un bouton pour faire disparaitre ce message, ainsi qu'un lien pour en savoir plus sur les cookies utilisés par le site. Certaines implémentations vont plus loin en proposant un bouton 'refuser', mais nous n'irons pas jusque là. 

Il y a de nombreuses implémentations de cette fonctionnalité. Ma préférée est celle utilisée par Google:

Le plugin simple que nous allons créer dans ce tutoriel pourra servir de base à un développeur sur des projets, mais aura besoin d'un peu plus de travail si vous voulez en faire la solution universelle pour le grand public.

Les Outils

Nous allons utiliser jQuery, PHP, HTML, et CSS pour ce plugin - Démarrons sans plus attendre.

Pour commencer nous devons créer un répertoire - appelons-le cookie-pop - et dans ce répertoire nous avons besoin d'un fichier php que nous appellerons cookie-pop.php.

La première chose que nous devons faire dans notre fichier PHP est d'entrer les informations d'en-tête standard comme indiqué dans le Codex WordPress:

Jusqu'ici,tout va bien. Nous allons laisser jQuery faire le gros du travail ici, donc la quantité de php que nous utiliserons sera minimale. Nous reviendrons à PHP plus tard dans l'article.

Le Javascript

A présent, créons des dossiers pour notre Javascript et CSS. Ce n'est pas indispensable, mais cela permet de mieux organiser les choses et de les rendre plus claires, ce qui n'est jamais une mauvaise chose. Nous les appellerons js et css.

Afin de savoir si l'utilisateur a accepté les cookies, nous allons placer un cookie pour éviter que le message n'apparaisse à chaque visite du site. Pour cela, nous allons utiliser un plugin jQuery très populaire. Récupérez le plugin depuis GitHub et déposez le fichier jquery.cookie.js  dans votre répertoire js. Nous voulons également un fichier vierge pour y ajouter notre code jQuery. Pour cela créez un nouveau fichier appelé cookie-pop.js dans le répertoire js .

Vous remarquerez que j'ai utilisé la version Javascript non minifiée ici - c'est toujours une bonne idée d'inclure une version minifiée de votre javascript à côté de la version originale, en particulier si vous souhaitez rendre disponible ce plugin publiquement. 

Minification et concaténation sont des sujets abordés dans d'autres articles, mais pour ceux qui sont intéressés, vous pouvez consulter  CodeKit, Grunt et Gulp.  Pour en savoir plus sur la minification, vous pouvez lire les tutoriels Tuts+ suivants:

Maintenant ouvrez votre fichier vierge appelé cookie-pop.js et ajoutez-y le code suivant:


Cette méthode jQuery doit être exécutée dans la fonction document.ready. Utiliser jQuery dans WordPress diffère légèrement d'une utilisation de la librairie seule.

 Par défaut, WordPress utilise jQuery en mode compatibilité, ce qui signifie qu'au lieu d'utiliser le symbole $, vous devez saisir jQuery. Heureusement il y a quelques façons de contourner ce problème - dans l'exemple ci-dessus, nous avons passé en argument le $ afin qu'on puisse l'utiliser dans nos fonctions.

Afin de bien comprendre ce qui se passe dans le code, nous allons décomposer un peu. La première chose que nous faisons ici est de vérifier s'il existe un cookie appelé cookie-pop et qu'il n'a pas de valeur set, en utilisant la méthode set en utilisant la méthode cookie (qui fait partie du script jQuery Cookie, plus d'explication ici)

Si le cookie est déjà défini, nous n'avons plus besoin de faire quoique ce soit, puisque l'utilisateur aura déjà vu le message et appuyé sur le bouton. S'il n'existe pas, alors nous ajouterons avant la balise <body> du document HTML une balise <div>qui aura une classe CSS .cookie-pop. Cette balise div que nous créerons aura une balise <button> identifié par l'ID #accept-cookie et un lien. Ce lien hypertexte devra être modifié pour pointer sur une page où vous expliquer l'utilisation des cookies sur votre site.

Nous avons ensuite une fonction click, pour utiliser la méthode Cookie pour créer un cookie lorsque l'élément #accept-cookie est cliqué. Cette fonction créera le cookie appelé  cookie-pop qui prendra la valeur set , qui expirera dans 365 jours et fonctionnera sur l'ensemble du site web. 

L'élément div avec la classe .cookie-pop est alors supprimé et disparaitra de l'écran. La prochaine fois que la page est chargée, l'élément div ayant la classe .cookie-pop n'apparaitra plus puisque le cookie existera.

Le CSS

Le CSS dépendra en définitive de votre thème, mais voici quelques bonnes pratiques à utiliser dans votre CSS. Comme vous pouvez le voir dans le Javascript, le popup <div> a une classe cookie-pop - Il est sage d'utiliser ce sélecteur en tant que parent de tous les éléments CSS que vous utiliserez dans ce popup. De cette manière, il y a moins de chance de rentrer en conflit avec d'autres styles utilisés par votre thème ou votre plugin.

Voici le CSS que j'ai utilisé avec le thème WordPress 'twenty-thirteen':

J'ai choisi de fixer la position du message présenté, afin qu'il reste présent lorsque l'utilisateur fait défiler la page. Alternativement vous pouvez utiliser le sélecteur absolute  pour qu'il reste en haut de la page et ne défile pas. J'ai utilisé un style très minimal ici puisque le thème a déjà un style par défaut pour définir la taille du texte, des boutons et des liens.

Le PHP

Le PHP est assez simple ici puisque le couple Javascript et CSS font pratiquement tout le travail. Tout ce qui reste à faire en php est d'insérer correctement notre Javascript et CSS. Pour cela nous allons écrire une fonction simple qui enregistre et ajoute notre Javascript et notre CSS

Le standard de code de WordPress dit:

Utilisez des lettres minuscules dans les variables, les noms de fonctions et d'actions (jamais de camelCase). Séparer les mots par l'intermédiaire d'underscore. Ne pas abréger le nom des variables si cela n'est pas nécessaire. Laisser le code sans ambiguïté et correctement documenté.

Nous appelons notre fonction cookie_pop_scripts_and_styles(). Ensuite, nous enregistrons et ajouterons les scripts dont nous avons besoin en utilisant la méthode wp_register_script() et la méthode wp_enqueue_script(). La méthode wp_register_script() enregistre notre script auprès de WordPress; sa localisation, ses dépendances, sa version et peut lui indiquer qu'il doit plutôt être inclus dans le pied de page, plutôt que dans l'en-tête. Alors que la méthode  wp_enqueue_script() charge le script enregistré avec wp_register_script() ou enregistre et charge le script elle-même.

Nous commençons par charger le code jQuery Cookie:

En français dans le texte, ce que nous faisons ici, c'est que nous demandons à WordPress que le script soit appelé "jquery-cookie", en utilisant la méthode plugins_url() nous expliquons à WordPress où trouver le script. Enfin nous expliquons à WordPress que ce script dépend de jQuery (voir ici) pour fonctionner et que la version du script est la 1.4.1. Il existe un dernier argument optionnel à positionner à true si vous voulez que le script soit chargé dans le pied de page, ce qui est une bonne pratique pour améliorer le temps de chargement.

Nous devons ensuite enregistrer notre script cookie-pop pratiquement de la même manière, à la différence que nous ne chargerons pas directement le script à cause des traductions, que nous allons voir un peu plus loin.

La différence majeure ici, est que le script a deux dépendances - jquery et notre script précédemment chargé, jquery-cookie, puisque nous avons besoin des deux pour que tout fonctionne correctement.

Ensuite, c'est une bonne idée d'internationaliser notre Javascript. Plus haut dans cet article, nous avons codé en dur quelques valeurs ce qui n'est pas bon pour l'internationalisatoin. Heureusement, WordPress a une super fonction pour cela appelée wp_localize_script. Cette fonction permet de passer des données depuis PHP à Javascript. 

Dans notre script, nous avons trois bouts de texte différents - Le message, le texte du bouton, et le lien. Regardons cela de plus près.

Cette fonction accepte trois paramètres. En premier, nous avons l'identifiant du script que nous souhaitons internationaliser - cookie-pop-script. Ensuite, nous avons le nom de l'object Javascript - cela peut être n'importe quoi, mais idéalement, il faut un lien avec votre script. Dans notre case nous avons utilisé cookie_pop_text. Le dernier paramètre est un tableau de valeurs que nous voulons utiliser dans notre Javascript - chaque entrée à son propre nom et le texte qui sera affiché.

A présent, nous devons retourner dans notre Javacscript et lui dire quelles valeurs utiliser. Ces valeurs sont accessibles de la manière suivante: cookie_pop_text.message affichera notre message. Continuons et faisons quelques changement dans notre Javascript; nous devons simplement changer une ligne:

La dernière chose que nous devons faire est de dire à WordPress d'utiliser ces fichiers - pour cela nous utilisons la méthode wp_enqueue_script():

Vous remarquerez que nous avons simplement ajoutés le script cookie-pop-script ici - c'est là que les déclarations de dépendance entrent en jeu quand nous enregistrons nos scripts. WordPress charge automatiquement toutes les dépendances.

Enfin, le CSS. Nous allons procéder de la même manière que pour le Javascript:

La dernière chose à faire est de mettre le tout ensemble dans la fonction cookie_pop_scripts_and_styles() et de l'accrocher à l'action wp_enqueue_scripts, de telle sorte que le package complet ressemble à ça:

Résumons

A présent, nous avons un plugin qui affiche un message simple et un bouton à cliquer pour faire disparaitre le message pendant un temps spécifié afin que le message n'apparaisse plus lors des prochaines visites. 

L'exemple que j'ai utilisé concerne la loi européenne sur les cookies, mais en réalité cela peut fonctionner pour afficher toute sorte de message sur votre site WordPress. 

L'implémentation reste très simple et nécessite quelques modifications manuelles pour le lien 'en savoir plus' qui peuvent être améliorées en utilisant l'API options de WordPress.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.