The ability to maintain a weblog in two (or more) languages is an often requested feature, especially by people like me who just can't make up their mind between French and English :)
I've come up with a very easy way to implement this in an existing website, as you can see by yourself if you click on the tiny flags. I've also added cookie support, so you just need to chose a language once. This may not be *the* perfect solution, it's just one way, and a very simple one to add in an existing site.
The trick : you have two div's, one with attribute "lang=fr", one with "lang=en". A small javascript hides every divs with a particular "lang" and shows the others.
The javascript part
First, put the following code in your index.php, or in an external javascript file :
-
function createCookie(name,value,days) {
-
if (days) {
-
var date = new Date();
-
date.setTime(date.getTime()+(days*24*60*60*1000));
-
var expires = "; expires="+date.toGMTString();
-
}
-
else expires = "";
-
document.cookie = name+"="+value+expires+"; path=/";
-
}
-
-
function readCookie(name) {
-
var nameEQ = name + "=";
-
var ca = document.cookie.split(';');
-
for(var i=0;i <ca.length;i++) {
-
var c = ca[i];
-
while (c.charAt(0)==' ') c = c.substring(1,c.length);
-
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
-
}
-
return null;
-
}
-
-
function language(lang_on, lang_off) {
-
createCookie("langue_on",lang_on,365);
-
createCookie("langue_off",lang_off,365);
-
for (var i=0; i<document.getElementsByTagName("div").length; i++ ) {
-
if (document.getElementsByTagName("div")[i].lang == lang_on) {
-
document.getElementsByTagName("div")[i].style.display="block";
-
}
-
if (document.getElementsByTagName("div")[i].lang == lang_off) {
-
document.getElementsByTagName("div")[i].style.display="none";
-
}
-
}
-
}
-
-
function startlanguage() {
-
var notdefined;
-
var lang_on = readCookie("langue_on");
-
var lang_off = readCookie("langue_off");
-
if (lang_on == notdefined) {lang_on = "fr";}
-
if (lang_off == notdefined) {lang_off = "en";}
-
language(lang_on,lang_off);
-
}
-
-
window.onload = function () {startlanguage();}
A few explanations
The first two functions, createCookie() and readCookie(), store cookies and read cookies so the user can set for once a preferred language. If you are already using a rather lengthy javascript file, chances are you already have cookie functions. In this case, no need to duplicate things, just modify the lines above to use your functions.
The next function, language(), is the core of the thingie. First, when called, it creates two cookies : one for language to display, one for language to hide. Then, it "loops" through all div elements of the pages, and toggle their display according to the parameters.
(You're wondering, Why not a simpler function with just one parameter ? Well, first, I suck at javascript, and second, so it is simpler to extend the script to support three or more languages)
Next is startlanguage() : thanks to the last line, this function is called when the page loads, and its purpose is to set the language preferences : either there is cookies, or a default value is set (here, default is "display french and hide english")
Embed in your site
Add two links with the following code :
-
<a href="javascript:language('fr','en')" title="Version Francaise">En Français</a>
-
<a href="javascript:language('en','fr')" title="English Version">In English</a>
And, for example, two divs :
-
<div lang="en">Hello World !</div>
-
<div lang="fr">Salut Poupoule !</div>
And that's it.
Use this in WordPress
To use this in WordPress, you simply have to write your posts with the div's. If XHTML validation is an important matter to you, you'll have to write a bit of HTML tags so that when WP automatically adds and so on, you still validate. A validating example is following :
-
<div lang="en"><p>Include an opening "p" tag in the first line from first paragraph.
-
-
Another line goes here. And as paragraphs as you want.
-
-
And don't forget to close the "p" it at the end.</p></div>
-
<div lang="fr"><p>A la premiere ligne du premier paragraphe, incluez un tag "p".
-
-
Autant de lignes et de paragraphes que vous le souhaitez, bien sûr.
-
-
Et avant de terminer la div, fermez le "p" que vous avez ouvert.</p></div>
The only real difficulty is that long posts become pretty huge when you type them twice to translate :)
Improvements ?
Instead of a simple default value for lang_on and lang_off, I think I'll add a language guess function. It could be guessed from referrer IP, or user's remote address, or maybe with browser's information, I still have to think a bit about this :)
You could also add loops to the main javascript function, so it will not toggle only div elements, but anything you'd need : p, img, span. Actually, working with span elements could be much more simple than with div's.
Pages: « 1 [2] Show All
wrote, on 25/Aug/06 at 6:41 pm # :
Hi,
I didn't understand where to put "Embed in your site" section code... Can somebody tell me where I should put that portion of code?
Thanks
pingback on 25/Jan/07 at 6:52 am # :
[...] Rozwiązanie znalazłem bardzo szybko, a jego prostota była dla mnie na tyle wystarczająca by nie szukać dalej. [...]
pingback on 05/Nov/07 at 11:08 am # :
[...] A Solution for a Bilingual WordpressThe ability to maintain a weblog in two (or more) languages is an often requested feature, especially by people like me who just can’t make up their mind between French and English [...]
wrote, on 18/Dec/07 at 3:03 pm # :
"Instead of a simple default value for lang_on and lang_off, I think I'll add a language guess function. It could be guessed from referrer IP, or user's remote address, or maybe with browser's information, I still have to think a bit about this :)"
I found this : http://erik.range-it.de/wordpress/plugins/getbrowserlanguage/
thought, on 09/Feb/08 at 8:20 am # :
Genius! A lot of people having trouble with multi-lang-posting around the web and waiting for development of complex plugins. This simple solution worked sweet for me.