Meertalige website maken met standaard CMS Made Simple funct

[Rolf]

Andere aanpak, lees http://www.cmscanbesimple.org/blog/mult ... ade-simple

Hier wil ik laten zien hoe ik met standaard CMS Made Simple functies mijn meertalige website heb gemaakt.
Ik kan dit echt niet in 10 regels doen, ik zal proberen het zo duidelijk mogelijk te maken. Laat je niet afschrikken door de omvang van het artikel en de hoeveelheid code. Wanneer je het artikel goed bekijkt, dan zul je zien dat er slecht kleine wijzigingen nodig zijn om het werkend te maken. En je hebt zeker niet alle behandelde opties nodig voor een kleine meertalige website...

Naast wat te spelen met standaard CMSMS tags, moet je een UDT maken.
Deze tag leest de taal instelling van de, door de bezoeker gebruikte webbrowser. Deze waarde wordt in het sjabloon gebruikt met de parameter $lang. Afhankelijk van de taal instelling zal de bezoeker naar de homepage in zijn eigen taal worden doorverwezen, en zal de inhoud Error 404 sjabloon worden bepaald.

Enkele mogelijkheden:
- Pretty urls zoals http://www.buispost.eu/nl en http://www.buispost.eu/nl/contact
- Het openen van website op http://www.buispost.eu leidt de bezoeker naar de eigen taal homepage, afhankelijk van de browser taalinstelling
- Gebruikt verschillende sjablonen voor de talen, dus maakt geen gebruik van cookies
- Indien ingesteld, zullen interne links werken naar dezelfde pagina in een andere taal. Indien niet ingesteld zal deze naar de taal homepage gaan.
- Meertalige Breadcrumbs
- Error 404 pagina in browsertaal
- Formulieren in verschillende talen
- Zoek functie in verschillende talen

Oké, een paar tekortkomingen:
- Je kun een actieve parent niet apart stylen, als gevolg van de Internal Link naar de homepage. Ik gebruik deze hier om mooiere urls te krijgen. De custom-url optie in de komende 1.9 zal dit waarschijnlijk oplossen. Ik zal het artikel aanpassen na de vrijkomen van 1.9.
- Modules zoals News, CompanyDirectory, etc. ondersteunen de taalstap in de url helaas niet. Maar door het gebruik van verschillende detailpagina's wordt de lay-out wel in de juiste taal weergegeven.


1. Installeer pretty url

Met de toepassing van pretty url (mod_rewrite) op de website krijg je de mooiste resultaten. Tenminste dat is mijn mening...  ;)
Kijk hier hoe je pretty url moet instellen:
http://forum.cmsmadesimple.org/index.ph ... 912.0.html
Of doe een zoektochtje door het forum of in de wiki.

(Opm.: Als je vragen hebt over het installeren van pretty url, gebruik dan aub niet dit artikel... Het is een beetje off-topic)


2. Pagina structuur

1 default [standaard pagina]

2 Start [Belangrijk: stel pagina alias in de Opties tab in 'nl']
  2.1 Start [Interne Link naar 2 ^ ]
  2.2 Nederlands 1
  2.3 Nederlands 2

3 Accueil [Belangrijk: stel pagina alias in 'fr']
  3.1 Accueil [Interne Link naar 3 ^ ]
  3.2 Frans 1
  3.3 Frans 2

4 Anfang [Belangrijk: stel pagina alias in 'd']
  4.1 Anfang [Interne Link naar 4 ^ ]
  4.2 Duits 1
  4.3 Duits 2

5 Homepage [Belangrijk: stel pagina alias in 'e']
  5.1 Homepage [Interne Link naar 5 ^ ]
  5.2 Engels 1
  5.3 Engels 2

6 Error 404 [Errorpage 404]


3. Maak UDT get_browserlanguage

Open de juiste homepage op basis van de taalinstelling van de browser

UDT: get_browserlanguage

Code: Select all

$gCms = cmsms();

// Read browser language
$foo = $_SERVER['HTTP_ACCEPT_LANGUAGE'];

// Only need the first two characters
$lang = substr($foo,0,2); 

// Passing the parameter $lang to the template
$smarty = &$gCms->GetSmarty();
$smarty->assign('lang', $lang);

