Life Studio » 侧边栏 http://wange.im My Life, My Studio... Fri, 20 Jan 2012 01:49:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 给 WordPress 主题添加个性化小工具 http://wange.im/add-widgets-for-wordpress.html http://wange.im/add-widgets-for-wordpress.html#comments Sun, 16 Jan 2011 12:26:39 +0000 万戈 http://wange.im/?p=4367 今天还是继续分解我现在的 WordPress 主题，这个主题都还没有写完美就开始拆分主题了，呵呵。如标题所言，今天分享的是给 WordPress 主题添加个性化的小工具这个方法。小工具我们大家都知道，在 WordPress 的后台中一般都默认自带了分类目录、文本、日历、近期评论这样一些小工具。但是有时候对于一款个性的 WordPress 主题来说，这些默认的小工具显然已经不能满足需求，所以我们需要自定义一些适合自己主题的小工具。有童鞋会说了，侧边栏上常用的功能可以直接把代码写进 sidebar 里嘛，何需小工具？但是对于不熟悉代码的小盆友来说，小工具要方便地多，而且小工具的拖动排序功能也是相当的便利。好了，废话说多了，下面切入正题，如何给自己的 WordPress 主题添加小工具。

只能作个示例，具体功能大家自己扩展了。把以下代码放入 WordPress 主题的 functions.php 中：

class widget_test extends WP_Widget {
    function widget_test() {
        $widget_ops = array('description' => '小工具的描述信息');
        $this->WP_Widget('widget_test', '小工具的标题', $widget_ops);
    }
    function widget($args, $instance) {
        extract($args);
        $title = apply_filters('widget_title', esc_attr($instance['title']));
        $limit = strip_tags($instance['limit']);
        echo $before_widget.$before_title.$title.$after_title;
        echo '<ul class="middleli">';
            test( $limit );    //小工具需要执行的函数
        echo '</ul>';
        echo $after_widget;
    }
    function update($new_instance, $old_instance) {
        if (!isset($new_instance['submit'])) {
            return false;
        }
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['limit'] = strip_tags($new_instance['limit']);
        return $instance;
    }
    function form($instance) {
        global $wpdb;
        $instance = wp_parse_args((array) $instance, array('title' => '', 'limit' => ''));
        $title = esc_attr($instance['title']);
        $limit = strip_tags($instance['limit']);
?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">标题：<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('limit'); ?>">数量：<input class="widefat" id="<?php echo $this->get_field_id('limit'); ?>" name="<?php echo $this->get_field_name('limit'); ?>" type="text" value="<?php echo $limit; ?>" /></label>
        </p>
        <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
<?php
    }
}
add_action('widgets_init', 'widget_test_init');
function widget_test_init() {
    register_widget('widget_test');
}

就是这样，一步到位，保存之后再去你的小工具里看一下，是不是多了一个叫“小工具的标题”的小工具呀？注意到上面代码的 test( $limit ); 这个就是你需要小工具执行的函数，你可以直接写在这里面，也可以把函数写到 functions.php 里，都一样。

下面这张图是我自己主题所用到的万戈牌小工具，以后要改顺序也不用修改主题了，拖动就OK了，哈哈哈哈，真方便。点击看大图哟~~

]]> http://wange.im/add-widgets-for-wordpress.html/feed 175 jQuery 之关闭/显示侧边栏 http://wange.im/close-show-sidebar-width-jquery.html http://wange.im/close-show-sidebar-width-jquery.html#comments Wed, 18 Aug 2010 13:27:54 +0000 万戈 http://wange.im/?p=3696 大家不用找了，这个效果我没有用在自己的博客上，只是在本地测试玩的，因为感觉代码简单，但是效果很不错，所以就从木木那里照搬过来了。木木称之为“关闭/显示侧边栏”完美终结版，不过我觉得如果能加上 Cookies 记录访客的行为，那就更完美了，再不过，如果是我的话，也不用 Cookies 记录，因为这个效果仅作点缀而已，没必要再多加几行脚本。下面贴代码。

1.载入 jQuery

木木提供了 jQuery1.4 版本下的方法，对我来说 jQuery1.4太过庞大，还是免了，咱们用大众版本的就可以了。

2、执行脚本

$('#close-sidebar').toggle(function(){
    $(this).text("显示侧边栏");
    $('#sidebar').hide();
    $('#content').animate({width: "960px"}, 1000);
    },function(){
    $(this).text("关闭侧边栏");
    $('#sidebar').delay(800).show(0);
    $('#content').animate({width: "705px"}, 800);
});

