WordPress多語言外掛程式：qTranslate （開發篇）

本文目錄1qTranslate 的工作原理2qTranslate 全局變量 $q_config3qTranslate 函數4函數 qtrans_use5函數 qtrans_integrate6函數 qtrans_getSortedLanguages7函數 qtrans_switch_postbox8函數 qtrans_createTitlebarButton

關於 qTranslate 的基本使用，請查看 WordPress多語言外掛：qTranslate （使用篇） ，下面主要分享 qTranslate 部分底層功能，方便讀者對 WordPress 結合 qTranslate 外掛進行二次開發，以免去在開發過程中不必要的麻煩。

wpdaxue.com-201303387

qTranslate 的工作原理

qTranslate 通過 JS 和 WordPress 的 Hooks 機制，即時實現多語言功能，對數據庫以及 WordPress 源碼沒有任何修改。

後臺中，qTranslate 通過 JS 實時處理文章編輯、頁面編輯、分類添加/編輯等頁面的表單（標題、正文等），將各個輸入框按不同語言分離，並在提交表單時實時合並各個語言所填寫的內容，進而提交到服務器並寫入數據庫。各個數據項合並存儲格式如下：

1

<!--:zh-->這是中文內容<!--:--><!--:en-->This is English content<!--:-->

<!–:zh–>這是中文內容<!–:–><!–:en–>This is English content<!–:–>

前臺中，qTranslate 通過 WordPress 的 Hooks 機制（action 和 filter），在樣版將數據輸出（通常指通過 the_title()、the_content()等 WordPress 樣版函數）之前，對數據進行處理。

qTranslate 全局變量 $q_config

通過實時輸出數組 $q_config 可以很清晰地看到這個數組的各個分支的數據，及其大概作用。

其中在常規開發中可能用到的變量有：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// （數組）後臺設置的可用的語言
$q_config['enabled_languages'];
 
// 當前後臺設置的默認語言
$q_config['default_language'];
 
// 當前被顯示的語言（當前被選擇的語言）
$q_config['language'];
 
// 偵測到瀏覽器的語言
$q_config['detect_browser_language'];
 
// qTranslate 各 JS 函數對應的 JS 代碼
$q_config['js']['qtrans_is_array'];
$q_config['js']['qtrans_xsplit'];
$q_config['js']['qtrans_split'];
$q_config['js']['qtrans_integrate'];
$q_config['js']['qtrans_switch_postbox'];
$q_config['js']['qtrans_use'];

// （數組）後臺設置的可用的語言
$q_config[‘enabled_languages’];
// 當前後臺設置的默認語言
$q_config[‘default_language’];
// 當前被顯示的語言（當前被選擇的語言）
$q_config[‘language’];
// 偵測到瀏覽器的語言
$q_config[‘detect_browser_language’];
// qTranslate 各 JS 函數對應的 JS 代碼
$q_config[‘js’][‘qtrans_is_array’];
$q_config[‘js’][‘qtrans_xsplit’];
$q_config[‘js’][‘qtrans_split’];
$q_config[‘js’][‘qtrans_integrate’];
$q_config[‘js’][‘qtrans_switch_postbox’];
$q_config[‘js’][‘qtrans_use’];

qTranslate 函數

qTranslate 自帶瞭眾多函數（PHP 和 JS，有些是 PHP 與 JS 通用的），因其需要充分考慮在前端體驗上的優化，大多數函數的定制性很高，在我們的開發中不一定用得上。因此在此筆者僅列舉必須用到的幾個基礎函數，有興趣的朋友可進一步研究 qTranslate 的源代碼。

函數 qtrans_use

PHP 版：

1

<?php qtrans_use( $lang, $text ); ?>

<?php qtrans_use( $lang, $text ); ?>

JS 版：

1

qtrans_use( lang, text );

qtrans_use( lang, text );

功能：從原始合並後的數據中提取指定語言的數據。

例子：

PHP 版：