(Gebaseerd op RonnyK's UDT)


4. Roep UDT aan in de standaard index pagina

Open Pagina 1 - index
Zet de WYSIWYG editor uit in de Opties tab.

Plaats nu in het content veld:

Code: Select all

{get_browserlanguage}

{if $lang == 'nl'}
      {redirect_page page="nl"}
 {elseif $lang == 'fr'}
      {redirect_page page="fr"}
 {elseif $lang == 'de'}
      {redirect_page page="d"}
 {else}
      {redirect_page page="e"}
{/if}

5. Maak HTML Blokken met de land-vlaggen

Maak voor iedere taal een HTML Blok.
Deze blokken tonen de vlaggen op de frontend en maakt de linken naar de pagina alternatieven in de andere talen. Als het niet ingesteld is, ga je naar de taal homepage.
Upload je eigen afbeelding naar je eigen map, en wijzig het pad in de onderstaande code.

Als jezelf geen afbeeldingen hebt... Kijk eens hier: http://en.wikipedia.org/wiki/List_of_countries

HTML Blok, genaamd: flag-nl

Code: Select all

{if $dutch_version}
      {cms_selflink page=$dutch_version image="images/layout/flag-nl.png" title="Nederlandstalige versie" alt="Nederlandstalige versie" imageonly=1}
   {else}
      {cms_selflink page="nl" image="images/layout/flag-nl.png" title="Nederlandstalige versie" alt="Nederlandstalige versie" imageonly=1}
{/if}

HTML Blok, genaamd: flag-fr

Code: Select all

{if $french_version}
      {cms_selflink page=$french_version image="images/layout/flag-fr.png" title="Version Française" alt="Version Française" imageonly=1}
   {else}
      {cms_selflink page="fr" image="images/layout/flag-fr.png" title="Version Française" alt="Version Française" imageonly=1}
{/if}

HTML Blok, genaamd: flag-d

Code: Select all

{if $german_version}
      {cms_selflink page=$german_version image="images/layout/flag-de.png" title="Deutschsprachige Version" alt="Deutschsprachige Version" imageonly=1}
   {else}
      {cms_selflink page="d" image="images/layout/flag-de.png" title="Deutschsprachige Version" alt="Deutschsprachige Version" imageonly=1}
{/if}

HTML Blok, genaamd: flag-e

Code: Select all

{if $english_version}
      {cms_selflink page=$english_version image="images/layout/flag-uk.png" title="English version" alt="English version" imageonly=1}
    {else}
      {cms_selflink page="e" image="images/layout/flag-uk.png" title="English version" alt="English version" imageonly=1}
{/if}

6. Maak een HTML-Blok footer voor iedere taal

Je kunt voor iedere taal een aparte footer maken.
Naast kleine wijzigingen in de tekst, kun je ook verschillende links naar pagina's plaatsen. Zoals naar de juiste homepage, sitemap, copyright tekst, enz.

Je moet de blokken de volgende namen geven:
- footer-nl
- footer-fr
- footer-d
- footer-e


7. Maak HTML sjablonen

Waar je mee begint is eerst een werkend sjabloon te maken voor één taal!!
Als deze klaar is, dan kun je hem kopiëren voor iedere taal.

In de volgende voorbeeld sjablonen vind je verschillende opties voor een basis layout.
In rood zie je de kleine wijzigingen voor iedere taal.

De code moet jezelf toevoegen aan je eigen sjabloon, en ook zelf nog even stylen.


Nederlandstalig sjabloon

Code: Select all

{process_pagedata}

{sitename} - {title}
{metadata}
{cms_stylesheet}

{menu template="accessible_simple_navigation.tpl" start_element='2.1' show_root_siblings="1" number_of_levels='3'}

   {content block="german_version" assign="german_version" wysiwyg="false" oneline="true" label="Page alias German Alternative"}
   {content block="english_version" assign="english_version" wysiwyg="false" oneline="true" label="Page alias English Alternative"}
   {content block="french_version" assign="french_version" wysiwyg="false" oneline="true" label="Page alias French Alternative"}

   {global_content name='flag-d'}
   {global_content name='flag-e'}
   {global_content name='flag-fr'}
  
        {breadcrumbs starttext='U bent hier' root='nl' delimiter='>'}
   
  {title}
  {content}

{global_content name='footer-nl'}

Franstalig sjabloon

Code: Select all

{process_pagedata}

{sitename} - {title}
{metadata}
{cms_stylesheet}

  {menu template="accessible_simple_navigation.tpl" start_element='3.1' show_root_siblings="1" number_of_levels='3'}

   {content block="dutch_version" assign="dutch_version" wysiwyg="false" oneline="true" label="Page alias Dutch Alternative"}
   {content block="german_version" assign="german_version" wysiwyg="false" oneline="true" label="Page alias German Alternative"}
   {content block="english_version" assign="english_version" wysiwyg="false" oneline="true" label="Page alias English Alternative"}

   {global_content name='flag-nl'}
   {global_content name='flag-d'}
   {global_content name='flag-e'}
   
        {breadcrumbs starttext='Vous êtes ici' root='fr' delimiter='>'}
   
  {title}
  {content}

{global_content name='footer-fr'}

Duitstalig sjabloon

Code: Select all

{process_pagedata}

{sitename} - {title}
{metadata}
{cms_stylesheet}

  {menu template="accessible_simple_navigation.tpl" start_element='4.1' show_root_siblings="1" number_of_levels='3'}

   {content block="dutch_version" assign="dutch_version" wysiwyg="false" oneline="true" label="Page alias Dutch Alternative"}
   {content block="english_version" assign="english_version" wysiwyg="false" oneline="true" label="Page alias English Alternative"}
   {content block="french_version" assign="french_version" wysiwyg="false" oneline="true" label="Page alias French Alternative"}

   {global_content name='flag-nl'}
   {global_content name='flag-e'}
   {global_content name='flag-fr'}
  
        {breadcrumbs starttext='Sie sind hier' root='d' delimiter='>'}

  {title}
  {content}

{global_content name='footer-d'}

Engelstalig sjabloon

Code: Select all

{process_pagedata}

{sitename} - {title}
{metadata}
{cms_stylesheet}

  {menu template="accessible_simple_navigation.tpl" start_element='5.1' show_root_siblings="1" number_of_levels='3'}

   {content block="dutch_version" assign="dutch_version" wysiwyg="false" oneline="true" label="Page alias Dutch Alternative"}
   {content block="german_version" assign="german_version" wysiwyg="false" oneline="true" label="Page alias German Alternative"}
   {content block="french_version" assign="french_version" wysiwyg="false" oneline="true" label="Page alias French Alternative"}

   {global_content name='flag-nl'}
   {global_content name='flag-d'}
   {global_content name='flag-fr'}
   
        {breadcrumbs starttext='You are here' root='e' delimiter='>'}

  {title}
  {content}

{global_content name='footer-e'}

Error 404 sjabloon

Code: Select all

{process_pagedata}

{sitename} - {title}
{metadata}
{cms_stylesheet}

{get_browserlanguage}

{if $lang == "nl"}
      {menu template='accessible_simple_navigation.tpl' start_element='2.1' show_root_siblings="1" number_of_levels='3'}
   {elseif $lang == "fr"}
      {menu template='accessible_simple_navigation.tpl' start_element='3.1' show_root_siblings="1" number_of_levels='3'}
   {elseif $lang == "de"}
      {menu template='accessible_simple_navigation.tpl' start_element='4.1' show_root_siblings="1" number_of_levels='3'}
   {else}
      {menu template='accessible_simple_navigation.tpl' start_element='5.1' show_root_siblings="1" number_of_levels='3'}
   {/if}

   {if $lang != "nl"}
      {global_content name='flag-nl'}
   {/if}
   {if $lang != "fr"}
       {global_content name='flag-fr'}
   {/if}
   {if $lang != "de"}
      {global_content name='flag-d'}
   {/if}
   {if $lang != "en"}
       {global_content name='flag-e'}
   {/if}

  {title}
{content label="Dutch text" assign="content_dutch"}
{content block="german" wysiwyg="true" label="German text" assign="content_german"}
{content block="english" wysiwyg="true" label="English text" assign="content_english"}
{content block="french" wysiwyg="true" label="French text" assign="content_french"}

{if $lang == "nl"}
                {$content_dutch}
    {elseif $lang == "fr"}
                {$content_french}
    {elseif $lang == "de"}
                {$content_german}
    {else}
                {$content_english}
{/if}

    {if $lang == "nl"}
	{global_content name='footer-nl'}
    {elseif $lang == "fr"}
	{global_content name='footer-fr'}
    {elseif $lang == "de"}
	{global_content name='footer-d'}
    {else}
	{global_content name='footer-e'}
{/if}

8. Wijzig sjabloon voor de juiste taal

Handig om de sjabloon kiezer op de eerste tab te hebben in de editor:

Websitebeheer >> Algemene instellingen >> Uitgebreide setup >> Basis Gegevens >> Selecteer 'Sjabloon'

Nu kun je iedere pagina openen en het juiste taal sjabloon er aan koppelen.


9. Stel pagina alternatieven in

Wanneer alle pagina's gereed zijn, kun je voor iedere pagina de alternatieven instellen.
In de pagina editor vind je drie velden waarin je de pagina alias van dezelfde pagina in een andere taal kunt zetten.
Klikken op de land vlag zal dan dezelfde pagina in een andere taal openen


10. De Error 404 foutpagina

In de editor van de Error 404 pagina vind je 4 schermen.
Elke taal heeft zijn eigen WYSIWYG blok.
Voor iedere taal kun je hier je eigen bericht plaatsen.

Wanneer een bezoeker een niet bestaande pagina opent, zal er een Error 404 pagina worden gemaakt op basis van de ingestelde browsertaal.
Bijv. de browsertaal is ingesteld op Frans.
De navigatie is in het Frans, de content tekst is in het Frans, de footer tekst is in het Frans, enz...


Je hebt nu een meertalige website...

Hopelijk kun je hier iets mee, Rolf  :)

