0 ∞ 4

Как добавить кнопку лайков в записи WordPress без использования плагинов

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

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

Обновлено: 2025-06-23 03:44:02 Вадим Дворниковавтор материала

1.HTML
CSS
PHP
Окончательный код
- CSS
- Предварительный просмотр

1.HTML

Сначала создадим HTML-структуру, состоящую из двух одинаковых кнопок. В данном примере я редактирую стандартную WordPress- тему Twenty Sixteen.

<ul class="likes">
	<li class="likes__item likes__item--like">
		<a href="#">
			Like (0)
		</a>
	</li>
	<li class="likes__item likes__item--dislike">
		<a href="#">
			Dislike (0)
		</a>
	</li>
</ul>

Чтобы отобразить кнопки, нужно добавить их перед записью с помощью фильтра the_content.

<?php
	function ip_post_likes($content) {
		// Проверяем, является ли это одиночной записью
		if(is_singular('post')) {
			// Начинаем выводить буфер
			ob_start();

			?>
				<ul class="likes">
					<li class="likes__item likes__item--like">
						<a href="#">
							Like (0)
						</a>
					</li>
					<li class="likes__item likes__item--dislike">
						<a href="#">
							Dislike (0>)
						</a>
					</li>
				</ul>
			<?php

			// Завершаем выводить буфер и добавляем вывод в переменную
			$output = ob_get_clean();

			// Объединяем кнопки с контентом записи
			return $output . $content;
		}else {
			// Возвращаем контент страниц и записей других типов без изменений
			return $content;
		}
	}

	add_filter('the_content', 'ip_post_likes');
?>

Рассмотрим приведенный выше код. Сначала мы создаем функцию ip_post_likes(), которая принимает параметр $content.

function ip_post_likes($content) {

}

Она проверяет, просматриваем ли мы одиночную запись.

if(is_singular('post')) {

}

Далее мы используем буферизацию вывода. С ее помощью мы присваиваем переменной содержимое буфера. Мы начинаем буфер с ob_start(); и заканчиваем ob_get_clean(). В нашем случае переменная называется $output.

<?php ob_start(); ?>
<p>
	Здесь какой-то HTML-контент!
</p>
<?php $output = ob_get_clean(); ?>

Затем мы объединяем переменные $output и $content. При использовании фильтра the_content переменная $content- это содержимое публикации, которое будет выводиться на странице. В результате объединения этих переменных кнопки лайков будут размещаться прямо перед содержимым публикации.

return $output . $content;

Последнее, что мы делаем в этой функции, это добавляем оператор else, чтобы сказать: «Если это не одиночная запись, выведите контент без изменений». Если бы мы этого не сделали, все остальные типы постов не имели бы контента.

if(is_singular('post')) {
	return $output . $content;
}else {
	return $content;
}

Затем мы прикрепляем функцию к фильтру the_content.

add_filter('the_content', 'ip_post_likes');

Вот что вы должны иметь на данный момент...

2. CSS

Вот как выглядит готовый CSS-код кнопок:

.likes {
	display: flex;
}

.likes__item {
	list-style: none;
}

.likes__item:not(:last-child) {
	margin-right: 20px;
}

.likes__item a {
	padding: 10px 15px;
	display: inline-block;
	border-bottom: 2px solid;
	border-radius: 3px;
	box-shadow: none;
	background: #f5f5f5;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 100%;
}

.likes__item a:hover {
	color: #fff;
}

.likes__item--like a {
	border-bottom-color: #47ba72;
	color: #47ba72;
}

.likes__item--dislike a {
	border-bottom-color: #ba6547;
	color: #ba6547;
}

.likes__item--like a:hover {
	background: #47ba72;
}

.likes__item--dislike a:hover {
	background: #ba6547;
}

Я использую :not(:last-child) , чтобы добавить отступ каждому элементу, кроме последнего.

.likes__item:not(:last-child) {
	margin-right: 20px;
}

Вот как это должно выглядеть с CSS .

3. PHP

Сначала создадим функцию для получения лайков и дизлайков к записи. Она понадобится позже

Функция получает текущее количество лайков и дизлайков из базы данных. Если не найдено ни одного лайка или дизлайка, тогда их количество равно 0.

Функция принимает аргумент $type. Он принимает значение произвольного мета-поля записи, которое мы создадим через мгновение. Функция по умолчанию находит «лайки».

function ip_get_like_count($type = 'likes') {
	$current_count = get_post_meta(get_the_id(), $type, true);

	return ($current_count ? $current_count : 0);
}

Следующая часть PHP была рассмотрена в разделе с HTML. Но здесь есть разница - использование только что созданной функции ip_get_like_count(). Сначала она должна выводить 0.

