第一行是让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 >

首先看第一句：

$("#topmenu a").removeAttr("title");

这句的目的是要移除topmenu底下的连结（a）的标题（title）属性。这是因为使用wp_list_pages()时，WordPress会自动为每条连结加入标题，而这个标题会跟JQuery的Tooltip发生冲突，所以就先将title移除。

jQuery(document).ready(function() {

这一句是说，当网页载入完成后，马上运行下面的程式。

jQuery("#topmenu ul").css({display: "none"}); // Opera Fix

需要这一句的原因是，在Opera里，下层Menu收得比较慢，会被用户看到，所以先把它设为不显示。

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"});
		});

这是jQuery的.hover方法，第一个function()代表鼠标在topmenu的li之上时的效果，而第二个function()则是鼠标移出后的效果。

jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);

这是在鼠标移入时运行的程式，jQuery(this).find(‘ul:first’)是找到这底下第一个ul，后面是用css将它的visibility设为’可见’（visible），而display则为’none’。最后的show(268)是以动画特效慢慢显示出来，268是微秒，就是要在268微秒之内完成动画。这里使用visibility而不用display来显示，据说是因为若使用display，当鼠标快速滑过时，动画特效就不会出现，而变成将ul快速地弹出一下，便收回去，这不是我们想要的，使用visibility就能解决这个问题。

jQuery(this).find('ul:first').css({visibility: "hidden"});

这句就是当鼠标移走时，把第一个ul藏起来，这里也会以动画的方式慢慢地收回去。

CSS部分讲解

jQuery的部分解释完了，接下来看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;
}

这里要注意是，position要设为relative，line-height记得要设定，其他的就是外观设定。

#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;
}

这是让Menu横向排列。

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

这里是第二层的Menu，display是none，因为一开始，第二层是不显示的。记得要设width，因为第三层会在第二层的右边，相距多少就是根据这个width来设定。top是离第一层多远，因为line-height为1.5em加连结（a）上下padding各0.25em，就等于2em，设为1.9em是为了让第二层贴着第一层1em。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;
}

这段要注意是width要设定，同样因为下一层是在右边出现。float:left也是同样的原因。

#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;
}

最后这两段是设定，hover时的显示方式，也就是只显示下一层，不会显示下下一层。

全部的程式码解释完毕，你学会了吗？记得要自己试着改几个设定，看看有什么不一样的效果。有什么新发现，或问题，可以跟我讨论。

Related Posts

• 使用JQuery在WordPress实现Tabs效果
• 使用JQuery实现WordPress多层下拉导航
• WordPress的语言设定
• 进阶WordPress主题翻译技巧
• 如何翻译WordPress主题

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

1. 设计国际化的主题: WordPress主题翻译教学
2. 如何翻译WordPress主题
3. 进阶WordPress主题翻译技巧
4. 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，那很抱歉，你的主题会显示预设的英文版本。

总结

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

Related Posts

• 讲解：使用JQuery实现WordPress多层下拉导航
• 进阶WordPress主题翻译技巧
• 如何翻译WordPress主题
• 设计国际化的主题: WordPress主题翻译教学
• 使用JQuery在WordPress实现Tabs效果

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

1. 设计国际化的主题: WordPress主题翻译教学
2. 如何翻译WordPress主题
3. 进阶WordPress主题翻译技巧

继昨天的如何翻译WordPress主题之后，我又参考了一些文章，觉得有必要再补充一些东西，整个WordPress主题翻译教学系列才算完整。今天要讲的主要是一些设计主题时要注意的地方，以使翻译可以更完美。

设立文字命名空间(Text Domain)

文字命名空间(Text Domain)是为了避免本主题的翻译文字和其他主题或WordPress本身的文字发生冲突而设立的，它的意思就像一个文件夹，将本主题的文字都放在里面，需要这个主题的文字时，WordPress就会直接来到这里找，这样就不怕跟其他主题的文字弄乱了。

设立文字命名空间的方法很简单，假设我们要加入zack_theme作为Text Domain，只要在functions.php的开头加入以下程式码：

load_theme_textdomain(‘zack_theme’);

我在之前的文章里提过，要使用__()或_e()来标示需要翻译的文字，加入了Text Domain之后，有一点小变化：

1. __($text, $domain)：原本只需填入$text作为参数，现在要把Text Domain也加入作为第二参数。
2. _e($text, $domain)：同上。

