Use code to implement WordPress article like function

This website provides Linux server operation and maintenance, automated script writing and other services. If you need, please contact the blogger on WeChat: xiaozme

In order to achieve better interaction effect Msimple Theme It has been upgraded and the article like function has been added. This function refers to an article of Maker Cloud Pure code WordPress article add like function , record and share here.

Implementation ideas

The number of likes is displayed in real time through ajax. The number of likes is saved in custom fields. Cookies prohibit re likes.

Add Code

The following code is added to the functions.php Medium:

 add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like'); add_action('wp_ajax_bigfa_like', 'bigfa_like'); function bigfa_like(){ global $wpdb,$post; $id = $_POST["um_id"]; $action = $_POST["um_action"]; if ( $action == 'ding'){ $bigfa_raters = get_post_meta($id,'bigfa_ding',true); $expire = time() + 99999999; $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_ SERVER['HTTP_HOST'] : false; //  make cookies work with localhost setcookie('bigfa_ding_'.$ id,$id,$expire,'/',$domain,false); if (!$ bigfa_raters || !is_numeric($bigfa_raters)) { update_post_meta($id, 'bigfa_ding', 1); }  else { update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1)); } echo get_post_meta($id,'bigfa_ding',true); }  die; }

Add the following code to the footer.php This code depends on jQuery, so please ensure that you have introduced jQuery in advance, otherwise it cannot be used normally.

 <script type="text/javascript"> $.fn.postLike = function() { if ($(this).hasClass('done')) { return false; } else { $(this).addClass('done'); var id = $(this).data("id"), action = $(this).data('action'), rateHolder = $(this).children('.count'); var ajax_data = { action: "bigfa_like", um_id: id, um_action: action }; $.post("/wp-admin/admin-ajax.php", ajax_data, function(data) { $(rateHolder).html(data); }); return false; } }; $(document).on("click", ".favorite", function() { $(this).postLike(); }); </script>

Modify article page single.php , add a Like button where you need it, and the code is as follows:

 <a href="javascript:;" rel="external nofollow" target = "_blank"  rel="external nofollow" target = "_blank"  data-action="ding" data-id="<? php the_ID(); ?> " class="favorite<? php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?> ">Like<span class=" count "> <? php if( get_post_meta($post->ID,'bigfa_ding',true) ){             echo get_post_meta($post->ID,'bigfa_ding',true); } else { echo '0'; }?> </span> </a>

The article likes function has been realized through the above three pieces of code, but the style effect is terrible. The author also provides the following styles to add to the theme style.css Middle (the lower style is untested)

 .post-like{text-align:center;padding:10px} .post-like a{ background-color:#21759B; border-radius: 3px;color: #FFFFFF;font-size: 12px;padding: 5px 10px;text-decoration: none;outline:none} .post-like a.done, .post-like a:hover{background-color:#eee;color:#21759B;}  .post-like a.done{cursor:not-allowed}

However, the style of each theme may be different, and the CSS style above may not be suitable. It is recommended that you write CSS styles according to your own theme style (a certain front-end foundation is required)

improvement

The above method is to determine whether COOKIE exists through PHP to change the class attribute, and then determine whether the button can be clicked. But if your website has enabled CDN, or used WP-Super-Cache After this kind of static cache plug-in, the page will be cached in advance, so the judgment will be invalid, and you can like it indefinitely. So Xiaoz made improvements, and judged whether COOKIES exists again through js. The code is as follows.

On the topic page single.php Add the following codes at appropriate locations:

 <a id = "praise" data-no-instant class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?> " href="javascript:; " rel="external nofollow" target = "_blank"  rel="external nofollow" target = "_blank"  data-action="ding" data-id="<? php the_ID(); ?> "><i class=" fa fa thumbs-o-up "></i>Like<span class=" count "> <? php if( get_post_meta($post->ID,'bigfa_ding',true) ){             echo get_post_meta($post->ID,'bigfa_ding',true); } else { echo '0'; }?> </span> </a>

At the bottom of the topic page footer.php Add the following code (depending on jQuery):

 <script type="text/javascript"> //Get cookies function getCookie(cookieName){   var cookieValue="";   if (document.cookie && document.cookie != '')  {    var cookies = document.cookie.split(';');   for (var i = 0;  i < cookies.length; i++) {    var cookie = cookies[i];   if (cookie.substring(0, cookieName.length + 2).trim() == cookieName.trim() + "=") {   cookieValue = cookie.substring(cookieName.length + 2, cookie.length);    break;   }   }   }    return cookieValue;   } $.fn.postLike = function() { if ($(this).hasClass('done')) { return false; } else { $(this).addClass('done'); var id = $(this).data("id"), action = $(this).data('action'), rateHolder = $(this).children('.count'); var ajax_data = { action: "bigfa_like", um_id: id, um_action: action }; $.post("/wp-admin/admin-ajax.php", ajax_data, function(data) { $(rateHolder).html(data); $("#praise").removeClass("layui-btn-danger").addClass("layui-bg-gray"); }); return false; } }; $(document).on("click", ".favorite", function() { var post_id = $("#praise").attr("data-id"); //Get COOKIE if ( getCookie('bigfa_ding_' + post_id) != '' ) { Alert ('You've already liked it!); } else{ $(this).postLike(); } }); </script>

summary

The final function is similar to the "like" effect under the blog post of Xiaoz. Here, ideas and code implementation are mainly provided. In fact, the code has to be adjusted and modified according to its own situation, which should not be difficult for developers.

Some contents of this article refer to: https://www.22vd.com/44000.html

Xiaoz Blog

Implementing WordPress article like function in code mode

Published on: March 30, 2020 WordPress development 1 comment 21,056 views

Implementation ideas

Add Code

improvement

summary

Post reply Cancel Reply

1 comment already

Our official account: xiaozblog

Small z blog fan exchange group (WeChat)

Recent updates

Latest comments

Contact me

sponsor

Recommended by bloggers