搜索
热搜： Python PHP 编程 vue dedecms
首页> CMS教程 > wordpress教程 > 正文

WordPress多语言插件：qTranslate （开发篇）

发布时间：2023-05-23 18:25:40 来源：网络
.
美丽的小花园有许多榕树，一簇簇树叶伸到路面上，树叶真绿的可爱。榕树正在茂盛的时期，好象把它全部生命力都展示给我们看。那么多的树叶，一簇堆在另一簇上面，不留一点缝隙，我仿佛也成了一片树叶。那翠绿的颜色明亮地照耀着我的眼睛，似乎每片叶子上都颤动着一个新的生命。这美丽的北国树啊。

关于 qTranslate 的基本使用，请查看 WordPress多语言插件：qTranslate （使用篇） ，下面主要分享 qTranslate 部分底层功能，方便读者对 WordPress 结合 qTranslate 插件进行二次开发，以免去在开发过程中不必要的麻烦。

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/

到此这篇关于WordPress多语言插件：qTranslate （开发篇）就介绍到这了。最完善的东西最不容易受到外来影响的变动。举例来说，身体最强健的人不容易受饮食或劳作的影响，最茁壮的草木也不容易受风日的影响。更多相关WordPress多语言插件：qTranslate （开发篇）内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:
标签： 多语言 WordPress
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图