Система лайков или кнопка мне нравится c использованием cookies на WordPress

Прошлая статья обязательна к прочтению, потому как без нее материал из сегодняшней статьи - бесполезен. Обратите на это внимание. Не будем затягивать и приступим.

Как и упомянул выше, прошлый метод использовал дополнительно произвольное поле записи и писал туда IP адреса всех проголосовавших за статью. Если совпадение находилось, то голос не засчитывался, так работает фильтр, чтобы не было накруток. Мне это не понравилось, потому как идея засорения базы данных мусором - такое себе. Поэтому я решил переделать прошлый материал под использование cookies. С их помощью и будет хранится информация - голосовал ли посетитель ранее.

Чтобы это сделать, нужно выполнить первые два пункта прошлой статьи. Сначала инициализировать скрипт - post-like.js. Далее добавляете две строки add_action, где мы нашу функцию по подсчету голосов вешаем на указанный хук. там все расписано и просто.

Третий шаг в прошлой статье - это подключение нашей функции подсчета и записи голосов post_like(). Ее уже с той статьи подключать не надо. Для способа с cookies у нас будет упрощенная ее версия. Но прочитать ее полностью. чтобы понять устройство и принцип стоит, потому как дальше у нас измененные скрипты но смысл их тот же что и там и там более подробно расписано.

Если добавили подключение post-like.js с дополнительные данными для аякса и повесили будущую функцию на хук. То после добавляете новую функцию, переделанную - post_like().

function post_like(){
$nonce = $_POST['nonce'];
if(!wp_verify_nonce( $nonce, 'ajax-nonce')) die ( 'Ошибка!');
if(isset($_POST['post_like'])){
$post_id = $_POST['post_id'];
$meta_count = get_post_meta($post_id, "votes_count", true);
update_post_meta($post_id, "votes_count", ++$meta_count);
echo $meta_count; 
}
exit;
}

Как видите, она схожа с прошлой, но с нее вырезано все что касается проверки и записи полей для IP адреса. Расписывать нет смысла такие же строки расписаны в прошлой статье. Функция просто при запуске получает ID статьи где нажали на кнопку, и в ее произвольное поле, которое называется - votes_count, записывает значение на 1 больше.

После функции подсчета, нам нужна новая функция вызова самой кнопки уже на сайте. Той кнопки по нажатию на которую и будет подсчет. подключаете ее после прошлой в том же function.php.

function getPostLikeLink($post_id){
$vote_count = get_post_meta($post_id, "votes_count", true);
//неактивная кнопка
$output = '<div class="nopost-like"><span>Нравится</span><span class="count">'.$vote_count.'</span></div>';
//активная кнопка
$output .= '<div class="post-like"><span class="like_ico" data-post_id="'.$post_id.'">Нравится</span><span class="count">'.$vote_count.'</span></div>';
return $output;
}

getPostLikeLink - теперь тоже новая. Так как нет проверки по айпи, она выглядит иначе. По сути она выводит сразу 2 кнопки. Активную и нет, ту на которую нажать нельзя.

Неактивная имеет класс у родительского контейнера nopost-like, а активная - post-like. Это нужно учесть, эти классы понадобятся далее.

В прошлой статье написано где примерно вызывать функцию вывода кнопки - getPostLikeLink(). Файл статьи в циклах и тд.

// В среду PHP
echo getPostLikeLink(get_the_ID());
//  В среду HTML
<?php echo getPostLikeLink(get_the_ID()); ?>

Теперь вернемся к post-like.js. В прошлой статье в нем был один код, теперь немного измененный уже с учетом cookies. Создаете или открываете, если создали и заменяете содержимое или добавляете новое если он пуст:

