wordpress如何實現讀者墻?
本文實例講述了WordPress實現讀者墻的方法。分享給大家供大家參考。具體實現方法如下:
推薦:《wordpress教程》
1.復制PAGE.php頁面,改名為readerwall.php,然后在其頂部添加如下代碼:
代碼如下:
<?php /* Template Name: Reader wall */ ?>
提示:你可以先修改部分代碼再運行。
2.在需要添加讀者墻的位置添加以下代碼:
代碼如下:
<!-- 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?!=?'改成你的郵箱賬號'?AND?post_password=''?AND?comment_approved='1'?AND?comment_type='')?AS?tempcmt?GROUP?BY?comment_author_email?ORDER?BY?cnt?DESC?LIMIT?39";// ?>
大家把管理員的郵箱改成你的,最后的這個39是選取多少個頭像,大家可以按照自己的主題進行修改,來適合主題寬度,代碼如下:
代碼如下:
<?php $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?=?'36',?$default?=?get_bloginfo('wpurl').'/avatar/default.jpg'?);? $tmp?=?"
“;? $output?.=?$tmp;? }? $output?=?“
- “.$output.”
“;? echo?$output?;? ?>?
提示:你可以先修改部分代碼再運行。
3.在主題目錄中style.css添加以下樣式:
代碼如下:
.readers-list{line-height:18px;text-align:left;overflow:hidden;_zoom:1}? .readers-list?li{width:200px;float:left;*margin-right:-1px}? .readers-list?a,.readers-list?a:hover?strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image:linear-gradient(#f8f8f8,#f2f2f2)}? .readers-list?a{position:relative;display:block;height:36px;margin:4px;padding:4px?4px?4px?44px;color:#999;overflow:hidden;border:#ccc?1px?solid;border-radius:2px;box-shadow:#eee?0?0?2px}? .readers-list?img,.readers-list?em,.readers-list?strong{-webkit-transition:all?.2s?ease-out;-moz-transition:all?.2s?ease-out;transition:all?.2s?ease-out}? .readers-list?img{width:36px;height:36px;float:left;margin:0?8px?0?-40px;border-radius:2px}? .readers-list?em{color:#666;font-style:normal;margin-right:10px}? .readers-list?strong{color:#ddd;width:40px;text-align:right;position:absolute;right:6px;top:4px;font:bold?14px/16px?microsoft?yahei}? .readers-list?a:hover{border-color:#bbb;box-shadow:#ccc?0?0?2px;background-color:#fff;background-image:none}? .readers-list?a:hover?img{opacity:.6;margin-left:0}? .readers-list?a:hover?em{color:#EE8B17;font:bold?12px/36px?microsoft?yahei}? .readers-list?a:hover?strong{color:#EE8B17;right:150px;top:0;text-align:center;border-right:#ccc?1px?solid;height:44px;line-height:40px}
提示:你可以先修改部分代碼再運行.
希望本文所述對大家的WordPress建站有所幫助。
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END
喜歡就支持一下吧
相關推薦