当前位置: 主页 > 基础学习 > 正文

WordPress多语言插件:qTranslate (精选开发篇)

qTranslate 的工作原理qTranslate 全局变量 $q_configqTranslate 函数函数 qtrans_use函数 qtrans_integrate函数 qtrans_getSortedLanguages函数 qtrans_switch_postbox函数 qtrans_createTitlebarButton

qTranslate 的工作原理

qTranslate 通过 JS 和 WordPress 的 Hooks 机制,即时实现多语言功能,对数据库以及 WordPress 源码没有任何修改。

后台中,qTranslate 通过 JS 实时处理文章编辑、页面编辑、分类添加/编辑等页面的表单(标题、正文等),将各个输入框按不同语言分离,并在提交表单时实时合并各个语言所填写的内容,进而提交到服务器并写入数据库。各个数据项合并存储格式如下:

这是中文内容This is English content

前台中,qTranslate 通过 WordPress 的 Hooks 机制(action 和 filter),在模板将数据输出(通常指通过 the_title()、the_content()等 WordPress 模板函数)之前,对数据进行处理。

qTranslate 全局变量 $q_config

通过实时输出数组 $q_config 可以很清晰地看到这个数组的各个分支的数据,及其大概作用。

其中在常规开发中可能用到的变量有:

// (数组)后台设置的可用的语言$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 版:

JS 版:

qtrans_use( lang, text );

功能:从原始合并后的数据中提取指定语言的数据。

例子:

PHP 版:

这是中文内容This is English content' ); ?>

JS 版:

console.log( qtrans_use( 'zh', '这是中文内容This is English content' ) );

此处的输出结果:

这是中文内容

函数 qtrans_integrate

仅 JS 版:

qtrans_integrate( lang, lang_text, text );

功能:将指定语言的新内容更新到已合并的字符串中。

例子:

console.log( qtrans_integrate( 'zh', '新的中文内容', '这是中文内容This is English content' ) );

此处的输出结果:

新的中文内容This is English content

函数 qtrans_getSortedLanguages

仅 PHP 版:

功能:获取所有可用语言的字符串数组(经排序后的)。

例子:

此处的输出结果:

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

函数 qtrans_generateLanguageSelectCode

仅 PHP 版:

功能:输出前端语言选择器 HTML 代码。

参数:$style 为输出样式,$id 为输出的无序列表 ul 的 ID 属性值。其中 $style 可取值为:text(仅文字链接)、image(仅图片链接)、dropdown(下拉列表)、both(图文链接)。

函数 qtrans_switch_postbox

仅 JS 版:

qtrans_switch_postbox( parent, target, lang );

功能:切换指定 Meta Box 的语言选择,并附加同步数据到合并提交的输入框表单域中。

参数:parent 为目标 Meta Box 的 ID 属性值,target 为附加同步数据的输入框表单域的 ID 属性值,lang 为需要切换的语言标识符。

例子:将文章编辑页面摘要框切换为中文(摘要框容器 ID 为 postexcerpt,摘要输入框 ID 为 excerpt)

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

函数 qtrans_createTitlebarButton

仅 PHP 版:

功能:获取后台文章编辑页面的 Meta Box 语言切换按钮的 JS 处理代码。

参数:$parent 为目标 Meta Box 的 ID 属性值,$language 为需要添加按钮的语言标识符,$target 为附加同步数据的输入框表单域的ID 属性值,$id 为待添加的语言切换按钮的 ID 属性值。

例子:对文章编辑页面摘要框的多语言切换按钮(摘要框容器 ID 为 postexcerpt,摘要输入框 ID 为 excerpt)

此处的输出结果:

// 循环:$el == 'zh' // 函数 qtrans_createTitlebarButton 输出:jQuery('#postexcerpt .handlediv').after('
zh
');jQuery('#qtrans_switcher_postexcerpt_zh').click(function() {qtrans_switch_postbox('postexcerpt','excerpt','zh');}); // 函数 qtrans_createTextArea 输出:jQuery('#excerpt').after('');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('
en
');jQuery('#qtrans_switcher_postexcerpt_en').click(function() {qtrans_switch_postbox('postexcerpt','excerpt','en');}); // 函数 qtrans_createTextArea 输出:jQuery('#excerpt').after('');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/