WordPress纯代码为主题添加读者墙

WordPress纯代码为主题添加读者墙

作者 : 资源客 本文共2992个字,预计阅读时间需要8分钟 发布时间: 2019-09-18 共196人阅读

今天给大家分享一下为wordpress主题模板添加读者墙功能的方法实现,本代码可以应用与主题侧边栏与页面,而且样式非常华丽,下面我们以PAGES页面添加为示例来给大家演示一下操作过程。

第一步:在wordpress核心文件内添加读者墙函数

在function.php文件内添加如下代码

//wordpress读者墙-wazhuti.com
function readers_wall( $outer='.',$timer='30',$limit='18' ){
	global $wpdb;
	$counts = $wpdb->get_results("select count(comment_author) as cnt, comment_author, comment_author_url, comment_author_email from (select * from $wpdb->comments left outer join $wpdb->posts on ($wpdb->posts.id=$wpdb->comments.comment_post_id) where comment_date > date_sub( now(), interval $timer month ) and user_id='0' and comment_author != '".$outer."' and post_password='' and comment_approved='1' and comment_type='') as tempcmt group by comment_author order by cnt desc limit $limit");
	foreach ($counts as $count) {
		$avatar_url = get_bloginfo('wpurl') . '/wp-content/avatar/' . md5(strtolower($count->comment_author_email));
		$c_url = $count->comment_author_url;
		if ($c_url == '') $c_url = '';
		$page .= '<li><a target="_blank" rel="external nofollow" alt="' . $count->comment_author . '" href="'. $c_url . '"><span class="pic"><img src="' . $avatar_url . '.jpg" /></span><span class="num"><strong>'. $count->cnt . '+</strong></span><span class="name">' . $count->comment_author . '</span></a></li>';
	}
	echo $page;
};

注$limit=’18’ ,即显示为18个读者。请在/wp-content/目录下新建avatar文件夹,用来存放头像缓存文件。

第二步:添加读者墙相应CSS样式

/*读者墙*/
.readers{margin:0px 8px 150px;width:290px}
.readers ul{list-style: none outside none;margin-left: 0px;}
.readers li{list-style: none outside none;margin: 0px 3% 15px;}
.readers a{width:36px;height:36px;display:block;float:left;position:relative;margin:0 8px 8px 0}
.readers .pic{position:absolute;top:0;left:0;z-index:100;width:36px;height:36px;display:block;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;}
.readers .pic img{border-radius:4px;width:36px;height:36px}
.readers .num{position:absolute;top:0;left:0;z-index:99;width:34px;height:34px;line-height:34px;color:#e02523;font-size:18px;font-weight:bold;display:block;background-color:#fff;text-align:center;border:#bbb 1px solid;-webkit-transform:rotatey(-180deg);-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;border-radius:4px}
.readers .name{position:absolute;top:0;left:0;color:#333;display:block;width:1px;height:1px;overflow:hidden;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;text-align:center}
.readers a:hover .pic{z-index:100;border-color:#eee;-webkit-transform:rotatey(180deg);-moz-transform:rotatey(180deg)}
.readers a:hover .num{z-index:101;-webkit-transform:rotatey(0deg);-moz-transform:rotatey(0deg);opacity:.8}
.readers a:hover .name{top:-28px;left:-38px;z-index:101;padding:4px 6px;height:20px;line-height:20px;overflow:hidden;background-color:#fff;border-radius:2px;box-shadow:0 0 3px #000;min-width:100px;opacity:.8}
.readers a:nth-child(n+8):hover .name{top:36px}

第三步:调用读者墙函数

在需要调用读者墙的位置添加如下代码


<?php readers_wall(); ?>

 

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"qq301.com",如遇到无法解压的请联系管理员!
资源客是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系772955675@qq.com 删除

资源客 » WordPress纯代码为主题添加读者墙