纯代码给wordpress添加点赞和分享功能【WP系列教程之三十一】

点赞分享很多网站都需要这些功能,可以使网站多点互动功能,分享给别人也可以添加下网站的粘度,现在我们就来说说如何给wordpress添加这两个功能。居然演示效果,可以看文章最下面

纯代码给wordpress添加点赞和分享功能【WP系列教程之三十一】

添加点赞功能:functions.php里面添加以下代码

//点赞
function md_like(){
global $wpdb,$post;
$id = $_POST["um_id"];
$action = $_POST["um_action"];
if ( $action == 'ding'){
$specs_raters = get_post_meta($id,'md_like',true);
$expire = time() + 99999999;
$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
setcookie('md_like_'.$id,$id,$expire,'/',$domain,false);
if (!$specs_raters || !is_numeric($specs_raters)) {
update_post_meta($id, 'md_like', 1);
}
else {
update_post_meta($id, 'md_like', ($specs_raters + 1));
}
echo get_post_meta($id,'md_like',true);
}
die;
}
add_action('wp_ajax_nopriv_md_like', 'md_like');
add_action('wp_ajax_md_like', 'md_like');

添加点赞最多文章同样放到functions.php,可以定制侧边栏小工具使用

//点赞最多文章
function get_like_most($mode = '', $limit = 10, $days = 7, $display = true) {
global $wpdb, $post;
$limit_date = current_time('timestamp') - ($days*86400);
$limit_date = date("Y-m-d H:i:s",$limit_date);
$where = '';
$temp = '';
if(!empty($mode) && $mode != 'both') {
$where = "post_type = '$mode'";
} else {
$where = '1=1';
}
$most_viewed = $wpdb->get_results("SELECT $wpdb->posts.*, (meta_value+0) AS md_like FROM $wpdb->posts LEFT JOIN $wpdb->postmeta ON $wpdb->postmeta.post_id = $wpdb->posts.ID WHERE post_date < '".current_time('mysql')."' AND post_date > '".$limit_date."' AND $where AND post_status = 'publish' AND meta_key = 'md_like' AND post_password = '' ORDER BY md_like DESC LIMIT $limit");
if($most_viewed) {
$i = 1;
foreach ($most_viewed as $post) {
$post_title = get_the_title();
$post_like = intval($post->like);
$post_like = number_format($post_like);
$temp .= "<li><span class='li-icon li-icon-$i'>$i</span><a href=\"".get_permalink()."\">$post_title</a></li>";
$i++;
}
} else {
$temp = '<li>暂无文章</li>';
}
if($display) {
echo $temp;
} else {
return $temp;
}
}

调用点赞和分享功能的地方添加如何下代码

<div id="social">
<div class="social-main">
<span class="post-like">
<a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="md_like <?php if(isset($_COOKIE['md_like_'.$post->ID])) echo 'done';?>"><i class="fa fa-thumbs-up"></i>喜欢 <i class="count">
<?php if( get_post_meta($post->ID,'md_like',true) ){
echo get_post_meta($post->ID,'md_like',true);
} else {
echo '0';
}?></i>
</a>
</span>
<span class="share-sd">
<span class="share-s"><a href="javascript:void(0)" id="share-s" title="分享"><i class="fa fa-share-alt"></i>分享</a></span>
<div id="share">
<ul class="bdsharebuttonbox">
<li><a title="分享到QQ空间" class="fa fa-heart" data-cmd="qzone"></a></li>
<li><a title="分享到QQ好友" class="fa fa-qq" data-cmd="sqq"></a></li>
<li><a title="分享到新浪微博" class="fa fa-weibo" data-cmd="tsina"></a></li>
<li><a title="分享到印象笔记" class="fa fa-file-text" data-cmd="evernotecn"></a></li>
<li><a title="分享到人人网" class="fa fa-renren" data-cmd="renren"></a></li>
<li><a title="分享到微信" class="fa fa-weixin" data-cmd="weixin"></a></li>
</ul>
</div>
</span>
<div class="clear"></div>
</div>
</div>

百度分享按钮需要调用js,加入footer.php里面代码如下

