Zack Live » WordPress 主题

使用JQuery在WordPress实现Tabs效果

Zack — Mon, 01 Feb 2010 09:13:19 +0000

使用Tabs的好处是，能在有限的空间里显示更多的资讯。因而其应用也越来越广泛，而在WordPress中最常用在侧栏（Sidebar）。本篇将讨论如何使用jQuery实现Tabs效果，本文基于Justin Tadlock的教学撰写，英文原文请看这里。

1. 将jQuery加入到WordPress

首先我们要把jQuery加入到WordPress，WordPress本身就带有jQuery（在wp-includes\js里面），你可以用以下的程式将其加入，这句程式要放在与之间，通常是在你的主题的header.php文件：

当然你也可以使用你自己下载的jQuery，通常会将下载回来的jQuery会放在主题文件夹的js文件夹里面，你可以用以下这句程式：

这就是我们要用到的全部JavaScript，好像很少对吧，这就是JQuery可爱的地方。

再来我们看一下WordPress那边，就像平常那样用wp_list_pages()就可以了：

最后就是CSS，也是最重要，最复杂的部分：

#topmenu, #topmenu ul {
	margin:0;
	padding:0;
	list-style-type:none;
	list-style-position:outside;
	position:relative;
	line-height:1.5em;
	z-index:300;
	width:100%;
	background:#fff;
	font-weight:bold;
} 

#topmenu a {
	display:block;
	padding:0.25em 1em;
	color:#686868;
	border-right:1px solid #c8c8c8;
	text-decoration:none;
	background:#fff;
} 

#topmenu a:hover {
	background:#888;
	color:#fff;
} 

#topmenu li {
	float:left;
	position:relative;
}

#topmenu ul {
	position:absolute;
	display:none;
	width:12em;
	top:1.9em;
	left:-1px;
} 

#topmenu ul a {
	border-left:1px solid #c8c8c8;
} 

#topmenu li ul {
	border-top:1px solid #c8c8c8;
	width:14.1em;
} 

#topmenu li ul a {
	width:12em;
	height:auto;
	float:left;
	border-bottom:1px solid #c8c8c8;
} 

#topmenu ul ul {
	top:auto;
} 

#topmenu li ul ul {
	left:12em;
	margin:0px 0 0 10px;
} 

#topmenu li:hover ul ul, #topmenu li:hover ul ul ul, #topmenu li:hover ul ul ul ul {
	display:none;
} 

#topmenu li:hover ul, #topmenu li li:hover ul, #topmenu li li li:hover ul, #topmenu li li li li:hover ul {
	display:block;
}

你可以将以上的CSS加入到主题的style.css文件里，这样就能实现多层下拉导航的效果。明天我会具体讲解这些代码的意义。写得有点匆忙，有错漏的地方，欢迎指正。

[via: kriesi.at|seoadsensethemes]

WordPress的语言设定

Zack — Tue, 26 Jan 2010 04:49:01 +0000

本文属于WordPress主题翻译教学系列，文章列表：

前三篇讲了翻译的方法，却忘了讲怎么用上这些翻译，这一篇算是之前的内容的补充，主要讲如何设定WordPress的语言跟主题的翻译文件该放在哪里。

1. 设定WordPress的语言

首先，其实WordPress本身提供多国语言版本，可以直接下载，包括繁体中文与简体中文。下载回来后，不用任何设定就可以使用。实际上，这些版本跟英文版只有两项区别，如果你本身用的是英文版，想要改为中文版，可以参考这两项进行修改。

第一项语言设定。在WordPress根目录里的wp-config.php底部有以下这一行：

define (‘WPLANG’, ”);

这就是WordPress的语言设定，预设是英文，要改成中文，只要填入语言代号，如简体中文，请改为：

define (‘WPLANG’, ‘zh_CN’);

我们之前讲的翻译文件的命名规则得出来的就是语言代号。同理，繁体中文只需将zh_CN改为zh_TW就可以了。储存并关闭就完成了语言的修改。接着，WordPress就会自动寻找相应的语言文件，到哪里寻找呢？这就是第二点要讲的内容。

2. 翻译及语言文件的位置

第二项就是语言文件。打开wp-content，你会发现里面多了一个languages，没错，这就是WordPress的语言文件的位置，里面一般最少有两个文件：一个PO文件和一个MO文件。MO是经过编译的文件，WordPress从这里读取翻译，基本上有MO文件WordPress就能使用该语言；而PO则是原文件（未经编译），装有原始的翻译文件，主要用于修改翻译或作为翻译其他语言版本的参考。另外，有时还会有个PHP文件，如简体中文就会有个zh_CN.php，里面主要是CSS设定，用于修正界面的。你知道，中文和英文的长度，大小等都有所不同，画面有些地方需要作出调整，才不会出现诸如移位之类的现象。