jQuery(document).ready(function($){
$(".like_ico").click(function(){
var pathToMyPage = window.location.pathname;
$.cookie("post-like-count", "1", { expires:1, path: pathToMyPage }); 
heart = $(this);
post_id = heart.data("post_id");
$.ajax({
type: "post",
url: ajax_var.url,
data: "action=post-like&nonce="+ajax_var.nonce+"&post_like=&post_id="+post_id,
success: function(count){
if(count != "already"){
heart.addClass("voted");
$(".count").text(count);
$('.post-like').hide();
$('.nopost-like').show();
}
}
});
return false;
});

if ( $.cookie("post-like-count") == null){
	$('.post-like').show();
	$('.nopost-like').hide();
}else{
	$('.post-like').hide();
	$('.nopost-like').show();
}


});

Скрипт не сложный, кто разбирается поймет все сразу, для остальных немного распишу.

• Во второй строке мы запускаем событие после нажатия на кнопку с классом like_ico. В нашей кнопке это слово - Нравится.
• В третей строке создаем переменную, с ссылкой на текущую страницу - pathToMyPage . Это для куков, чтобы они записались только для статьи где нажата кнопка, а не для всех кнопок на сайте.

• В четвертой строке - создаем имя для куков - post-like-count и значение - 1. Если посмотреть через консоль браузера, то выглядит это примерно так:

  

  Если кнопка нажата - кукам задается значение 1 и кнопка в будущем станет неактивна. Так же expires, задается 1, это один день. То бишь куки хранятся сутки после они сотрутся и кнопку можно нажать повторно. Если нужно больше дней, укажите свое значение. Подробнее о времени куков написано в моей статье - Всплывающее окно при загрузке странице показывается один раз с задержкой. Почитайте, там часть материала именно про этот момент. Ну и в конце переменная с прошлой строки указывает для какой страницы хранить куки.

• Далее идет уже аякс отправка нажатия, подсчет голосов, запись в бд и тд, подробнее в прошлой статье. После успешной отправки запроса выполняем определенные действия.
• В 14 строке обновляем значения счетчиков у всех блоков с классом count. Так что в функции вывода кнопки учтите это и не меняйте класс или меняйте везде.
• В 15 $('.post-like').hide(); - скрываем активную кнопку, которая позволяет увеличивать значение счетчика на 1.
• И в 16 строке $('.nopost-like').show(); - показываем неактивную кнопку, нажать которую нельзя. В принципе все с событием по нажатию.
• Далее с 23 строки мы проверяем после загрузки страницы, как только человек обновит страницу или впервые зайдет - есть ли у него куки к данной странице. Если нет - не показывать активную и показывать неактивную и в противном случаи - наоборот.

На этом со скриптом все. Но есть еще один важный момент. Куки не будут записываться без специального скрипта куков. Он может быть подключен к вашему сайту ранее, например если вы используете чужую тему, которая уже использует его или какой-то плагин например. На этом этапе вы можете проверить работу кнопки, если нажатия можно совершать множественное количество и кнопка не становится - неактивной, то значит вам не повезло :). Нужно выполнить последний шаг.

Вам нужно скопировать следующую строку скрипта. Она длинная, обязательно скопировать все!

jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options.expires=-1}var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000))}else{date=options.expires}expires='; expires='+date.toUTCString()}var path=options.path?'; path='+(options.path):'';var domain=options.domain?'; domain='+(options.domain):'';var secure=options.secure?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('')}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break}}}return cookieValue}};

Скопированный код нужно добавить в отдельный файл и подключить к своей теме или добавить в конец уже подключенного файла, но делать это нужно, если вы знаете как правильно это делать иначе может перестать работать и скрипт уже добавленный в файл ранее. Подробнее о том, как подключить отдельный файл со скриптом и как правильно - можно прочитать в статье - Как и где подключить скрипт?.

После подключения скрипта записи куков - кнопка должна срабатывать только один раз для одной записи.

Что касается стилей, то тут по желанию. В будущем я напишу еще статью по вариантам как сделать красивые кнопки, а пока - ваша фантазия 😉

На этом все, спасибо за внимание. 🙂