还是比较容易理解的，就不多解释了。

3、关闭/显示侧边栏的按钮

<a id="close-sidebar" href="javascript:void(0)">关闭侧边栏</a>

一般放在头部的导航栏就可以吧。

木帅的原文在此：http://immmmm.com/close-show-sidebar-prefect-code.html，或许在不久后上市的新主题，大家可以看到我用的这个效果，敬请期待～

]]> http://wange.im/close-show-sidebar-width-jquery.html/feed 95 WordPress 非插件统计网站访问信息 http://wange.im/wordpress-ip-statistics-without-plugins.html http://wange.im/wordpress-ip-statistics-without-plugins.html#comments Sat, 10 Apr 2010 13:47:43 +0000 万戈 http://wange.im/?p=2988 前段时间，写了一篇《WordPress 非插件统计网站信息》，是对 WordPress 的日志总数、草稿总数、评论总数、用户总数等 WordPress 内置的函数对 WordPress 本身的信息进行统计，从而代替 WP  statistics 这类统计插件。今天又折腾出了姐妹篇，同样是非插件的方法，对网站的当日访问量、昨日访问量、访问 IP 总计、同一 IP 访问次数以及同时在线人数进行统计。

我参考了网站其他朋友的实现方法，大多数是用到数据库的，这个我不熟悉，试了几次都没成功，而且我的 WordPress 用上了 object cache 数据库缓存，会造成显示的统计数据不准确的情况。所以换上了纯 PHP 统计网站仿问信息的方法。

说了大半天，还是先来看看效果吧，请见小站内页侧边栏“网站统计”部分，其中的今日访问和当前在线就是本文提到的方法和效果，当然我只是用了其中的一部分，更多完整的效果请见附图。

方法如下：

1、下载 count.rar，上传并解压到主题文件夹下。

count.rar 中有四个文件，一个 count.php 和三个没有后缀名的临时文件，用来存放统计 log，所以请保持这三个没有后缀名的临时文件可写，至少要 755。

2、在需要显示统计信息的地方插入 <script src="count.php"></script> 来调用前面的 count.php，这里要注意路径。

关于代码，我就不分析了，有兴趣的朋友可以研究一下，至于样式大家也发挥自己的想象力吧。另外这统计的准不准确，我也说不上来，因为今天晚上才刚刚放上这个功能，还有待时间的考验，请大家帮忙一起测试啦。

]]> http://wange.im/wordpress-ip-statistics-without-plugins.html/feed 135 广告恒久远，一个永流传～ http://wange.im/ask-for-ads.html http://wange.im/ask-for-ads.html#comments Sat, 27 Mar 2010 12:36:54 +0000 万戈 http://wange.im/?p=2898 上一次招广告的效果相当好，发布之后第二天、第三天就连续卖出去两个广告位，看来我写文章本身就是一种很好的广告呀，HOHO～嗯嗯，其实我也可以考虑一下写有偿软文，应该收入也不错嘛，哈呀，想钱想疯掉了。

跑题之前赶快回归本文正题，今天就再奢侈一次，腾出一篇文章来介绍我新添加的广告位，就是评论框位置的右侧，其实这个广告位已经添加了一周了，因为没有好好推广，所以少人问津，只有猴猴问过，可惜就木有下文了……

一号广告位：

位置 所有日志页评论框右侧
格式与尺寸 125px × 125px 图片
价格 一口价 50大洋/月
支付方式 支付宝
申明 1、非法广告不接
2、瘦身美容广告不接
3、看不顺眼的广告不接
4、预付款
5、图片自备
6、谢绝试用期
7、支持图片标题和描述
8、最终解释权归万戈所有
示例  

关于这个广告位的评价，个人感觉绝对是黄金位置啊，至少每个留言和有翻看留言习惯的朋友都会看到这则广告位吧，于是定了50元/月试试水，卖的好就再涨价，哈哈。再来看看 smigoo MM 对此广告位的客观评价吧：

二号广告位

位置 首页侧边栏（暂时提供两个）
格式与尺寸 165px × 165px 图片
价格 一口价——80大洋/月
支付方式 支付宝
申明 1、非法广告不接
2、瘦身美容广告不接
3、看不顺眼的广告不接
4、预付款
5、图片自备
6、谢绝试用期
7、支持图片标题和描述（描述中仅限单个外链，增加外链需10元/月/个）
8、最终解释权归万戈所有
示例  