<?php
	function ip_post_likes($content) {
		// Проверяем, является ли это одиночной записью
		if(is_singular('post')) {
			ob_start();

			?>
				<ul class="likes">
					<li class="likes__item likes__item--like">
						<a href="<?php echo add_query_arg('post_action', 'like'); ?>">
							Like (<?php echo ip_get_like_count('likes') ?>)
						</a>
					</li>
					<li class="likes__item likes__item--dislike">
						<a href="<?php echo add_query_arg('post_action', 'dislike'); ?>">
							Dislike (<?php echo ip_get_like_count('dislikes') ?>)
						</a>
					</li>
				</ul>
			<?php

			$output = ob_get_clean();

			return $output . $content;
		}else {
			return $content;
		}
	}

	add_filter('the_content', 'ip_post_likes');
?>

Помимо ip_get_like_count() мы используем функцию add_query_arg(). Она берет текущий URL-адрес и добавляет к нему строку запроса. Например, у меня на локальном сервере WordPress установлен в каталоге /wordpress/. Поэтому URL-адрес будет /wordpress/2018/08/02/hello-world/?post_action=like.

<?php echo add_query_arg('post_action', 'like'); ?>

Создадим функцию, которая обрабатывает лайки путем обновления метаданных.

function ip_process_like() {
	$processed_like = false;
	$redirect       = false;

	// Проверяет, это лайк или дизлайк
	if(is_singular('post')) {
		if(isset($_GET['post_action'])) {
			if($_GET['post_action'] == 'like') {
				// Лайк
				$like_count = get_post_meta(get_the_id(), 'likes', true);

				if($like_count) {
					$like_count = $like_count + 1;
				}else {
					$like_count = 1;
				}

				$processed_like = update_post_meta(get_the_id(), 'likes', $like_count);
			}elseif($_GET['post_action'] == 'dislike') {
				// Дизлайк
				$dislike_count = get_post_meta(get_the_id(), 'dislikes', true);

				if($dislike_count) {
					$dislike_count = $dislike_count + 1;
				}else {
					$dislike_count = 1;
				}

				$processed_like = update_post_meta(get_the_id(), 'dislikes', $dislike_count);
			}

			if($processed_like) {
				$redirect = get_the_permalink();
			}
		}
	}

	// Редирект
	if($redirect) {
		wp_redirect($redirect);
		die;
	}
}

add_action('template_redirect', 'ip_process_like');

Разберем приведенный выше код более подробно.

Сначала мы создаем две переменные: $processed_like и $redirect. Установим для них значение false в самом верху функции.

function ip_process_like() {
	$processed_like = false;
	$redirect       = false;
}

Далее мы проверяем, имеем ли дело с одиночной записью. Если это так, проверяем, установлена ли переменная $_GET['post_action']. Если да, то мы можем отследить, пытается ли пользователь поставить отметку «нравится» или «не нравится».

// Проверяем, это лайк или дизлайк
if(is_singular('post')) {
	if(isset($_GET['post_action'])) {
		if($_GET['post_action'] == 'like') {
			// Лайк
		}elseif($_GET['post_action'] == 'dislike') {
			// Дизлайк
		}
	}
}

После этого задаем базовый код в каждой части оператора if / else, который говорит: «получить лайки к текущему посту; если они есть, добавить 1; если нет, начать с 1» . Та же логика применима к обеим частям, мы просто заменяем 'like' на 'dislike' в выражении else.

// Лайк
$like_count = get_post_meta(get_the_id(), 'likes', true);

if($like_count) {
	$like_count = $like_count + 1;
}else {
	$like_count = 1;
}

$processed_like = update_post_meta(get_the_id(), 'likes', $like_count);

Используя функцию update_post_meta(), мы обновляем метаданные записи.

Затем проверяем, равна ли переменная $processed_like true. Если метаданные обновлены, то она будет равно true. Потому что update_post_meta() при успешном выполнении возвращает значение true. Если это так, мы устанавливаем текущую постоянную ссылку в качестве редиректа.

Если бы мы не загрузили страницу с ?post_action=like еще в URL-е, тогда, когда пользователь скопировал бы этот URL-адрес или просто обновил страницу, это добавило бы еще один лайк.

if($processed_like) {
	$redirect = get_the_permalink();
}

Редирект запускается только в том случае, если переменная $redirect имеет значение true.

// Редирект
if($redirect) {
	wp_redirect($redirect);
	die;
}

Чтобы этот код работал, запускаем его с действием template_redirect, которое выполняется до того, как WordPress выберет шаблон для текущей записи.

add_action('template_redirect', 'ip_process_like');

4. Окончательный код

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

