Share
Si vous habitez en Europe, vous avez probablement entendu parler de la loi sur les cookies. La loi exacte change d'un pays à l'autre et certaines des lignes directrices ne sont pas claires quant aux moyens de la mettre en œuvre..
Cet article n'a pas pour objet de discuter ou de conseiller sur la loi, mais de vous montrer la méthode à suivre pour créer un plugin de loi de cookie simple..
Le code pour ce plugin simple pourrait aller dans votre thème functions.php fichier, mais je pense qu'il vaut mieux laisser un plugin car ce n'est pas le genre de fonctionnalité que vous voulez perdre entre des thèmes changeants.
L'implémentation sera aussi simple que possible. En haut de l'écran, une barre affiche un message, un bouton pour le supprimer et un lien pour en savoir plus sur les cookies utilisés par le site. Certaines implémentations vont jusqu’à avoir un bouton «refuser» pour les cookies, mais nous ne l’utiliserons pas..
Il existe de nombreuses implémentations différentes de cette fonctionnalité, mon préféré étant ce que Google utilise:
Le plugin simple que nous créons au cours de ce didacticiel sera très utile pour un développeur mais il nécessiterait un peu plus de travail si vous souhaitez en faire une solution universelle pour le grand public..
Nous allons utiliser jQuery, PHP, HTML et CSS pour ce plugin simple - commençons.
Tout d’abord, nous devons créer un nouveau dossier - disons cookie-pop - et dans ce dossier, nous devons créer un nouveau fichier PHP appelé cookie-pop.php.
La première chose que nous devons faire dans notre fichier PHP est de saisir les informations standard du plugin, comme indiqué par le codex WordPress:
Jusqu'ici tout va bien. Nous allons laisser jQuery faire la plupart du travail ici, donc la quantité de PHP que nous devons utiliser est minime. Nous reviendrons sur le PHP plus tard dans l'article.
Le javascript
Créons des dossiers pour notre code JavaScript et CSS. Ce n'est pas essentiel, mais cela aide à garder les choses plus propres et mieux organisées, ce qui n'est jamais une mauvaise chose. Nous appellerons ces
jsetcss.Afin de savoir si l'utilisateur a accepté les cookies, nous devons définir un cookie qui empêche le message d'apparaître à chaque visite du site. Pour cela, nous allons utiliser un plugin très populaire jQuery. Prenez le plugin de GitHub et déposez le
jquery.cookie.jsdéposer dans votrejsdossier. Nous voulons aussi qu’un fichier dépose notre jQuery personnalisé pour le plug-in, alors créez un nouveau fichier dans le dossier.jsdossier appelécookie-pop.js.Vous remarquerez que j'ai utilisé ici du code JavaScript non précisé - c'est toujours une bonne idée d'inclure une version abrégée de votre code JavaScript avec la version originale lintée, en particulier si vous souhaitez le publier en tant que plugin disponible au public..
La minification et la concaténation sont des sujets pour un autre post, mais pour ceux qui sont intéressés, vous pouvez consulter CodeKit, Grunt et Gulp. Pour en savoir plus sur la minification, jetez un œil à certains de ces autres didacticiels intéressants de Tuts +:
Maintenant, ouvrez votre vide cookie-pop.js déposer et mettre dans le code ci-dessous:
Accentsconagua
/ * global cookie_pop_text * / (fonction ($) 'use strict'; if ('set'! == $ .cookie ('cookie-pop')) $ ('body') .prepend (' En utilisant notre site Web, vous acceptez l'utilisation de nos cookies.. Lire la suite… '); $ ('# accept-cookie') .click (function () $ .cookie ('cookie-pop', 'set'); $ ('.cookie-pop') .remove ();); (jQuery)); Cette méthode jQuery doit être exécutée dans document.ready. L'utilisation de jQuery avec WordPress est légèrement différente de l'utilisation de la bibliothèque seule.
Par défaut, WordPress utilise jQuery en mode de compatibilité, ce qui signifie qu’au lieu d’utiliser le $ symbole, vous devez taper jQuery. Heureusement, il existe quelques moyens de contourner ce problème - dans l'exemple ci-dessus, nous avons adopté le $ il peut donc être utilisé dans nos fonctions.
Il y a pas mal de choses dans ce code, alors décomposons-le 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 valeur de ensemble en utilisant le biscuit method (qui appartient au script jQuery Cookie, expliqué plus en détail ici).
Si le cookie a déjà été configuré, nous n'avons rien à faire, l'utilisateur aura déjà vu le message et appuyé sur le bouton. Si elle n’a pas cette valeur, nous ajoutons le Nous avons ensuite une fonction click, qui dit que lorsque l'élément avec l'id le Le CSS dépendra en définitive de votre thème, mais vous trouverez ici de bonnes règles empiriques à respecter dans votre CSS. Comme vous pouvez le voir dans le JavaScript, le popup Voici le CSS que j'ai utilisé avec le thème WordPress vingt-treize: J'ai choisi de fixer la position du message de cookie afin qu'il reste présent lorsque l'utilisateur fait défiler. Alternativement, vous pouvez utiliser Le PHP est assez simple ici car JavaScript et CSS font à peu près tout le travail. Tout ce qui reste à faire avec notre PHP est de parler de notre JavaScript et CSS à WordPress afin qu’il soit inséré correctement. Nous allons écrire une fonction simple qui enregistre et met notre code JavaScript et CSS en file d'attente. Les normes de codage WordPress disent: Utilisez des lettres minuscules dans les noms de variable, d'action et de fonction (jamais camelCase). Séparez les mots via des traits de soulignement. Ne pas abréger les noms de variables de manière non nécessaire. laisser le code sans ambiguïté et auto-documenté. Nous appellerons notre fonction Nous allons commencer par mettre en file d'attente le script de cookie jQuery: En clair, ce que nous faisons ici, c'est dire à WordPress que le script s'appelle "jquery-cookie", en utilisant le Nous devons ensuite enregistrer notre coutume La seule différence majeure ici est que ce script a deux dépendances - Ensuite, c'est une bonne idée d'internationaliser notre code JavaScript. Plus tôt dans cet article, nous avons codé en dur certaines valeurs qui ne sont pas très favorables à l'internationalisation. Heureusement, WordPress a une excellente fonction pour cette fonction intégrée appelée Dans notre script, nous avons juste trois morceaux de texte distinctif - le message, le texte du bouton et le lien lire plus. Allons-y et connectez-les. Cette fonction accepte trois paramètres. Tout d'abord, nous avons la poignée du script que nous voulons localiser - Nous devons maintenant revenir à notre code JavaScript et lui dire d’utiliser ces valeurs. Les valeurs sont accessibles comme suit: La dernière chose à faire est de dire à WordPress d’utiliser réellement ces fichiers - pour cela, nous utilisons le Vous remarquerez que j'ai seulement mis en file d'attente le Ensuite, le CSS. Cela fonctionne de la même manière que le JavaScript: La dernière chose à faire est de mettre tout cela ensemble dans notre Maintenant, nous avons un plugin fonctionnel avec un simple message et un bouton sur lequel cliquer pour effacer le message et le faire ne plus apparaître pendant un laps de temps spécifié. L'exemple que j'ai utilisé ici concerne la loi européenne sur les cookies, mais en réalité, ce type de fonctionnalité pourrait être utile pour toutes sortes de choses dans WordPress, telles que l'affichage des délais de livraison réduits à Noël dans un magasin de commerce électronique.. La mise en œuvre ici est très simple et nécessite une édition manuelle pour le lien "lire plus" - ceci pourrait facilement être étendu avec l’API des options WordPress.. du document HTML avec un .cookie-pop. le div nous avons créé a élément à l'intérieur avec un ID de # accepter-cookie et un hyperlien simple. Le lien hypertexte devra être modifié dans un chemin de votre page où vous expliquez les cookies.. # accepter-cookie est cliqué puis utilisez la méthode du cookie pour créer un cookie appelé cookie-pop avec une valeur de ensemble qui expire dans 365 jours et fonctionne sur tout le site. .cookie-pop div est ensuite supprimé et disparaîtra de l'écran. Au prochain chargement de la page, le .cookie-pop div n'apparaîtra pas car le cookie aura été défini.Le CSS
cookie-pop - il est sage de l'utiliser comme sélecteur de parent dans tout CSS personnalisé que vous écrivez pour votre pop-up. Ainsi, il y a beaucoup moins de risques que votre CSS entre en conflit avec les styles utilisés dans d'autres thèmes ou plugins.. .cookie-pop background-color: # 000; border-bottom: 1px solid #fff; couleur: #fff; gauche: 0; position: fixe; text-align: center; en haut: 0; largeur: 100%; z-index: 10; Bouton .cookie-pop margin: 10px;
absolu ici, il reste donc toujours en haut de la page, mais ne défile pas. J'ai utilisé un style très minimal ici car le thème a des styles par défaut définis pour la taille du texte, les boutons et les liens..
Le PHP
cookie_pop_scripts_and_styles (). Ensuite, nous allons enregistrer et mettre en file d'attente tous les scripts dont nous avons besoin à l'aide du wp_register_script () méthode et la wp_enqueue_script () méthode. le wp_register_script () méthode informe WordPress de notre script; son descripteur, son emplacement, ses dépendances, sa version et s'il doit être situé dans le pied de page du document plutôt que dans l'en-tête. Tandis que le wp_enqueue_script () méthode peut mettre en file d'attente / charger un script enregistré avec wp_register_script () ou vous inscrire et mettre en file d'attente / charger un script tout seul.wp_enqueue_script ('jquery-cookie', plugins_url ('/lib/jquery.cookie.js', __FILE__), array ('jquery'), '1.4.1', true); plugins_url () méthode, nous disons à WordPress où trouver le script, nous disons à WordPress que ce script dépend de jQuery (voir la liste des descripteurs par défaut ici), et enfin, nous disons à WordPress que la version du script est 1.4.1. Un dernier argument optionnel à ajouter à cette méthode est vrai si vous voulez que ce script soit chargé dans le pied de page, ce qui est une bonne pratique pour améliorer le temps de chargement des pages..cookie-pop script de la même manière, sauf que nous ne le mettrons pas tout de suite en raison des traductions que nous couvrirons un peu.wp_register_script ('cookie-pop-script', plugins_url ('/js/cookie-pop.js', __FILE__), array ('jquery', 'jquery-cookie'), '1.0.0', true); jquery et notre script précédemment mis en file d'attente, jquery-cookie, car nous avons besoin des deux pour que ce script fonctionne correctement.wp_localize_script. Cette fonction vous permet de transmettre des données de PHP à JavaScript. wp_localize_script ('cookie-pop-script', 'cookie_pop_text', array ('message' => __ ('En utilisant notre site, vous acceptez l'utilisation de nos cookies.', 'cookie-pop'), 'bouton' => __ ('OK', 'cookie-pop'), 'plus' => __ ('Lire la suite…', 'cookie-pop'))); cookie-pop-script. Nous avons ensuite le nom de l'objet JavaScript - cela peut être n'importe quoi mais, idéalement, il devrait s'agir d'un nom lié à votre script, dans ce cas, j'ai utilisé cookie_pop_text. Le dernier paramètre est un tableau des valeurs que nous voulons utiliser dans notre JavaScript - chacune d’elles a son propre nom et le texte que nous voulons afficher..cookie_pop_text.message afficherait notre message. Continuons et apportons quelques modifications à notre JavaScript; il suffit de changer la ligne:$ ('body'). prepend ('wp_enqueue_script () méthode:wp_enqueue_script ('cookie-pop-script'); cookie-pop-script script here - c’est ici que ces déclarations de dépendance entrent en jeu lors de l’enregistrement de nos scripts. WordPress mettra automatiquement toutes les dépendances en file d'attente.wp_enqueue_style ('cookie-pop-style', plugins_url ('/css/cookie-pop.css', __FILE__), array (), '1.0.0'); cookie_pop_scripts_and_styles () fonction et l'accrocher à la wp_enqueue_scripts action, donc le paquet complet ressemble à ceci:function cookie_pop_scripts_and_styles () wp_enqueue_script ('jquery-cookie', plugins_url ('/lib/jquery.cookie.js', __FILE__), tableau ('jquery'), '1.4.1', true); wp_register_script ('cookie-pop-script', plugins_url ('/js/cookie-pop.js', __FILE__), array ('jquery', 'jquery-cookie'), '1.0.0', true); wp_localize_script ('cookie-pop-script', 'cookie_pop_text', array ('message' => __ ('En utilisant notre site, vous acceptez l'utilisation de nos cookies.', 'cookie-pop'), 'bouton' => __ ('OK', 'cookie-pop'), 'plus' => __ ('Lire la suite…', 'cookie-pop'))); wp_enqueue_script ('cookie-pop-script'); wp_enqueue_style ('cookie-pop-style', plugins_url ('/css/cookie-pop.css', __FILE__), array (), '1.0.0'); add_action ('wp_enqueue_scripts', 'cookie_pop_scripts_and_styles');
Résumer