这个效果可以见我的内页啦，因为首页暂时没有人买，我就先不挂了，你可以选择小张那样带滑动层的 JQuery 特效的，当然也可以选煎蛋那种纯图片的。PS：顺便 BS 一下下星网童鞋，上次拍了我首页的广告居然不买，等我首页广告卖出去了，用钱砸你 T_T

PS1：感谢国家，感谢博友，感谢自己，第一次单月网赚收入破四位数了，鼓掌～

PS2：今天是地球一小时日，我响应一下，关手机了～～

PS3：不知道超人童鞋今天能否创下沙发五连贯的新记录呢～～～

PS4：嗯，刚想好又忘记了～～～～

PS5：本文发布的一小时后，一号广告位已被裸哥 619 轻松拿下，还剩二号广告位，来抢吧～～～～～

]]> http://wange.im/ask-for-ads.html/feed 186 WordPress 非插件统计网站信息 http://wange.im/wordpress-statistics-without-plugins.html http://wange.im/wordpress-statistics-without-plugins.html#comments Sat, 20 Mar 2010 12:20:42 +0000 万戈 http://wange.im/?p=2864 这里说的 WordPress 网站统计信息不是只 IP、PV 这类的流量信息，而是指 WordPress 日志数量、评论数量、页面、分类等等的统计信息，以前看到过别人用 WP  statistics 这类的插件来实现这个功能，不过了解我的朋友们都应该知道啦，我的原则是能用代码搞定的就决不用插件解决，所以今天又折腾了用非插件来显示网站统计信息的功能。

1、日志总数：

<?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?>

2、草稿数目：

<?php $count_posts = wp_count_posts(); echo $draft_posts = $count_posts->draft; ?>

3、评论总数：

<?php echo $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");?>

4、成立时间：

<?php echo floor((time()-strtotime("2008-8-18"))/86400); ?>

5、标签总数：

<?php echo $count_tags = wp_count_terms('post_tag'); ?>

6、页面总数：

<?php $count_pages = wp_count_posts('page'); echo $page_posts = $count_pages->publish; ?>

7、分类总数：

<?php echo $count_categories = wp_count_terms('category'); ?>

8、链接总数：

<?php $link = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->links WHERE link_visible = 'Y'"); echo $link; ?>

9、用户总数：

<?php $users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users"); echo $users; ?>

10、最后更新：

<?php $last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR post_type = 'page') AND (post_status = 'publish' OR post_status = 'private')");$last = date('Y-n-j', strtotime($last[0]->MAX_m));echo $last; ?>

效果可以看我的侧边栏，我没有全部用上，只选了其中六个。

方法来源：http://sunsunsun.org/wordpress/wp-tutorials/also-get-rid-of-a-plugin-wordpress-statistics-code.html

]]> http://wange.im/wordpress-statistics-without-plugins.html/feed 112 指定 WordPress 显示一段时间内的文章 http://wange.im/display-article-in-a-period-of-time-in-wordpress.html http://wange.im/display-article-in-a-period-of-time-in-wordpress.html#comments Mon, 15 Mar 2010 11:58:05 +0000 万戈 http://wange.im/?p=2845 可能是我最近水文太多，也可能是我疏于互访，近日我的 WordPress 人气一落千丈，大不如从前。看着侧边栏的“点击最高”和“热评日志”中的文章，已经好久没有赶超上来的文章，翻来翻去就这么几篇，对我来说是一种侧面打击，而且无论从用户体验、用户粘度或者 SEO 的角度来说都并不太好，所以今天在“点击最高”和“热评日志”的函数上做了些小小的手脚，加上了时间范围，让这两个版块上显示近一个月内的文章，那样就会有不断的新鲜文章更替上来。

正好，有两种限制时间范围的方法，我就分别介绍一下啦。

方法一：在 WordPress 主题的相关函数中找到 where 条件句，在其中加上一句条件句：post_date > date_sub( NOW(), INTERVAL 1 MONTH )，这个具体什么意思我就不解释了，还是很好理解的嘛，顺便拿自己的“点击最高”的代码作个例子，仅作参考哟，因为需要插件配合，不是通用的。

