首页 > wordpress > jQuery重写WordPress插件WP-RecentComments
2009六月27

jQuery重写WordPress插件WP-RecentComments

wordpress , , 17 Comments 发表评论

重新放在开头：非常感谢bolo同学的“捉虫”，^_^

感谢showfom同学通知，”WordPress”一般是把”W”和”P”大写的。。嗯。

WP-RecentComments也是mg12大大出品的一款获取最新评论的插件，不得不说mg12大大的作品太多了，而且各个都是精品。

在这里我先声明一下，大家也看出来了，最近我一直在改mg12大大的作品，并不是因为我对其作品有偏见，相反，我一直在使用这些插件，并且深深的喜欢。

我改动一些代码，只是为了使其更加适合我自己的网站，但是，我的发动不一定适合所有人。请大家期待mg12大大的升级，插件一定会越来越好的。

并且，在这款插件里面，已经集成了jQuery版的函数，我只是将其打破，可以在插件内共享此代码，jQuery版函数请欣赏原插件自带脚本wp-recentcomments-jquery.js

这款插件改起来可比上一款要困难的多，因为其功能之多，逻辑之复杂，搞的我都快失去信心了，幸好后来支持下来了，呵呵。

同理，wp-recentcomments.php这个文件也是插件的后台，从后台接收数据，来传给core.php进行处理

function recentcomments_head() {
    $css_url = get_bloginfo("wpurl") . '/wp-content/plugins/wp-recentcomments/css/wp-recentcomments.css';
    if ( file_exists(TEMPLATEPATH . "/wp-recentcomments.css") ){
        $css_url = get_bloginfo("template_url") . "/wp-recentcomments.css";
    }

    $options = get_option('wp_recentcomments_options');

    $script_html = '';
    if($options['js_type'] == 'normal') {
        $script_html = '<script type="text/javascript" src="' . get_bloginfo('wpurl') . '/wp-content/plugins/wp-recentcomments/js/wp-recentcomments.js"></script>';
    } else if($options['js_type'] == 'custom_jquery') {
        $script_html = '<script type="text/javascript" src="' . $options['jquery_url'] . '"></script>';
        $script_html .= '<script type="text/javascript" src="' . get_bloginfo('wpurl') . '/wp-content/plugins/wp-recentcomments/js/wp-recentcomments-jquery.js"></script>';
    } else {
        $script_html = '<script type="text/javascript" src="' . get_bloginfo('wpurl') . '/wp-content/plugins/wp-recentcomments/js/wp-recentcomments-jquery.js"></script>';
    }

    echo "\n" . '<!-- START of script generated by WP-RecentComments -->';
    echo "\n" . '<link rel="stylesheet" href="' . $css_url . '" type="text/css" media="screen" />' . $script_html;
    echo "\n" . '<!-- END of script generated by WP-RecentComments -->' . "\n";
}
add_action('wp_head', 'recentcomments_head');

function add_wp_jquery() {
    wp_enqueue_script('jquery');
}
$options = get_option('wp_recentcomments_options');
if($options['js_type'] == 'wp_jquery') {
    add_action ('wp_print_scripts', 'add_wp_jquery');
}

看其内容，可以发现，其想的东西很多，尤其是在2.8版本发布之后，其内部逻辑会去判断你是否选择使用系统自带jQuery，或者是自定义jQuery库的位置，并且同样是在head里面既放CSS又放JS

因为用add_action(‘wp_head’)的位置还没有原来base.js用的地方高，这就会导致我的页面，先加载一个会调用jQuery的js，然后才加载jQuery文件，这是严重的错误，嗯。改之。

我比较喜欢用google的jQuery，所以在这里面，我就把jQuery的代码省去了，大家不要怪。

function recentcomments_head() {
    $css_url = get_bloginfo("wpurl") . '/wp-content/plugins/wp-recentcomments/css/wp-recentcomments.css';
    if ( file_exists(TEMPLATEPATH . "/wp-recentcomments.css") ){
        $css_url = get_bloginfo("template_url") . "/wp-recentcomments.css";
    }
   
    echo "\n" . '<link rel="stylesheet" href="' . $css_url . '" type="text/css" media="screen" />' . "\n";
}

function recentcomments_footer() {
    $js_url = get_bloginfo('wpurl') . '/wp-content/plugins/wp-recentcomments/js/wp-recentcomments.js';
   
    echo "\n" . '<script type="text/javascript" src="' . $js_url . '"></script>' . "\n";
}

//add_action('wp_head', 'recentcomments_head');

//add_action('wp_footer', 'recentcomments_footer');

之所以把js和css又都注释了，根本就不写了，是因为我同样把其内容不多的css放在了style.css里面，减少了一个http请求，而js嘛，看我这篇日志的标题，我是打算用jQuery重写了。呵呵。