1
2

<?php echo qtrans_use( 'zh', 
    '<!--:zh-->這是中文內容<!--:--><!--:en-->This is English content<!--:-->' ); ?>

<?php echo qtrans_use( ‘zh’,
‘<!–:zh–>這是中文內容<!–:–><!–:en–>This is English content<!–:–>’ ); ?>

JS 版：

1
2

console.log( qtrans_use( 'zh', 
    '<!--:zh-->這是中文內容<!--:--><!--:en-->This is English content<!--:-->' ) );

console.log( qtrans_use( ‘zh’,
‘<!–:zh–>這是中文內容<!–:–><!–:en–>This is English content<!–:–>’ ) );

此處的輸出結果：

1

這是中文內容

這是中文內容

函數 qtrans_integrate

僅 JS 版：

1

qtrans_integrate( lang, lang_text, text );

qtrans_integrate( lang, lang_text, text );

功能：將指定語言的新內容更新到已合並的字符串中。

例子：

1
2

console.log( qtrans_integrate( 'zh', '新的中文內容', 
    '<!--:zh-->這是中文內容<!--:--><!--:en-->This is English content<!--:-->' ) );

console.log( qtrans_integrate( ‘zh’, ‘新的中文內容’,
‘<!–:zh–>這是中文內容<!–:–><!–:en–>This is English content<!–:–>’ ) );

此處的輸出結果：

1

<!--:zh-->新的中文內容<!--:--><!--:en-->This is English content<!--:-->

<!–:zh–>新的中文內容<!–:–><!–:en–>This is English content<!–:–>

函數 qtrans_getSortedLanguages

僅 PHP 版：

1

<?php qtrans_getSortedLanguages(); ?>

<?php qtrans_getSortedLanguages(); ?>

功能：獲取所有可用語言的字符串數組（經排序後的）。

例子：

1

<?php print_r( qtrans_getSortedLanguages() ); ?>

<?php print_r( qtrans_getSortedLanguages() ); ?>

此處的輸出結果：

1
2
3
4
5

Array
(
    [0] => zh
    [1] => en
)

Array
(
[0] => zh
[1] => en
)

函數 qtrans_generateLanguageSelectCode

僅 PHP 版：

1

<?php qtrans_generateLanguageSelectCode( $style, $id ); ?>

<?php qtrans_generateLanguageSelectCode( $style, $id ); ?>

功能：輸出前端語言選擇器 HTML 代碼。

參數：$style 為輸出樣式，$id 為輸出的無序列表 ul 的 ID 屬性值。其中 $style 可取值為：text（僅文字鏈接）、image（僅圖片鏈接）、dropdown（下拉列表）、both（圖文鏈接）。

函數 qtrans_switch_postbox

僅 JS 版：

1

qtrans_switch_postbox( parent, target, lang );

qtrans_switch_postbox( parent, target, lang );

功能：切換指定 Meta Box 的語言選擇，並附加同步數據到合並提交的輸入框表單域中。

參數：parent 為目標 Meta Box 的 ID 屬性值，target 為附加同步數據的輸入框表單域的 ID 屬性值，lang 為需要切換的語言標識符。

例子：將文章編輯頁面摘要框切換為中文（摘要框容器 ID 為 postexcerpt，摘要輸入框 ID 為 excerpt）

1

qtrans_switch_postbox( 'postexcerpt', 'excerpt', 'zh' );

qtrans_switch_postbox( ‘postexcerpt’, ‘excerpt’, ‘zh’ );

函數 qtrans_createTitlebarButton

僅 PHP 版：

1

<?php qtrans_createTitlebarButton( $parent, $language, $target, $id ); ?>

<?php qtrans_createTitlebarButton( $parent, $language, $target, $id ); ?>

功能：獲取後臺文章編輯頁面的 Meta Box 語言切換按鈕的 JS 處理代碼。

