X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-19
  • 6385 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

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

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

Суть данного способа в том, что с помощью Произвольных полей, в которые записывается количество нажатий на кнопку Нравится к статье. У каждой записи WordPress есть свои уникальные произвольные поля. Их может быть бесконечное количество, все зависит от того, что вы в них записываете. Подробнее о произвольных полях, можно прочитать в статье - Произвольные поля (custom fields) в WordPress

И так, приступим к системе лайков на WordPress. Для начала надо добавить код функции и не одной, которые будут выполнять подсчет лайков и запись их в базу данных. Открываете файл пользовательских функций function.php и добавляете код в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец.

Перед изменением function.php, обязательно сохраните его копию, чтобы в дальнейшем, в случаи ошибки, вернуть все как было. Так же, можете использовать дочернюю тему. Если вы не знаете что это такое, то ознакомьтесь со статьей - Дочерние темы WordPress.

Система лайков будет использовать AJAX, то есть отправку без перезагрузки страниц. Так что, первое что сделаем - зарегистрируем файл со скриптом, в котором будет наш jQuery скрипт, что и будет отправлять ajax запрос.

У меня еще нет статьи о том как правильно подключать AJAX на WordPress, постараюсь исправится :), но а пока что так. Сначала, как и сказал - регистрируем файл со скриптом и через wp_localize_script задаем дополнительные данные для него, чтобы jQuery правильно сформировало ajax запрос.

wp_enqueue_script('like_post', get_template_directory_uri().'/js/post-like.js', array('jquery'), '1.0', true );
wp_localize_script('like_post', 'ajax_var', array(
'url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax-nonce')
));

Как видите - стандартная регистрация и подключение через wp_enqueue_script. Подробнее об этом методе можно прочитать в статье - Как и где подключить скрипт?. В данном примере мы подключаем файл post-like.js, который у нас должен лежать в папке с темой в папке js. Если у вас скрипты лежат в другой папке, то укажите свой путь. Будьте внимательны, если укажите неправильно, работать не будет.

  • Главный параметр тут - в первой строке указываем like_post - название для нашего скрипта. Еще его называют - рабочее название.
  • Во второй строке повторяем рабочее название, чтобы у нас была связь, далее через запятую указано название ajax_var - это название Javascript объекта, который будет содержать данные. Название должно быть уникальным, чтобы не вызвать конфликтов с другими скриптами! Это нужно для нашего jQuery скрипта. Позже в нем увидите, где оно используется.
  • После этого идет масив с параметрами.
  • url - тут указываем путь к ajax файлу WordPress.
  • nonce - тут функция что создает уникальный токен, что связан с конкретным действием, пользователем, сеансом пользователя и окном времени. Это нужно для правильной работы нашего рейтинга с помощью лайков.

Переходим к следующему пункту. После добавленного кода добавляем еще две строки.

add_action('wp_ajax_nopriv_post-like', 'post_like');
add_action('wp_ajax_post-like', 'post_like');

Теперь мы прикрепляем нашу указанную будущую функцию по подсчету и записи лайков в БД к WordPress AJAX. То бишь срабатывать она будет только в момент аякс события после нажатия на кнопку - МНЕ НРАВИТСЯ. Название нашей будущей функции указано как - post_like.

Собственно сама функция:

function post_like(){
$nonce = $_POST['nonce'];
if ( ! wp_verify_nonce( $nonce, 'ajax-nonce' ) )
 die ( 'Busted!');
if(isset($_POST['post_like'])){
 $ip = $_SERVER['REMOTE_ADDR'];
 $post_id = $_POST['post_id'];
 $meta_IP = get_post_meta($post_id, "voted_IP");
 $voted_IP = $meta_IP[0];
if(!is_array($voted_IP))
 $voted_IP = array();
 $meta_count = get_post_meta($post_id, "votes_count", true);
 if(!hasAlreadyVoted($post_id)){
 $voted_IP[$ip] = time();
 update_post_meta($post_id, "voted_IP", $voted_IP);
 update_post_meta($post_id, "votes_count", ++$meta_count);
 echo $meta_count;}
 else
 echo "already";}
 exit;}

Расписывать подробно не буду, кто знаком с WordPress все и так поймет, тут все просто. Создаем и обновляем в зависимости от результата два произвольных поля, voted_IP - поле, куда записывается ip проголосовавшего и votes_count - сам счетчик лайков к записи.