看其core.php，有如下代码，其实这个插件，主要也是对ajax的应用

function rc_ajax(){

    // 翻页
    if($_GET['action'] == 'rc_ajax') {
        $argsf = $_GET["args"];
        $start = $_GET["start"];

        $args = str_replace('|', '&', $argsf);
        $args = str_replace('--', '=', $args);

        echo create_recentcomments($args, $start);
        die();

    // 查看详细信息
    } else if($_GET['action'] == 'rc_detail_ajax') {
        $argsf = $_GET["args"];
        $start = $_GET["start"];
        $id = $_GET["id"];

        echo create_rc_detail($id, $argsf, $start);
        die();
    }
}

先和大家简单说一下create_recentcomments和create_rc_detail都是做啥用的，功能到底是啥？这样大家看我下面介绍的改动也会方便理解一些

WP-RecentComments功能

WP-RecentComments功能

看到我标红的地方了吧？

WP-RecentComments插件提供了如下功能：翻页，即create_recentcomments实现的功能，并且有个查看单条评论详细内容的链接，这就是create_rc_detail提供的功能

详细的说一下，create_recentcomments里面有”上一页”,”下一页”,”最新的”这三种链接，这都是我们要修改的地方，先记一下，免得修改的时候会有落下的导致功能无法实现

create_recentcomments里面有”点击查看详细”,”返回”这两种功能，我们也先记下，也就是说一共有五处地方要修改

先来看一下原代码中的“最新的”这个链接

        if ($has_newest) {
            $newest = '<div id="rc_newest"><a href="javascript:void(0);" onclick="RCJS.page(\'' . get_bloginfo('siteurl') . '\',\'' . $argsf . '\',0,\'' . $loading_text . '\');">' . __('&laquo; Newest', 'wp-recentcomments') . '</a></div>';
        }

改后的内容如下：

        $has_newest = ($start >= $args['limit'] * 2);
        if ($has_newest) {
            $newest  = "<div id='rc_newest'>";
            $newest .= "<a href='javascript:void(0);' onclick='commentPage(\"".$siteurl."\",\"rc_ajax\",\"".$argsf."\",\"0\");' >&laquo; 最新的</a>";
            $newest .= "</div>";
        }

这样，显得规矩了一些吧？呵呵。稍候我们再来看我定义的这个commentPage()函数，以及其参数。

继续来寻找“上一页”，“下一页”的链接

$newer = '<div id="rc_newer"><a href="javascript:void(0);" onclick="RCJS.page(\'' . get_bloginfo('siteurl') . '\',\'' . $argsf . '\',' . $newer_start . ',\'' . $loading_text . '\');">' . __('&laquo; Newer', 'wp-recentcomments') . '</a></div>';

$older = '<div id="rc_older"><a href="javascript:void(0);" onclick="RCJS.page(\'' . get_bloginfo('siteurl') . '\',\'' . $argsf . '\',' . $older_start . ',\'' . $loading_text . '\');">' . __('Older &raquo;', 'wp-recentcomments') . '</a></div>';

改后的代码如下：

//上一页
            $newer  = "<div id='rc_newer'>";
            $newer .= "<a href='javascript:void(0);' class='newer_comments' onclick='commentPage(\"".$siteurl."\",\"rc_ajax\",\"".$argsf."\",\"".$newer_start."\");'>&laquo; 上一页</a>";
            $newer .= "</div>";

//下一页
            $older  = "<div id='rc_older'>";
            $older .= "<a href='javascript:void(0);' class='newer_comments' onclick='commentPage(\"".$siteurl."\",\"rc_ajax\",\"".$argsf."\",\"".$older_start."\");'>&laquo; 下一页</a>";
            $older .= "</div>";

再看原代码中的“查看详细”及“返回”功能

$result .= '<div class="post_title"><a href="'. get_permalink($comment->comment_post_ID) . '#comment-' . $comment->comment_ID . '">' . get_the_title($comment->comment_post_ID) . '</a></div>';

$expand = ' <span class="rc_expand"><a href="javascript:void(0);" onclick="RCJS.detail(' . $comment_id . ',\'' . get_bloginfo('siteurl') . '\',\'' . $argsf . '\',' . $comment_start . ',\'' . $loading_text . '\');">' . __('&raquo;', 'wp-recentcomments') . '</a></span>';

改后代码如下：

//返回功能
$result .= "<a class='rc_back' href='javascript:void(0)' onclick='commentPage(\"".$siteurl."\",\"rc_ajax\",\"".$argsf."\",\"".$start."\");'>&laquo; 返回</a>";
//查看详细
$expand  = "<span class='rc_expand'>";
$expand .= "<a href='javascript:void(0);' onclick='commentPage(\"".$siteurl."\",\"rc_detail_ajax\",\"".$argsf."\",\"".$comment_start."\",\"".$comment_id."\");' >&raquo;</a>";
       