<?php
//---- Добавляем кнопки выше содержимого записи
function ip_post_likes($content) {
// Проверяем, является ли это одиночной записью
if(is_singular('post')) {
ob_start();

?>
<ul class="likes">
<li class="likes__item likes__item--like">
<a href="<?php echo add_query_arg('post_action', 'like'); ?>">
Like (<?php echo ip_get_like_count('likes') ?>)
</a>
</li>
<li class="likes__item likes__item--dislike">
<a href="<?php echo add_query_arg('post_action', 'dislike'); ?>">
Dislike (<?php echo ip_get_like_count('dislikes') ?>)
</a>
</li>
</ul>
<?php

$output = ob_get_clean();

return $output . $content;
		}else {
		return $content;
		}
	}

	add_filter('the_content', 'ip_post_likes');

	//---- Получаем количество лайков и дизлайков
	function ip_get_like_count($type = 'likes') {
		$current_count = get_post_meta(get_the_id(), $type, true);

		return ($current_count ? $current_count : 0);
	}

	//---- Обрабатываем лайки и дизлайки
	function ip_process_like() {
		$processed_like = false;
		$redirect       = false;

		// Проверяем, это лайк или дизлайк
		if(is_singular('post')) {
			if(isset($_GET['post_action'])) {
			if($_GET['post_action'] == 'like') {
			// Лайк
			$like_count = get_post_meta(get_the_id(), 'likes', true);

				if($like_count) {
					$like_count = $like_count + 1;
					}else {
						$like_count = 1;
					}

	$processed_like = update_post_meta(get_the_id(), 'likes', $like_count);
				}elseif($_GET['post_action'] == 'dislike') {
					// Дизлайк
		$dislike_count = get_post_meta(get_the_id(), 'dislikes', true);

					if($dislike_count) {
					$dislike_count = $dislike_count + 1;
					}else {
						$dislike_count = 1;
					}

$processed_like = update_post_meta(get_the_id(), 'dislikes', $dislike_count);
				}

				if($processed_like) {
					$redirect = get_the_permalink();
				}
			}
		}

		// Редирект
		if($redirect) {
			wp_redirect($redirect);
			die;
		}
	}

	add_action('template_redirect', 'ip_process_like');
?>

CSS

.likes {
	display: flex;
}

.likes__item {
	list-style: none;
}

.likes__item:not(:last-child) {
	margin-right: 20px;
}

.likes__item a {
	padding: 10px 15px;
	display: inline-block;
	border-bottom: 2px solid;
	border-radius: 3px;
	box-shadow: none;
	background: #f5f5f5;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 100%;
}

.likes__item a:hover {
	color: #fff;
}

.likes__item--like a {
	border-bottom-color: #47ba72;
	color: #47ba72;
}

.likes__item--dislike a {
	border-bottom-color: #ba6547;
	color: #ba6547;
}

.likes__item--like a:hover {
	background: #47ba72;
}

.likes__item--dislike a:hover {
	background: #ba6547;
}

Предварительный просмотр

Вадим Дворниковавтор-переводчик статьи «How To Add Likes to Posts in WordPress (Without a Plugin)»

Дмитрий Ж.

Окончательный код, в том виде в каком он представлен, не в жизнь не встанет functions.php (будет ошибка), догадайтесь почему.

Ответить

gines

Просто скопируйте Окончательный код в файл темы functions.php, и всё у Вас заработает.

Ответить

dasdasda

Ничего не понял, что куда, зачем. Эти вечные разработчики которые пишут все подряд не объясняя, что куда и дублируют скрипты. Перечитал 3 раза и не понял, что куда и зачем. Что в js, что на главной, что php

Ответить

Monolit

➞ dasdasda

Воткните это в function.php

//---- Добавляем кнопки выше содержимого записи
function ip_post_likes($content) {
// Проверяем, является ли это одиночной записью
if(is_singular('post')) {
ob_start();

?>
<ul>
<li>
<a href="">
Like ()
</a>
</li>
<li>
<a href="">
Dislike ()
</a>
</li>
</ul>
<?php

$output = ob_get_clean();

return $output . $content;

}else {
return $content;
}
}

add_filter('the_content', 'ip_post_likes');

//---- Получаем количество лайков и дизлайков
function ip_get_like_count($type = 'likes') {
$current_count = get_post_meta(get_the_id(), $type, true);

return ($current_count ? $current_count : 0);
}

//---- Обрабатываем лайки и дизлайки
function ip_process_like() {
$processed_like = false;
$redirect = false;

// Проверяем, это лайк или дизлайк
if(is_singular('post')) {
if(isset($_GET['post_action'])) {
if($_GET['post_action'] == 'like') {
// Лайк
$like_count = get_post_meta(get_the_id(), 'likes', true);

if($like_count) {
$like_count = $like_count + 1;
}else {
$like_count = 1;
}

$processed_like = update_post_meta(get_the_id(), 'likes', $like_count);
}elseif($_GET['post_action'] == 'dislike') {
// Дизлайк
$dislike_count = get_post_meta(get_the_id(), 'dislikes', true);

if($dislike_count) {
$dislike_count = $dislike_count + 1;
}else {
$dislike_count = 1;
}

$processed_like = update_post_meta(get_the_id(), 'dislikes', $dislike_count);
}

if($processed_like) {
$redirect = get_the_permalink();
}
}
}

// Редирект
if($redirect) {
wp_redirect($redirect);
die;
}
}

add_action('template_redirect', 'ip_process_like');

Ответить

Как изменить настройки URL-адресов WordPress и сайта

Как изменить URL-адрес WordPress

Как установить XAMPP и WordPress на Windows

Как исправить ошибку «Error establishing a database connection» в WordPress

Как перевести WordPress-сайт с HTTP на HTTPS / SSL

Настройка столбцов в панели администрирования WordPress