<?php
function hot_posts($limit = 10, $cut_off = 0, $before='<li>', $after='</li>'){
global $wpdb;
$home = get_option('siteurl');
$lastXs = $wpdb->get_results("SELECT ".$wpdb->posts.".ID AS ID,".$wpdb->posts.".post_title AS TITLE ,".$wpdb->post_counter.".post_count AS ZAEHLER FROM ".$wpdb->posts.",".$wpdb->post_counter." where ".$wpdb->post_counter.".post_id = ".$wpdb->posts.".ID AND post_type = 'post' AND post_date > date_sub( NOW(), INTERVAL 1 MONTH ) AND (".$wpdb->posts.".post_status = 'static' OR ".$wpdb->posts.".post_status = 'publish') order by ".$wpdb->post_counter.".post_count DESC limit 0,".$limit);
foreach ($lastXs as $lastX) {
$nummer = $lastX->ID;
$title = $lastX->TITLE;
$title = wptexturize($title);
if ($cut_off>0){
$title_short = substr($title,0,$cut_off);
}else{
$title_short = $title;
}
$hotposts = $lastX->ZAEHLER;
echo $before . "<span class=\"hotposttitle\"><a href='".get_permalink($nummer)."' title='".$title."'>". $title_short . "</a></span><span class=\"hotcomment\"> (".$hotposts." 次点击)</span>" . $after ;
}
}
?>

方法二：在 WordPress 主题的相关函数中找到 where 条件句，在其中加上一句条件句：TO_DAYS( now( ) ) - TO_DAYS( post_date ) < 31，这31就是限制的时间范围天数，这里限制了31天内，也就是一个自然月内啦，效果和方法一是一样一样的。用我的“热评日志”的代码作个例子，这个代码可以通用，尽情享用吧～

<?php
function mostcommented($limit = 5) {
global $wpdb, $post, $tableposts, $tablecomments, $time_difference, $post;
$mostcommenteds = $wpdb->get_results("SELECT  $tableposts.ID as ID, post_title, post_name, COUNT($tablecomments.comment_post_ID) AS 'comment_total' FROM $tableposts LEFT JOIN $tablecomments ON $tableposts.ID = $tablecomments.comment_post_ID WHERE comment_approved = '1' AND TO_DAYS( now( ) ) - TO_DAYS( post_date ) < 31 AND post_status = 'publish' AND post_password = ''  AND post_type = 'post' GROUP BY $tablecomments.comment_post_ID ORDER  BY comment_total DESC LIMIT $limit");
foreach ($mostcommenteds as $post) {
$post_id = (int) $post->post_id;
$post_title = htmlspecialchars(stripslashes($post->post_title));
$comment_total = (int) $post->comment_total;
$permalink = get_permalink($post->ID);
echo "<li><span class=\"hotposttitle\"><a title='$post_title' href=\"$permalink\">$post_title</a></span><span class=\"hotcomment\">($comment_total 条评论)</span></li> ";
}
}
?>

效果就见我的侧边栏 TAB 吧，现在显示的都是最近一个月内的点击最高和热评日志。

]]> http://wange.im/display-article-in-a-period-of-time-in-wordpress.html/feed 70 招、招、招广告啦～～～ http://wange.im/ads-for-sale.html http://wange.im/ads-for-sale.html#comments Tue, 02 Mar 2010 13:11:31 +0000 万戈 http://wange.im/?p=2786 距离上一次招广告已经有3个半月了，那次招广告是为了凑钱看《2012》，感谢歪酷人博客主机的广告赞助，愿望已经实现。这次再招广告要给自己找个什么借口好呢？嗯，对了，前段时间用 JQuery 实现了带滑动层的图片展示效果，看来看去放广告很是不错，就放广告吧，否则空晾着这效果多浪费呀。

在我正式发布此文招广告赞助之前，内页侧边栏的两个广告位已经被迅速占领，看来我的广告位还不是一文不值呀，一狠心又放了两个空位，呀呵，今天又被占领一个。哈哈，这下我来劲了，索性在首页的侧边栏也放上了两个广告位。

一号广告位：（已被煎蛋同学占领）

位置 内页侧边栏
格式与尺寸 165px × 165px 图片
价格 一口价 50大洋/月
支付方式 支付宝
申明 1、非法广告不接
2、瘦身美容广告不接
3、看不顺眼的广告不接
4、预付款
5、图片自备
6、谢绝试用期
7、支持图片标题和描述（描述中仅限单个外链，增加外链需10元/月/个）
8、最终解释权归万戈所有

二号广告位：

位置 首页侧边栏
格式与尺寸 165px × 165px 图片
价格 一口价——100大洋/月
支付方式 支付宝
申明 1、非法广告不接
2、瘦身美容广告不接
3、看不顺眼的广告不接
4、预付款
5、图片自备
6、谢绝试用期
7、支持图片标题和描述（描述中仅限单个外链，增加外链需10元/月/个）
8、最终解释权归万戈所有

