創(chuàng)建WordPress多語(yǔ)言網(wǎng)站-第1部分:內(nèi)容和多語(yǔ)言

WordPress是世界上最流行的內(nèi)容管理系統(tǒng)，支持超過(guò)30%的網(wǎng)站。有了WordPress強(qiáng)大的i18n插件，比如Polylang，我們可以非?？焖俚貏?chuàng)建一個(gè)多語(yǔ)言網(wǎng)站。這正是我們?cè)谶@篇文章中要做的，所以請(qǐng)一起來(lái)。

假設(shè)娜杰拉和塔哈聯(lián)系過(guò)我們。他們是有抱負(fù)的企業(yè)家，在北非擁有一家名為“手工制作的故事”的時(shí)尚手工藝品公司。他們有社交媒體，但他們需要一個(gè)網(wǎng)站來(lái)啟動(dòng)流量，以便將來(lái)可以作為電子商務(wù)商店。首先，他們想要一個(gè)帶有博客的簡(jiǎn)單網(wǎng)站，在那里他們可以發(fā)布關(guān)于他們產(chǎn)品和業(yè)務(wù)的新聞。他們帶著有限的預(yù)算來(lái)找我們。他們需要用英語(yǔ)和阿拉伯語(yǔ)展示他們的網(wǎng)站，并且他們可以在未來(lái)增加更多的語(yǔ)言。與他們交談后，我們提出了以下結(jié)構(gòu)。

簡(jiǎn)單的站點(diǎn)架構(gòu)

一個(gè) 二 三 四 五 六 七

/ ├──我們的故事/ ├──新聞/ | ├──博客-帖子-01/ | ├──博客-帖子-02/ | └── ... └──聯(lián)系人/

我們的博客將有一個(gè)根主頁(yè)，一個(gè)生物學(xué)(“我們的故事”)頁(yè)面和一個(gè)聯(lián)系方式。我們還將有一個(gè)新聞來(lái)源/博客索引列表，并鏈接到我們的各種博客文章。

我們建議，在提交更多的定制工作之前，我們?yōu)樗麄冏鲆粋€(gè)干凈的原型。這將使我們能夠在一兩天內(nèi)完成任務(wù)并向他們展示一些東西。一旦他們看到網(wǎng)站的實(shí)際運(yùn)營(yíng)情況，我們就可以添加一個(gè)定制化的設(shè)計(jì)，更能體現(xiàn)他們的品牌。他們喜歡這個(gè)主意，并要求我們立即開始。

我們知道他們想要一個(gè)博客，希望將來(lái)能擴(kuò)大網(wǎng)站，可能會(huì)增加電子商務(wù)功能。因此，我們選擇WordPress作為網(wǎng)站的內(nèi)容管理系統(tǒng)(CMS)。WordPress擁有龐大的安裝基數(shù)，支持超過(guò)30%的網(wǎng)站。CMS還擁有大量的插件和開發(fā)者的支持，保證手工制作的Tale網(wǎng)站隨著開發(fā)相對(duì)容易擴(kuò)展和維護(hù)。

所以我們會(huì)建一個(gè)WordPress站點(diǎn)，用一些插件來(lái)大大加快我們的開發(fā)速度，尤其是我們的i18n工作。我們將使用內(nèi)置的2019主題作為原型。當(dāng)我們玩設(shè)置，創(chuàng)建基本的網(wǎng)站結(jié)構(gòu)和設(shè)置i18n時(shí)，我們將作為WordPress管理員工作。

WordPress和插件

讓我們開始吧。以下是我們將用來(lái)建立我們的博客的版本(在寫作的時(shí)候)。

WordPress

插件組件

Polylang(2.5)？處理內(nèi)容和URL本地化

Loco翻譯(2.2.0)？幫助翻譯主題和插件字符串。

聯(lián)系表7(5.1.1)？您可以輕松創(chuàng)建聯(lián)系人表單。

