Если вы живете в Европе, вы, вероятно, слышали о законе о файлах cookie. Точный закон меняется от страны к стране, и некоторые руководящие принципы немного неясно о способах его реализации.
Эта статья не для обсуждения или консультирования по поводу закона, а для того, чтобы показать вам метод создания простого всплывающего плагина с законом о cookie.
Код для этого простого плагина может быть помещен в файл functions.php вашей темы, но я думаю, что лучше оставить его как плагин, поскольку это не та функциональность, которую вы хотите потерять при смене темы.
Функциональность
Реализация будет максимально простой. В верхней части экрана появится панель, которая отображает сообщение, кнопку, чтобы закрыть сообщение, и ссылку, чтобы узнать больше о файлах cookie, которые использует сайт. В некоторых реализациях предусмотрена кнопка «запретить» для файлов cookie, но мы не будем ее использовать.
Существует множество различных реализаций этой функциональности, мой личный фаворит — то, что использует Google:
Простой плагин, который мы создадим в этом учебном пособии, отлично подойдет для разработчиков для проектов, но потребует немного больше работы, если вы захотите сделать его универсальным решением для общего использования.
Инструменты
Мы собираемся использовать jQuery, PHP, HTML и CSS для этого простого плагина — начнем.
Прежде всего, нам нужно создать новую папку — скажем, cookie-pop — и в этой папке нам нужно создать новый файл PHP с именем cookie-pop.php .
Первое, что нам нужно сделать в нашем PHP-файле, это ввести информацию о стандартном плагине, как указано в Кодексе WordPress:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<?php
/**
* Plugin Name: Cookie Pop
* Plugin URI: https://code.tutsplus.com/tutorials/implementing-the-eu-cookie-law-into-your-wordpress-site—cms-21750
* Description: A simple cookie law implementation for WordPress.
* Version: 1.0.0
* Author: Tutsplus
* Author URI: http://code.tutsplus.com
* License: GPL-3.0+
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Domain Path: /lang
* Text Domain: cookie-pop
*/
|
Все идет нормально. Мы собираемся позволить jQuery выполнять большую часть работы здесь, поэтому количество PHP, которое нам нужно использовать, минимально. Мы вернемся к PHP позже в этой статье.
JavaScript
Давайте создадим несколько папок для нашего JavaScript и CSS. Это не обязательно, но помогает поддерживать чистоту и порядок, что никогда не бывает плохо. Мы назовем эти js и css .
Чтобы зафиксировать, что пользователь согласился на файлы cookie, нам нужно установить файл cookie, который останавливает появление сообщения при каждом посещении сайта. Для этого мы будем использовать очень популярный плагин jQuery. Возьмите плагин из GitHub и jquery.cookie.js файл jquery.cookie.js в вашу папку js . Мы также хотим, чтобы в файл добавлялся наш пользовательский jQuery для плагина, поэтому создайте новый файл в папке js именем cookie-pop.js .
Вы заметите, что я использовал неинициализированный JavaScript здесь — всегда полезно включать минимизированную версию вашего JavaScript вместе с оригинальной, ограниченной версией, особенно если вы хотите выпустить ее как общедоступный плагин.
Минификация и конкатенация — темы для другого поста, но для тех, кто заинтересован, вы можете проверить CodeKit, Grunt и Gulp. Чтобы узнать больше о минификации, взгляните на некоторые из этих замечательных уроков Tuts +:
- Пересматривая минификацию JavaScript
- Управление вашими задачами сборки с Gulp.js
- Встречайте Grunt, инструмент для сборки JavaScript
Теперь откройте пустой cookie-pop.js и cookie-pop.js код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/* global cookie_pop_text */
(function ( $ ) {
‘use strict’;
if ( ‘set’ !== $.cookie( ‘cookie-pop’ ) ) {
$( ‘body’ ).prepend(
‘<div class=»cookie-pop»>
By using our website, you agree to the use of our cookies.
<button id=»accept-cookie»>OK</button>
<a href=»/cookies/»>Read More…</a>
</div>’
);
$( ‘#accept-cookie’ ).click(function () {
$.cookie( ‘cookie-pop’, ‘set’ );
$( ‘.cookie-pop’ ).remove();
});
}
}( jQuery ) );
|
Этот метод jQuery должен быть выполнен в document.ready . Использование jQuery с WordPress немного отличается от использования самой библиотеки.
По умолчанию WordPress использует jQuery в режиме совместимости, что означает, что вместо использования символа $ вы должны набрать jQuery. К счастью, есть несколько способов обойти эту проблему — в приведенном выше примере мы передали $ чтобы его можно было использовать в наших функциях.
В этом коде много чего происходит, поэтому давайте немного разберем его. Первое, что мы делаем здесь, это проверяем, существует ли cookie с именем cookie-pop и что он не имеет значения set с помощью метода cookie (который принадлежит сценарию jQuery Cookie, более подробно описанному здесь ) .
Если cookie уже установлен, нам ничего не нужно делать, так как пользователь уже видел сообщение и нажал кнопку. Если у него нет этого значения, тогда мы добавляем <body> документа HTML к <div> который имеет класс .cookie-pop . Созданный нами div имеет элемент <button> с идентификатором #accept-cookie и простой гиперссылкой. Гиперссылку необходимо будет отредактировать на пути к вашей странице, где вы объясняете, что такое куки
Затем у нас есть функция click, которая сообщает, что при щелчке по элементу с id #accept-cookie используется метод cookie, чтобы создать cookie с именем cookie-pop со значением set , срок действия которого истекает через 365 дней и работает через весь сайт.
Затем .cookie-pop div будет удален и исчезнет с экрана. В следующий раз, когда страница будет загружена, div .cookie-pop не будет отображаться, поскольку файл cookie будет установлен.
CSS
CSS в конечном итоге будет зависеть от вашей темы, но здесь есть несколько хороших практических правил, которые можно потренировать в вашем CSS. Как вы можете видеть в JavaScript, у всплывающего окна <div> есть класс cookie-pop — разумно использовать его в качестве родительского селектора в любом пользовательском CSS, который вы пишете для своего всплывающего окна, таким образом, у вас гораздо меньше шансов на ваш CSS конфликтует со стилями, используемыми в других темах или плагинах.
Вот CSS, который я использовал с двадцатью тринадцатью темами WordPress:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
.cookie-pop {
background-color: #000;
border-bottom: 1px solid #fff;
color: #fff;
left: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 10;
}
.cookie-pop button {
margin: 10px;
}
|
Я решил зафиксировать положение файла cookie, чтобы оно оставалось при просмотре пользователем. В качестве альтернативы, вы можете использовать absolute здесь, так что оно всегда остается в верхней части страницы, но не прокручивается. Я использовал очень минимальные стили, так как в теме установлены стили по умолчанию для размера текста, кнопок и ссылок.
PHP
PHP здесь довольно прост, так как JavaScript и CSS выполняют практически всю работу. Все, что осталось сделать с нашим PHP — это рассказать WordPress о наших JavaScript и CSS, чтобы он вставлялся правильно. Мы собираемся написать простую функцию, которая регистрирует и ставит в очередь наши JavaScript и CSS.
Стандарты кодирования WordPress гласят:
Используйте строчные буквы в именах переменных, действий и функций (не camelCase). Отдельные слова через подчеркивание. Не сокращайте имена переменных не обязательно; пусть код будет однозначным и самодокументируемым.
Мы будем вызывать нашу функцию cookie_pop_scripts_and_styles() . Далее мы зарегистрируем и поставим в очередь все нужные нам сценарии, используя метод wp_register_script() метод wp_enqueue_script() . Метод wp_register_script() сообщает WordPress о нашем скрипте; его дескриптор, местоположение, зависимости, версия и должен ли он быть расположен в нижнем колонтитуле документа, а не в заголовке. Принимая во внимание, что wp_enqueue_script() может ставить в очередь / загружать скрипт, зарегистрированный в wp_register_script() или регистрировать и ставить в очередь / загружать скрипт сам по себе.
Мы начнем с постановки в очередь сценария jQuery Cookie:
|
1
2
3
4
5
6
7
|
wp_enqueue_script(
‘jquery-cookie’,
plugins_url( ‘/lib/jquery.cookie.js’, __FILE__ ),
array( ‘jquery’ ),
‘1.4.1’,
true
);
|
plugins_url() простым языком, мы здесь говорим WordPress, что скрипт называется «jquery-cookie», с помощью plugins_url() мы сообщаем WordPress, где найти скрипт, мы сообщаем WordPress, что этот скрипт зависит от работы jQuery ( см. список описателей по умолчанию здесь ), и, наконец, мы сообщаем WordPress, что версия скрипта — 1.4.1. Необязательный последний аргумент, добавляемый к этому методу, имеет значение true если вы хотите, чтобы этот скрипт загружался в нижний колонтитул, что является лучшей практикой для улучшения времени загрузки страницы.
Затем мы должны зарегистрировать наш пользовательский скрипт cookie-pop файлов практически таким же образом, за исключением того, что мы не будем ставить скрипт сразу в очередь из-за переводов, о которых мы расскажем чуть позже.
|
1
2
3
4
5
6
7
|
wp_register_script(
‘cookie-pop-script’,
plugins_url( ‘/js/cookie-pop.js’, __FILE__ ),
array( ‘jquery’, ‘jquery-cookie’ ),
‘1.0.0’,
true
);
|
Единственным существенным отличием здесь является то, что этот скрипт имеет две зависимости — jquery и наш ранее поставленный в очередь скрипт jquery-cookie , так как нам нужно, чтобы этот скрипт работал правильно.
Далее, это хорошая идея, чтобы интернационализировать наш JavaScript. Ранее в этой статье мы жестко закодировали некоторые ценности, которые не очень благоприятны для интернационализации. К счастью, в WordPress есть отличная функция для этого, которая называется wp_localize_script . Эта функция позволяет передавать данные из PHP в JavaScript.
В нашем скрипте у нас всего три фрагмента различимого текста — сообщение, текст кнопки и ссылка «читать дальше». Давайте идти вперед и подключить их.
|
1
2
3
4
5
6
7
8
|
wp_localize_script(
‘cookie-pop-script’,
‘cookie_pop_text’, array(
‘message’ => __( ‘By using our website, you agree to the use of our cookies.’, ‘cookie-pop’ ),
‘button’ => __( ‘OK’, ‘cookie-pop’ ),
‘more’ => __( ‘Read More…’, ‘cookie-pop’ )
)
);
|
Эта функция принимает три параметра. Во-первых, у нас есть дескриптор скрипта, который мы хотим локализовать — cookie-pop-script . Затем у нас есть имя объекта JavaScript — это может быть что угодно, но в идеале это должно быть имя, связанное с вашим скриптом, в этом случае я использовал cookie_pop_text . Последний параметр — это массив значений, которые мы хотим использовать в нашем JavaScript — у каждого из них есть свое имя и текст, который мы хотим отобразить.
Теперь нам нужно вернуться к нашему JavaScript и сказать ему использовать эти значения. Доступ к значениям осуществляется следующим образом: cookie_pop_text.message будет отображать наше сообщение. Давайте продолжим и внесем несколько изменений в наш JavaScript; нам нужно изменить только одну строку:
|
1
2
3
4
|
$(‘body’).prepend(
‘<div class=»cookie-pop»>’ + cookie_pop_text.message + ‘<button id=»accept-cookie»>’ + cookie_pop_text.button + ‘</button> <a target=»blank» href=»/cookies/»>’ + cookie_pop_text.more + ‘</a></div>’
);
|
Последнее, что нам нужно сделать, это сказать WordPress, что нужно использовать эти файлы — для этого мы используем метод wp_enqueue_script() :
|
1
|
wp_enqueue_script( ‘cookie-pop-script’ );
|
Вы заметите, что я поставил здесь в очередь cookie-pop-script — именно здесь вступают в игру эти объявления зависимостей, когда мы регистрируем наши сценарии. WordPress автоматически ставит все зависимости в очередь.
Далее, CSS. Это работает так же, как JavaScript:
|
1
2
3
4
5
6
|
wp_enqueue_style(
‘cookie-pop-style’,
plugins_url( ‘/css/cookie-pop.css’, __FILE__ ),
array(),
‘1.0.0’
);
|
Последнее, что нужно сделать, это собрать все это вместе в нашей функции cookie_pop_scripts_and_styles() и подключить к действию wp_enqueue_scripts , чтобы весь пакет выглядел так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
function cookie_pop_scripts_and_styles() {
wp_enqueue_script(
‘jquery-cookie’,
plugins_url( ‘/lib/jquery.cookie.js’, __FILE__ ),
array( ‘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’ => __( ‘By using our website, you agree to the use of our cookies.’, ‘cookie-pop’ ),
‘button’ => __( ‘OK’, ‘cookie-pop’ ),
‘more’ => __( ‘Read More…’, ‘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’ );
|
Подводя итоги
Теперь у нас есть работающий плагин с простым сообщением и кнопкой, которую нужно нажать, чтобы очистить сообщение и не показывать его снова в течение определенного времени.
Пример, который я использовал здесь, относится к закону о файлах cookie ЕС, но в действительности такого рода функциональность может быть полезна для всех видов вещей в WordPress, таких как показ сокращенных сроков доставки на Рождество в магазине электронной коммерции.
Реализация здесь очень проста и требует некоторого ручного редактирования ссылки «читать дальше» — это может быть легко расширено с помощью API параметров WordPress.