几天前,boke112导航推出了作者级别和相应的好处,其中一个是体验价值排行榜。许多博客想知道这个排行榜是如何实现的,所以今天boke112故意将这种实现方法分享给每个人,我希望收集每个人的智慧来进一步优化这个代码。
准备工作:
知道如何创建自定义页面(如果你不明白,请移动:“ 如何建立WordPress的自定义页面 ”);
想一想如何计算作者水平和经验值;
使用统计读数安装插件WP-PostViews。如果是计算视图数量的其他方法,请修改第一步的代码。
多作者的WordPress的站点经验值排行榜实现方法:
如图1所示,打开自定义页面(如排行榜页面)模板,找到以下代码:
- <?php the_content(); ?>
然后在它下方添加以下代码:
- <div id = “zzphbbg” style = “text-align:center; vertical-align:middle;” >
- <table width = “100%” >
- <TBODY>
- <TR>
- <td width = “10%” > <strong>排名</ strong> </ td>
- <td width = “20%” > <strong>作者</ strong> </ td>
- <td width = “10%” > <strong>等级</ strong> </ td>
- <td width = “20%” > <strong>经验值</ strong> </ td>
- <td width = “10%” > <strong>文章数</ strong> </ td>
- <td width = “20%” > <strong>阅读数</ strong> </ td>
- <td width = “10%” > <strong>评论数</ strong> </ td>
- </ TR>
- <?PHP
- 全球 $ wpdb, $ post ;
- $ zzphb = “ ;
- $ zuozhe_viewed = $ wpdb – > get_results(“SELECT count($ wpdb-> posts.ID)”为wzzs,sum($ wpdb-> posts.comment_count)为plzs,sum(meta_value + 0)AS ydzs,(count($ wpdb-> posts.ID)* 100 + sum(meta_value + 0)+ sum($ wpdb-> posts.comment_count)* 5)as jyz,$ wpdb-> posts.post_author as userid FROM $ wpdb-> posts LEFT JOIN $ wpdb-> postmeta ON $ wpdb-> postmeta.post_id = $ wpdb-> posts.ID WHERE post_author!=’1’AND post_status =’publish’AND meta_key =’views’AND post_password =“GROUP BY userid order by jyz DESC“);
- if($ zuozhe_viewed){
- $ i = 0;
- foreach ($ zuozhe_viewed as $ post){
- $ zzwzs = $ post – > wzzs;
- $ zzydzs = $ post – > ydzs;
- $ zzplzs = $ post – > plzs;
- $ zzjyz = $ post – > jyz;
- $ i ++;
- $ zznc = get_the_author_meta(’nickname’, $ post – > userid);
- if($ zzjyz > = 1 && $ zzjyz <10000){ $ zzdj ='<a class = “vip1” title = “作者等级LV.1为基础级,距离下级还差’。(10000- $ zzjyz)。 ‘“ > </a> <br/>【基础级】;;}
- if($ zzjyz > = 10000 && $ zzjyz <100000){ $ zzdj ='<a class = “vip2” title = “作者等级LV.2为入门级,距离下级还差’。(100000- $ zzjyz)。 ‘“ > </a> <br/>【入门级】;;}
- if($ zzjyz > = 100000 && $ zzjyz <500000){ $ zzdj ='<a class = “vip3” title = “作者等级LV.3为职业级,距离下级还差’。(500000- $ zzjyz)。 ‘“ > </a> <br/>【职业级】;;}
- if($ zzjyz > = 500000 && $ zzjyz <1000000){ $ zzdj ='<a class = “vip4” title = “作者等级LV.4为大神级,距离下级还差’。(1000000- $ zzjyz)。 ‘“ > </a> <br/>【大神级】;}
- 如果($ zzjyz > = 1000000){ $ zzdj = ‘<a 类 = “vip5” title=” 作者等级LV.5为宗师级”> </A> <BR/>【宗师级】’;}
- if ($ i == 1){
- $ tt = “<i class =’novel-rank-icon novel-rank-1′> </ i>” ;
- }
- 否则 if ($ i == 2){
- $ tt = “<i class =’novel-rank-icon novel-rank-2′> </ i>” ;
- }
- 否则 if ($ i == 3){
- $ tt = “<i class =’novel-rank-icon novel-rank-3′> </ i>” ;
- }
- 其他 {
- $ tt = $ i ;
- }
- $ zzphb 。= “<tr> <td width = ’10%’> <span class =’fz16 red’> $ tt </ span> </ td>
- <td width = ’20%’> <span class =’fz16 red’> <a href = \“https://boke112.com/author/”。 $ post – > userid。 “/ \”title = \“”。 $ zznc 。 “在boke112导航的专栏\”rel = \“nofollow \”target = \“_ blank \”> $ zznc </a> </ span> </ td>
- <td width = ’10%’> <span class =’fz16 red’> $ zzdj </ span> </ td>
- <td width = ’20%’> <span class =’fz16 red’> $ zzjyz </ span> </ td>
- <td width = ’10%’> <span class =’fz16 red’> $ zzwzs </ span> </ td>
- <td width = ’20%’> <span class =’fz16 red’> $ zzydzs </ span> </ td>
- <td width = ’10%’> <span class =’fz16 red’> $ zzplzs </ span> </ td>
- </ tr>“ ;
- }
- }
- echo $ zzphb ;
- ?>
- </ TBODY>
- </ TABLE>
- </ DIV>
其中,作者级别和相应的经验值在代码中,请自行修改,经验值计算代码:
- (count($ wpdb – > posts.ID)* 100 + sum(meta_value + 0)+ sum($ wpdb – > posts.comment_count)* 5)
这意味着作者文章的总数乘以100。文章的总读数加上章节的总评论乘以5.多重或经验值计算方法应由您自己修改。
2,添加以下CSS代码到主题的style.css的文件中
- #zzphbb g td { text-align:center ; vertical-align:middle ;}
- .novel-rank- icon {
- 宽度: 17px ;
- 身高: 22px ;
- display: inline – block ;
- background-image: url(images / zzdj.png);
- background-repeat: no-repeat ;
- }
- .novel-rank- icon .novel-rank-1 {
- background-position:0 0;
- }
- .novel-rank- icon .novel-rank-2 {
- background-position:0 – 36px ;
- }
- .novel-rank- icon .novel-rank-3 {
- background-position:0 – 74px ;
- }
- / *作者VIP等级显示功能的样式* /
- .vp,.vip,.vip1,.vip2,.vip3,.vip4,.vip5,.vip6,.vip7 { background: url(images / vip.png) no-repeat ; display: inline – block ; 溢出: 隐藏 ; border: none ;}
- .vp { background-position: – 515px – 2px ; 宽度: 16px ; 身高: 16px ; margin-bottom: – 3px ;}
- .vp:hover { background-position: – 515px – 22px ; 宽度: 16px ; 身高: 16px ; margin-bottom: – 3px ;}
- .vip { background-position: – 494px – 3px ; 宽度: 16px ; 身高: 14px ; margin-bottom: – 2px ;}
- .vip:hover { background-position: – 494px – 22px ; 宽度: 16px ; 身高: 14px ; margin-bottom: – 2px ;}
- .vip1 { background-position: – 1px – 2px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip 1:悬停{ background-position: – 1px – 22px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip2 { background-position: – 63px – 2px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip 2:悬停{ background-position: – 63px – 22px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip3 { background-position: – 144px – 2px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip 3:悬停{ background-position: – 144px – 22px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip4 { background-position: – 227px – 2px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip 4:悬停{ background-position: – 227px – 22px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip5 { background-position: – 331px – 2px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip 5:悬停{ background-position: – 331px – 22px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip6 { background-position: – 441px – 2px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip 6:悬停{ background-position: – 441px – 22px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip7 { background-position: – 611px – 2px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
- .vip 7:悬停{ background-position: – 611px – 22px ; 宽度: 46px ; 身高: 14px ; margin-bottom: – 1px ;}
3,将以下图片存放到主题的图片夹数文件中如果不是这个文件夹数,请注意修改CSS代码中的图像路径。
总结
实际上,这个排行榜的实现方法类似于我们读者墙的实现方法。通过SQL语句查询相应的数据后,可以显示它。剩下的就是调整CSS样式。如果您担心通过SQL实时查询显示数据,或者您担心被他人扫描,则可以向排行榜页面添加验证码,并且只有在验证码正确的情况下才能添加验证码。具体来说,如何折腾取决于每个人的想法。本文仅使用boke112导航提交作者列表来说明该想法。
以上内容来源于:HTTPS://boke112.com/3647.html