我们新增Dark Mode(暗模式),(只是在晚上)可以改变MAC OS&Windows系统的暗模式实现切换;安卓和苹果手机是一样的。
WordPress

为你的wordpress主题添加一个炫酷的读者墙

gyue2345·2016-10-01·61 次阅读··

   2016-10-01 21:35 LJY2345    抢沙发   隐藏边栏   黑色模式    61 
   评分 1 次,平均分 5.0    抢沙发   隐藏边栏   黑色模式
[收起] 文章目录

现在为博客添加读者墙功能,已经不再稀罕。最近本站弄了个读者墙,现在分享给大家。

https://www.ljy2345.com/read-people

这个读者墙代码最先是在 折子戏 看到的,我个人觉得不怎么好看,立刻就开始研究修改了,多次研究未果,可终究是研究出来了。头像圆角显示;可旋转,具体效果看下图或访问上方读者墙链接,

为你的wordpress主题添加一个炫酷的读者墙

下面介绍具体制作过程

读者墙页面

复制主题页面文件,如page.php等;改名为readerwall.php等。在适当位置添加下方代码。

<!-- start 读者墙  Edited By iSayme-->
<?php
 
    $query="SELECT COUNT(comment_ID) 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 24 MONTH ) AND user_id='0' AND comment_author_email != 'liangjianyu1999@foxmail.com' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 30";//大家把管理员的邮箱改成你的,最后的这个39是选取多少个头像,大家可以按照自己的主题进行修改,来适合主题宽度
 
    $wall = $wpdb->get_results($query);
 
    $maxNum = $wall[0]->cnt;
 
    foreach ($wall as $comment)
 
    {
 
        $width = round(40 / ($maxNum / $comment->cnt),2);//此处是对应的血条的宽度
 
        if( $comment->comment_author_url )
 
        $url = $comment->comment_author_url;
 
        else $url="#";
  $avatar = get_avatar( $comment->comment_author_email, $size = '50', $default = 'https://cdn.static2.ljy2345.com/wp-content/themes/tinection/images/gravatar.png' );
 
        $tmp = "<a id=\"duzhe\" class=\"comment_author_ua tooltip-trigger\" target=\"_blank\" href=\"".$comment->comment_author_url."\" title=\"[".$comment->comment_author."]近期评论".$comment->cnt."次\" data-original-title=\"[".$comment->comment_author."]近期评论".$comment->cnt."次\">".$avatar."<span>".$comment->comment_author."</span>";

        $output .= $tmp;
 
     }
 
    $output = "<div class=\"readers\">".$output."</div>";
 
    echo $output ;
 
?>
 
<!-- end 读者墙 -->

添加CSS3代码美化

直接添加在页面或style.css文件

    .link-content li img,.readers a img {
	margin-bottom: 5px;
	border-radius: 100%;
	transition: .5s;
	-webkit-transtion: .5s
}

.link-content li span,.readers a span {
	display: block
}

.link-content li:hover img,.readers a:hover img {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg)
}

.readers {
	padding: 20px 0
}

.readers a {
	display: inline-block;
	margin: 0 0 15px 0;
	width: 100px;
	text-align: center;
	font-size: 14px
}

教程结束。

赞赏

历史上的文章

博 主作者: 关注:6    粉丝:1最后编辑于:2020年4月11日
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

view comments - NOTHING
🌙
😃

切换注册
忘记密码 ?

×

您也可以使用第三方帐号快捷登录

切换登录

×
扫一扫二维码分享
下载海报
  切换主题 | SCHEME TOOL