创建WordPress多语言网站-第1部分:内容和多语言
WordPress是世界上最流行的内容管理系统,支持超过30%的网站。有了WordPress强大的i18n插件,比如Polylang,我们可以非常快速地创建一个多语言网站。这正是我们在这篇文章中要做的,所以请一起来。
假设娜杰拉和塔哈联系过我们。他们是有抱负的企业家,在北非拥有一家名为“手工制作的故事”的时尚手工艺品公司。他们有社交媒体,但他们需要一个网站来启动流量,以便将来可以作为电子商务商店。首先,他们想要一个带有博客的简单网站,在那里他们可以发布关于他们产品和业务的新闻。他们带着有限的预算来找我们。他们需要用英语和阿拉伯语展示他们的网站,并且他们可以在未来增加更多的语言。与他们交谈后,我们提出了以下结构。
简单的站点架构
一个 二 三 四 五 六 七 | / ├──我们的故事/ ├──新闻/ | ├──博客-帖子-01/ | ├──博客-帖子-02/ | └── ... └──联系人/ |
我们的博客将有一个根主页,一个生物学(“我们的故事”)页面和一个联系方式。我们还将有一个新闻来源/博客索引列表,并链接到我们的各种博客文章。
我们建议,在提交更多的定制工作之前,我们为他们做一个干净的原型。这将使我们能够在一两天内完成任务并向他们展示一些东西。一旦他们看到网站的实际运营情况,我们就可以添加一个定制化的设计,更能体现他们的品牌。他们喜欢这个主意,并要求我们立即开始。
我们知道他们想要一个博客,希望将来能扩大网站,可能会增加电子商务功能。因此,我们选择WordPress作为网站的内容管理系统(CMS)。WordPress拥有庞大的安装基数,支持超过30%的网站。CMS还拥有大量的插件和开发者的支持,保证手工制作的Tale网站随着开发相对容易扩展和维护。
所以我们会建一个WordPress站点,用一些插件来大大加快我们的开发速度,尤其是我们的i18n工作。我们将使用内置的2019主题作为原型。当我们玩设置,创建基本的网站结构和设置i18n时,我们将作为WordPress管理员工作。
WordPress和插件让我们开始吧。以下是我们将用来建立我们的博客的版本(在写作的时候)。
WordPress
插件组件
Polylang(2.5)?处理内容和URL本地化
Loco翻译(2.2.0)?帮助翻译主题和插件字符串。
联系表7(5.1.1)?您可以轻松创建联系人表单。
CF7智能电网设计扩展(2.6.0)?它让我们比WordPress管理控制台中的CF7表更灵活(然而,我们真的只是在这里安装它,因为它是Contact Form 7 Polylang扩展的要求)。

