Доброго времени суток. 🙂
В этой статье хочу рассказать, как сделать систему лайков. На просторах интернета, этот способ расписан не раз, но я его дополнял и переделывал в процессе использования и хочу представить ряд статей по такому рейтингу статей, с помощью лайков. Поэтому эта статья нужна как введение в эту тему, без не не будет потом в дальнейшем понятно что и куда.
Суть данного способа в том, что с помощью Произвольных полей, в которые записывается количество нажатий на кнопку Нравится к статье. У каждой записи 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. Если у вас скрипты лежат в другой папке, то укажите свой путь. Будьте внимательны, если укажите неправильно, работать не будет.
Переходим к следующему пункту. После добавленного кода добавляем еще две строки.
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
В этом же примере, можете добавить свои стили и получить любой вид кнопки и счетчика отметок нравится.
На этом все, спасибо за внимание. 🙂