[Rolf]

Meertalige zoekfunctie:

Code: Select all

{search searchtext="Uw zoekwoord..." submit="Versturen" search_method="post"}

Code: Select all

{search searchtext="Enter search..." submit="Submit" search_method="post"}

Code: Select all

{search searchtext="Ihr Suchwort..." submit="Suchen" search_method="post"}

Code: Select all

{search searchtext="Recherche..." submit="Envoyer" search_method="post"}

[Rolf]

Meertalige formulieren met FormBuilder

Maak 4 aparte formulieren in FormBuilder, per taal één.
De tags voor de pagina's zijn dan:

Code: Select all

{cms_module module='FormBuilder' form='contact-nl' lang='nl_NL'}

Code: Select all

{cms_module module='FormBuilder' form='contact-fr' lang='fr_FR'}

Code: Select all

{cms_module module='FormBuilder' form='contact-d' lang='de_DE'}

Code: Select all

{cms_module module='FormBuilder' form='contact-e' lang='en_EN'}

[pedes]

is er een consequentie als je geen pretty url's kan installeren om deze meertaligheid te hebben ?

[Rolf]

is er een consequentie als je geen pretty url's kan installeren om deze meertaligheid te hebben ?

Hoi Peter,

In grote lijnen is het geen probleem, de basis werking is hetzelfde.
Het enige grote verschil is dat je geen www.buispost.eu/e of het wordt dan www.buispost.eu/index.php?page=e
Je zou dit extern kunnen oplossen met een rewrite rule in de .htaccess (als je die kunt gebruiken...)
Anders zou je ook een fictieve netwerkmap e kunnen aanmaken met daarin een index.html die je doorstuurd

