[纯代码]教你如何为WordPress主题增加读者墙的要领

择要:本日给人人分享一下为wordpress主题模板增加读者墙功用的要领完成,本代码能够运用与主题侧边栏与页面,并且款式异常华…

本日给人人分享一下为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=”‘.%20$c_url%20.%20′”><span class=”pic”><img src=”‘%20.%20$avatar_url%20.%20′.jpg” /></span><span class=”num”><strong>’. $count->cnt . ‘+</strong></span><span class=”name”>’ . $count->comment_author . ‘</span></a></li>’; } echo $page; };

1 2 3 4 5 6 7 8 9 10 11 12 //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=”‘%20.%20%20%20$%20c%20_url%20%20%20.%20%20%20‘”><span class=”pic”><img src=”‘%20%20%20.%20%20%20$%20avatar%20_url%20%20%20.%20%20%20‘.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}

1 2 3 4 5 6 7 8 9 10 11 12 13 /*读者墙*/ . 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 <?php readers_wall ( ) ; ?>
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!