联系形式7 Polylang扩展(2.3.0)?允许我们使用Polylang来本地化CF7表单。
注意,上面列出的所有插件都是免费的,可以满足我们当前的需求,并且拥有大量的安装基础,以最大限度地增加它们在未来持续支持的机会。
I18n的Polylang
我们的主要工具是Polylang插件。Polylang是WordPress的一个强大的免费i18n插件,它提供了一些开箱即用的强大功能:
大多数内置WordPress内容类型的本地化;文章、页面、媒体、类别、菜单等。
处理本地化的帖子和页面URL,
以及我们可以添加到网页的语言切换器。
Polylang提供的不止这些。我建议你查看它的WordPress插件页面,了解更多关于它的所有功能。在本文中,我们将主要坚持上述功能。
在我们安装了WordPress和上面的插件之后,我们就可以开始在管理中定制内容,以满足客户的要求。
将我们的语言设置为Polylang。在我们拥有本地化的内容之前,我们需要在Polylang中设置我们的语言。
注意事实上,安装Polylang后,我们至少应该为我们的网站设置默认语言,否则在尝试创建内容时会出现错误。
我们可以通过管理控制台中的语言添加我们支持的每种语言。
请注意,添加语言后,您可能会收到一条警告,告诉您“该语言中是否有任何帖子、页面、类别或标签?”警告:就Polylang而言,WordPress中的一些内容没有本地化。幸运的是,警报还为您提供了一个方便的链接按钮,将所有这些内容设置为默认语言。
在我们添加了我们最初想要本地化内容的语言后,我们的语言屏幕应该如下所示。
设置默认语言
您在Polylang中添加的第一种语言会自动设置为默认语言。然而,如果你想在添加语言后改变默认语言,只需进入WordPress Administrator的语言界面。找到要设置为默认语言的行,悬停在它上面,然后单击执行时出现的星形图标。
修改一般站点范围的I18n设置。用Polylang设置WordPress网站时需要访问的重要屏幕是管理器中的语言设置屏幕。在这里,我们可以设置本地化URL的外观以及如何检测当前的区域设置。我将在我的安装中保留几乎所有的默认状态。但是,我会禁用媒体语言和翻译(本地化)。我使用的大多数媒体在不同的语言中都是一样的。
本地化常规站点字符串Polylang提供的语言字符串翻译屏幕也可以派上用场。在这里,我们可以本地化字符串,如网站标题,网站口号和一般的日期和时间格式。
本地化的页面和博客文章现在我们可以添加一个新页面,并将其设置为WordPress管理员的主页。目前,我们的主页是英语,我们的默认语言。我们需要把它翻译成阿拉伯语,以满足客户的要求。我们可以用三种方法之一来做这件事。
从编辑页面屏幕创建翻译
我们可以从编辑页面屏幕上的文档侧栏创建页面翻译。找到侧边栏的“文档语言”部分,然后单击要为其创建翻译的语言标签旁边的+图标。Polylang会自动将您创建的新页面链接到此源页面作为其翻译。
从页面索引屏幕创建翻译
类似地,我们可以从页面索引屏幕创建页面翻译。只需找到您要翻译的页面行,然后单击您要为其创建翻译的语言标签旁边的+图标。Polylang会自动将您创建的新页面链接到源页面,这两个页面会被视为相同内容的翻译。
注意您可以在WordPress Administrator中过滤任何索引/列表屏幕的内容,以查看仅属于一种语言的内容。Polylang在相关屏幕的WordPress administrator的顶栏中提供了一个“显示所有语言”下拉列表。只需点击下拉列表,选择要过滤的语言。
将现有页面链接为翻译。
如果我们已经有一个页面可以作为另一个页面的翻译,我们可以通过编辑页面屏幕来链接它。
在屏幕的边栏中,找到“文档”和“语言”部分。找到要链接的语言标签行。点按行中的文本栏,然后开始键入您想要用作翻译的页面标题。您应该得到一个自动完成的页面列表,您可以从中选择要链接的页面。
如何进行岗位本地化?
如果你想知道如何为一篇文章创建一个翻译,它和一个页面完全一样。只需使用WordPress管理员的帖子部分,而不是页面部分。剩下的和翻译的页面完全一样。
添加本地化的博客索引当然,在WordPress中添加博客索引并不容易。我们创建一个新的只有标题的空白页面。然后,我们转到管理员中的设置阅读,并将我们刚刚创建的页面设置为主页显示部分下的文章页面。在我们的设计中,我们将页面命名为“新闻源”。
我们必须本地化我们的博客索引,以创建“新闻源”页面的翻译。Polylang负责剩下的工作。“新闻来源”页面只显示本网站英文版的英文博客帖子。它的阿拉伯语翻译只显示阿拉伯语博客文章。
我们联系方式的本地化我们现在可以进入管理员的联系表单屏幕。这个屏幕是由Contact Form 7插件创建的,我们可以用它来构建一个简单的联系人表单。我的表格基本上只是联系表格7给我们的一个模板。当然,你可以把形式改成你想要的任何形式。
值得注意的是“编辑表单”屏幕侧边栏中的“表单”关键字段。我们使用这个键将表单嵌入到网站的其他区域。因为这是我的表单的英文版本,所以我选择了它的键。这个键建立了一个命名约定,并使我们的表单能够被本地化。主触点形式en
一旦我们用默认语言(这里是英语)创建了一个表单,我们就可以像翻译页面和帖子一样翻译它。我们为每种语言创建一个单独的表单,以显示我们想要的联系表单。
事实上,当您创建一个表单转换时,底层插件将尝试引入任何已经成为插件本地化一部分的消息的翻译。在我的默认联系人表单的阿拉伯语翻译中,我只需要自己翻译一些字段。剩下的我自动翻译了。
向本地化页面添加联系人表单
在我们以默认语言及其翻译创建联系表单后,我们可以将它们添加到页面,以便我们可以在之前的网站上显示它们。我们只需要用每种语言创建一个联系页面,并确保它们作为彼此的翻译链接。
我们需要放入每个页面的唯一内容是与页面语言相匹配的表单的简短代码。每个联系人表单的短代码都列在管理员的联系人表单屏幕上。
本地化菜单让我们在网站上添加一个菜单来方便导航。在WordPress中,我们当然是通过管理器中的外观菜单来做到这一点的。但是,请注意,激活Polylang后,我们会为每种支持的语言提供单独的菜单显示位置。
因此,我们为我们支持的每种语言创建一个新菜单,并将其添加到适当的显示位置。Polylang将确保主要的法语位置只显示我们放在网站法语版的菜单(我希望是法语版)。
添加语言切换器Polylang提供了一个很好的语言切换器小部件,我们可以将它添加到在我们的主题中注册的任何小部件区域。我们还可以在导航菜单中添加小部件。要将它添加到导航菜单中,我们首先进入管理器中的外观菜单。然后,我们打开屏幕顶部附近的屏幕选项面板,并启用语言切换器框。
启用屏幕上的语言切换器后,我们现在应该看到它出现在我们可以添加到菜单的项目列表中。
我们现在可以将切换器添加到每个本地化菜单中,并根据我们自己的偏好配置其选项。
使用Loco Translate翻译主题和插件中的字符串。有时你会发现WordPress中使用的主题和插件缺少一些翻译。比如写《二十个十九》的主题时,我装的就是缺少一些阿拉伯语的翻译。
没问题,我们可以用之前安装的Loco Translate插件来填补这些空白。首先,我们导航到管理员中的Loco Translate屏幕,找到我们想要添加翻译的主题或插件。
注意,我们想用Loco Translate翻译的主题或插件必须考虑PHP gettext本地化。这意味着它提供了一个模板POT文件,我们可以用它作为翻译成不同语言的基础。如果一个主题或插件使用不同的方法来本地化它的字符串,Loco Translate可能无法帮助我们。
在这种情况下,我们希望主题在活动主题或2019下。点击主题名称将打开它的包页面。
我们可以单击包页面上的“新语言”按钮,开始添加目标语言的PO文件。
一旦我们对设置感到满意,我们可以点击开始翻译。当我们这样做时,我们将进入语言翻译界面。
在这里,我们可以过滤字符串,选择要翻译的字符串,并在翻译完成时保存语言环境的PO文件。例如,在我们填写了“留下评论”字符串缺少的翻译后,我们可以立即在我们的阿拉伯语新闻源页面上看到新翻译的副本。
结论在下一部分中,我们将创建一个可以匹配客户品牌的自定义本地化主题。如果你正在为WordPress编写自己的自定义主题,请考虑使用PhraseApp进行翻译。PhraseApp可用于现成的POT、PO和MO文件,并为i18n开发人员和翻译人员提供专业的功能集。PhraseApp可以同步到您的Github存储库,以检测语言环境文件何时更改。它还提供了搜索翻译字符串和校对翻译的工具。PhraseApp甚至包括协作工具,以便您在与翻译人员合作时节省时间。查看PhraseApp的完整功能集,并免费试用14天。您可以随时注册完全订阅或取消订阅。
在相对较短的时间内,我们可以为我们的客户创建一个工作网站,其中包括一个主页,博客供稿和联系方式。整个网站也实现了英语和阿拉伯语的国际化。如果我们的客户需要我们这样做,我们甚至可以将我们的本地化扩展到其他地区。最重要的是,我们的网站建立在世界上最受欢迎的CMS WordPress上,具有令人难以置信的可扩展性选项,可用于客户网络的未来。我们的客户娜杰拉和塔哈再次兴奋起来。他们在网站上添加了内容,他们希望我们为他们开发定制的主题。这正是我们在本系列的第2部分中所做的。敬请期待!