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/

發佈留言