这样WordPress知道文字是需于哪个Domain的，就能快速地找到相应翻译。

带参数的文字翻译

这种情况，我有稍微讲过，再来看一个例子，强化一下：

title="Permanent Link to <?php the_title(); ?>"

这个例子应该不陌生吧，这是标题连结的title设定，很明显"Permanent Link to"需要翻译，很多人第一反应就会想到这样做：

<?php _e('Permanent Link to', 'zack_theme') ?> <?php the_title(); ?>

这样做的问题是，只翻译"Permanent Link to"，在其他语言中，句子未必通顺，甚至不成立。例如，以中文来讲，我会希望这句翻译出来的结果是："第一篇文章的永久连结"，就是把"Permanent Link to"放在了标题的后面，顺序完全相反了。所以这句话我们要把整句抽出来翻译：

<?php printf(__('Permanent Link to %s', 'zack_theme'), get_the_title())?>

现在我们用printf()来完成这个输出，这样做就能把标题插入到%s这个位置上。中文翻译时就是："%s的永久连结"。出来的结果就是我上面希望的样子。把the_title()改为get_the_title()是因为，the_title()会把文字直接输出到网页，而get_the_title()则把文字返回给程式使用。情况跟_e()和__()一模一样。

日期与时间的翻译

日期跟时间的翻译有够烦的，单是中文（2010年01月22日）跟英文(22/01/2010)就已经差很多了。不过，WordPress使用PHP的Date()方法来处理日期与时间，因此我们可以直接使用PHP Date()的格式来翻译，就算在要翻译的文字未出现的格式代号也可以使用，例如：

<?php the_time(__(‘l, j F Y’, ‘zack_theme’)) ?>

跟据原文，我们只要翻译’l,j F Y’，但其实我们可以翻译成’Y年n月j日’；这样就可以得到年月日的格式了。如果你不太清楚Y,n,j，这些各代表什么或是想知道其他的代号，可以查看PHP Date()的说明。

翻译的文字顺序

这种情况出现在要翻译句子中有两个参数的时候：

Hi, I am %s, Welcome to %s

这句话的完整版是：Hi, I am Zack, Welcome to ZackLive，其中ZackLive是网志名称。这在中文跟英文都似乎很通顺，但在其他语言却可能会要把两个%s调换位置，两个都是%s，怎么区别？我们可以这样做：

Hi, I am %1$s, Welcome to %2$s

如此更改后，我们就能任意的调整位置了。

JavaScript中的文字翻译

要翻译JavaScript中的文字并不如想像中那么难，只是有点烦。我们可以把所文JavaScript中的文字改为变量，并对变量进行翻译。请看以下例子：

function show_msg ()
{
  alert('This is You message');
}

我们先将这里改为：

function show_msg ()
{
  alert(your_msg);
}

然后在HTML头部，也就是<head>与</head>之间，加入：

<script type="text/javascript" charset="utf-8">
  var your_msg = '<?php _e('This is your message', 'zack_theme'); ?>';
</script>

翻译中单复数的处理

关于这一部分，我也还未完全弄明白，只是把我所知道的，跟大家分享一下，若你有更深入的见解，欢迎指教。我们要看的例子是显示留言数：

<?php comments_popup_link('No Comments &#187;',
                          '1 Comment &#187;',
                          '% Comments &#187;'); ?>

这里考虑了英文中的三种情况：没有回覆，一个回覆跟多个回覆。而中文则是这三种情况的翻译都一样。但是在其他语言，两个回覆跟三个回覆的写法，都不一样，据说__ngettext()能解决这个问题。先来看__ngettext()的用法：

<?php __ngettext($single, $plural, $number, $domain); ?>

__ngettext有四个参数，其中$domain就是Text Domain，另外三个分别是：

1. $single：当$number等于1时，使用这个翻译；
2. $plural：当$number大于1时，使用这个翻译；
3. $number：具体的数目。

我在网上看到的解决方法是这样的：

<?php comments_popup_link(__('No Comments &#187;', 'kubrick'),
                          __('1 Comment &#187;', 'kubrick'),
                          __ngettext('% comment', '% comments',
                                      get_comments_number (),
                                      'kubrick')); ?>

没有回覆跟一个回覆是正常的做法，多个回覆那边，我也不太能够理解，有哪位高手可以详细讲解一下吗？

数字与货币的翻译