$expand .= "</span>";

该找的地方都找出来了，看js代码的实现吧，呵呵，还记得上一篇日志里面我写的那个publicAjax函数吧，我上篇说的通用就是和此插件通用，嗯。

//url        ：Ajax请求的url地址
//action     : action参数，翻页和返回的参数是不同的
//args       : 其他参数
//start      : 从第几条(评论)开始
//comment_id : 查看详细评论的评论id
function commentPage(url,action,args,start,comment_id)
{
        url        += "?action=" + action;
        if(comment_id != undefined)
            url  += "&id=" + comment_id;
        url        += "&args=" + args;
        url        += "&start=" + start;
       
        publicAjax("rc_item_1","rc_nav",url);
}

此代码同样是在ready.js中，这样，WordPress插件WP-RecentComments就用jQuery重写完了

在这里提醒大家，在更换代码的时候，一定要注意先备份，不能影响线上的内容，呵呵。

文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/06/27/979/
版权所有 © 转载时必须以链接形式注明作者和原始出处！

17 Responses to “jQuery重写WordPress插件WP-RecentComments”

  1. #1 LAONB 回复 | 引用 Post:2009-06-27 17:54

    这个回头我要仔细研究，本来都打算直接PHP调用，连插件都省了，不过看完这文章，还是可以保留插件，毕竟有内容的摘要，比小工具光秃秃的效果好。

    [回复]

  2. #2 simaopig 回复 | 引用 Post:2009-06-27 19:23

    @LAONB
    呵，插件是可以保留的。只是把其中的方法重写了一下。充分利用现有资源。

    [回复]

  3. #3 bolo 回复 | 引用 Post:2009-06-27 19:31

    小子这两天玩jQuery上瘾了啊

    [回复]

  4. #4 simaopig 回复 | 引用 Post:2009-06-27 19:53

    @bolo
    一直看老牛玩的挺爽。就直接改了点。呵呵。

    [回复]

  5. #5 Jutoy 回复 | 引用 Post:2009-06-27 19:55

    囧，技术贴……
    我也喜欢用Google的JQ，不过自从上次Google那个啥以后，我就用自己的JQ了…… :!:

    [回复]

  6. #6 Jutoy 回复 | 引用 Post:2009-06-27 19:56

    呃？我的评论不见了？

    [回复]

  7. #7 simaopig 回复 | 引用 Post:2009-06-27 20:50

    @Jutoy
    呵。上次对我也没啥太大影响。呵呵。感觉还好。

    [回复]

  8. #8 粥小卜 回复 | 引用 Post:2009-06-27 22:41

    哇~~~ 呵呵 jQuery最近好流行啊~

    [回复]

  9. #9 simaopig 回复 | 引用 Post:2009-06-27 22:55

    @粥小卜
    流行好久了，呵呵。考试结束了吗？

    [回复]

  10. #10 LAONB 回复 | 引用 Post:2009-06-28 22:28

    我不用插件，直接用小工具显示评论，数据库调用活活多出了几次，照你的方法改插件去，还是留着这个插件 :D

    [回复]

  11. #11 simaopig 回复 | 引用 Post:2009-06-28 23:06

    @LAONB
    呵呵，有个插件方便一些，比如可以选择是否显示头像啦之类的东西。 8)

    [回复]

  12. #12 风也飘泊 回复 | 引用 Post:2009-06-29 12:46

    换这个插件吧,我的侧边栏上的评论太长了… :arrow:

    [回复]

  13. #13 simaopig 回复 | 引用 Post:2009-06-29 12:48

    @风也飘泊
    呵，而且这款插件可以翻页，这给人的感觉不错。呵。

    [回复]

  14. #14 joel 回复 | 引用 Post:2009-07-02 17:11

    嗯,我一直原汁原味的保留着.话说你这个header被改的有点突兀 :-| 个人感觉.

    [回复]

  15. #15 simaopig 回复 | 引用 Post:2009-07-02 17:12

    @joel
    呵呵，大家都这么觉得 ，不过我懒得改回去了。。

    慢慢看吧，呵呵。

    [回复]

  16. #16 小存 回复 | 引用 Post:2010-08-30 00:25

    :sad: 搞了两次，都出错了
    我真是小菜呀
    求助博主
    我好想像你的最近评论那样
    点击名字就现在留言的地方，而不是链接到对方的博客
    救命呀，教教我
    直接告诉我改哪里，哪个，或者最好好改好的直接发给我
    谢谢

    [回复]

  17. #17 拆墙部队 回复 | 引用 Post:2010-10-15 12:28

    我现在还有个重要的是没做，就是博客的分辨率自居中没改。

    [回复]

发表评论

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

分类:

最新评论

最新文章

博客存档

Meta