<!-- 百度分享 -->
<?php if ( is_single() ) { ?>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"16"},"share":{"bdSize":16}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
<?php } ?>

添加css样式

/** 喜欢分享 **/
#social {position: relative;margin: 15px auto;}
.social-main {position: relative;margin: 0 auto; width: 253px;}
.social-main span {float: left;}
.social-main a {color: #fff;line-height: 35px;text-align: center;border-radius: 2px;}
.social-main a:hover{background: #104040;color: #fff;transition: all 0.2s ease-in 0s;}
.post-like a{background: #304040; width: 120px;display: block;}
.post-like a.done{cursor:not-allowed;background:#999999}
.share-s a{background: #304040;width: 120px;display: block;margin-left:10px}
.social-main i{color: #fff;font-style: normal;margin: 0 5px 0 0;}
/** 分享 **/
#share { position: absolute; top: -60px; right: -29px;width: 302px;height: 68px;display: none;z-index: 999;}
#share a {float: left;background: #999;font-size: 20px;color: #fff;width: 40px;height: 40px;line-height: 40px; margin-left: 4px;padding-left: 0; text-align: center; border-radius: 3px;background: rgba(128, 128, 128, 0.9);}
#share .fa-plus-square:hover {background: #7ab951 !important;}
#share .fa-heart:hover {background: #ff1000 !important;}
#share .fa-qq:hover {background: #ff7400 !important;}
#share .fa-weibo:hover {background: #ff0000 !important;}
#share .fa-pinterest-square:hover {background: #46c0e6 !important;}
#share .fa-renren:hover {background: #3b68ac !important;}
#share .fa-weixin:hover{background:#006f1d !important}

添加调用点赞最多的小工具,加入到widget.php里面

// 大家喜欢
class like_most extends WP_Widget {
function __construct(){
parent::__construct(false,'主题 | 大家喜欢',array( 'description' => '调用点击赞最多的文章' ,'classname' => 'like_most'));
}
function widget($args, $instance) {
extract($args);
$title = apply_filters( 'widget_title', $instance['title'] );
echo $before_widget;
if ( ! empty( $title ) )
echo $before_title . $title . $after_title;
$number = strip_tags($instance['number']) ? absint( $instance['number'] ) : 5;
$days = strip_tags($instance['days']) ? absint( $instance['days'] ) : 90;
?>
<div id="like" class="like_most">
<ul>
<?php if (function_exists('get_most_viewed')): ?>
<?php get_like_most('post',$number,$days, true, true); ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ul>
</div>
<?php
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
if (!isset($new_instance['submit'])) {
return false;
}
$instance = $old_instance;
$instance = array();
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['number'] = strip_tags($new_instance['number']);
$instance['days'] = strip_tags($new_instance['days']);
return $instance;
}
function form($instance) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = '大家喜欢';
}
global $wpdb;
$instance = wp_parse_args((array) $instance, array('number' => '5'));
$instance = wp_parse_args((array) $instance, array('days' => '90'));
$number = strip_tags($instance['number']);
$days = strip_tags($instance['days']);
?>
<p><label for="<?php echo $this->get_field_id( 'title' ); ?>">标题:</label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" /></p>
<p><label for="<?php echo $this->get_field_id('number'); ?>">显示数量:</label>
<input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
<p><label for="<?php echo $this->get_field_id('days'); ?>">时间限定(天):</label>
<input id="<?php echo $this->get_field_id( 'days' ); ?>" name="<?php echo $this->get_field_name( 'days' ); ?>" type="text" value="<?php echo $days; ?>" size="3" /></p>
<input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
<?php }
}
add_action( 'widgets_init', create_function( '', 'register_widget( "like_most" );' ) );

修复WordPress中caption图片宽度超出致页面混乱问题【WP系列教程之三十】

上一篇

百度分享不支持https的解决方案!百度分享本地化设置设置教程!

下一篇

99%的人还看了

发表评论

插入图片

欢迎登陆本站

 | 注册

必应搜索 站长推荐

在线工具

VIP视频解析

衡天云优质VPS 站长推荐

热门文章

  1. 抱歉,没有找到文章!

注册

登录

忘记密码 ?