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

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

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

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

一個 二 三 四 五 六 七

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

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

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

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

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

WordPress和插件

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

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è)計擴(kuò)展(2.6.0)？它讓我們比WordPress管理控制臺中的CF7表更靈活(然而，我們真的只是在這里安裝它，因為它是Contact Form 7 Polylang擴(kuò)展的要求)。

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

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

I18n的Polylang

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

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

處理本地化的帖子和頁面URL，

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

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

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

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

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

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

我們可以通過管理控制臺中的語言添加我們支持的每種語言。

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

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

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

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

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

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

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

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

本地化的頁面和博客文章

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

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

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

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

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

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

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

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

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

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

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

添加本地化的博客索引

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

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

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

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

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

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

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

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

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

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

本地化菜單

讓我們在網(wǎng)站上添加一個菜單來方便導(dǎo)航。在WordPress中，我們當(dāng)然是通過管理器中的外觀菜單來做到這一點(diǎn)的。但是，請注意，激活Polylang后，我們會為每種支持的語言提供單獨(dú)的菜單顯示位置。

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

添加語言切換器

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

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

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