CF7智能電網(wǎng)設(shè)計(jì)擴(kuò)展(2.6.0)？它讓我們比WordPress管理控制臺(tái)中的CF7表更靈活(然而，我們真的只是在這里安裝它，因?yàn)樗荂ontact Form 7 Polylang擴(kuò)展的要求)。

聯(lián)系形式7 Polylang擴(kuò)展(2.3.0)？允許我們使用Polylang來(lái)本地化CF7表單。

注意，上面列出的所有插件都是免費(fèi)的，可以滿足我們當(dāng)前的需求，并且擁有大量的安裝基礎(chǔ)，以最大限度地增加它們?cè)谖磥?lái)持續(xù)支持的機(jī)會(huì)。

I18n的Polylang

我們的主要工具是Polylang插件。Polylang是WordPress的一個(gè)強(qiáng)大的免費(fèi)i18n插件，它提供了一些開箱即用的強(qiáng)大功能:

大多數(shù)內(nèi)置WordPress內(nèi)容類型的本地化；文章、頁(yè)面、媒體、類別、菜單等。

處理本地化的帖子和頁(yè)面URL，

以及我們可以添加到網(wǎng)頁(yè)的語(yǔ)言切換器。

Polylang提供的不止這些。我建議你查看它的WordPress插件頁(yè)面，了解更多關(guān)于它的所有功能。在本文中，我們將主要堅(jiān)持上述功能。

在我們安裝了WordPress和上面的插件之后，我們就可以開始在管理中定制內(nèi)容，以滿足客戶的要求。

將我們的語(yǔ)言設(shè)置為Polylang。

在我們擁有本地化的內(nèi)容之前，我們需要在Polylang中設(shè)置我們的語(yǔ)言。

注意事實(shí)上，安裝Polylang后，我們至少應(yīng)該為我們的網(wǎng)站設(shè)置默認(rèn)語(yǔ)言，否則在嘗試創(chuàng)建內(nèi)容時(shí)會(huì)出現(xiàn)錯(cuò)誤。

我們可以通過(guò)管理控制臺(tái)中的語(yǔ)言添加我們支持的每種語(yǔ)言。

請(qǐng)注意，添加語(yǔ)言后，您可能會(huì)收到一條警告，告訴您“該語(yǔ)言中是否有任何帖子、頁(yè)面、類別或標(biāo)簽？”警告:就Polylang而言，WordPress中的一些內(nèi)容沒(méi)有本地化。幸運(yùn)的是，警報(bào)還為您提供了一個(gè)方便的鏈接按鈕，將所有這些內(nèi)容設(shè)置為默認(rèn)語(yǔ)言。

在我們添加了我們最初想要本地化內(nèi)容的語(yǔ)言后，我們的語(yǔ)言屏幕應(yīng)該如下所示。

設(shè)置默認(rèn)語(yǔ)言

您在Polylang中添加的第一種語(yǔ)言會(huì)自動(dòng)設(shè)置為默認(rèn)語(yǔ)言。然而，如果你想在添加語(yǔ)言后改變默認(rèn)語(yǔ)言，只需進(jìn)入WordPress Administrator的語(yǔ)言界面。找到要設(shè)置為默認(rèn)語(yǔ)言的行，懸停在它上面，然后單擊執(zhí)行時(shí)出現(xiàn)的星形圖標(biāo)。

修改一般站點(diǎn)范圍的I18n設(shè)置。

用Polylang設(shè)置WordPress網(wǎng)站時(shí)需要訪問(wèn)的重要屏幕是管理器中的語(yǔ)言設(shè)置屏幕。在這里，我們可以設(shè)置本地化URL的外觀以及如何檢測(cè)當(dāng)前的區(qū)域設(shè)置。我將在我的安裝中保留幾乎所有的默認(rèn)狀態(tài)。但是，我會(huì)禁用媒體語(yǔ)言和翻譯(本地化)。我使用的大多數(shù)媒體在不同的語(yǔ)言中都是一樣的。

本地化常規(guī)站點(diǎn)字符串

