> 教程分享 > 为您心爱的 WordPress主题添加文章点赞功能

为您心爱的 WordPress主题添加文章点赞功能

教程分享 06-20 5332

有些时候看着他人的文章页面有个点赞的非常不错，其实现在您也可以拥有，也就是几秒钟的事！也不知道是由谁首先写的，反正可以使用，最终的演示效果可以查看本站！

将这段代码添加到主题的 functions.php 文件中，结束标签（?>）之前:

//添加文章点赞功能
 add_action('wp_ajax_nopriv_specs_zan', 'specs_zan');
 add_action('wp_ajax_specs_zan', 'specs_zan');
 function specs_zan(){
 global $wpdb,$post;
 $id = $_POST["um_id"];
 $action = $_POST["um_action"];
 if ( $action == 'ding'){
 $specs_raters = get_post_meta($id,'specs_zan',true);
 $expire = time() + 99999999;
 $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
 setcookie('specs_zan_'.$id,$id,$expire,'/',$domain,false);
 if (!$specs_raters || !is_numeric($specs_raters)) {
 update_post_meta($id, 'specs_zan', 1);
 }
 else {
 update_post_meta($id, 'specs_zan', ($specs_raters + 1));
 }
 echo get_post_meta($id,'specs_zan',true);
 }
 die;
 }

将这段代码添加到主题的 jQuery.js 文件中，添到末尾：

 //自定义 js 代码块
 $.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: "specs_zan",
 um_id: id,
 um_action: action
 };
 $.post("/wp-admin/admin-ajax.php", ajax_data,
 function(data) {
 $(rateHolder).html(data);
 });
 return false;
 }
 };
 $(document).on("click", ".specsZan",
 function() {
 $(this).postLike();
 });

将这一段代码添加到主体的 style.css 文件中，尽量添加在前面，切记不要添加到最后面，应为多数主题的 style.css 都是响应式的，后面的 css 是有屏幕大小限制的。

 /*自定义样式*/
 .post-like{text-align:center;padding:10px}
 .post-like a{ background-color:#ff0000; opacity:0.7; border-radius: 5px;color: #FFFFFF;font-size: 18px;padding: 5px 10px;text-decoration: none;outline:none}
 .post-like a:hover{opacity:0.8;color: #FFFFFF;}
 .post-like a.done{opacity:0.7}

最后将这段代码添加到主题的 single.php 文件中，添加到 < ?php the_content() ?>下一行：

<div class="post-like">
 <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="specsZan <?php if(isset($_COOKIE['specs_zan_'.$post->ID])) echo 'done';?>">♥ 喜欢 <span class="count">
 <?php if( get_post_meta($post->ID,'specs_zan',true) ){
 echo get_post_meta($post->ID,'specs_zan',true);
 } else {
 echo '0';
 } ?></span>
 </a>
</div>

最后的显示效果就是本站这样了。

标签：