В этой статье подробно разберём, как самостоятельно реализовать функционал счётчика просмотров и кнопок лайков на страницах WordPress без использования сторонних плагинов. Такой подход поможет избежать лишних зависимостей, снизить нагрузку на сайт и получить лёгкий, кастомный инструмент для аналитики и взаимодействия с пользователями.
Зачем нужны просмотры и лайки на сайте WordPress
Счётчик просмотров позволяет измерять популярность конкретных материалов, а кнопки лайков — стимулируют вовлечённость аудитории, показывают социальное доказательство и улучшают UX. Обычно за это отвечают плагины, но многие из них могут быть избыточными и влиять на скорость сайта.
Реализация собственных просмотров и лайков поможет более гибко настроить логику и дизайн, а также избежать нагрузок, связанных с дополнительными плагинами.
Как реализовать счётчик просмотров в WordPress
Добавление и сохранение просмотров поста
Счётчик просмотров можно реализовать с помощью пользовательского мета-поля поста. Для этого при каждом просмотре записи будем увеличивать значение мета-поля wpdream_post_views.
Добавьте следующий код в файл functions.php вашей темы или в собственный плагин:
function wpdream_set_post_views($postID) {
$count_key = 'wpdream_post_views';
$count = get_post_meta($postID, $count_key, true);
if($count=='') {
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '1');
} else {
$count++;
update_post_meta($postID, $count_key, $count);
}
}Чтобы считывать и отображать количество просмотров, используйте функцию:
function wpdream_get_post_views($postID) {
$count_key = 'wpdream_post_views';
$count = get_post_meta($postID, $count_key, true);
if($count=='') {
return '0 просмотров';
}
return $count . ' просмотров';
}Вызов счётчика просмотров на странице записи
В шаблоне single.php или в нужном месте темы вставьте вызов функции и увеличьте счётчик:
if (is_single()) {
global $post;
wpdream_set_post_views($post->ID);
echo '<p>' . wpdream_get_post_views($post->ID) . '</p>';
}Обратите внимание: чтобы избежать накрутки, можно дополнительно реализовать логику хранения просмотренных постов в сессии или cookie и увеличивать счётчик только один раз за сессию.
Реализация кнопок лайков без плагинов
Структура и хранение лайков
Для лайков создадим мета-поле wpdream_post_likes, в котором будем хранить количество лайков. При нажатии на кнопку лайка с помощью AJAX увеличим это значение.
Добавление кнопки лайка в шаблон
Вставьте в шаблон single.php следующий HTML-код:
<button id="wpdream-like-button" data-postid="<?php the_ID(); ?>">Лайк <span id="wpdream-like-count"><?php echo get_post_meta(get_the_ID(), 'wpdream_post_likes', true) ?: 0; ?></span></button>Обработка AJAX запроса для лайков
Добавьте в functions.php следующий код для обработки AJAX:
add_action('wp_ajax_wpdream_like_post', 'wpdream_like_post_callback');
add_action('wp_ajax_nopriv_wpdream_like_post', 'wpdream_like_post_callback');
function wpdream_like_post_callback() {
$post_id = intval($_POST['post_id']);
if(!$post_id) {
wp_send_json_error('Неверный ID поста');
}
$likes = get_post_meta($post_id, 'wpdream_post_likes', true);
$likes = $likes ? intval($likes) : 0;
$likes++;
update_post_meta($post_id, 'wpdream_post_likes', $likes);
wp_send_json_success(array('likes' => $likes));
}Подключение JavaScript для кнопки лайка
Зарегистрируйте и подключите скрипт в вашей теме:
function wpdream_enqueue_scripts() {
wp_enqueue_script('wpdream-like-js', get_template_directory_uri() . '/js/wpdream-like.js', array('jquery'), null, true);
wp_localize_script('wpdream-like-js', 'wpdream_ajax', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpdream_like_nonce')
));
}
add_action('wp_enqueue_scripts', 'wpdream_enqueue_scripts');Создайте файл wpdream-like.js в папке js темы со следующим содержимым:
jQuery(document).ready(function($) {
$('#wpdream-like-button').on('click', function() {
var post_id = $(this).data('postid');
var button = $(this);
$.post(wpdream_ajax.ajax_url, {
action: 'wpdream_like_post',
post_id: post_id,
_ajax_nonce: wpdream_ajax.nonce
}, function(response) {
if(response.success) {
$('#wpdream-like-count').text(response.data.likes);
button.prop('disabled', true);
} else {
alert('Ошибка: ' + response.data);
}
});
});
});Как избежать накрутки просмотров и лайков
Чтобы избежать накрутки просмотров и лайков, можно использовать следующие методы:
- Сохранять список просмотренных или лайкнутых постов в cookie или сессии и запрещать повторные действия в течение определённого времени.
- Использовать IP-адреса и временные метки в пользовательских таблицах для продвинутого контроля.
- Добавить проверку nonce в AJAX запросах для безопасности.
Пример простой проверки nonce и ограничения повторного лайка с помощью cookie:
function wpdream_like_post_callback() {
check_ajax_referer('wpdream_like_nonce', '_ajax_nonce');
$post_id = intval($_POST['post_id']);
if(!$post_id) {
wp_send_json_error('Неверный ID поста');
}
if(isset($_COOKIE['wpdream_liked_'.$post_id])) {
wp_send_json_error('Вы уже лайкали этот пост');
}
$likes = get_post_meta($post_id, 'wpdream_post_likes', true);
$likes = $likes ? intval($likes) : 0;
$likes++;
update_post_meta($post_id, 'wpdream_post_likes', $likes);
setcookie('wpdream_liked_'.$post_id, '1', time() + 86400, COOKIEPATH, COOKIE_DOMAIN);
wp_send_json_success(array('likes' => $likes));
}Резюме и рекомендации по улучшению
Реализованный функционал просмотров и лайков можно расширить:
- Добавить отображение пользователей, которые лайкнули (через пользовательские мета-поля или таблицы).
- Создать виджет или шорткод для размещения счётчиков в разных местах сайта.
- Интегрировать с сервисами аналитики или использовать в маркетинговых целях.
- Оптимизировать хранение данных и использовать транзиенты для кэширования.
Если хотите упростить себе жизнь, рассмотрите использование плагина Clearfy Pro, который содержит модули оптимизации и расширения функционала WordPress, включая счётчики и социальные кнопки.