数字与货币要注意的是要将数字与货币符号整个标示以供翻译，数字格式可使用number_format()来处理。

总结

研究下来才知道光是翻译主题就要考虑这么多东西，设计主题时，要注意的地方又增加了不少。我想，我们没有办法考虑到所有语言的情况，只能够通过用户的反馈，不断地改进。

[参考：Urban Giraffe]

Related Posts

• 如何翻译WordPress主题
• 设计国际化的主题: WordPress主题翻译教学
• WordPress的语言设定
• 安装Kohana 3 PHP 框架
• 面向对象PHP教学：MySQL数据库应用

上一篇，我们讨论了如何让你的WordPress主题可被翻译成其他语言，今天我讲一下，具体如何去翻译WordPress主题。

同样地，先介绍一些基本概念。需要翻译的文字会储存在.PO文件中，而翻译完成的版本会储存为.MO文件里。这两个文件的命名有一定的规则：语言代码_国家或地区代码。如果不是使用UTF-8编码，还要加上所用编码格式，请看以下例子：

• en_US – 美国英语
• en_UK – 英国英语
• fr_FR – 法文
• zh_CN – 中文（简体）
• zh_TW – 繁体中文（台湾）
• ja_JP.EUC-JP.mo – 采用EUC-JP编码的日文

有些主题会提供.PO文件以供翻译，没有也没关系我们可以用poEdit生成。poEdit就是翻译.PO文件专用的软件，免费提供下载，支持Windows, Mac跟Linux平台，图形介面，使用起来十分方便。

第一次运行poEdit会要求你选择你的语言：

然后会提示你输入你的名字跟E-mail，这会用作翻译文件的作者资料。

按下[OK]后就会进入poEdit的主介面，我们就在这里进行翻译工作。首先，我们要先建立一个新的翻译专案，请点左上角的[档案]–>[新增编目档]：

接下来会看到，专案设定的画面，在这里填入专案的详细资料。要注意，[语言]项请填入翻译的目标语言；WordPress的字元集全都是”utf-8″；复数形式我们可以暂时不填。

填完之后，切换到中间的[路径]页面，这里填入要翻译的主题的所在位置，填入文件夹的路径即可。一共要填两次，除了[基础路径]，按下[新增]，中间会出现空格，这里也要填一次：

再切到最后的[关键字]页面，这里要填入翻译文字的标示符，就是我们上一篇讲的那三个：

1. __
2. _e
3. __ngettext:1,2

按[新增]后，分别输入这三个，一行一个，一共按三次[新增]。关于最后的[__ngettext:1,2]，是用于处理单复数的问题，但目前我都还未用上过，我的理解，这里的[1,2]是指单复数要分开来翻译。除非你的主题确实有用到[__ngettext:1,2]，不然你也可以不输入。

按下[OK]后，会提示你储存.PO文件，通常会把文件储存在主题文件夹里的[languages]文件夹里。注意，文件要按上面说的规则来命名，即简体中文用：zh_CN.po作为文件名，繁体用：zh_TW.po。储存之后，poEdit会自动找出所有需要翻译的文字，按下[OK]后就可以开始翻译：

以下就是翻译介面，按一下列表中的原文，中间会显示等待翻译的原文，你就可以在最下面的方框里输入译文：

在这里你会发现一些奇怪的东西像：&#58;或是%s之类。如果你不确定这是什么，你可以看一下原文到底在哪里，poEdit可以帮你找到它们。先在原文列表中选中你要查询的文字，然后选[编辑]–>显示[参考位置]，在弹出的窗口按下[OK]，poEdit就会带你到原文件，并把文字所在的那行高亮显示：

现在你就知道&#58;其实就是冒号。另外，%s是程式输出的资料。这些都不需要改动，只要放在合适的位置上就可以。

翻译完成之后，按下[档案]–>[储存]，poEdit就会自动帮我们生成一个.MO文件，以供程式(WordPress)使用。到这里翻译就完成了。如果你是帮其他设计师的主题做翻译，记得把你翻译的.PO文件和.MO文件传给主题设计师，让他把你的作品加入到主题中。

若有错漏，欢迎指正。

Related Posts

• 进阶WordPress主题翻译技巧
• 设计国际化的主题: WordPress主题翻译教学
• WordPress的语言设定
• 讲解：使用JQuery实现WordPress多层下拉导航
• 使用JQuery实现WordPress多层下拉导航