程序员人生 网站导航

如何把插件集成到WordPress的主题中?

栏目:WordPress时间:2014-04-09 06:19:53

上一篇文章我发了一个免插件调用最多评论文章的代码,在读者的评论里出现了两种意见。一种倾向于支持把一些优秀的插件集成到主题里,省却用户的麻烦。一种倾向于在主题里保留对某些插件的支持,在发现该插件激活时自动加载。

我个人倾向于主题应该保持最大限度的精简,但必须保持良好的插件兼容性。但有一些插件,各方面已经非常完善,并且在未来一定时间内也不会对新版本的WordPress出现兼容问题,我们则可以考虑把它集成到主题里。对于集成到主题里的插件,我们可以体会到一些好处:

1.可以自主整合插件所需的JS和CSS文件,减少HTTP请求;
2.在整合的过程中,你可以去除插件中你不需要的部分,减少垃圾可以令WordPress运行更快;
3.可以提高主题的易用性。

在这个系列的文章里,我将说说怎么把插件集成到主题里,我选用MG12出品的AJAX Comment Pager作为试验品。这款插件的有点是简单实用,源码里注释详细。

正文
注意:如果你要按照这个教程试着折腾的话,请先备份你的主题,并且请确认你的主题支持按页码进行评论分页。

步骤1
首先打开ajax-comment-pager文件夹里的ajax-comment-pager.php文件,这个文件就是整个插件的核心。我们可以看到细心的MG12对插件的每一个模块都做了注释。

我们要做的是先分析这个插件是怎么运行的,程序结构是怎样的。

首先,根据注释,我们可以发现程序结构如下图:

下面解释一下各个模块的作用:
l10n:提供插件的本地化语言,在整合是可以忽略;
options:用于配置插件参数;
AJAX function:处理AJAX请求,并返回相应的结果,核心中的核心;
add to WordPress:加载插件运行所需的JS脚本和CSS样式文件。
到这里,插件的运行机制已经呼之欲出。
首先由add to WordPress加载所需的文件->在点击评论翻页时发出AJAX请求->AJAX function模块获取options里的参数,处理AJAX请求并返回结果->add to WordPress事先加载的脚本把AJAX function返回的结果插入到评论列表位置。

步骤2
在充分了解插件的结构以后,我们开始提取所需的代码,先把cpage_ajax和commentpager_head改名,我给这两个函数名同意加上了“bolo_”前缀。这一步是为了避免和原来的插件产生冲突,改名的方法推荐先复制原来的函数名,改名后用新函数名全部替换原函数名。
接下来把ajax-comment-pager.css和ajax-comment-pager.js复制到主题文件夹里。水平高一点的童鞋们,在这一步就可以整合css和js文件了,如果你不会整合这两个文件则需要在主题的header.php里加载这两个文件,并且在加载ajax-comment-pager.js前需要先输出以下代码:

<script type="text/javascript">//< ![CDATA[
var ajaxCommnetsPagerCommentsId = "thecomments" //thecomments是评论列表的ID,请根据自己的主题自行修改
var ajaxCommnetsPagerAjaxLoader = "Loading..."
//]]></script>

步骤3
把 AJAX function 模块的所有代码复制到主题的functions.php里,我们还需要修改一下。
我们的目的是直接把最适合我们主题的参数整合进去,所以options,callback method name 和 type 这几部分都可以删去,并充新补上$callback和$type这两个变量。

$callback是自定义评论样式的名字,一般是custom_comment,请自行查看主题配置。
$type是翻页是需要显示的内容,只显示评论则是&type=comment,只显示pingback则是&type=pings,两者都显示则留空。
在这里我设置为:

$callback = 'custom_comment'; //我的主题里评论样式名为custom_comment
$type = '&type=comment'; //只显示评论

步骤4
在打开comments.php,在合适的地方加上:

<span id="cp_post_id">< ?php echo $post->ID; ?></span>

如果你不知道什么地方是“合适的地方”,那就把这句代码加到任一个</div>前吧。

后记

到这里为止,你可以发现主题集成的AJAX Comment Pager已经可以正常运行了。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