{"id":39,"date":"2004-05-11T20:49:16","date_gmt":"2004-05-11T18:49:16","guid":{"rendered":"http:\/\/frenchfragfactory.net\/ozh\/archives\/2004\/05\/11\/a-solution-for-a-bilingual-wordpress\/"},"modified":"2007-04-20T19:42:26","modified_gmt":"2007-04-20T17:42:26","slug":"a-solution-for-a-bilingual-wordpress","status":"publish","type":"post","link":"https:\/\/planetozh.com\/blog\/2004\/05\/a-solution-for-a-bilingual-wordpress\/","title":{"rendered":"A Solution for a Bilingual WordPress"},"content":{"rendered":"

\"BilingualThe 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 :)
\nI'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.<\/p>\n


\nThe trick : you have two div's<\/strong>, one with attribute "lang=fr"<\/strong>, one with "lang=en"<\/strong>. A small javascript hides every divs with a particular "lang" and shows the others.<\/p>\n

The javascript part<\/h2>\n

First, put the following code in your index.php, or in an external javascript file :<\/p>\n

function createCookie(name,value,days) {\r\n  if (days) {\r\n    var date = new Date();\r\n    date.setTime(date.getTime()+(days*24*60*60*1000));\r\n    var expires = "; expires="+date.toGMTString();\r\n  }\r\n  else expires = "";\r\n  document.cookie = name+"="+value+expires+"; path=\/";\r\n}\r\n\r\nfunction readCookie(name) {\r\n  var nameEQ = name + "=";\r\n  var ca = document.cookie.split(';');\r\n  for(var i=0;i < ca.length;i++) {\r\n    var c = ca[i];\r\n    while (c.charAt(0)==' ') c = c.substring(1,c.length);\r\n    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);\r\n  }\r\n  return null;\r\n}\r\n\r\nfunction language(lang_on, lang_off) {\r\n  createCookie("langue_on",lang_on,365);\r\n  createCookie("langue_off",lang_off,365);\r\n    for (var i=0; i<document.getElementsByTagName("div").length; i++ ) {\r\n      if (document.getElementsByTagName("div")[i].lang == lang_on) {\r\n        document.getElementsByTagName("div")[i].style.display="block";\r\n      }\r\n      if (document.getElementsByTagName("div")[i].lang == lang_off) {\r\n        document.getElementsByTagName("div")[i].style.display="none";\r\n      }\r\n    }\r\n}\r\n\r\nfunction startlanguage() {\r\n  var notdefined;\r\n  var lang_on = readCookie("langue_on");\r\n  var lang_off = readCookie("langue_off");\r\n  if (lang_on == notdefined) {lang_on = "fr";}\r\n  if (lang_off == notdefined) {lang_off = "en";}\r\n  language(lang_on,lang_off);\r\n}\r\n\r\nwindow.onload = function () {startlanguage();}<\/code><\/pre><\/div>\n
A few explanations<\/h2>\n
The first two functions, createCookie()<\/strong> and readCookie()<\/strong>, 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.<\/p>\n
The next function, language()<\/strong>, 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<\/em> elements of the pages, and toggle their display according to the parameters.
\n(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)<\/p>\n
Next is startlanguage()<\/strong> : 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")<\/p>\n
Embed in your site<\/h2>\n
Add two links with the following code :<\/p>\n
<a href="javascript:language('fr','en')" title="Version Francaise">En Fran&ccedil;ais<\/a>\r\n<a href="javascript:language('en','fr')" title="English Version">In English<\/a><\/code><\/pre><\/div>\n
And, for example, two divs :<\/p>\n
<div lang="en">Hello World !<\/div>\r\n<div lang="fr">Salut Poupoule !<\/div><\/code><\/pre><\/div>\n
And that's it.<\/p>\n
Use this in WordPress<\/h2>\n
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 <\/p>\n
<\/em> and so on, you still validate. A validating example is following :<\/p>\n
<div lang="en"><p>Include an opening "p" tag in the first line from first paragraph. \r\n\r\nAnother line goes here. And as paragraphs as you want.\r\n\r\nAnd don't forget to close the "p" it at the end.<\/p><\/div>\r\n<div lang="fr"><p>A la premiere ligne du premier paragraphe, incluez un tag "p".\r\n\r\nAutant de lignes et de paragraphes que vous le souhaitez, bien s&ucirc;r.\r\n\r\nEt avant de terminer la div, fermez le "p" que vous avez ouvert.<\/p><\/div><\/code><\/pre><\/div>\n
The only real difficulty is that long posts become pretty huge when you type them twice to translate :)<\/p>\n
Improvements ?<\/h2>\n
Instead of a simple default value for lang_on <\/em>and lang_off<\/em>, 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 :)<\/p>\n
You could also add loops to the main javascript function, so it will not toggle only div<\/em> elements, but anything you'd need : p, img, span. Actually, working with span <\/em>elements could be much more simple than with div's. <\/p>\n","protected":false},"excerpt":{"rendered":"
A simple way to have a bilingual blog<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[2,7,10,85,11,245],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","tag-code","tag-javascript","tag-php","tag-plugins","tag-web","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":0,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"wp:attachment":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}