參數：$parent 為目標 Meta Box 的 ID 屬性值，$language 為需要添加按鈕的語言標識符，$target 為附加同步數據的輸入框表單域的ID 屬性值，$id 為待添加的語言切換按鈕的 ID 屬性值。

例子：對文章編輯頁面摘要框的多語言切換按鈕（摘要框容器 ID 為 postexcerpt，摘要輸入框 ID 為 excerpt）

1
2
3
4
5
6
7

<?php
    $el = qtrans_getSortedLanguages();
    foreach( $el as $language ) {
        echo qtrans_createTitlebarButton( 'postexcerpt', $language, 'excerpt', 'qtrans_switcher_postexcerpt_' . $language );
        echo qtrans_createTextArea      ( 'postexcerpt', $language, 'excerpt', 'qtrans_switcher_postexcerpt_' . $language );
    }
?>

<?php
$el = qtrans_getSortedLanguages();
foreach( $el as $language ) {
echo qtrans_createTitlebarButton( ‘postexcerpt’, $language, ‘excerpt’, ‘qtrans_switcher_postexcerpt_’ . $language );
echo qtrans_createTextArea ( ‘postexcerpt’, $language, ‘excerpt’, ‘qtrans_switcher_postexcerpt_’ . $language );
}
?>

此處的輸出結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// 循環：$el == 'zh'
 
// 函數 qtrans_createTitlebarButton 輸出：
jQuery('#postexcerpt .handlediv').after('<div class="qtranslate_lang_div" id="qtrans_switcher_postexcerpt_zh"><img alt="zh" title="中文" src="http://localhost/test/wordpress/wp-content/plugins/qtranslate/flags/cn.png" /></div>');
jQuery('#qtrans_switcher_postexcerpt_zh').click(function() {qtrans_switch_postbox('postexcerpt','excerpt','zh');});
 
// 函數 qtrans_createTextArea 輸出：
jQuery('#excerpt').after('<textarea name="qtrans_textarea_excerpt_zh" id="qtrans_textarea_excerpt_zh"></textarea>');
jQuery('#qtrans_textarea_excerpt_zh').attr('cols', jQuery('#excerpt').attr('cols'));
jQuery('#qtrans_textarea_excerpt_zh').attr('rows', jQuery('#excerpt').attr('rows'));
jQuery('#qtrans_textarea_excerpt_zh').attr('tabindex', jQuery('#excerpt').attr('tabindex'));
jQuery('#qtrans_textarea_excerpt_zh').blur(function() {qtrans_switch_postbox('postexcerpt','excerpt',false);});
jQuery('#qtrans_textarea_excerpt_zh').val(qtrans_use('zh',jQuery('#excerpt').val()));
 
// 循環：$el == 'en'
 
// 函數 qtrans_createTitlebarButton 輸出：
jQuery('#postexcerpt .handlediv').after('<div class="qtranslate_lang_div" id="qtrans_switcher_postexcerpt_en"><img alt="en" title="English" src="http://localhost/test/wordpress/wp-content/plugins/qtranslate/flags/gb.png" /></div>');
jQuery('#qtrans_switcher_postexcerpt_en').click(function() {qtrans_switch_postbox('postexcerpt','excerpt','en');});
 
// 函數 qtrans_createTextArea 輸出：
jQuery('#excerpt').after('<textarea name="qtrans_textarea_excerpt_en" id="qtrans_textarea_excerpt_en"></textarea>');
jQuery('#qtrans_textarea_excerpt_en').attr('cols', jQuery('#excerpt').attr('cols'));
jQuery('#qtrans_textarea_excerpt_en').attr('rows', jQuery('#excerpt').attr('rows'));
jQuery('#qtrans_textarea_excerpt_en').attr('tabindex', jQuery('#excerpt').attr('tabindex'));
jQuery('#qtrans_textarea_excerpt_en').blur(function() {qtrans_switch_postbox('postexcerpt','excerpt',false);});
jQuery('#qtrans_textarea_excerpt_en').val(qtrans_use('en',jQuery('#excerpt').val()));

