Как сделать свою кнопку «Мне нравится»(или +1) без плагина?

Решено

Как сделать систему оценки постов для вордпресс? Нужно сделать не через социальные кнопки, а просто свою систему, где можно поставить +1 посту, если статья понравилась.  Есть много плагинов с большим функционалом, так называемые системы рейтинга, которые сильно нагружают вордпресс. Хотя на самом деле нужен банальный функционал.

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

Для создание html рейтинга для вордпресс без плагина воспользуйтесь следующим кодом:

Создадим js файл с названием: post-like.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;
 })
 })
 

Далее в файле functions.php пропишем функции обработки нашего ajax запроса:

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

Теперь мы включим в очередь наш скрипт и объявим наши переменные:

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

Добавим в functions.php функции сохранения лайка:

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

Теперь пропишем функции проверки голосовал ли пользователь за данный пост или нет(функция вызывается в коде выше):

 function hasAlreadyVoted($post_id)
 {
 global $timebeforerevote;
 // $timebeforerevote = 120; // = 2 hours - через сколько пользователь сможет проголосовать еще раз
// 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;
 }
 

Ну а теперь нужно сформировать вид нашей кнопки, когда проголосовал и когда все еще впереди:

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

Все готово! Осталось только в нужном месте вывести наши лайки, это делается с помощью следующей функции:

 echo getPostLikeLink(get_the_ID());
 

Источник: http://code.tutsplus.com/tutorials/how-to-create-a-simple-post-rating-system-with-wordpress-and-jquery—wp-24474

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

Как такое реализовать в Joomla? Спасибо!

Здравствуйте, не по адресу, тут сообщество wordpress.

в 07.07.2016.
Добавить Комментарий

Как сделать с помощью cookie на стороне js ?

p.s: у себя сделал, но немного по другому — y-test.adr.com.ua

А зачем делать лайки на стороне пользователя?

Они будут не актуальны, легко могут обнулиться или вообще не сохраниться.

в 08.07.2016.

сделал 🙂

    1. По ip не очень хорошо, захожу с телефона и при переподключении ip меняется, уже можно голосовать.
    2. Сделал cookie на стороне клиента, работает хорошо, теперь можно голосовать с любого браузера и при смене ip — норма, но можно обойти очисткой браузера от куки. Мне кажется, это лучше, чем ip.
    3. Лучше всего, конечно, голосование, если зарегистрирован человек : )

Код выложу позже.

резульатат можно посмотреть тут — http://yara.esy.es/

в 08.07.2016.

Лучше использовать и ip и кукис.

в 09.07.2016.
Добавить Комментарий

А вы позволите взглянуть на css к этому коду? Не могу толком понять функционирование.

Спасибо. Нашёл тот гайд о котором вы писали, ссылка у вас не действительна, вот новый адресс с того же сайта…

https://code.tutsplus.com/articles/how-to-create-a-simple-post-rating-system-with-wordpress-and-jquery—wp-24474

в 02.11.2017.
Добавить Комментарий

Ваш ответ

Размещая свой ответ, вы соглашаетесь с правилами сайта.