Суть функции проста, когда ее запустят - если все правильно подключено и работает она сработает в противном случаи вы увидите ошибку. Далее она проверяет ip получает данные счетчика. В конце идет проверка, голосовал ли посетитель. Если нет, то данные записываются в произвольные поля и счетчик увеличивается на единицу.

Теперь очередь функции, что проверяет посетителя на то, имеет ли он право голосовать, нажимать на кнопку, будет ли засчитана его отметка.

 function hasAlreadyVoted($post_id){
 global $timebeforerevote;
$timebeforerevote = 120;
 $meta_IP = get_post_meta($post_id, "voted_IP");
 $voted_IP = $meta_IP[0];
if(!is_array($voted_IP))
 $voted_IP = array();
 $ip = $_SERVER['REMOTE_ADDR'];
 if(in_array($ip, array_keys($voted_IP))){
 $time = $voted_IP[$ip];
 $now = time();
 if(round(($now - $time) / 60) > $timebeforerevote)
 return false;
return true;}
 return false;}

Тут тоже все просто. В 3 строке указанна переменная - $timebeforerevote в которой указано число 120. Это время в минутах, то бишь 2 часа. Можете сменить значение на свое.

Далее все просто, получаются данные из произвольных полей, проверяется IP, по математической формуле время последнего голосования, если есть совпадение и если все ок - голос засчитывается, в противном случаи отклоняется.

Третья функция, которую мы добавим - уже функция, что выводит код кнопки, нажатие на которую запустит подсчет и добавление голосов.

function getPostLikeLink($post_id){
$vote_count = get_post_meta($post_id, "votes_count", true);
$output = '';
if(hasAlreadyVoted($post_id)){
$output .= '<div class="svg_bottom_ico"><div class="like_ico is-active">Нравится </div></div>';
$output .= '<span class="likecount"> '.$vote_count.'</span>';
 }else{
 $output .= '<div class="svg_bottom_ico"><div class="like_ico noactive_svg" data-post_id="'.$post_id.'">Нравится </div></div>';
 $output .= '<span class="likecount"> '.$vote_count.'</span>';
 }
  return $output;
}

Данная функция, в зависимости от того, можно ли голосовать посетителю выведет ему или активную кнопку(в данном примере это просто блок. Сделано для удобства, чтобы вы могли добавить любые классы, псевдоэлементы и тд.) или нет. Рядом с ней будет счетчик уже проголосовавших, нажавших на кнопку.

На этом пункте с function.php можно закончить. Теперь перейдем уже к фронтенду, то есть к скриптам и выводу.

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

Внутрь файла нужно добавить следующий код.

jQuery(document).ready(function($){
$(".noactive_svg").click(function(event){
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("is-active");
heart.parent().next(".likecount").text(count);
}
}
});
return false;
});
});

По скрипту видно, что он сработает, если нажать на кнопку с классом noactive_svg. Получаем айди нашего поста и дальше через аякс передаем данные. Так же видно что тут мы указываем те параметры, что задавали еще в первом шаге - ссылку на аякс WordPress и тд.

Если все успешно, все переменные получены, данные отправлены - получается значение счетчика и выводится в элементе с классомlikecount. Так же кнопке присваивается класс is-active. Можете использовать этот класс, если хотите обозначить неактивную кнопку.

Остался последний шаг. Вызвать вывод нашей кнопки в коде темы. Вывод нужно делать внутри цикла. Это обязательно! Цикл выглядит примерно так:

if (have_posts()) : while (have_posts()) : the_post();
//тут код для записей, вывод заголовков, миниатюр, текста и тд.
endwhile;endif; 

Он находится в index.php,single.php,archive.php и тд. Все зависит от темы. Сказать точно не могу, так как зависит от того как разработчик создал и какова структура.

Внутрь этого цикла, как раз и нужно добавить следующую строку:

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

В зависимости в какую среду кода добавляете выберите вариант. Это элементарно для людей с опытом. но к сожалению, многие допускают ошибки.

Если сделали все правильно, система лайков должна работать. На базе этой статьи я покажу как можно изменить данную систему, доработать и улучшить. Например в следующей статье я изменил систему, чтобы она использовала куки вместо айпи - Система лайков или кнопка мне нравится c использованием cookies на WordPress

В этом же примере, можете добавить свои стили и получить любой вид кнопки и счетчика отметок нравится.

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

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

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 20, в среднем: 4.8 из 5
Читайте також