iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 26
1
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 26

[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,這樣我們就能夠使用到了。

此文章將會持續更新,以更完善內容。


上一篇
【Day25】 帶你看看wordpress WP_Query的分類與標籤,讓你可以只顯示每個分類的第一項而不重複
下一篇
【day27】修改你wordpress主題,header裏的 head的部分,並教你剷除wp_head的不必要檔案
系列文
讓0基礎的你也能製作簡單wordpress主題30

尚未有邦友留言

立即登入留言