Polylang提供的語(yǔ)言字符串翻譯屏幕也可以派上用場(chǎng)。在這里，我們可以本地化字符串，如網(wǎng)站標(biāo)題，網(wǎng)站口號(hào)和一般的日期和時(shí)間格式。

本地化的頁(yè)面和博客文章

現(xiàn)在我們可以添加一個(gè)新頁(yè)面，并將其設(shè)置為WordPress管理員的主頁(yè)。目前，我們的主頁(yè)是英語(yǔ)，我們的默認(rèn)語(yǔ)言。我們需要把它翻譯成阿拉伯語(yǔ)，以滿足客戶的要求。我們可以用三種方法之一來(lái)做這件事。

從編輯頁(yè)面屏幕創(chuàng)建翻譯

我們可以從編輯頁(yè)面屏幕上的文檔側(cè)欄創(chuàng)建頁(yè)面翻譯。找到側(cè)邊欄的“文檔語(yǔ)言”部分，然后單擊要為其創(chuàng)建翻譯的語(yǔ)言標(biāo)簽旁邊的+圖標(biāo)。Polylang會(huì)自動(dòng)將您創(chuàng)建的新頁(yè)面鏈接到此源頁(yè)面作為其翻譯。

從頁(yè)面索引屏幕創(chuàng)建翻譯

類似地，我們可以從頁(yè)面索引屏幕創(chuàng)建頁(yè)面翻譯。只需找到您要翻譯的頁(yè)面行，然后單擊您要為其創(chuàng)建翻譯的語(yǔ)言標(biāo)簽旁邊的+圖標(biāo)。Polylang會(huì)自動(dòng)將您創(chuàng)建的新頁(yè)面鏈接到源頁(yè)面，這兩個(gè)頁(yè)面會(huì)被視為相同內(nèi)容的翻譯。

注意您可以在WordPress Administrator中過(guò)濾任何索引/列表屏幕的內(nèi)容，以查看僅屬于一種語(yǔ)言的內(nèi)容。Polylang在相關(guān)屏幕的WordPress administrator的頂欄中提供了一個(gè)“顯示所有語(yǔ)言”下拉列表。只需點(diǎn)擊下拉列表，選擇要過(guò)濾的語(yǔ)言。

將現(xiàn)有頁(yè)面鏈接為翻譯。

如果我們已經(jīng)有一個(gè)頁(yè)面可以作為另一個(gè)頁(yè)面的翻譯，我們可以通過(guò)編輯頁(yè)面屏幕來(lái)鏈接它。

在屏幕的邊欄中，找到“文檔”和“語(yǔ)言”部分。找到要鏈接的語(yǔ)言標(biāo)簽行。點(diǎn)按行中的文本欄，然后開始鍵入您想要用作翻譯的頁(yè)面標(biāo)題。您應(yīng)該得到一個(gè)自動(dòng)完成的頁(yè)面列表，您可以從中選擇要鏈接的頁(yè)面。

如何進(jìn)行崗位本地化？

如果你想知道如何為一篇文章創(chuàng)建一個(gè)翻譯，它和一個(gè)頁(yè)面完全一樣。只需使用WordPress管理員的帖子部分，而不是頁(yè)面部分。剩下的和翻譯的頁(yè)面完全一樣。

添加本地化的博客索引

當(dāng)然，在WordPress中添加博客索引并不容易。我們創(chuàng)建一個(gè)新的只有標(biāo)題的空白頁(yè)面。然后，我們轉(zhuǎn)到管理員中的設(shè)置閱讀，并將我們剛剛創(chuàng)建的頁(yè)面設(shè)置為主頁(yè)顯示部分下的文章頁(yè)面。在我們的設(shè)計(jì)中，我們將頁(yè)面命名為“新聞源”。

我們必須本地化我們的博客索引，以創(chuàng)建“新聞源”頁(yè)面的翻譯。Polylang負(fù)責(zé)剩下的工作?！靶侣剚?lái)源”頁(yè)面只顯示本網(wǎng)站英文版的英文博客帖子。它的阿拉伯語(yǔ)翻譯只顯示阿拉伯語(yǔ)博客文章。

