WordPress多語(yǔ)言插件：qTranslate （開(kāi)發(fā)篇）

關(guān)于 qTranslate 的基本使用，請(qǐng)查看 WordPress多語(yǔ)言插件：qTranslate （使用篇） ，下面主要分享 qTranslate 部分底層功能，方便讀者對(duì) WordPress 結(jié)合 qTranslate 插件進(jìn)行二次開(kāi)發(fā)，以免去在開(kāi)發(fā)過(guò)程中不必要的麻煩。

qTranslate 的工作原理

qTranslate 通過(guò) JS 和 WordPress 的 Hooks 機(jī)制，即時(shí)實(shí)現(xiàn)多語(yǔ)言功能，對(duì)數(shù)據(jù)庫(kù)以及 WordPress 源碼沒(méi)有任何修改。

后臺(tái)中，qTranslate 通過(guò) JS 實(shí)時(shí)處理文章編輯、頁(yè)面編輯、分類添加/編輯等頁(yè)面的表單（標(biāo)題、正文等），將各個(gè)輸入框按不同語(yǔ)言分離，并在提交表單時(shí)實(shí)時(shí)合并各個(gè)語(yǔ)言所填寫(xiě)的內(nèi)容，進(jìn)而提交到服務(wù)器并寫(xiě)入數(shù)據(jù)庫(kù)。各個(gè)數(shù)據(jù)項(xiàng)合并存儲(chǔ)格式如下：

<!--:zh-->這是中文內(nèi)容<!--:--><!--:en-->This is English content<!--:-->

前臺(tái)中，qTranslate 通過(guò) WordPress 的 Hooks 機(jī)制（action 和 filter），在模板將數(shù)據(jù)輸出（通常指通過(guò) the_title()、the_content()等 WordPress 模板函數(shù)）之前，對(duì)數(shù)據(jù)進(jìn)行處理。

qTranslate 全局變量 $q_config

通過(guò)實(shí)時(shí)輸出數(shù)組 $q_config 可以很清晰地看到這個(gè)數(shù)組的各個(gè)分支的數(shù)據(jù)，及其大概作用。

其中在常規(guī)開(kāi)發(fā)中可能用到的變量有：

// （數(shù)組）后臺(tái)設(shè)置的可用的語(yǔ)言
$q_config['enabled_languages'];
 
// 當(dāng)前后臺(tái)設(shè)置的默認(rèn)語(yǔ)言
$q_config['default_language'];
 
// 當(dāng)前被顯示的語(yǔ)言（當(dāng)前被選擇的語(yǔ)言）
$q_config['language'];
 
// 偵測(cè)到瀏覽器的語(yǔ)言
$q_config['detect_browser_language'];
 
// qTranslate 各 JS 函數(shù)對(duì)應(yīng)的 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 函數(shù)

qTranslate 自帶了眾多函數(shù)（PHP 和 JS，有些是 PHP 與 JS 通用的），因其需要充分考慮在前端體驗(yàn)上的優(yōu)化，大多數(shù)函數(shù)的定制性很高，在我們的開(kāi)發(fā)中不一定用得上。因此在此筆者僅列舉必須用到的幾個(gè)基礎(chǔ)函數(shù)，有興趣的朋友可進(jìn)一步研究 qTranslate 的源代碼。

函數(shù) qtrans_use

PHP 版：

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

JS 版：

qtrans_use( lang, text );

功能：從原始合并后的數(shù)據(jù)中提取指定語(yǔ)言的數(shù)據(jù)。

例子：

PHP 版：

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

JS 版：

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

此處的輸出結(jié)果：

這是中文內(nèi)容

函數(shù) qtrans_integrate

僅 JS 版：

qtrans_integrate( lang, lang_text, text );

功能：將指定語(yǔ)言的新內(nèi)容更新到已合并的字符串中。

例子：

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

此處的輸出結(jié)果：

<!--:zh-->新的中文內(nèi)容<!--:--><!--:en-->This is English content<!--:-->

函數(shù) qtrans_getSortedLanguages

僅 PHP 版：

<?php qtrans_getSortedLanguages(); ?>

功能：獲取所有可用語(yǔ)言的字符串?dāng)?shù)組（經(jīng)排序后的）。

例子：

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

此處的輸出結(jié)果：

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

函數(shù) qtrans_generateLanguageSelectCode

僅 PHP 版：

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

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

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

函數(shù) qtrans_switch_postbox

僅 JS 版：

qtrans_switch_postbox( parent, target, lang );

功能：切換指定 Meta Box 的語(yǔ)言選擇，并附加同步數(shù)據(jù)到合并提交的輸入框表單域中。

參數(shù)：parent 為目標(biāo) Meta Box 的 ID 屬性值，target 為附加同步數(shù)據(jù)的輸入框表單域的 ID 屬性值，lang 為需要切換的語(yǔ)言標(biāo)識(shí)符。

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

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

函數(shù) qtrans_createTitlebarButton

僅 PHP 版：

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

功能：獲取后臺(tái)文章編輯頁(yè)面的 Meta Box 語(yǔ)言切換按鈕的 JS 處理代碼。

參數(shù)：$parent 為目標(biāo) Meta Box 的 ID 屬性值，$language 為需要添加按鈕的語(yǔ)言標(biāo)識(shí)符，$target 為附加同步數(shù)據(jù)的輸入框表單域的ID 屬性值，$id 為待添加的語(yǔ)言切換按鈕的 ID 屬性值。

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

<?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 );
    }
?>

此處的輸出結(jié)果：

// 循環(huán)：$el == 'zh'
 
// 函數(shù) 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');});
 
// 函數(shù) 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()));
 
// 循環(huán)：$el == 'en'
 
// 函數(shù) 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');});
 
// 函數(shù) 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()));

以上內(nèi)容，若有不足，歡迎大家批評(píng)指正。

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