三号广告位：

位置 首页侧边栏
格式与尺寸 165px × 165px 图片
价格 拍卖——起拍价 10大洋/月，每次加价增幅10大洋起
支付方式 支付宝
申明 1、非法广告不接
2、瘦身美容广告不接
3、看不顺眼的广告不接
4、预付款
5、图片自备
6、谢绝试用期
7、每人每次限拍一月
8、支持图片标题和描述（描述中仅限单个外链，增加外链需10元/月/个）
9、最终解释权归万戈所有

如果哪位慧眼识广告位，相中了这三块广告位，请Q我：101149488

]]> http://wange.im/ads-for-sale.html/feed 146 JQuery 实现带滑动层的图片展示效果 http://wange.im/jquery-slide-pic-show.html http://wange.im/jquery-slide-pic-show.html#comments Wed, 24 Feb 2010 07:15:07 +0000 万戈 http://wange.im/?p=2750 和我一样用 D&Z theme 的童鞋应该都看到过 zEUS 老大的网站，在其内页的侧边栏里有3列4行匡威的图片广告，当鼠标移动到每一张图片广告上时都会有一个半透明的层滑动上来显示广告的详细信息，很明显，这是一个 JQuery 实现的特效，相当的酷。只是可惜 zEUS 老大没有写出相关的教程，不过很巧的是，我在幸福收藏夹那里找到了答案：利用jQuery制作具有滑动动画效果的层。

先看一下我在本主题上的应用效果吧，请见侧边栏，我把原本单调的一张图片广告加上了滑动层，把鼠标移上去就可以显示文字信息。顺便空出了一个广告位，正在火热招租中，跳楼价40元/月，快来抢啊！！！

下面是简单的制作过程：

1、HTML 部分

<div class="boxgrid caption">
    <img src="images/ad.gif"/>
    <div class="cover boxcaption">
        <h3>标题</h3>
        <p>详细信息</p>
    </div>
</div>

2、CSS 部分

.boxgrid{
    width: 325px;
    height: 260px;
    margin:10px;
    float:left;
    background:#161613;
    border: solid 2px #8399AF;
    overflow: hidden;
    position: relative;
}
.boxgrid img{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}
.boxgrid p{
    padding: 0 10px;
    color:#afafaf;
    font-weight:bold;
    font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
    float: left;
    position: absolute;
    background: #000;
    height: 100px;
    width: 100%;
    opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.caption .boxcaption {
    top: 220;
    left: 0;
}

3、载入 JQuery

用 JQuery 1.2 就完全足够了，小巧，推荐。

4、JQuery 执行代码

$(document).ready(function(){
        $('.boxgrid.caption').hover(function(){
                $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
        }, function() {
                $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
        });
});

这里我只用了一种滑动效果，所以只需要以上这一段 JS 即可，更多滑动效果预览及参考代码请见：预览 | 下载这个实例的源文件

我只会拿来主义，把别人的东西加到自己的网站上，所以请别问我为什么，怎么做，想要知道其中原理并扩展发挥的朋友可以见此文：http://www.happinesz.cn/archives/1167/

最后，强调一下本文的重点：我在招广告啊！！！望乡亲父老、萝莉御姐们奔走相告，谢谢。

]]> http://wange.im/jquery-slide-pic-show.html/feed 82 WordPress 之链接平移 JQuery 特效 http://wange.im/mouseover-link-slide-for-wordpress.html http://wange.im/mouseover-link-slide-for-wordpress.html#comments Fri, 19 Feb 2010 12:28:39 +0000 万戈 http://wange.im/?p=2727 前段时间给 WordPress 添加了页面载入中提示效果，这是一个 JQuery 的特效，使用前必须先加载一下几十K之巨的 JQuery 库，而我整个 WordPress 也就这么一个地方利用到了 JQuery 库，如果不充分利用起来似乎有些浪费，所以今天又加上了两个。

主要介绍下 mouseover 链接右平移效果。本人表达能力比较差，所以还是直接看效果吧，请见侧边栏。将鼠标移至无序列表的链接上，就会发现文本链接向右移动了一下下，鼠标移开后，又恢复至原位。

方法如下：

1、载入 JQuery 库，个人比较喜欢 JQuery 1.2系列的版本，短小精悍，太大浪费，俺用不到。

