用jQuery重写WordPress插件MulticolLinks
重新放在开头：感谢LaoNB同学帮忙调试
WP-MulticolLinks是mg12大大提供的一款非常好用的WordPress友情链接插件
因为与我这款皮肤是同一个作者(为mg12大大的努力劳动敬礼 
)，所以此插件与inove皮肤兼容是没的说的了，非常的盖，赞一个
WP-MuticolLinks后台控制面板
但是，插件机制本身存在一些让人不爽的地方，比如，原来此插件会把其自带的css与js全都放在页面head头标签内，这样无形中就增加了http请求，使我这本来就不快的站变的更是缓慢。
为了处理此现象，我将该插件的一部分代码稍做修改，以满足自身的需要，代码部分略讲，如果各位有想要深入了解的请致电mg12
因为本人对WordPress的代码没有任何了解，所以有些地方只是凭感觉猜测，有胡说的地方各位见谅
wp-multicollinks.php，此文件应该是该款插件的后台文件，其内部从后台小工具处接收参数，根据参数不同来做不同的处理
* 打印样式和脚本代码
*/
function multicollinks_head() {
$css_url = get_bloginfo("wpurl") . '/wp-content/plugins/wp-multicollinks/wp-multicollinks.css';
if ( file_exists(TEMPLATEPATH . "/wp-multicollinks.css") ){
$css_url = get_bloginfo("template_url") . "/wp-multicollinks.css";
}
echo "\n" . '<!-- START of script generated by WP-MulticolLinks -->';
echo "\n" . '<link rel="stylesheet" href="' . $css_url . '" type="text/css" media="screen" />';
echo "\n" . '<script type="text/javascript" src="' . get_bloginfo('wpurl') . '/wp-content/plugins/wp-multicollinks/wp-multicollinks.js"></script>';
echo "\n" . '<!-- END of script generated by WP-MulticolLinks -->' . "\n";
}
/**
* 在页面 head 部分插入代码
*/
add_action('wp_head', 'multicollinks_head');
在此，将js与css都插入到页面head部分，这里是一定要改的，因为看好友LaoNB一直在DIY，所以心痒难耐啊。呵呵。
我们可以将其变成两个函数，使css文件在页面头部呈现，而js出现在页面结尾，不会因为加载js影响主体页面呈现
不过，貌似很多插件都是把css和js一起放在页面头部，感觉不爽。呵呵，改之。
$css_url = get_bloginfo("wpurl") . '/wp-content/plugins/wp-multicollinks/wp-multicollinks.css';
if ( file_exists(TEMPLATEPATH . "/wp-multicollinks.css") ){
$css_url = get_bloginfo("template_url") . "/wp-multicollinks.css";
}
echo "\n" . '<link rel="stylesheet" href="' . $css_url . '" type="text/css" media="screen" />' . "\n";
}
function multicollinks_footer() {
$js_url = get_bloginfo('wpurl') . '/wp-content/plugins/wp-multicollinks/wp-multicollinks.js';
echo "\n" . '<script type="text/javascript" src="' . $js_url . '"></script>' . "\n";
}
/**
* 在页面 head 部分插入代码
*/
add_action('wp_head', 'multicollinks_head');
add_action('wp_footer', 'multicollinks_footer');
这样即可，不过这并不是改后的终结版本，因为我看其样式代码并不是很多，只有19行，在LaoNB同学的帮助下，决定把其放入style.css里面，这样又少一个http请求，呵呵。
观其js，里面有ajax操作，可以展开整个页面，也就是那个show all(显示全部链接，按钮)
从其原js代码中，我们可以看出，mg12大大是很认真负责的一个人，其在ajax操作之前还要判断用户的浏览器，来使不同的浏览器都能呈现同样的效果
不过，因为我是直接用jQuery的，这么看就有些麻烦，凭借着不多的jQuery经验，咱也来DIY一把
因为原作者再次使用让我多次郁闷的”MGJS”的兄弟”MLJS”，于是决定毁去其内容，因为感觉耦合太高了，不好。呵呵。
看core.php，这是真正的前端需要执行的一些php函数，包括页面展示的元素，都是在这里面被定义的
粗略扫一眼代码，加上强大的搜索功能，我们可以发现，其真正用到js实现的东西似乎只有一点，即：ajax 显示全部链接操作
// Show all 按钮
$showAll = '<a class="ml_showall" href="javascript:void(0);" onclick="MLJS.showall(\'' . get_bloginfo('wpurl') . '\',\'' . $argsf . '\',\'' . __('Loading', 'wp-multicollinks') . '\');">' . __('Show all »', 'wp-multicollinks') . '</a>';
$result .= '<li id="ml_nav"><div>' . $showAll . '<div class="ml_fixed"></div></div></li>';
}
将代码变得稍微规矩一些，让我们来看一下，呵呵
$showAll = "<a class='ml_showall' href='javascript:void(0);' >";
$showAll .= '给大爷显示全部链接';
$showAll .= '</a>';
//增加两个标签，在样式里面定义.display_none{display:none;}
$showAll .= "<a id='multin_url' attr='".get_bloginfo('wpurl')."' class='display_none'></a>";
$showAll .= "<a id='multin_args' attr='".$argsf."' class='display_none'></a>";
//把显示全部链接标签放入dom中
$result .= '<li id="ml_nav"><div>' . $showAll . '<div class="ml_fixed"></div></div></li>';
参照插件现有js，在我之前说过的ready.js里面加入如下代码
//multicollinks.js 友情链接插件部分代码
//点击“显示全部链接”时触发函数
jQuery(".ml_showall").click(function(){
var mul_nav = jQuery("#ml_nav");
var parent = document.getElementById("ml_nav").parentNode;
//得到隐藏域的值，即ajax请求的url地址及参数
var multin_url = jQuery("#multin_url").attr('attr');
var multin_args = jQuery("#multin_args").attr('attr');
//拼url
multin_url += "?action=ml_ajax";
multin_url += "&args=" + multin_args;
//发送ajax请求
publicAjax("ml_nav","ml_nav",multin_url);
});
});
这里面我做了一个新的函数，就是publicAjax函数，这个函数单拿出来的意思是因为稍候我更改的另一个插件也有ajax操作，可以通用
function publicAjax(first_item_id,nav_id,url)
{
//ajax请求发生时，显示的内容
var loading = '正在加载...';
//要替换的jQuery对象中的子元素记录的id
var firstItem = jQuery('#'+first_item_id);
//真正要替换的dom对象
//var parent = document.getElementById(first_item_id).parentNode;
//显示等待内容的jQuery对象
var newcom_nav = jQuery('#'+nav_id);
//ajaxStart开始的时候
//改变一些样式并且友好的提示用户，正在加载内容，请稍候
//ajaxStop结束的时候，无论成功或失败
//将样式恢复为正常
newcom_nav.ajaxStart(function(){
document.body.style.cursor = 'wait';
newcom_nav.html(loading);
}).ajaxStop(function(){
document.body.style.cursor = 'auto';
});
//进行ajax请求，直接用的jQuery的get方法
jQuery.get(url,function(data){
firstItem.parent().fadeOut(function() {
jQuery(this).html(data).fadeIn();
});
});
}
在这里，大家不理解的可能是firstItem和parent这两个东西都是什么，根据此插件，截图如下，对照截图大家就好理解了
小小子的链接截图，这就是小小子的链接，在有show all按钮时的样子
小小子的链接
再用firefox的插件firebug来看一下dom元素的呈现内容，在截图上面我标明了对应的firstItem和parent
firstitem_parent_mg12_ajax
这样这个WordPress插件MulticolLinks的ajax功能就用jQuery重写完了，见笑，见笑。。
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/06/27/975/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
看的出这是一篇用心之作:roll: ，让我们化繁为简吧，其实很多插件适合初始WP的朋友，用过一段时间，对代码位置和作用有了了解，就应该自己动手优化一下，速度能提高不少 :D
[回复]
不使用这个插件，哈哈
[回复]
@bolo
之前加链接加的多了些。都显示出来，又加上广告啥的，太长了。
[回复]
@LAONB
呵，确实。不适合新手。
[回复]
有演示更好！
[回复]
@一只坏猫
本站现在的内容就是演示啊。呵呵。
[回复]
@simaopig
眼拙眼拙！海涵海涵！
[回复]
@一只坏猫
呵呵。我改的东西就是自己的站用上之后才写的日志。呵。
[回复]
@simaopig
我记住了！嘿嘿，下次莫犯此样错误了！哈哈
[回复]
哈哈，厉害，支持一下，啥时候可以研究研究wp的代码了……
[回复]
@Showfom
对WordPress代码不感冒。。
[回复]
[回复]