Add CSS3 reader wall to your WordPress blog

Source: Internet
Author: User
Tags wordpress blog

Add CSS3 to your WordPress blog, that is, the most active readers of your article are displayed on a separate page, first look at the effect:

1. Copy the page.php of the theme, Save as readerwall.php, and add the code at the top of it

12345 < ?php/*Template Name: Reader wall*/?>

2. Then change the file below to find

1 < ?php the_content(‘‘);?>

Add the following code in front of it

12345678910111213141516171819 <!-- 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是选取多少个头像,大家可以按照自己的主题进行修改,来适合主题宽度    $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 = "<li><a target=\"_blank\" href=\"".$comment->comment_author_url."\">".$avatar."<em>".$comment->comment_author."</em> <strong>+".$comment->cnt."</strong></br>".$comment->comment_author_url."</a></li>";        $output .= $tmp;     }    $output = "<ul class=\"readers-list\">".$output."</ul>";    echo $output ;?><!-- end 读者墙 -->

3. Add the following CSS style to the theme's Style.css file (I have modified it, you can also modify the corresponding code according to your own theme)

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 66676869707172737475767778798081828384858687888990919293949596979899100 .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-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;    font-size:12px;    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} .readers-list {    line-height: 18px;    text-align: left;    _zoom: 1;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    -o-text-overflow: ellipsis;}

4. Create a new page, template select readerwall.php, the content is not filled, the title "Reader Wall", and then add the page to the menu.

Add CSS3 reader wall to your WordPress blog

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.