// 循環：$el == ‘zh’
// 函數 qtrans_createTitlebarButton 輸出：
jQuery(‘#postexcerpt .handlediv’).after(‘<div class="qtranslate_lang_div" id="qtrans_switcher_postexcerpt_zh"><img alt="zh" title="中文" src="http://localhost/test/wordpress/wp-content/plugins/qtranslate/flags/cn.png" /></div>’);
jQuery(‘#qtrans_switcher_postexcerpt_zh’).click(function() {qtrans_switch_postbox(‘postexcerpt’,’excerpt’,’zh’);});
// 函數 qtrans_createTextArea 輸出：
jQuery(‘#excerpt’).after(‘<textarea name="qtrans_textarea_excerpt_zh" id="qtrans_textarea_excerpt_zh"></textarea>’);
jQuery(‘#qtrans_textarea_excerpt_zh’).attr(‘cols’, jQuery(‘#excerpt’).attr(‘cols’));
jQuery(‘#qtrans_textarea_excerpt_zh’).attr(‘rows’, jQuery(‘#excerpt’).attr(‘rows’));
jQuery(‘#qtrans_textarea_excerpt_zh’).attr(‘tabindex’, jQuery(‘#excerpt’).attr(‘tabindex’));
jQuery(‘#qtrans_textarea_excerpt_zh’).blur(function() {qtrans_switch_postbox(‘postexcerpt’,’excerpt’,false);});
jQuery(‘#qtrans_textarea_excerpt_zh’).val(qtrans_use(‘zh’,jQuery(‘#excerpt’).val()));
// 循環：$el == ‘en’
// 函數 qtrans_createTitlebarButton 輸出：
jQuery(‘#postexcerpt .handlediv’).after(‘<div class="qtranslate_lang_div" id="qtrans_switcher_postexcerpt_en"><img alt="en" title="English" src="http://localhost/test/wordpress/wp-content/plugins/qtranslate/flags/gb.png" /></div>’);
jQuery(‘#qtrans_switcher_postexcerpt_en’).click(function() {qtrans_switch_postbox(‘postexcerpt’,’excerpt’,’en’);});
// 函數 qtrans_createTextArea 輸出：
jQuery(‘#excerpt’).after(‘<textarea name="qtrans_textarea_excerpt_en" id="qtrans_textarea_excerpt_en"></textarea>’);
jQuery(‘#qtrans_textarea_excerpt_en’).attr(‘cols’, jQuery(‘#excerpt’).attr(‘cols’));
jQuery(‘#qtrans_textarea_excerpt_en’).attr(‘rows’, jQuery(‘#excerpt’).attr(‘rows’));
jQuery(‘#qtrans_textarea_excerpt_en’).attr(‘tabindex’, jQuery(‘#excerpt’).attr(‘tabindex’));
jQuery(‘#qtrans_textarea_excerpt_en’).blur(function() {qtrans_switch_postbox(‘postexcerpt’,’excerpt’,false);});
jQuery(‘#qtrans_textarea_excerpt_en’).val(qtrans_use(‘en’,jQuery(‘#excerpt’).val()));

以上內容，若有不足，歡迎大傢批評指正。

參考資料：http://www.ychong.com/wordpress-qtranslate-development-basic/

Related posts:

  1. WordPress多語言外掛程式：qTranslate （使用篇）
  2. 3 個 WordPress Feed訂閱統計外掛程式
  3. 10 個免費的 WordPress 備份外掛程式
  4. WordPress 驗證碼外掛程式：SI CAPTCHA Anti-Spam
  5. WordPress批量搜索和替換外掛程式：Search & Replace
  6. WordPress外鏈轉內鏈外掛程式：Simple URLs
  7. WordPress返回頂部外掛程式：wp-auto-top
  8. WordPress 前端站內信外掛程式 Front End PM

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *