WordPress 插件 qTranslate 开发经验总结与核心功能详解

WordPress 插件 qTranslate 开发经验总结与核心功能详解

qTranslate 是由华人秦谦开发的一款 WordPress 多语言插件。其主要功能是通过处理 WordPress 前台/后台的过程,实现多语言数据分开编辑、共同存储于数据库中,达到真正的多语言 WordPress,并可随意切换。在各种 WordPress 多语言插件中,qTranslate 是非常棒的一款,尤其适合大家做深层次的二次开发。

本文总结笔者在此前折腾 qTranslate 插件的经验,并详解 qTranslate 部分底层功能,方便读者对 WordPress 结合 qTranslate 插件进行二次开发,以免去在开发过程中不必要的麻烦。

qTranslate 安装与注意事项

因为功能上的高度融合,出于兼容性方面考虑,当 WordPress 被升级之后,qTranslate 将被自动禁用,与此同时插件作者也将迅速发布与当前最新版本 WordPress 相兼容的 qTranslate 版本。

因为 qTranslate 是将多种语言的数据通过一定的格式经合并后作为一条字符串写入数据库的,所以当 qTranslate 插件被禁用或删除后,读者将可能看到非常不满意的现象:前台中,各语言的内容同时被显示出来;后台文章编辑、文章列表、分类列表中,诸如“<!--:zh-->”此类代码被裸露了出来。因此,在不确定未来是否会弃用 qTranslate 插件的情况下,笔者也建议谨慎选择。

qTranslate 的工作原理

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

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

<!--:zh-->这是中文内容<!--:--><!--:en-->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 版:

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

JS 版:

qtrans_use( lang, text );

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

例子:

PHP 版:

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

JS 版:

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

此处的输出结果:

这是中文内容

函数 qtrans_integrate

仅 JS 版:

qtrans_integrate( lang, lang_text, text );

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

例子:

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

此处的输出结果:

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

函数 qtrans_getSortedLanguages

仅 PHP 版:

<?php qtrans_getSortedLanguages(); ?>

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

例子:

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

此处的输出结果:

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

函数 qtrans_generateLanguageSelectCode

仅 PHP 版:

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

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

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

函数 qtrans_switch_postbox

仅 JS 版:

qtrans_switch_postbox( parent, target, lang );

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

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

例子:将文章编辑页面摘要框切换为中文(摘要框容器 IDpostexcerpt,摘要输入框 IDexcerpt

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

函数 qtrans_createTitlebarButton

仅 PHP 版:

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

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

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

例子:对文章编辑页面摘要框的多语言切换按钮(摘要框容器 IDpostexcerpt,摘要输入框 IDexcerpt

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

此处的输出结果:

    // 循环:$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()));

转载自:https://chon.io/blog/wordpress-qtranslate-development-basic/

Readers Comments (12)

  1. Hi there, I log on to your blog on a regular basis. Your writing style is witty, keep up the good
    work!

    回复
  2. Chat Rooms are proving to be a fantastic mode of aid for
    many individuals.

    回复
  3. I am regular reader, how are you everybody?
    This piece of writing posted at this web site
    is truly fastidious.

    回复
  4. If you desire to increase your knowledge only keep visiting this website and be updated with the newest information posted here.

    回复
  5. great issues altogether, you just gained a brand new reader.
    What may you suggest about your submit that you simply
    made some days ago? Any positive?

    回复
  6. Because the admin of this site is working, no doubt very shortly it
    will be well-known, due to its quality contents.

    回复
  7. I am really grateful to the owner of this website who has shared this great paragraph at at
    this place.

    回复
  8. Simply want to say your article is as amazing.
    The clarity in your post is simply nice and i could assume you are an expert on this subject.

    Fine with your permission let me to grab your
    feed to keep updated with forthcoming post. Thanks a million and
    please continue the enjoyable work.

    回复
  9. Create synergy of positive minded people.

    回复
  10. With havin so much content and articles do you ever
    run into any issues of plagorism or copyright infringement?
    My blog has a lot of unique content I’ve either written myself or
    outsourced but it appears a lot of it is popping it
    up all over the web without my agreement. Do you know any
    ways to help reduce content from being stolen? I’d really appreciate it.

    回复
  11. Very descriptive post, I liked that a lot.
    Will there be a part 2?

    回复
  12. Acompáñala mientras elige ropa genial y actualiza su cuenta de red social en este
    juego para chicas.

    回复

Leave a comment

Your email address will not be published.


*


此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

calf-blog-top