Як створити систему рейтингу записів WordPress на jQuery

Існує багато плагінів для систем оцінювання постів. Напрочуд, жоден мене не задовольняє, вони надто складні або в них занадто багато вбудованих опцій. Так що з цього посібника ви дізнаєтеся, як створити свій власний простий рейтинг постів, безпосередньо всередині файлів вашої теми. Тож вам не потрібен буде плагін!

| Завантажити вихідні джерела |

Крок 1. Вступ

Рейтинг записів – дуже добрий спосіб отримати зворотний зв'язок від користувачів, думки про те, що саме їм цікаво. Коли я шукав простий та ефективний плагін, я зрозумів, що у них усіх надто багато опцій, при цьому недостатньо можливості настроїти систему під себе. Це була моя перша проблема. Друга проблема – використання надто великої кількості плагінів уповільнює роботу WordPress. Ми вже писали про це.

Отже, я вирішив поділитися з вами способом створення своєї системи рейтингу постів. Ми використовуємо:

• просту HTML розмітку та CSS3, так що все можна буде легко налаштувати
• jQuery для роботи з Ajax
• PHP та "зачіпки" для обробки даних

Крок 2. HTML розмітка

Ми збираємося показати кнопку у формі серця в нижній частині статті. Щоб зробити це, ми додамо наступну розмітку до файлу content-single.php (у темі Twenty Eleven):

<p class="post-like">
    <a data-post_id="POST_ID" href="#">
        <span class="qtip like" title="I like this article"></span>
    </a>
    <span class="count">POST_LIKES_COUNT</span>
</p>

Зверніть увагу, що ми використовуємо мета атрибути HTML5 для зберігання даних, тому працювати з jQuery буде просто. Потім для цих цілей буде використано код PHP , як ми побачимо на наступному кроці.

Крок 3. CSS3

Ми будемо використовувати CSS3 а німацію щоб додати деяку візуальну інтерактивність та sprites CSS щоб зменшити кількість зовнішніх зображень.

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 . Потім відкрийте його та додайте наступний код:

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;
    })
})

пояснення

Для початку, давайте отримаємо ID посту за допомогою методу jQuery і потім передамо його нашому обробнику PHP . Змінна ajax_var створюється динамічно за допомогою PHP (ми опишемо це у наступному розділі).

Найкращий спосіб використання ajax у WordPress - це робити запити до admin-ajax.php . Він знаходиться в папці wp-admin і ви можете прикріпити ваші функції виклику до "зачіпок". Погляньмо, як це працює.

Крок 5. PHP та "зачіпки"

Як ми діятимемо далі? Ми збираємося прив'язати деякі функції до функцій-зачіпок WordPress, а потім викликати наш скрипт і додати деякі створені PHP змінні JavaScript, які будуть використовуватися jQuery.

Умови

Давайте відкриємо файл functions.php та почнемо додавати наші функції. Спочатку нам потрібно прив'язати функції до функцій WordPress. Так що додайте ці два рядки у ваш файл:

add_action('wp_ajax_nopriv_post-like', 'post_like');
add_action('wp_ajax_post-like', 'post_like');

Перша умова починає діяти, коли користувач авторизований, друга - коли авторизований. Інформацію про те, як правильно впровадити ajax, можна знайти тут.

Ви бачите частину зачіпки " post-like ", це параметр action, який ми використовували на попередньому кроці.

Тепер ми включимо в чергу наш скрипт і оголосимо наші змінні:

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
• нунцій: хеш для запобігання атакам і помилкам

Ці параметри можна використовувати в jQuery таким чином: ajax_var.url і ajax_var.nonce . Використання функцій WordPress та admin-ajax.php – найнадійніший спосіб роботи з Ajax.

Функції

Давайте додамо функцію post_like function . Що виконає ця функція?

• перевірить нунцій;
• отримає ID посту, IP користувача та метадані посту;
• перевірить, чи вже голосував користувач;
• збереже дані (IP + кількість голосів) для поточного посту;
• поверне значення кількості голосів jQuery.

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 codex ).

Ми визначимо, як довго повинен чекати користувач, перш ніж проголосувати знову (у хвилинах):

$timebeforerevote = 120; // = 2 hours

Ця змінна може зберігатися в панелі адміністратора теми, тому її можна легко змінити.

Тепер додайте наступний код, щоб перевірити, чи вже голосував користувач:

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

Тут немає нічого складного, ми просто перевіряємо, чи вже голосував користувач (тобто, чи є його IP у списку тих, хто голосував), і чи можна йому голосувати знову (тобто, чи більше час, що минув з моменту голосування, ніж значення $timebeforerevote ).

Крок 6. Функція для створення HTML розмітки

Для того, щоб у вас була можливість керувати тим, як відображаються голоси, і зробити оновлення, якщо воно використовується в різних файлах, ми зробимо функцію, яка генерує розмітку. Якщо користувач вже проголосував, ми не показуватимемо серце як посилання, щоб уникнути безглуздих звернень до ajax.

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"></span>';
    else
        $output .= '<a href="#" data-post_id="'.$post_id.'">
                    <span  title="'.__('I like this article', $themename).'"class="qtip like"></span>
                </a>';
    $output .= '<span class="count">'.$vote_count.'</span></p>';
     
    return $output;
}

Ви можете замінити код, вставлений на Кроку 2 цією функцією:

<?php echo getPostLikeLink(get_the_ID());?>

Крок 7. Йдемо далі

Тепер, коли користувачі можуть голосувати за пости, вам можливо захочеться отримати зворотний зв'язок. Наприклад, ви можете відобразити топ 10 найкращих постів.

Для цього ми можемо використовувати query_post з наступними параметрами:

query_posts('meta_key=votes_count&orderby=meta_value_num&order=DESC&posts_per_page=10');

Висновок

На цьому все. Тепер ви можете відбирати найкращі пости за голосами та уподобаннями ваших читачів. Ви також можете застосувати свій стиль та дизайн за допомогою CSS до блоку рейтингу. Це лише один із способів, як створити свою систему рейтингу записів, так що не забувайте коментувати та пропонувати свої варіанти.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/