Mogelijkheden genoeg in ieder geval.

grt. Rolf

ps. ik zie nu ook dat het forum de originele code verminkt heeft
Zal dan bij al mij T&T's zijn gebeurt, grrr.

[Rolf]

ps. ik zie nu ook dat het forum de originele code verminkt heeft
Zal dan bij al mij T&T's zijn gebeurt, grrr.

@Pedes, als je de code wilt gebruiken dan pm me maar even dan zal ik je het mailen.
Moet eerst even uitzoeken hoe ik dit in het nieuwe forum het beste kan stylen...

Rolf

[pedes]

Hoi Rolf,

Ik heb nog even een vraagje ivm. deze meertaligheid.

In de sjablonen zet je (vb. voor de nl sjabloon)

Code: Select all

{content block="german_version" assign="german_version" wysiwyg="false" oneline="true" label="Page alias German Alternative"}
  {content block="english_version" assign="english_version" wysiwyg="false" oneline="true" label="Page alias English Alternative"}
  {content block="french_version" assign="french_version" wysiwyg="false" oneline="true" label="Page alias French Alternative"}

waarom is dit ... vul ik daar de page alias is van de taalpagina
is het de bedoeling dat ik op deze manier de juiste pagina krijg maar in een andere taal ?

Thks,
Peter