2、关键代码：

jQuery.fn.nudge = function(a) {a = jQuery.extend({amount: 20,duration: 300,property: "padding",direction: "left",toCallback: function() {},fromCallback: function() {}},a);this.each(function() {var h = jQuery(this);var e = a;var d = e.direction;var g = e.property + d.substring(0, 1).toUpperCase() + d.substring(1, d.length);var c = h.css(g);var f = {};f[g] = parseInt(e.amount) + parseInt(c);var b = {};b[g] = c;h.hover(function() {h.stop().animate(f, e.duration, "", e.toCallback)},function() {h.stop().animate(b, e.duration, "", e.fromCallback)})});return this};jQuery(".sidebar li a").nudge({property: "padding",direction: "left",amount: 6,duration: 166});

其中 .sidebar li a 就是控制需要移动的链接，可以看到我这里只要求侧边栏无序列表的链接移动，如果要整站效果，那就直接一个 a 就可以了，如果还需指定添加其他部分，就用半角逗号隔开，如.sidebar li a,h2 a

另外还需要注意的就是加载顺序，JQuery 库是老大，必须放在前面，Over~

2月20日 更新：

感谢 hiro 同学，他又提供了一个代码更加简洁，效果完全相同的方法，第一步还是载入 JQuery 库，第二步是加入以下 JS。

$('.sidebar li a').hover(function() {
$(this).stop().animate({'left': '5px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});

第三步，加入以下 CSS：

.sidebar li a {position:relative;}

效果相同，代码当然是越短越好啦，不错不错～

]]> http://wange.im/mouseover-link-slide-for-wordpress.html/feed 128 WordPress 侧边栏带头像的最新评论 http://wange.im/recent-comment-with-avatar-in-wordpress.html http://wange.im/recent-comment-with-avatar-in-wordpress.html#comments Sat, 26 Dec 2009 09:41:00 +0000 万戈 http://wange.im/?p=2406 谨以本文献给 Nox 童鞋。昨天 Nox 就问我怎么实现 WordPress 带头像的最新评论？因为当时正好在上班，电脑上没有 DW 和 notepad++ 这类软件，玩代码很不爽，又没有实力用 Windows 自带的记事本当场写出，所以就推荐了 zww 的成果：《带头像显示的最新评论代码 - 完善篇》，不过好像还是没有解决 Nox 的问题。现在也只有周末可以折腾折腾 WordPress 了，所以今天就拿自己的 WordPress 开刀，在侧边栏实现了带 gravatar 头像的最新评论。

先说说通用版：

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved,comment_author_email, comment_type,comment_author_url, SUBSTRING(comment_content,1,25) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND comment_author != '万戈' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 10";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
foreach ($comments as $comment) {
$output .= "\n<li>".get_avatar(get_comment_author_email('comment_author_email'), 18). " <a href=\"" . get_permalink($comment->ID) . "#comment-" . $comment->comment_ID . "\" title=\"" . $comment->post_title . " 上的评论\">". strip_tags($comment->comment_author) ."： ". strip_tags($comment->com_excerpt) ."</a></li>";
}
$output .= $post_HTML;
$output = convert_smilies($output);
echo $output;
?>

再说说 gravatar 头像缓存版的，大家各取所需啦：

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved,comment_author_email, comment_type,comment_author_url, SUBSTRING(comment_content,1,25) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND comment_author != '万戈' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 10";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
foreach ($comments as $comment) {
$output .= "\n<li><img width=\"18\" height=\"18\" src=\"http://wange.im/gravatar/cache/avatar/".md5(strtolower($comment->comment_author_email)). " \" /><a href=\"" . get_permalink($comment->ID) . "#comment-" . $comment->comment_ID . "\" title=\"" . $comment->post_title . " 上的评论\">". strip_tags($comment->comment_author) ."： ". strip_tags($comment->com_excerpt) ."</a></li>";
}
$output .= $post_HTML;
$output = convert_smilies($output);
echo $output;
?>

说明一下：代码中的“万戈”换成各自的名字就行，只是为了隐藏博主的最新留言，还有 gravatar 头像缓存的路径就根据各自的实际情况啦。

在完善 WordPress 带头像的最新评论的时候，最折腾我的就是样式，让我够累的，照顾了 Firefox，又忽略了 IE，特别是难缠的 IE6，我也是无能为力了，就先这么着吧，有时间再修改。

]]> http://wange.im/recent-comment-with-avatar-in-wordpress.html/feed 137