给WP留言框添加快捷按钮
2010 五月 30
先上图，有图有真相：
0×01:允许贴图
WP默认是开启一些标签的，比如 a , b, strong 等。但是有一些标签我们平时根本用不到，所以，我们可以重载它的允许标签全局数组。（wp-includes/kses.php 文件中定义了默认的post允许标签和全局允许标签。
重载方法：
打开你当前主题的functions.php，添加如下代码 (PS:还有一种办法是添加my-hacks.php文件法,这里就不说了 
)：
我这里添加了img 标签 ，这就允许评论者在留言框里面贴图。还有就是去掉了几个不常用的标签。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | define('CUSTOM_TAGS', true); $allowedtags = array( 'a' => array( 'href' => array (), 'title' => array ()), 'b' => array(), 'blockquote' => array( 'cite' => array ()), 'cite' => array (), 'code' => array(), 'em' => array (), 'i' => array (), 'strike' => array(), 'strong' => array(), 'img' => array( 'src' => array (), 'alt' => array (), 'align' => array (), 'class' => array (), 'height' => array (), 'width' => array ()), ); |
0×02：添加按钮
下载comment_quicktags.js.php：
comment_quicktags.js.php 下载 (7.6 KB, 124 次)
放到主题的js目录下面(你的没有就新建一个）。
然后就是添加按钮了，打开主题的comments.php,找到添加留言的文本域 (
1 | <textarea name="comment" id="comment" ...... |
)
在其上加上如下代码 ：
1 2 |
OK了，现在就可以在留言框上面看到这些按钮了。
如果只做了这个，可能你会发现这些按钮很难看，很大很长一个。这时候你应该用CSS来控制一下它的显示了。
下面是我的CSS代码，仅供参考：
1 | #ed_toolbar_comment .ed_button {display:inline-block;font-size:9px;height:22px;margin:1px 2px;width:50px;} |
0×03:进阶技巧：添加自动隐藏效果
你可能还发现我这些个按钮默认是隐藏的，当你输入文字时它又自动显示出来了，其实这个是用JQuery 实现的动画效果(注：我这里多了个smiley，你如果没有添加可以不要。)：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> var $j = jQuery.noConflict(); // quicktags if($j('#ed_toolbar_comment').length>0) { $j("#ed_toolbar_comment,#smiley").hide(); $j("#comment").focus(function() { $j("#ed_toolbar_comment,#smiley").animate({opacity: "show"}, 1000); }).blur(function() { $j("#ed_toolbar_comment,#smiley").animate({opacity: "hide"}, 1000); }); } // end quicktags </script> |
PS:感谢alexking 童鞋的js-quicktags 项目。
![wordpress 3.1到3.1.1手动升级文件[下载]](http://static.ihacklog.com/wp-files/2011/04/WordPress-3.1upgradeto3.1.1-150x150.png)
22 Responses
Post a comment
