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

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

Существует несколько плагинов для добавления кнопки лайков к записям WordPress. Многие из них включают в себя возможности, которые вы никогда не будете использовать. А их код будет замедлять веб-сайт.

В данной статье я расскажу, как создать собственный «счетчик лайков» для записей WordPress при помощи HTML, CSS и PHP.

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.

<?phpfunction 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');
Как добавить кнопку лайков в записи WordPress без использования плагинов

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

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;}
Как добавить кнопку лайков в записи WordPress без использования плагинов

Вот как это должно выглядеть с 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.

<?phpfunction 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;}

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *