This multilingual site is born around 3 years ago (WP 3.0). Since lot of improvements in WP Core and versions of xili-language plugin…
Example twentyten-xili is downloadable now in version 3.0 and uses recent technic (classes and more…). He is also compatible 3.5+. Technical infos are here on website showing twentythirteen-xili.
Here posts and how to are are left in place as learning.
So remember to read the date of the article and the versions !!
M.
This post to introduce a new series of posts to explain how with few modifications and the way of child theme of twentyten theme containing just modified files, it possible to create a multilingual website. Here, the child theme is named twentyten-xili and his parent is default shipped twentyten.
In functions.php file of child theme some functions where added to improve multilingual features delivered by xili-language plugin. The child style.css is very short and contains just the lines to format languages menu automatically added to header menu and for widget added in sidebar.
Next post : the child theme content… and the advantage of this approach.
This site is now powered with latest release – 2.5.0 – of xili-language. His new user interface facilitates the job of multilingual authors. See a presentation in the new xili-wiki.
New UI to edit post : language dashboard
Available in WP plugin’s repository (Other Versions)
Before, you need to use a special template tag to create a link to other posts in other languages or you need to be a php user to add a hook to the xili-language function of xili_language_list. Now by adding new type, you can change to it and the language list now link to home, category and single in other languages.
Nav Menu Updated
You must use to update the theme with version 1.3 of twentyten-xili.
If using xili-language settings, you update the set of automatic menu, the theme don’t display the flags under title when single post is shown because when now when clicking to flag in nav menu, the link go to post in another language.
Languages navigation before
From single to single with new settings
Webmasters with wp and php knowledges are invited to read the functions.php and multilingual-functions.php : inside some examples how to “hook” plugin’s functions.
In the previous episodes, we have seen the essential elements to build a multilingual website based on xili-language trilogy and a child theme of the default twentyten theme delivered by WP team.
Q: What are the modifications inside the files of the child against the parent ? Why ?
A:File by file for php developers with minimal knowledge in WP architecture !
<h1 class="page-title"><?php printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1> <?php $category_description = category_description(); if ( ! empty( $category_description ) ) echo '<div class="archive-meta">' . $category_description . '</div>'; |
twentyten-xili
<h1 class="page-title"><?php printf( __( 'Category: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1> <?php $category_description = trim(strip_tags(category_description())); if ( ! empty( $category_description ) ) echo '<div class="archive-meta"><p>' . __($category_description,'twentyten') . '</p></div>'; |
<div class="entry-meta"> <?php xiliml_the_other_posts($post->ID,"Read this post in"); ?> </div><!-- .entry-meta --> |
and add a class for rtl languages :
post_class(single_lang_dir($post->ID)) |
(call a function added in functions.php)
Q: In WPLANG, some languages are not with 5 chars but with 2 chars like in japanese install kit, how to ?
A: Before version 1.8.8, it was necessary to change wp-config.php like japanese and set WPLANG to ISO : from ja to ja_JA and rename the ja.mo to ja_JA.mo inside languages sub-folder of current theme. Now with 1.8.8, the trilogy is updated, it is not necessary. So very easy for a japanese to transform his site in a multilingual site by adding other language files as here for test.
japanese welcome example
Q: What about xili-language and texts inside plugins ?
A: With innumerable crowd of plugins (and widgets), it is perhaps possible to define
If a widget is well designed, his title is translatable.
For labels or terms, if localizable, xili-language is able (if checked) to switch live the domain of the plugin to the domain of the theme (only in user side – not admin)… So just need to add term (and translation) via xili-dictionary to .po and .mo…
Q: What about WP 3.1 next release now in beta testing ?
A: In localhost here, all the tests done with WP 3.1beta (mono and multisite mode) show the compatibility with multilingual xili-language trilogy plugins.
Q: What about multisite or WP 3.x network mode ?
A: As implemented here, xili-language is compatible with multisite mode. For support and services, order a quotation.
Q: What about Quick Edit for language in posts list ?
A: Yes, the hooks were found for little source add on… available since 1.8.9 soon !!!
quick-edit: pop-up to choose language in posts list
Now very easy to modify a posts list in dashboard !
Following the previous episodes, now, while navigating in the website, most of the elements in theme change of language according language of the single post or the sub-selection of language if language widget is added in sidebar.
Before to go, a little recall: here the purpose is about default twentyten theme and a child named twentyten-xili. It is easy to transpose in the context of another well-design theme with localization / internationalization features (no items hardcoded, gettext function called).
The results depend of the quality of how they ared coded. If they are coded like extends of class Widget, no problem for the title :
When you create, don’t forget two things :
1) create the title in english (like root language of twentyten theme and WP),
2) add the title and his translations in .mo file via xili-dictionary (or via poEdit and .po).
The content totally depends of the purpose of the widget. If it uses labels, hope that gettext functions are used. Good, but currently, if so, the translation domain for the visitor’s side is the domain of the plugin linked to the admin’s side as currently in localizable website…
By checking line in fieldset – Translation domains settings – in xili-language >= version 1.8.7, the plugin changes that for visitor’s side and search translations inside terms defined in .mo of theme. So you must add target terms (and translation) with xili-dictionary…
xili-language includes three widgets ( List of languages, List of recent posts, Recent Comments list).
List of languages displays list of languages in sidebar.
In the exemple below, using some features delivered in library joined in twentyten-xili child theme, it is possible to display the list only when a category is shown and display the list of the same category but in other languages.
Because xili-language is hookable and fully customizable, webmasters/developers can design behaviour adapted to website, theme and special needs of navigation.
Sometime, you will try to find how to translate a displayed “Protected”. But the result remain unchanged. It is because WP or a plugin use a formatted print where a var in include… In the example below (extract of .po file), %s is the title of a post… So don’t forget to include at the right place the %s in the target language. (When adding a term for translation, a button “Write original text” helps you to translate keeping special formatting chars.)
msgid "Private: %s" msgstr "%s (accès privé)" msgid "Protected: %s" msgstr "%s (protégé)" |
These translations work in WP php code like here :
$protected_title_format = apply_filters('protected_title_format', __('Protected: %s')); |
In the style.css file displayed here, some comments how to add your own flags for other languages not yet included…
@charset "UTF-8"; /** * Theme Name: Twentyten-xili Multilingual Child * Theme URI: http://dev.xiligroup.com/ * Description: Twentyten based but including features for multilingual context with xili-language plugin * Author: dev.xiligroup.com ms * Author URI: http://dev.xiligroup.com/ * Version: 0.9 * Tags: child theme, tabs, multilingual * Template: twentyten */ @import url('../twentyten/style.css'); /* the most important line of the style.css of a child from his parent twentyten */ /*** below : modification to add style for language list widget and language list automatically added in header menu ***/ /* some few modifications for xili-language list */ ul.xililanguagelist {list-style: none !important ; margin-left:0 !important ;} /* example in header menu if filter xiliml_infunc_language_list is on - complete the list for the other languages used in the website */ ul.menu li.lang-fr_fr a {background: transparent url('images/flags/fr_fr.png') no-repeat center 13px;} ul.menu li.lang-en_us a {background: transparent url('images/flags/en_us.png') no-repeat center 13px;} ul.menu li.lang-de_de a {background: transparent url('images/flags/de_de.png') no-repeat center 13px;} ul.menu li.lang-es_es a {background: transparent url('images/flags/es_es.png') no-repeat center 13px;} li.lang-fr_fr:hover > a {background: #333 url('images/flags/fr_fr.png') no-repeat center 13px !important;} li.lang-en_us:hover > a {background: #333 url('images/flags/en_us.png') no-repeat center 13px !important;} li.lang-de_de:hover > a {background: #333 url('images/flags/de_de.png') no-repeat center 13px !important;} li.lang-es_es:hover > a {background: #333 url('images/flags/es_es.png') no-repeat center 13px !important;} ul.menu li.lang-fr_fr, ul.menu li.lang-en_us, ul.menu li.lang-de_de, ul.menu li.lang-es_es {text-indent:-9999px; width:18px;} /** © dev.xiligroup.com 2010-1-20 **/ |
To add a language, add the flag in images/flags/ subfolder of the theme containing style.css. In style.css, duplicate one line in first group, change name -es_es by -it_it if italian is new target language. Again in second group and add ,ul.menu li.lang-it_it in last line before “{“.
The first group of lines shows the flag, the second change background to grey when mouse is hover and the long line “erase” the text by putting it outside visible screen.
Next step : FAQ
