iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 20
1
自我挑戰組

Wordpress 外掛開發系列 第 20

「Wordpress 外掛開發」掛上多語系,大家都在international - i18n

我們在開發自己的外掛時,常常遇到多語言的議題,而wordpress有提供很好的解決方案Internationalization,簡稱i18n,而使用i18n的好處,在你的眾多使用者之中,如果你有不同語言系的人來使用,則你可以藉由i18n進行轉換,只需要邊寫mo與po兩個轉換的翻譯檔案,這樣可以來做到多語系的效果,比如說我們今天要做的中文化,就是個很好的例子,而我們大部分買的套件或是主題,通常都是英文而已,而那些提供翻譯的也是只有很少量的翻譯,必須要字型去新增才能達到100%的擴充!

使用textdomain對準你的slug

我們在使用之前,需要先了解textdomain是什麼,在每一個句子之中,不同語言有不同的字句,而就算是同一個語言,也有不同的翻譯來詮釋,比如說跟你死了沒以及你怎麼還沒死,而我們的textdomain就是用來區分這個的,這裡需要設定的text_domain後,就可以呼叫翻譯函數來與textdoamin的檔案做介媒,而翻譯函數就是我們之前使用的__,而在官方文件之中,就是會出現text domain與slug做連接,進而做轉換,那麼就會有基礎的如果沒有設定到會轉換成預設的語言。

使用載入text_doamn來做基礎的設定,而此處就可以轉換成我們需要使用的textdomain,而我們的slug就要掛到我們plugin的名稱,而我們挑選init這個時段來增加我們的載入textdomain;這一個參數需要對應到外掛的名稱,而abs_rel_path則是不需要,而最後一個選項使用init去勾到註冊外掛的翻譯。

<?php

add_action('init','go_ranger_load_textdomain' );
 
function go_ranger_load_textdomain() {
 
    load_plugin_textdomain( 'go-ranger-plugin', false, 'go-ranger-plugin/languages' );
 
}
?>

顯示翻譯後的文字

Wordpress提供了不少的翻譯函式,來對你的textdomain做翻譯,而最常用的應該是__,而你還會看到的_e則是用來做localization的,而每個函數至少都會有兩個函式來做轉換,分別是$domain與要轉換的文字,而我們可以看到我們下面操作的方式,是如何來使用的。

add_action( 'wp_footer', 'go_ranger_footer_message' );
             
function go_ranger_footer_message() {
             
  __('哈囉 世界','go-ranger-plugin');
  _e( 'This website runs on the coolest platform ever — WordPress.', 'go_ranger-plugin' );
 
}             

使用 _n() 來分辨是否多數

可以用這個判斷回傳的字串是1還是多於1的,而四個涮讓使用更加人性化,在$single與$plural設定完成之後,就可以對於多樣性的回傳有個好的解決方案了,而詳細的使用_n會放在節錄的部分,供人做參考,那我們這次的範例,就是拿出之前的圖書管理員們的貢獻表坐以範例,而輸出的文字我們則是以_n來做顯示。

function go_ranger_count_published_posts() {

    if(!user_logged()) printf( __( "%s你根本沒有貢獻" , 'go-ranger-plugin' ) , "小王八蛋" );
    $go_ranger_count_posts = wp_count_posts();
    $count = $go_ranger_count_posts->publish;
             
    printf( _n(
        'You have published %s post.', 'You have published %s posts.',
        $count,
        'go-ranger-plugin' ),
    $count );
}

