刚开始我只用引用(Quote)来显示程式码,随着程式码越来越多,引用已经不够用,我决定要加个程式码高亮显示的插件到WordPress里。
我前后共测试了5个这种插件,包括:
SyntaxHighlighter Plus
WP-Syntax
Google Syntax Highlighter for WordPress
Syntax Highlighter for WordPress
SyntaxHighlighter Evolved
我也总结出,具体的要求:
不用修改WordPress,包括主题:我不希望因为一个插件而修改WordPress或主题,特别是有其他的选择的情况下。
显示行数:有行数的话,当讨论程式码时,就比较容易去指定特定一行。关于这一点,WP-Syntax预设是不显示行数的,所以我没有选择它。
支持可视化编辑器(Visual Editor):这是最严重的问题,有些插件在Visual Editor里会自动重编程式码以便在HTML下显示,这样会破坏原程式码,导致每次编辑时都要改程式码,改到我火都上来。SyntaxHighlighter Plus,Google Syntax Highlighter for WordPress和Syntax Highlighter for WordPress都有这个问题。
WordPress刚刚发布了最新版本2.9.2。这个版本只进行了一个小小的修正,早前Thomas Mackenzie指出,登入了的用户可以回收站(Trash)里看到其他会员的文章,因此WordPress团队针对这个问题进行了修正,并发布2.9.2版本。
官方公布可在这里找到。
使用Tabs的好处是,能在有限的空间里显示更多的资讯。因而其应用也越来越广泛,而在WordPress中最常用在侧栏(Sidebar)。本篇将讨论如何使用jQuery实现Tabs效果,本文基于Justin Tadlock的教学撰写,英文原文请看这里。
1. 将jQuery加入到WordPress
首先我们要把jQuery加入到WordPress,WordPress本身就带有jQuery(在wp-includes\js里面),你可以用以下的程式将其加入,这句程式要放在<head>与</head>之间,通常是在你的主题的header.php文件:
<?php wp_enqueue_script(‘jquery’); ?>
今日要讲解使用JQuery实现WordPress多层下拉导航的程式码。
第一行是让WordPress调用JQuery,就不多说了:
<?php wp_enqueue_script(‘jquery’); ? >
JQuery主程式讲解
然后是JavaScript(JQuery)的主程式:
< script type="text/javascript" >
$("#topmenu a").removeAttr("title");
jQuery(document).ready(function() {
jQuery("#topmenu ul").css({display: "none"}); // Opera Fix
jQuery("#topmenu li").hover(function(){
jQuery(this).find(‘ul:first’).css({visibility: "visible",display: "none"}).show(268);
},function(){
jQuery(this).find(‘ul:first’).css({visibility: "hidden"});
});
});
< /script >
高亮显示作者回覆(Comments),让读者能快速找到作者的回覆,这个主题一早就想写,简单又实用。
找了一些资料,发现最早期大家是用作者的E-mail来判断回覆是否属于作者的,这样的问题是,如果读者知道作者的E-mail,并用这个E-mail来回覆,就会造成混淆。就像我的E-mail就是公开的放在[关于]页里,任何人都能看到,存心恶作剧的话很容易做到。
因此,发展出以作者的ID来判断是否作者回覆,这个方法解决了以上的问题,一直延用至WordPress 2.7的发布。其实,这个方法还是适用于WordPress 2.7或以上版,只是这个版本以后的WordPress提供了更容易实现这个功能的方法。
自WordPress 2.7版后,WordPress会自动为文章作者的回覆加入.bypostauthor的class,以供主题设计师用CSS对作者的回覆进行修改美化。也就是说,你不用再去判断哪一篇是作者的回覆,因为WordPress已经帮你完成了这个动作,你可以直接开始修改CSS,对.bypostauthor进行美化。你可以直接在你的CSS文件的comment方面的代码后面(或直接加在CSS文件的最后),加入像如下的代码:
li.bypostauthor {
color: #FFFFFF;
background: #000000;
}