Там уже есть много плагинов системы рейтинга постов. Удивительно, но никто не отвечает моим потребностям, они либо слишком сложны, либо имеют слишком много встроенных опций. Итак, в этом уроке вы узнаете, как создать свою собственную простую функцию оценки поста непосредственно в файлах вашей темы. Там нет необходимости для плагина!
Шаг 1 Введение
Почтовые рейтинги — это хороший способ получить отзывы о том, на чем действительно сосредоточены ваши читатели. Пока я искал простой, но эффективный плагин, я понял, что все они имеют слишком много опций и недостаточно настраиваемы . Это была моя первая проблема. Вторая проблема заключалась в том, что использование слишком большого количества плагинов замедлит работу WordPress.
Поэтому я решил поделиться с вами способом создания вашей собственной системы оценок постов. Мы будем использовать:
- простая разметка HTML и CSS3, так что легко настроить
- jQuery для обработки вызовов Ajax
- PHP и хуки для обработки данных
Шаг 2 HTML-разметка
Мы собираемся отобразить кнопку в форме сердца в нижней части статьи. Для этого мы добавим разметку в файл content-single.php (в рамках темы Twenty Eleven).
|
1
2
3
4
5
6
|
<p class=»post-like»>
<a data-post_id=»POST_ID» href=»#»>
<span class=»qtip like» title=»I like this article»>
</a>
<span class=»count»>POST_LIKES_COUNT
</p>
|
Обратите внимание, что мы используем пользовательские мета-атрибуты HTML5 для хранения наших данных, поэтому с jQuery это действительно легко сделать. Затем это будет сгенерировано PHP, как мы увидим в следующем шаге.
Шаг 3 CSS3
Мы будем использовать CSS3-анимацию, чтобы добавить визуальную интерактивность, и CSS-спрайты, чтобы уменьшить количество внешних изображений.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
article footer .post-like{
margin-top:1em
}
article footer .like{
background:url(images/icons.png) no-repeat;
width: 15px;
height: 16px;
display: block;
float:left;
margin-right: 4px;
-moz-transition: all 0.2s ease-out 0.1s;
-webkit-transition: all 0.2s ease-out 0.1s;
-o-transition: all 0.2s ease-out 0.1s
}
article footer .post-like a:hover .like{
background-position:-16px 0;
}
article footer .voted .like, article footer .post-like.alreadyvoted{
background-position:-32px 0;
}
|
На данный момент, это должно выглядеть так
Шаг 4 jQuery
Мы будем использовать встроенный jQuery для обработки запросов ajax . При нажатии jQuery передает некоторые параметры нашему обработчику php и обрабатывает ответ для отображения подходящей информации.
Итак, давайте создадим новый файл с именем post-like.js и добавим его в папку js . Затем откройте его и добавьте этот код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
jQuery(document).ready(function() {
jQuery(«.post-like a»).click(function(){
heart = jQuery(this);
// Retrieve post ID from data attribute
post_id = heart.data(«post_id»);
// Ajax call
jQuery.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 vote successful
if(count != «already»)
{
heart.addClass(«voted»);
heart.siblings(«.count»).text(count);
}
}
});
return false;
})
})
|
Пояснения
Во-первых, давайте извлечем идентификатор сообщения с помощью метода данных jQuery, а затем передадим его нашему обработчику PHP. Переменная ajax_var создается динамически с помощью PHP (об этом мы поговорим в следующем разделе).
Лучший способ использовать ajax в WordPress — это admin-ajax.php . Он находится в папке wp-admin, и вы можете связать свои функции обратного вызова с помощью хуков. Посмотрим, как это работает.
Шаг 5 PHP и хуки
Как мы будем продолжать? Мы собираемся связать некоторые функции с хуками WordPress, а затем поставить в очередь наш скрипт и добавить некоторые сгенерированные PHP переменные JavaScript, которые будут использоваться jQuery.
Крючки
Давайте откроем файл functions.php и начнем добавлять наши функции.
Перво-наперво, нам нужно привязать функции к хукам WordPress. Так что добавьте эти две строки в ваш файл:
|
1
2
|
add_action(‘wp_ajax_nopriv_post-like’, ‘post_like’);
add_action(‘wp_ajax_post-like’, ‘post_like’);
|
Первый хук срабатывает, когда пользователь вошел в систему, а второй — нет. Более подробную информацию о том, как правильно реализовать ajax, вы найдете здесь: 5 советов по использованию ajax в WordPress .
Вы можете увидеть «подобную» часть ловушки, которая является параметром действия, который мы использовали на предыдущем шаге с jQuery.
Теперь мы поставим наш скрипт в очередь и объявим наши переменные:
|
1
2
3
4
5
|
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’)
));
|
Здесь мы определяем два важных параметра:
- url : полный URI для местоположения admin-ajax.php
- nonce : хеш безопасности для предотвращения атак и ошибок
Вы можете использовать эти параметры с jQuery следующим образом: ajax_var.url и ajax_var.nonce .
«Использование перехватчиков WordPress и admin-ajax.php — более безопасный способ работы с Ajax».
функции
Давайте добавим функцию post_like . Это будет:
- Проверьте одноразовый номер
- Получение идентификатора сообщения, IP-адреса пользователя и пользовательских метаданных сообщения
- Проверьте, голосовал ли уже пользователь или нет
- Сохранить данные (IP + количество голосов) для текущего сообщения
- Вернуть значение счетчика в jQuery
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
function post_like()
{
// Check for nonce security
$nonce = $_POST[‘nonce’];
if ( ! wp_verify_nonce( $nonce, ‘ajax-nonce’ ) )
die ( ‘Busted!’);
if(isset($_POST[‘post_like’]))
{
// Retrieve user IP address
$ip = $_SERVER[‘REMOTE_ADDR’];
$post_id = $_POST[‘post_id’];
// Get voters’IPs for the current post
$meta_IP = get_post_meta($post_id, «voted_IP»);
$voted_IP = $meta_IP[0];
if(!is_array($voted_IP))
$voted_IP = array();
// Get votes count for the current post
$meta_count = get_post_meta($post_id, «votes_count», true);
// Use has already voted ?
if(!hasAlreadyVoted($post_id))
{
$voted_IP[$ip] = time();
// Save IP and increase votes count
update_post_meta($post_id, «voted_IP», $voted_IP);
update_post_meta($post_id, «votes_count», ++$meta_count);
// Display count (ie jQuery return value)
echo $meta_count;
}
else
echo «already»;
}
exit;
}
|
Мы сохраняем IP-адрес и текущее время пользователя в одном post_meta, а голоса учитываются в другом. Время поможет нам проверить, может ли пользователь снова выполнить повторный отзыв по истечении определенного времени.
Вы можете спросить, что происходит, когда за текущее сообщение еще не было зарегистрировано ни одного голоса? Что ж, WordPress помогает нам еще раз, потому что update_post_meta проверяет, существует ли мета, и создает его, если нет (см. Дополнительную информацию об этой функции в кодексе WordPress ).
Мы определим, как долго пользователь должен ждать перед повторным голосованием (в минутах).
|
1
|
$timebeforerevote = 120;
|
Например, эта переменная может храниться в панели администратора темы, поэтому ее легко редактировать.
Теперь добавьте этот код, чтобы проверить, голосовал ли уже пользователь:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
function hasAlreadyVoted($post_id)
{
global $timebeforerevote;
// Retrieve post votes IPs
$meta_IP = get_post_meta($post_id, «voted_IP»);
$voted_IP = $meta_IP[0];
if(!is_array($voted_IP))
$voted_IP = array();
// Retrieve current user IP
$ip = $_SERVER[‘REMOTE_ADDR’];
// If user has already voted
if(in_array($ip, array_keys($voted_IP)))
{
$time = $voted_IP[$ip];
$now = time();
// Compare between current time and vote time
if(round(($now — $time) / 60) > $timebeforerevote)
return false;
return true;
}
return false;
}
|
«Вы должны всегда спрашивать себя, стоит ли использовать плагин и замедлять WordPress, а не добавлять какой-то простой код в вашу тему».Везде, где это возможно, функциональность должна быть включена через плагины, а не в файл functions.php темы напрямую.
Ничего сложного в этом нет, мы просто проверяем, проголосовал ли пользователь уже (т.е. его IP-адрес находится в списке IP-адресов голосов) и разрешено ли ему голосовать снова (т. $timebeforerevote Прошедшее время с момента голосования превышает $timebeforerevote ).
Шаг 6 Создайте функцию для генерации HTML-разметки
Чтобы получить больше контроля над отображением голосов и облегчить их обновление, если они используются в разных файлах, мы сделаем функцию, которая генерирует разметку. Если пользователь уже проголосовал, мы не отображаем сердце как ссылку, чтобы избежать бесполезных вызовов ajax.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
function getPostLikeLink($post_id)
{
$themename = «twentyeleven»;
$vote_count = get_post_meta($post_id, «votes_count», true);
$output = ‘<p class=»post-like»>’;
if(hasAlreadyVoted($post_id))
$output .= ‘ <span title=»‘.__(‘I like this article’, $themename).'» class=»like alreadyvoted»>
else
$output .= ‘<a href=»#» data-post_id=»‘.$post_id.'»>
<span title=»‘.__(‘I like this article’, $themename).'»class=»qtip like»>
</a>’;
$output .= ‘<span class=»count»>’.$vote_count.’
return $output;
}
|
Вы можете заменить код, вставленный на шаге 2, этой функцией:
|
1
|
<?php echo getPostLikeLink(get_the_ID());?>
|
Шаг 7 Идти дальше
Теперь пользователи могут голосовать за сообщения, вы можете получить обратную связь. Например, вы можете отобразить топ-10 постов с самым высоким рейтингом .
Для этого вы можете использовать query_post с этими параметрами:
|
1
|
query_posts(‘meta_key=votes_count&orderby=meta_value_num&order=DESC&posts_per_page=10’);
|
Шаг 7 Заключение
Это оно! Теперь вы сможете отслеживать свои сообщения в соответствии с голосами пользователей и настраивать разметку и CSS для вашего удобства. Это всего лишь один из способов создания системы рейтинга постов, так что не стесняйтесь комментировать этот урок и высказать свое мнение. Спасибо за чтение!