我們聯(lián)系方式的本地化

我們現(xiàn)在可以進(jìn)入管理員的聯(lián)系表單屏幕。這個(gè)屏幕是由Contact Form 7插件創(chuàng)建的，我們可以用它來(lái)構(gòu)建一個(gè)簡(jiǎn)單的聯(lián)系人表單。我的表格基本上只是聯(lián)系表格7給我們的一個(gè)模板。當(dāng)然，你可以把形式改成你想要的任何形式。

值得注意的是“編輯表單”屏幕側(cè)邊欄中的“表單”關(guān)鍵字段。我們使用這個(gè)鍵將表單嵌入到網(wǎng)站的其他區(qū)域。因?yàn)檫@是我的表單的英文版本，所以我選擇了它的鍵。這個(gè)鍵建立了一個(gè)命名約定，并使我們的表單能夠被本地化。主觸點(diǎn)形式en

一旦我們用默認(rèn)語(yǔ)言(這里是英語(yǔ))創(chuàng)建了一個(gè)表單，我們就可以像翻譯頁(yè)面和帖子一樣翻譯它。我們?yōu)槊糠N語(yǔ)言創(chuàng)建一個(gè)單獨(dú)的表單，以顯示我們想要的聯(lián)系表單。

事實(shí)上，當(dāng)您創(chuàng)建一個(gè)表單轉(zhuǎn)換時(shí)，底層插件將嘗試引入任何已經(jīng)成為插件本地化一部分的消息的翻譯。在我的默認(rèn)聯(lián)系人表單的阿拉伯語(yǔ)翻譯中，我只需要自己翻譯一些字段。剩下的我自動(dòng)翻譯了。

向本地化頁(yè)面添加聯(lián)系人表單

在我們以默認(rèn)語(yǔ)言及其翻譯創(chuàng)建聯(lián)系表單后，我們可以將它們添加到頁(yè)面，以便我們可以在之前的網(wǎng)站上顯示它們。我們只需要用每種語(yǔ)言創(chuàng)建一個(gè)聯(lián)系頁(yè)面，并確保它們作為彼此的翻譯鏈接。

我們需要放入每個(gè)頁(yè)面的唯一內(nèi)容是與頁(yè)面語(yǔ)言相匹配的表單的簡(jiǎn)短代碼。每個(gè)聯(lián)系人表單的短代碼都列在管理員的聯(lián)系人表單屏幕上。

本地化菜單

讓我們?cè)诰W(wǎng)站上添加一個(gè)菜單來(lái)方便導(dǎo)航。在WordPress中，我們當(dāng)然是通過(guò)管理器中的外觀菜單來(lái)做到這一點(diǎn)的。但是，請(qǐng)注意，激活Polylang后，我們會(huì)為每種支持的語(yǔ)言提供單獨(dú)的菜單顯示位置。

因此，我們?yōu)槲覀冎С值拿糠N語(yǔ)言創(chuàng)建一個(gè)新菜單，并將其添加到適當(dāng)?shù)娘@示位置。Polylang將確保主要的法語(yǔ)位置只顯示我們放在網(wǎng)站法語(yǔ)版的菜單(我希望是法語(yǔ)版)。

添加語(yǔ)言切換器

Polylang提供了一個(gè)很好的語(yǔ)言切換器小部件，我們可以將它添加到在我們的主題中注冊(cè)的任何小部件區(qū)域。我們還可以在導(dǎo)航菜單中添加小部件。要將它添加到導(dǎo)航菜單中，我們首先進(jìn)入管理器中的外觀菜單。然后，我們打開屏幕頂部附近的屏幕選項(xiàng)面板，并啟用語(yǔ)言切換器框。

啟用屏幕上的語(yǔ)言切換器后，我們現(xiàn)在應(yīng)該看到它出現(xiàn)在我們可以添加到菜單的項(xiàng)目列表中。