[Jos]

waarom is dit ... vul ik daar de page alias is van de taalpagina
is het de bedoeling dat ik op deze manier de juiste pagina krijg maar in een andere taal ?

Ja klopt helemaal, hiermee kun je rechtstreekse links naar de bijbehorende pagina's in een andere taal maken.

[janvl]

Ik heb dan nog 1 vraag, hoe leg ik de verbinding tussen de twee paginas in "de" en "uk"? Via de alias? Moet ik daar letten op de naamgeving?

M.vr.gr.
Jan

[Jos]

janvl: daarvoor heeft pedes juist hierboven de code geciteerd. Als je die code in je pagina-template opneemt, dan komen er per pagina een paar invoervelden bij.
Daar kan de gebruiker dan de alias invullen van de overeenkomstige pagina's van de andere talen.

[janvl]

Bedankt,

nu begrijp ik het hoe en waarom. Nu alleen nog even afmaken en
dan is het klaar!

Ik had de gehele struktuur, zoals beschreven, al gemaakt en begreep alles op dit ene puntje na.

Als hij staat stuur ik de link.

m.vr.gr.
Jan

[janvl]

Hallo,

De site is: http://www.control-engineering.at

Het werkt maar toen ik de vlag naar de header verplaatst heb, kreeg ik na een klik steeds de eerste pagina in de andere taal.
Het is noodzakelijk dat de div voor de vlag in de content-div staat anders werkt het niet.

News met parameter {news category="deutsch" . . . kan de news-items in verschillende talen regelen. Hij laat dan alleen de news-items van de betreffende kategorie zien.

M.vr.gr.
Jan

[janvl]

Hallo,

Probleem met de layout bij gebruik van simpele vertikale navigatie links.
Als je start bij level 2 in het menu, dan heb je twee maal <ul>, er ontbreekt m.i. een <li>

http://forum.cmsmadesimple.org/viewtopi ... 15#p248915

M.vr.Gr.
Jan

[janvl]

Hallo,

Om te testen hab ik een verse installatie van 1.9.4 gedaan en het voorbeeld gevolgd. Wanneer ik index.php?page=d oproep krijg ik:

Fatal error: Maximum execution time of 30 seconds exceeded in /home1/stajlbiz/public_html/cms-demo/lib/classes/class.cms_tree.php on line 313

Alle pagina op een lager nivo werken,
zie http://www.stajl.biz/cms-demo/index.php?page=pagina_1

door de terugverwijzing van start naar nl gaat daar iets fout.
Dat werd veroorzaakt door show_root_siblings='1' en de terugverwijzing. (een eindeloze loop?)

Ik heb de boel aangepast, en het werkt.

Ook de fout met de twee maal <ul><ul> is weer aanwezig, klaarblijkelijk produceert de Menu Manager deze fout als je naar een pagina lager in de boom springt.

M.vr.Gr.
Jan

[iStevo]

Hallo,

Om te testen hab ik een verse installatie van 1.9.4 gedaan en het voorbeeld gevolgd. Wanneer ik index.php?page=d oproep krijg ik:

Fatal error: Maximum execution time of 30 seconds exceeded in /home1/stajlbiz/public_html/cms-demo/lib/classes/class.cms_tree.php on line 313

Janvl,

Ik heb het nog niet geïnstalleerd of uitgeprobeerd, maar heeft dit er iets mee te maken??

1. Installeer pretty url

Met de toepassing van pretty url (mod_rewrite) op de website krijg je de mooiste resultaten. Tenminste dat is mijn mening...
Kijk hier hoe je pretty url moet instellen:
http://forum.cmsmadesimple.org/index.ph ... 912.0.html
Of doe een zoektochtje door het forum of in de wiki.

(Opm.: Als je vragen hebt over het installeren van pretty url, gebruik dan aub niet dit artikel... Het is een beetje off-topic)