[Day 26] 想让 Wordpress主题能做到多语言?看完这篇你也懂

我们身在亚洲。很多时,英文都并不是我们的主语言,那麽能否把主题翻译到其他语言,就成了一个很重要的关键,坊间有不少买回来的主题,都是欠全面的翻译,亦对於翻译的支援不足。即时使用了wordpress插件,但有些地方,却总是翻译不了,特别在主题的header和footer部分,这种情况颇为常见。我们可以怎样做,去进行翻译?这篇文章将会为您一一解释。

让你的文字变得可翻译

之前,我亦曾经有提及过这部分,不过当时,并没有详细地解释,亦有欠疏理。而我亦并没有全面地在所有编码里使用,没能提出他们的重要性。这里我将会为你解释清楚,究竟该怎样做,才能让你的文字变得可翻译。虽然这看起来,只是很少的事,不过你的主题能否翻译,很多时就看这里,这也是一个非常重大的原因,导致你常买回来的主题总是只能翻译到一半。

_e() 与 _()

说到wordpress的文字翻译,就不能缺少这两个wordpress的骨干分子,没了他们。可以说,什麽翻译也就谈不成了。我们一般是要这样加设的,例如我们原先是:

<p> Posted by </p>

假若我们需要加入翻译,编码就会像这样:

<p> <?php _e( 'Settings Page' ); ?> </p>

不过有e和没e的分别在哪?e 其实代表的意思是echo,假若你们还记得的话,所谓的echo,其实就是把文字会直接列印出来的意思。所以啊,任何你必定会显示出来的文字,我们都会采用echo,例如在h1里面,p里面等等。

至於 (),则是不会直接列印出来的,例如alt text 这样。或者内容是按情况而定的,就例如wp_link_pages里面的nextpagelink,previouspagelink,我们只会希望他们在有需要的时候,才显示出来。那麽我们就会需要使用()了。

不过有时候,不能够用正常的方法去进行翻译的,例如这样子:

by

在这情况,我们是不可能像平常那样去加入的。我们必须要透过:

这样的方法,加入额外的编码,以做到这目的。%s,在wordpress内里的原始编码,是代表着作者名称的,之前也有着相近的例子,printf

text domain

虽然我们在上方是把该变的编码改变了,不过我们还需要加入text domain,那麽翻译才能够正常地运作,才能够正确地翻译,如此同时亦都能够让你的主题描述,也可以变成可翻译的。

之前在style.css不是有加入到这编码吗?

/*
Theme Name: theme01
Author: thewayeasy
Description: This is my first wordpress theme
Version: 1.0
*/

我们只需要在内里再加入Text domain:newtheme这样,就设定完成了,当然名字来可以随心所欲去定吧。

为了能够让翻译可以运行得准确无误,我们需要在编码加入,newtheme

例如最一开始的例子:

这样就可以了。

esc_html__() 与 esc_html_e()

不过你并不是每次都会希望直接使用文字,有时候你会希望在上方先设定好,然後在下方用$xx 来代替直接放入文字。假若是这情况的话,我们就需要用到这两个了。所以简单来说,究竟是怎样才会需要用到呢?记住,假若你编码里边,是不会出现任何html,普通文字,而是会采用任何php编码来代替的话,那你就必须要使用。

这样做有一个很大的好处,能够确保您的文章不会受到任何黑客,恶意地放入一些与编码无关的文字或者连结,甚至借用这个安全漏洞,去进行攻击。如此同时,亦都能够确保使用者的设定,能够正常运作,为什麽这样说,因为他除了能够防止黑客外,亦都有效能够调整用家输入的内容,让内容不会重复地出现,或者错误转译,造成不必要的麻烦。

至於有e和没e的方面,上方介绍的那个差别不大,这里就不多说了。

把需要翻译的文字转换到pot档案里

我们这里,需要用到 gettext来把档案转换为pot档案,这样之後用家就可以透过poedit来翻译网页主题。

网址:

http://ftp.gnome.org/pub/gnome/binaries/win32/dependencies/

安装教学:

https://www.drupal.org/docs/8/modules/potion/how-to-install-setup-gettext

加入翻译到wordpress

翻译并不复杂,只需要翻译po档案就可以了,坊间有很多使用poedit作翻译的教学,这里就不详细说明了。在你翻译完成後,按储存,poedit会生成一个mo档案,这个才是wordpress会看的,这里需要注意的是档案的命名是非常重要的,例如台湾,就会是xxx-zh_TW.mo

更多的可以参看下方这个网志:

https://wpastra.com/docs/complete-list-wordpress-locale-codes/

加入function让翻译可运行

最後我们可以像之前bootstrap那样开一个新档案,让所有翻译档案,放到同一个档案里,接着我们利用加设编码在function,让这些翻译都能够准备就绪,给用家使用:

编码参考:

function local_theme(){
  load_theme_textdomain( 'wpml_theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'local_theme' );

这些编码和之前上载css和javascript差别不大,不过这次我们是使用了load_theme_textdomain,来让系统注册这些翻译档案,最後当然要action,这样我们就能够使用到了。

此文章将会持续更新,以更完善内容。


<<:  26.Computed vs Methods

>>:  Day 26 - CDK 建置 Amazon Elastic Kubernetes Service(EKS)- Service

[Day5] 变数&&部份所有权&&简单的回圈

不知不觉就写了 1 / 6 了,时间也过太快了。 虽然我怕之後断掉 QQ 想必读者全部都会略过这一块...

[重构倒数第13天] - Vue3定义自己的模板语法

前言 该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系...

Day_13 有线网路应用(五)

如果你看完Day_12 有线网路应用(四)跟着也买了管理型交换机,那麽看到这篇应该会想揍人XD。 今...

03 | 认识 WordPress「区块编辑器」的发展和简介

关於 Block Editor(区块编辑器)的各类延伸有很多,我们这篇文章尽量保持简单,但您可以从...

Gulp 一键部属到 Github Pages DAY93

在介绍 gulp-gh-pages 之前 我们必须先在 GitHub 上新增一个远端数据库 点选 N...