我們現(xiàn)在可以將切換器添加到每個(gè)本地化菜單中，并根據(jù)我們自己的偏好配置其選項(xiàng)。

使用Loco Translate翻譯主題和插件中的字符串。

有時(shí)你會(huì)發(fā)現(xiàn)WordPress中使用的主題和插件缺少一些翻譯。比如寫《二十個(gè)十九》的主題時(shí)，我裝的就是缺少一些阿拉伯語(yǔ)的翻譯。

沒(méi)問(wèn)題，我們可以用之前安裝的Loco Translate插件來(lái)填補(bǔ)這些空白。首先，我們導(dǎo)航到管理員中的Loco Translate屏幕，找到我們想要添加翻譯的主題或插件。

注意，我們想用Loco Translate翻譯的主題或插件必須考慮PHP gettext本地化。這意味著它提供了一個(gè)模板POT文件，我們可以用它作為翻譯成不同語(yǔ)言的基礎(chǔ)。如果一個(gè)主題或插件使用不同的方法來(lái)本地化它的字符串，Loco Translate可能無(wú)法幫助我們。

在這種情況下，我們希望主題在活動(dòng)主題或2019下。點(diǎn)擊主題名稱將打開它的包頁(yè)面。

我們可以單擊包頁(yè)面上的“新語(yǔ)言”按鈕，開始添加目標(biāo)語(yǔ)言的PO文件。

一旦我們對(duì)設(shè)置感到滿意，我們可以點(diǎn)擊開始翻譯。當(dāng)我們這樣做時(shí)，我們將進(jìn)入語(yǔ)言翻譯界面。

在這里，我們可以過(guò)濾字符串，選擇要翻譯的字符串，并在翻譯完成時(shí)保存語(yǔ)言環(huán)境的PO文件。例如，在我們填寫了“留下評(píng)論”字符串缺少的翻譯后，我們可以立即在我們的阿拉伯語(yǔ)新聞源頁(yè)面上看到新翻譯的副本。

結(jié)論

在下一部分中，我們將創(chuàng)建一個(gè)可以匹配客戶品牌的自定義本地化主題。如果你正在為WordPress編寫自己的自定義主題，請(qǐng)考慮使用PhraseApp進(jìn)行翻譯。PhraseApp可用于現(xiàn)成的POT、PO和MO文件，并為i18n開發(fā)人員和翻譯人員提供專業(yè)的功能集。PhraseApp可以同步到您的Github存儲(chǔ)庫(kù)，以檢測(cè)語(yǔ)言環(huán)境文件何時(shí)更改。它還提供了搜索翻譯字符串和校對(duì)翻譯的工具。PhraseApp甚至包括協(xié)作工具，以便您在與翻譯人員合作時(shí)節(jié)省時(shí)間。查看PhraseApp的完整功能集，并免費(fèi)試用14天。您可以隨時(shí)注冊(cè)完全訂閱或取消訂閱。

在相對(duì)較短的時(shí)間內(nèi)，我們可以為我們的客戶創(chuàng)建一個(gè)工作網(wǎng)站，其中包括一個(gè)主頁(yè)，博客供稿和聯(lián)系方式。整個(gè)網(wǎng)站也實(shí)現(xiàn)了英語(yǔ)和阿拉伯語(yǔ)的國(guó)際化。如果我們的客戶需要我們這樣做，我們甚至可以將我們的本地化擴(kuò)展到其他地區(qū)。最重要的是，我們的網(wǎng)站建立在世界上最受歡迎的CMS WordPress上，具有令人難以置信的可擴(kuò)展性選項(xiàng)，可用于客戶網(wǎng)絡(luò)的未來(lái)。我們的客戶娜杰拉和塔哈再次興奮起來(lái)。他們?cè)诰W(wǎng)站上添加了內(nèi)容，他們希望我們?yōu)樗麄冮_發(fā)定制的主題。這正是我們?cè)诒鞠盗械牡?部分中所做的。敬請(qǐng)期待！