而在使用翻譯的函式也是有非常多的,我做個簡單的清單介紹一下,有興趣可以到官網來做一下搜尋,而下面的清單邏輯,可以了解如果字尾是有_e做結尾,是會直接印在視窗上,將像是echo的意思,所以如果有相關的使用是可以用這些來做的,而_x結尾的是能夠對translator有更進階的,所以多了一個$context的欄位,打個比方如果你的翻譯是有_x('mph','america speed',go-ranger-plugin')來達到讓translator支援更多的條件選擇,而也有_ex為結尾的,就是把上方兩個功能結合自一起輸出的。

  • _n()
  • _nx()
  • _n_nloop()
  • _e()
  • esc_html__()
  • esc_html_e()
  • esc_html_x()
  • esc_attr__()
  • est_attr_e()
  • esc_attr_x()
  • _x()
  • _ex()

那其實我們最常用到到的應該都還是以__做結為,以我的個人習慣,還是喜歡用printf來做輸出,比較明確,也不會在一串文字中,加入很不好閱讀的斷點,而這邊的內容是否有覺得與我們在講custom content的內容很像?就是因為你的content與這邊的使用是脫不了關係的,你的content也可以在加入__的擴充中,支援i18n。

顯示好看點

由我們上述提到,為何使用printf去取代echo,可以讓顯示更加簡潔,因為__沒有提供placeholder的功能,所以使用printf更容易些,而你不會想要在echo中看到一大堆,我舉個簡單的範例就可以來寫,printf與echo不管是行數或是閱讀性都是大大勝利,對了,在英文與中文的句號,是不一樣的,所以你的句號也是得要做翻譯的。

    // echo
    echo __( '你的網站名稱為', 'go-ranger-plugin' );
    echo get_bloginfo( 'name' );
    _e( '。', 'go-ranger-plugin' );

    //printf
    printf(
        __( '你的網站名稱為 %s 。', 'go-ranger-plugin' ),
        get_bloginfo( 'name' )
    );

可以在printf中,變數並不會穿插在字串之中,讓閱讀性提高很多,而sprintf也可以使用,我就不多做解釋,有些時候你需要多一點的placeholder,printf也是可以配合得很好,如果你要將祖宗18帶都印出來,也是後面加上就可以了,那我們其實在這邊使用次數的placeholder來替換,才是精華,像是$1%s,%2$s,因為每個語言的次序是不同的,最明顯的就是英文中,會將時間架在後面,而中文會加在前面,如果直接使用%s翻譯出來,就不正確了。

將js加入i18n

如果你今天是需要在javascript中,也是有語言變換的偵測程式,那麼你需要轉換這一些的變數來使用,而如果你直接寫死在php中,那就沒辦法轉換,如果你有使用enque就可以轉使用wp_localize_script,並且加入l10n來轉換。

  wp_enqueue_script( 'go-ranger-registration-table', $script, false, 0.1 );
             
  wp_localize_script( 'go-ranger-registration-table', 'go_ranger_object', array(
      'a' => __( '你媽很胖', 'go-ranger-plugin' ),
      'b' => __( '擋住我家wifi', 'go-ranger-plugin' ),
  ) );

要了解這個最簡單的方式,就是設定一個console.log,那麼你要顯示瀏覽器體系的錯誤訊息,則可以直接使用這個來做顯示,我們先坐enqueue再來做做localization,而js裡邊就可以直接使用使用object_name.l10n_fieldname來直接使用,使用上與之前將在地的變數傳進script之中大同小異

console.log(go_ranger_object.a);
console.log(go_ranger_object.b);

你應該再開別人的檔案中,看見mo與po

能夠使用翻譯的前提,是建立mo與po的這兩種檔案,像是你的外掛就會載入pot檔案去建立,而po檔案就是翻譯的檔案,他對應的是translater,他會經過翻譯器的轉換hook來供這些翻譯函式使用,而這邊就是使用工具來做會更恰當。

而mo檔案,則是在完成翻譯後建立,他就是對著wordpress,wordpress在你的外掛中取回i18n字串轉換時,就是使用這個檔案,而使用者的local就可以看在user裡頭的預設語系的對應,如果要統一,可以在wp-config.php來做設定,而我們在編輯這些檔案的教學,網路上有非常多的工具可以來做你的pot,而最常用的應該poedit,很簡單就是點擊編輯,並且最後會吐出pot給我們。

所以,要不要加上i18n

如果只要一種語言,不要硬是加上多語言系,比如說那些傳統產業,那些話述說著你未來可能有著與國外接軌的那些話,你今天都找那些斤斤計較兩萬塊處理到好的網頁設計公司,你還想走出台灣?

最後,大部分的使用者都會使用這個pot來做翻譯,但是如果沒有一個好的規劃就會是一場悲劇,所以最好的利用就是建立一個folder,大部分的規劃都會是叫做langs或者是languages,當你每次更新妳的外掛後,你就可以將更新的翻譯文檔存在專屬的資料夾,可以確定translatro與wordpress都可以抓到他們需要的檔案。

日光節約,非常的煩躁,一點都不想寫鐵人賽,我一個下午就呆坐在電腦前,不知如何下筆,現在的寫作該克服的,不是如何有更好的專注力,而是如何不去分心,該去調整新的時差了....怎麼辦明天不知道要寫什麼,真的是給他有點緊張XD還是在上班的時候靈感最好

Reference

Internationalization and localization
codex - I18n for WordPress Developers
5 Top WordPress Project Management Plugins
How To Internationalize Your WordPress Website
Wordpress - _n
Wordpress - l10n
poedit 免費的呦!


上一篇
「Wordpress 外掛開發」商品限定VVIP,缺了些東西還是可以讓人入侵看光
下一篇
「Wordpress 外掛開發」為大爺們,加上特別的折價服務
系列文
Wordpress 外掛開發30

尚未有邦友留言

立即登入留言