前面讲的语言文件是WordPress系统的翻译，再来就要讲，主题的翻译文件应该放在哪里。其实道理一样，翻译文件属于主题，所以放在主题文件夹里的languages文件夹里，自己在主题文件夹里新建一个文件夹，命名为languages就可以了。把你翻译的MO跟PO文件放在里面，WordPress就能找到。当然，你的翻译文件必须跟wp-config.php里面设定的一样才能找到。如果你在wp-config.php里设定的是zh_TW，而你的主题的languages里放的是zh_CN.mo，那很抱歉，你的主题会显示预设的英文版本。

总结

连同这次的补充，主题翻译方面的教学应该可以告一段落了，如果你还有什么问题或觉得还有什么地方我没讲清楚，欢迎回覆告诉我，我会尽快补上。

设计国际化的主题: WordPress主题翻译教学

Zack — Wed, 20 Jan 2010 04:33:43 +0000

WordPress是以英文为主的网志系统，插件跟主题也是英文版为多，但随着WordPress在全球范围地流行，越来越多不同国家，说着不同语言的人加入WordPress的大家庭。会出现这一情况，其中一个原因就是WordPress本身具国际化概念的设计。WordPress本身有多国语言版本（包括简体及繁体中文），所有的插件及主题亦能轻易地被翻译成其他语言。插件及主题设计师在设计时亦应该考虑翻译的问题，本篇将讨论如何设计出适合翻译的插件或主题。

首先我们要了解WordPress所使用的翻译系统：GNU gettext。这应是目前最流行的翻译框架（Framework），尤其在开源软件的世界中，大多数支援国际化的程式都使用GNU gettext。这个系统能让程式员在编写程式时，标示出需要翻译的文字，这些文字能轻易地被提取出来，让翻译员进行翻译，翻译完成后，系统就能直接使用新语言代替程式中的文字。

要标示出需要翻译的文字，主要有以下三种方式：

__($text) : 这句程式表示$text需要翻译，然后返回翻译结果
_e($text) : 这句程式表示$text需要翻译，然后输出翻译结果到网页，相当于：echo __($text)
__ngettext($single, $plural, $number) : 当$number等于1时，使用$single的翻译，当$number大于1时，使用$plural的翻译

很明显，第三项是为了解决单复数的问题。

再来我们要想的是：哪些文字需要被翻译？答案是直接从主题或插件输出到网页的文字，而不是从数据库（如文章）或后台设定（如网志名称）取得的资料。详细的情况，你只要多试几次就会明白。

现在我们来看看实际的使用情况。最简单的情况是，我们在设计主题时，会写一句，如果找不到任何文章即输出：Not Found，之类的字样，一般的做法是：

Not Found

这两个字很明显会直接输出到网页，需要翻译，由于是输出到网页，我们使用_e()：

_e()是PHP程式码要用包住。

接着我们来看第二个例子，我们常常需要在主题中显示有多少个回覆，会使用以下程式：

程式会先判断有多少个回覆，再输出：没有回覆(No Responses)，还是一个回覆(One Response)或者多个回覆(% Responses)。这里三个回覆都需要翻译，但不是直接显示到网页，而是返回给程式使用，所以我们使用__()：

), __('One Response'), __('% Responses'));?>


还有一种情况是，我们需要将整句话翻译，但句子里包含有其他参数。例如，要显示由谁谁谁写的，我们会用：
by 
如果这里只翻译by的话，可能有些语言的句子会不通顺，就以中文来讲，我们可能想要显示：由谁谁谁撰写，之类的，加了一些文字在the_author()后面。这个时候，我们可以用以下方法：

我们通过__(‘by %s’)标示整句需要翻译，然后用PHP的printf()将the_author()插入句子中并输出到网页。
如果你要留意上面回覆部分的程式码，你发现，其实WordPress在设计就有考虑到一些单复数的问题，所以我们很少会用到__ngettext()。
在这一篇，我们讨论了怎么设计出一个适合翻译的主题或插件，下次我会写一下怎样去实作翻译。
Related Posts
进阶WordPress主题翻译技巧
如何翻译WordPress主题
使用JQuery实现WordPress多层下拉导航
WordPress的语言设定
为WordPress选择程式码显示插件