丫丫的,花了一个下午时间研究K2,从10点一直到现在。
一个月没更新K2模版了,今天把我的K2 r113升级到了K2 r190。又更新了K2中文包。K2的结构又更新了一下,所以花了点时间解决了一下。我写的“还原风格信息”功能失效了,重新看了下DOM树,修改了一下代码。从SBM被加进K2模版的那一天就存在的使用中文包就无法在SBM里移除模块的问题,又是和SK2一样的问题,某些会被写入数据库而不应该翻译的部分也允许翻译,导致程序出了问题。找到了出问题的那一句:Sidebar %d,原文copy到译文部分,解决了。另外新版K2的page-archives.php文件里69行和71行两个}重复了,删去一个就好了。
突然发现Live Search功能不能用了,赶紧查了一下,后台K2选项里Live Search功能打开着呢。又刷新了几遍,无果。打开Firefox的Javascript控制台,发现一条警告:"Class is not defined",提示js/k2functions.js.php文件的第102行出错。赶紧去查了一下,那一行的代码是var FastInit = Class.create();。当场迷茫,Javascript我不懂啊。Google一下firefox "Class is not defined",找到这里提到了这个问题。他说可能是Class没定义,一句话提醒了我,本来我还以为这个Class是Javascript提供的某种语法呢,原来是自己定义的对象呀。查了一下,Class是在prototype.js.php文件里定义的,代码是:
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
新版K2里把FastInit的部分从prototype.js.php文件移动到了k2functions.js.php文件里,又由于新版K2的header.php文件里首先调用的是k2functions.js.php文件,这个时候Class还没有定义呢,所以基于FastInit的Livecomments和Live Search功能都无法使用。
报了bug,等着K2开发组修改吧。忙活了一下午,SBM还没研究呢。
很早就知道True Blue
这个K2 style了,设计得的确非常好看。5月份初识,推荐给了几个朋友,自己却一直没用。现在,K2 0.9已经发布了,True Blue也随之更新到1.3.3,也变得越来越漂亮了。所以,今天开始换用True Blue style,并把我自己的CSS文件整合进去。
K2模版本身有个style.css文件,里面放着K2自己的CSS。用户是挑剔的,谁不想自己的K2看起来更与众不同呢?所以,很多人会修改K2的style.css文件。为了免去用户升级K2时重新修改style.css文件之苦,K2设置了style功能,允许用户把自己的CSS代码写入一个CSS文件放入K2的style目录里,并在后台提供了选项,可以很方便的选择当前使用哪个CSS文件,此为"style"。 我以前就是自己写一个style自己用的,不过有很多人做了很漂亮的style放在网上供大家使用,比如这个True Blue。但是,我们也不想受限于这个style,还想在它的基础上再加上自己的CSS代码,该怎么办呢?True Blue本身提供了一个可定制的办法,就是在主文件里import一个custom.css文件。只要把自己的CSS写到这个custom.css文件里,访问者在访问Blog时在读取K2的CSS和True Blue的CSS之后,也会读取custom.css文件里我们定制的CSS代码。当升级True Blue的时候,只要不覆盖网站上的custom.css文件就可以了。不过import是在文件开头import的,所以只能添加CSS,要是想覆盖就必须加important。我想修改一下,让custom.css在主CSS之后载入。
Update:查了一下,@import语句载入的CSS文件是在原CSS之后处理的。True Blue里也是在core.css之后import custom.css的。具体的问题是CSS的匹配问题,True Blue的CSS里用了#page #primary .entry-content,而我的CSS里学着K2用了#primary .hentry .entry-content。虽然我的CSS后解析,但是前者的匹配度更高,所以前者生效,覆盖了后者。
True Blue还提供了对IE的支持,不仅修正了在IE下的显示效果,还把所有图片文件都备了两份,一份给Firefox和Opera等非IE浏览器用的有透明背景的PNG文件,一份给IE用的jpeg和gif文件,这样就不会象原版K2那样,在IE下小图标的透明部分显示成灰色了。另外,作者steveo还提供了各个图片文件的psd原文件,使用者可以自行用PhotoShop修改。psd文件做的非常好,在PS里直接把相应地方的文字修改成自己的,颜色和特效都不会变,真的是很方便。看看页面上方的标题图片,只用了半分钟就改好了哦。修改完保存成PNG文件,覆盖原来的文件就可以了,有些则是对应IE下显示效果的,存成jpeg文件覆盖即可。
具体的效果看我的Blog就知道了,也可以去看看True Blue Screenshots。如果你想用它的话,记得True Blue只是一个style,它要在K2模版下才能工作哦。steveo这个人好像很厉害耶,《true blue updated for k2 0.9》一文中第一个评论者是matt,这个名字好熟啊,难道是WordPress的开发者之一Matt Mullenweg?还有K2在页面下面显示当前style的那段代码也是steveo提供的,以前在K2的设置页面还有"(code by steveo)"这样的字样,不过最近给去掉了。
Update:照着花儿开了的CSS,加了这么一段:
::-moz-selection{
background: #c8c8c8;
}
::selection {
background: #c8c8c8;
}
这样就可以用background和color定义选中后文字的效果了。前一个应该是Mozilla和Firefox特有的,后面的应该是CSS标准里的,Opera应该支持。不过我的IE6 SP1不支持这个效果,不知道IE7行不行。(Update:::-moz-selection时Mozilla和Firefox浏览器特有的CSS属性,::selection是CSS3里定义的,目前Firefox、Opera和IE都不支持,只有Safari和Konqueror浏览器提供了支持。[via])如果想要背景色透明还可以用transparent。
Update2:transparent的效果就好像选中和没选一样,我想到一个好用处就是用来防止copy,某些笨一点的,看到复制不上,应该就不会再动copy的主意。另外今天还发现这儿还可以填background-color:Highlight;color:HighlightText,效果可以参考这个页面。
刚换了新的K2,从旧版K2 r406直接跳到新版K2 r123。
突然想起懶懶喵早在4月就发布的Ajax Comments-Reply V1.0
。老早就想在K2上也实现这个功能,可是一直懒,今天去下载了她的代码看了一下,照着她的代码改了K2的comment.php文件。
9点到现在,升级K2只花了半个小时,只要修改几个文件,再有K2换了一些class名称,在我的CSS里替换了一下。剩下的两个小时,专心致志的调代码。懶懶喵写的代码有点看不懂,也没有个注释;我对PHP也不太了解,去恶补了一下$GLOBALS数组的知识;我的服务器又关闭了错误信息显示,唉,真是痛苦啊。改到现在终于改成了,脖子好酸。懶懶喵的插件是基于WordPress默认模版的,K2和默认模版的差异太大,很多地方都不一样。改到现在,基本已经能正常分级显示留言,在CSS里修改了下,让第二层评论往右20px,现在看起来像模像样了。PHP和C的差别还是满大的,PHP外面定义的变量在函数里无效,这一点和C不同。具体效果可以看这篇文章。
其他的我就实现不了了,现在只能自己到数据库里修改每条评论的上级评论ID,从而实现分级显示评论的功能。我看到程序里代码并没有考虑上级评论ID有错的情况,比如指向了属于其他文章的ID。所以改数据库的时候要很小心,改错了这条评论就显示不出来了。我的水平也只能修改到此了,发表评论是选择加到哪个评论下的功能,我恐怕做不来,那要大改K2的AJAX comment部分。两种选择,一个是让懶懶喵帮忙改;一个是让K2开发组改。当然最好是让K2开发组做修改,这样就不怕K2升级后功能实效了,况且懶懶喵也满懒的,嘻嘻。
好了,就这样了,先放在这儿。K2最近刚发布了0.9版,以前一天升级近10次,现在终于缓了下来。让他们先休息下吧,等闲的时候报上去,让他们改去,嘿嘿。
K2的menu直接使用了WordPress的page,导致所有的page都会被当作menu放在页面上方。老早就想改掉一下,一部分page作为menu放在页面上方,一部分放在sidebar。
首先要替换掉header.php里显示menu的部分:
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
替换为:
<?php
define("MENU_IDS","109,105,2"); //需要显示的文章的ID
$menu_ids = explode(',', MENU_IDS);
foreach ($menu_ids as $menu_id) {
$menu_post = get_post($menu_id);
echo '<li class="page_item"><a hre f="' . get_permalink($menu_post->ID) . '" title="' . $menu_post->post_title . '">' . $menu_post->post_title . '</a></li>' . "\n";
}
?>
之所以要用define定义常量,是因为这个东西在sidebar里还要用到,直接定义变量是不可以的,又懒得用全局变量了。sidebar里加上的代码是:
<?php /* Pages */ if (is_home()) { ?>
<div class="sb-pages">
<h2><?php _e('Pages','k2_domain'); ?></h2>
<ul>
<?php
$page_ids = array(222, 122, 205); //后面需要断行的文章的ID
$result = wp_list_pages('sort_column=menu_order&depth=1&exclude=' . MENU_IDS . '&echo=0&title_li=');
$result_a = explode("\n", $result);
foreach ($page_ids as $page_id) {
$url = get_permalink($page_id);
foreach ($result_a as $a => $b) {
if (!(strpos($b, $url)===FALSE))
$result_a[$a] = str_replace('</li>', '<div style="height:8px; margin:0;" /></li>', $result_a[$a]);
}
}
echo implode("\n", $result_a);
?>
</ul>
</div>
<?php } ?>
Update:修正archive日期错误,应该使用其他变量比如$menu_post而不是$post。
Update2:今天开始用K2的SBM,新写了一个module来做这个事情。
昨天,K2开发组把K2 svn搬迁到Google Code
上了。[via]
K2从去年7月到现在一直都在使用在自己的服务器上架设的subversion repository(Subversion 1.2.1)和bug tracker(Mantis)。现在,可能看着Google Code提供的服务不错,就整体迁移到Google Code上了。于是,现在我们有了新的K2项目主页、K2 svn和bug tracker。转移之后,原来的svn上的K2最终版本号停留在r407,在Google Code上的K2版本号将从r1开始计数。
对svn不是太了解,好在我的网站上有一本关于svn的电子书。2006年5月4日在网上看到一篇《全面迎接SVN时代来临》,看到好多人留言说没法下载那本pdf电子书,我就用迅雷下载下来,放到网站上存着供大家下载。书名叫《使用Subversion进行版本控制》。翻出这本书看了看,大概有了些了解,又去Subversion主页下载了Subversion Windows安装程序,照着书上说的和Google Code的说明,用svn checkout http://kaytwo.googlecode.com/svn/trunk/ kaytwo查看了一下K2的最新代码,嘻嘻,很有成就感。svn的web查看方式查找文件比较方便,想下载下来更新模版就不是很方便了。不知道这个K2 nightly builds directory以后还会继续更新不。
(Update:这个网站今天开始更新了,收录的Google Code上的第一个K2版本号是r25。有一个小发现,.my域名是马来西亚的,和我们国家一样是东八区,上面的CHANGELOG里的时间也是东八区的,中国人看起来真是方便啊,不用换算时区了。)
另外,K2开发组申请了一个新的Google Group:the K2 Subversion Google Group ,让Google Code每次更新的时候自动发送一封email到这个新闻组。以后,这个新闻组就是K2的更新日志(changelog)了。[via]在这个新闻组里可以看到K2的每个更新版本所做修改的简要说明和被修改的地方附近的代码,不过新闻组被设置为不允许人加入,我们只能订阅他的feed来得到更新通知。我已经把他的feed的扔进抓虾了,hoho。转移到Google Code上才两天,最新的版本已经是r23了。更新太快了,不敢用Greatnews,还是用抓虾订吧。
27号发现了K2的一个小bug,在sidebar.php里一处使用is_pages()函数的地方忘了加括号,我到K2论坛发了篇文章告知这个bug,在K2 r21版本里已经修复了。具体修改的地方可以看K2 r21更新日志。哇咔咔,我报的bug耶,yeah
我用svn log命令把K2旧版的changelog抓了下来,留个纪念吧。
K2旧版CHANGELOG|K2新版CHANGELOG
Update:K2 r25更新日志:
Adding the directory for our first tagged release 1.0. We need to decide when that will be still, but having the dir there waiting for us is a nice motivator I think.
终于开始准备1.0版本了。期待1.0稳定版的出炉。
今天花了一天的时间做了这个K2中文包,全部192项字符串都已翻译完毕。翻译对应的K2版本是目前最新版的K2 Beta Two Revision 371。
5月份就想翻译K2了,尤其是Wordpress中文包做完的时候就想一鼓作气把K2翻译完,结果一直懒,一直拖到现在。今天终于狠下心来,从中午12点忙活到晚上7点,把192项字符串翻译出来。
因为已经制作过Wordpress中文包,所以翻译K2时轻车熟路。因为是翻译模板,所以比较小心,每一项字符串都仔细的找出它在源代码中的位置,查看一下附近的代码后再找出它会出现在什么页面,最后打开具体的页面,检查这个字符串所要表达的实际意思,再回来填上合适的汉语翻译。这次做的翻译用的是意译,没有一字一句的翻,毕竟最后是要在页面上显示出来给大家看的,不比后台的翻译。有些文字省略了,比如日期前面的Published,因为一个日期在哪儿,谁都可以知道那是文章的发布日期,加个“发布于”简直是浪费空间,本来K2的字就大。还有象文章日期格式和评论日期格式,K2里都单独列出来作为一个可翻译的字符串,我翻译成类似“2006年06月24日 星期六 7:14 pm”这样子。当然这种东西,个人有个人的爱好,所以我在翻译的时候都加了注释,大家可以自行去修改这些字符串,来达到自定义日期显示格式的目的。
在K2选项中的风格信息处加了一点javascript代码,点击一个链接就可以恢复默认的风格信息。这是为了方便那些直接用K2 svn覆盖了K2 r167的人,因为K2的安装代码没有执行,所以风格信息是空的。当然,不小心改错了风格信息的人也可以用这个功能来恢复。(写这段真不容易,要考虑PHP和Javascript字符串的格式问题,最后写出来的跟乱码一样。版权所有,禁止抄袭T_T)
最近K2新加入了上传标题图片的功能,在模板菜单里也增加了"K2 Upload Options"选项页,这个页面的字符串我已经翻译了,不过不知道为什么,代码没有按照格式来写,导致安装后这个页面的翻译无法生效。现在也没有别的办法,只有等K2的作者更新咯。
下载页面
至少30天以前就准备把古老的K2 Beta Two Revision 167模板换成新的K2 Beta Two svn模板,至少10天以前就开始修改K2 svn模板了。今天终于改了个大概,放了上去。其实总共也不到10处,由此可见我有多懒...
换上新模板后,感觉最明显的是新加的Rolling Archives,可以直接拖拽那个条进行翻页,另外就是Livesearch也换了样子,可以直接在左侧即时显示搜索到的结果。
新模板里primary由class变成ID(不过secondary还是class),所以自己的css里.primary都要变成#primary(好像那个sample.css没有修改)。还有,右边的About等不再被翻译成“关于”了,这是因为K2现在使用了自己的本地化文件,不再受Wordpress的本地化文件的影响了。
今天先弄到这里,还有很多事情要做,修改我自己的CSS以适应新模板,调整menu,修正模板在IE下的显示,明天再做吧。
Update:今天升级了一下K2 svn,因为在K2主页看到K2增加了新功能——一个新的选项页,可以上传"Your Own Header Picture",还可以修改文字的大小和背景色。具体的升级方式是通过K2 svn页面下载最新版的K2,或在K2 nightly builds directory下载每次更新后自动生成的压缩包。因为我改动过程序的header.php,theloop.php,sidebar.php,footer.php这几个文件,所以在后一个地址里看了一下CHANGELOG,从我之前用的版本到现在的最新版之间没有改动过这几个文件。Yeah,直接把其他文件覆盖上去,更新成功。
PS:K2网站上还提到将增加的新功能:K2 Navigation System,看图片上的样子实在是很不错啊,不知道什么时候能实现。
调整了一下sidebar,每一项的显示顺序,各项在哪些页面显示,哪些不显示,这些都要调一下。sidebar.php最后会导入sidebar-custom.php文件,所以要添加在sidebar下方的代码可以加到这个文件里,不过我觉得没有什么用处,因为显示顺序也要调整啊,加到那个文件里就只能放在最后了。
把Categories调整成树状结构:在sidebar.php找到调用list_cats函数的地方,给它添加一个参数:在右括号之前添加两个字符",1"。(PS:作为曾经学过一点java的人,我自己用了",true",嘿嘿)这个时候Categories已经是树状结构了,只是没有缩进,看不出来,再在CSS里加上ul.children {margin-left:12px;},这下明显了吧 :)想更漂亮还可以到懒懒喵日记看一下,她的Categories做的很漂亮。具体的CSS可以参考她的CSS文件里所有带".cate"的行。
调整CSS时发现,Firefox的DOM查看器真是好用。点开DOM查看器直接点工具栏第一个按钮,再在页面点一下你要查看的部分,DOM查看器就会自动展开到那个节点。在右边的“对象-DOM Node”左边点击下拉菜单,选择CSS Style Rules,就可以知道哪几段CSS对这个节点起了作用,你可以直接双击修改每一项的值,在页面里可以直接看到效果。选择Computed Style还可以看到当前节点每一项属性的最终值,下翻到最后可以看到一些-moz开头的,这些都是Mozilla和Firefox浏览器所特有的CSS。
修改的差不多了,下面该做K2的翻译了。我简单的看了一下,文章中发布时间的格式都可以在翻译文件里通过翻译的方式进行修改,这样就不用去改模板了。明天再说,饭饭去咯...
K2中Live Search出了点小问题,用Firefox的JavaScript控制台看了一下,显示:
错误: invalid flag after regular expression
源文件:http://yskin.joyren.com/wp-content/themes/k2/js/livesearch.js.php
行:2,列:11
源代码:
Warning: ob_start(): output handler 'ob_gzhandler' cannot be used twice in /var/www/virtual/yskin.joyren.com/htdocs/wp-includes/functions.php on line 829
看了下livesearch.js.php里的ob_start("ob_gzhandler");这句,google了下,说是设置缓存用的,直接注释掉,Live Search可以用了。