Tutorial over een eenvoudige meertalige site met blokken (zonder plugins)

De WordPress Blok-editor biedt voortdurend nieuwe mogelijkheden om je site aan te passen. In deze tutorial zullen we bekijken hoe we blokken gebruiken om sitemenu’s in twee talen toe te voegen en een taalschakelaar aan te maken, waarmee je bezoekers kunnen wijzigen in welke site ze je site willen bekijken.

Je kan hier een demo bekijken van hoe dit werkt:

Demo bekijken

In deze handleiding

1. Opmerkingen en referenties
   1. Referenties en meer informatie
2. Methode
   1. 1. Pagina’s en pagina-slugs instellen
   2. 2. De indeling voor je menu en taalschakelaar selecteren
   3. 3. De taalschakelaar aanmaken
   4. 4. Een navigatiemenu voor je eerste taalpagina’s toevoegen
   5. 5. Je nieuwe menu en taalschakelaar opslaan
   6. 6. Tweede taalmenu
   7. 7. Je nieuwe menu’s aan de andere pagina’s toevoegen
   8. 8. Meer pagina’s toevoegen

Opmerkingen en referenties

• Deze taalschakelaar vertaalt je pagina’s niet, maar geeft je de mogelijkheid om je site in twee of meer talen aan je bezoekers te laten zien. Je zult de pagina’s zelf moeten vertalen!
• De taalschakelaar verwijst gebruikers alleen door naar de startpagina van elke taal.
• Je zult ook je menu’s moeten bijwerken als je extra pagina’s aan je site toevoegt.
• De eerste configuratie neemt wat tijd in beslag, maar zodra je hier klaar mee bent, worden aanpassingen en updates snel afgerond.

Referenties en meer informatie

In deze tutorial wordt gebruikgemaakt van de volgende functies:

• Pagina-slugs
• Bovenliggende en onderliggende pagina’s
• Statische voorpagina
• Kolommenblok
• Paragraafblok
  • (Optioneel) Inline afbeeldingen (beschikbaar via de werkbalk Paragraafblok)
• Navigatieblok
• Herbruikbare blokken

Methode

1. Pagina’s en pagina-slugs instellen
2. De indeling voor je menu en taalschakelaar selecteren
3. De taalschakelaar aanmaken
4. Een navigatiemenu toevoegen
5. Je nieuwe menu en taalschakelaar opslaan
6. Tweede taalmenu
7. Je nieuwe menu’s aan de andere pagina’s toevoegen
8. Meer pagina’s toevoegen

1. Pagina’s en pagina-slugs instellen

Om deze tutorial zo effectief mogelijk te laten verlopen, raden we je aan om een van de thema’s te gebruiken die compatibel zijn met onze Blok-editor, die hier vermeld staan.

Ga naar Mijn site → Site → Pagina’s. Begin door één startpagina aan te maken voor elke taal die je op je site wil weergeven. Je hoeft nog niet veel content toe te voegen; voor nu is een pagina-titel voldoende.

Publiceer elke pagina zodat deze is bijgewerkt en wijzig vervolgens de pagina–slug van elke pagina zodat deze doorverwijst naar de betreffende taal In dit voorbeeld is de Franse startpagina Accueil genoemd en heeft deze de pagina-slug /fr/:

Wijs de startpagina van je voorkeurstaal toe als statische voorpagina voor je site. Dit zorgt ervoor dat bezoekers die je site bezoeken de site eerst in de ene taal zien en deze vervolgens kunnen wijzigen naar een andere taal.

Zodra je alle startpagina’s hebt die je nodig hebt, zul je wat andere contentpagina’s moeten aanmaken voor de verschillende talen. Je hoeft op dit moment nog steeds geen content toe te voegen. Het is prima om de pagina voor nu alleen te publiceren met een titel.

Wanneer je deze pagina’s aanmaakt, wijs je ze toe als onderliggende pagina’s van de startpagina’s in je taal met behulp van het gedeelte Pagina-eigenschappen:

Voorbeeld – overzicht van paginastructuur

In het volgende voorbeeld laten we startpagina’s in twee talen zien: Engels en Frans. Elk van de startpagina’s heeft twee onderliggende pagina’s: About en Contact voor het Engels en À Propos en Contact voor het Frans:

2. De indeling voor je menu en taalschakelaar selecteren

Klik in Mijn site > Site > Pagina’s op de titel van je startpagina in de primaire taal om deze te openen in de WordPress-editor.

Voeg onder de paginatitel in de editor een kolommenblok toe en kies een indeling met twee kolommen. Als je van gedachten verandert over de gekozen indeling, hoef je je hierover geen zorgen te maken, want je kan deze nog wijzigen in de blokinstellingen. Bekijk deze handleiding over het kolommenblok voor meer informatie over hoe dit in zijn werk gaat.

We raden je aan een indeling met één grotere kolom en één kleinere kolom te gebruiken. De kleinere kolom bevat je taalschakelaar en de grotere kolom bevat je menu.

Stel het kolommenblok in op breed of volledige breedte:

3. De taalschakelaar aanmaken

Afhankelijk van hoe je wil dat je taalschakelaar wordt weergegeven, zijn er twee methoden: je kan ofwel de namen van de talen invoeren of gebruikmaken van inline afbeeldingen om vlaggen weer te geven.

Opmerking: We raden je om twee redenen niet aan om vlaggen te gebruiken voor de taalkeuze:
1. Dit is minder toegankelijk voor bezoekers die de vlaggen niet kunnen zien
2. Dit kan verwarring veroorzaken omdat je bezoekers een andere link met een bepaalde taal en een vlag kunnen leggen; niet iedereen denkt op dezelfde manier!
Om extra duidelijkheid te scheppen, raden we aan om tekstlinks (methode 1 of 2) te gebruiken.

Methode 1 – tekstlinks in een navigatieblok

Je zou nu twee kolommen moeten hebben waarin content moet worden gecreëerd. Klik op de smallere kolom en voeg een navigatieblok toe:

Selecteer Aanmaken via alle bovenste pagina’s om het blok automatisch te vullen met de bovenliggende startpagina’s van je taal.

Je kan de tekst van elk item vervolgens aanpassen, zodat deze de naam van de betreffende taal heeft (of de afgekorte versie):

Methode 2 – tekstlinks in een paragraafblok

Je zou nu twee kolommen moeten hebben waarin content moet worden gecreëerd. Klik op de smallere kolom en voeg er een paragraafblok aan toe:

Voer de namen van de taal in de gewenste indeling in, bijvoorbeeld ‘EN’ en ‘FR’, of ‘Engels’ en ‘Frans’.

Markeer de naam van elke taal en klik op de knop Hyperlink invoegen om die taalnaam te koppelen aan de bijbehorende startpagina. Voorbeeld:

De taalafkortingen gebruiken:

Methode 3 – inline afbeeldingen

Je zou nu twee kolommen moeten hebben waarin content moet worden gecreëerd. Klik op de smallere kolom en voeg er een paragraafblok aan toe:

Als je afbeeldingen van vlaggen hebt die je wil gebruiken voor je taalkeuze, dan kan je de functie voor inline afbeeldingen gebruiken (beschikbaar onder Meer opties) om ze in te voegen en te koppelen:

Voer een spatie in je paragraafblok in om de blokwerkbalk te activeren en het menu Meer opties weer te geven. Wanneer je Inline afbeelding selecteert, wordt de mediabibliotheek/het uploadvak automatisch geopend. Upload of selecteer je vlag. Voor meer informatie over het uploaden of selecteren van een afbeelding kan je dit document bekijken.

Wanneer de afbeelding is toegevoegd, kan je erop klikken om de afmetingen aan te passen:

Je kan de afbeelding vervolgens omzetten in een link, op dezelfde manier als waarop je een tekstlink aanmaakt:

Herhaal dit proces voor de tweede taalvlag.

4. Een navigatiemenu voor je eerste taalpagina’s toevoegen

Het wordt nu tijd om een navigatieblok toe te voegen aan de kolom tegenover je nieuwe taalschakelaar. Klik op de lege kolom om het blokmenu te openen en voer ofwel navigatie in of zoek ernaar onder het gedeelte Indelingselementen:

Het blok wordt met twee opties weergegeven. Kies voor Lege aanmaken. Je zal zien dat je nu pagina’s kan toevoegen aan het blok:

Voeg een link naar elke pagina toe aan je eerste taal. Klik op de knop Blok toevoegen (de zwarte ‘+’-knop) aan de rechterzijde van het navigatieblok om een extra link toe te voegen:

5. Je nieuwe menu en taalschakelaar opslaan

Gebruik de knop Bloknavigatie bovenaan de editor om je kolommen te selecteren:

Gebruik de werkbalk van het kolommenblok om meer opties weer te geven en kies voor Toevoegen aan herbruikbare blokken:

Geef je herbruikbare blok een naam waarmee het makkelijk geïdentificeerd kan worden, zoals Menu – Engels. Voor meer informatie over hoe herbruikbare blokken werken, kan je deze handleiding bekijken.

Vergeet niet om je pagina bij te werken om de wijzigingen ook toe te passen op de pagina. Gefeliciteerd, je eerste menu en de taalschakelaar zijn nu aangemaakt!

6. Tweede taalmenu

Om het menu voor de tweede taal aan te maken, kan je stap 1-5 opnieuw volgen of kan je de snelkoppeling gebruiken:

Open een van de pagina’s in je tweede taal in de WordPress-editor. Klik op de knop Blok toevoegen (de zwarte ‘+’-knop) om een nieuw blok toe te voegen aan de pagina. Scrol in de lijst met blokken helemaal naar beneden. Hier vind je de categorie Herbruikbare blokken, waar je menu is opgeslagen. Je kan ook het zoekvak gebruiken om het te vinden.

zodra het menublok is toegevoegd aan die pagina gebruik je het menu Meer opties om te Converteren naar reguliere blokken:

Zodra de blokken worden weergegeven als reguliere blokken in plaats van een herbruikbaar blok, kan je het navigatieblok bijwerken zodat het naar de pagina’s van je tweede taal verwijst.

Methode 1 – een nieuw navigatieblok verwijderen en opnieuw toevoegen

Selecteer het navigatieblok via de bloknavigator:

Het gehele navigatieblok verwijderen:

Volg daarna stap 4 hierboven om opnieuw een leeg navigatieblok toe te voegen voor je tweede taal

Methode 2 – navigatie-items wijzigen

Klik op het item dat je wil wijzigen. Klik op de knop ‘koppelen’ om informatie over de link te openen en klik vervolgens op de knop Wijzigen. Je kan nu de gewenste pagina invoeren en selecteren. Onthoud dat je de tekst van de link ook handmatig moet wijzigen:

Wanneer je de wijzigingen hebt doorgevoerd, sla je dit nieuwe kolommenblok op als een nieuw herbruikbaar blok zoals aangegeven instap 5hierboven en geef je het een duidelijke naam om aan te geven dat dit het menu voor je tweede taal is.

Vergeet niet om je pagina bij te werken om de wijzigingen ook toe te passen op de pagina. Gefeliciteerd, je tweede menu en de taalschakelaar zijn nu aangemaakt!

7. Je nieuwe menu’s aan de andere pagina’s toevoegen

Je menu’s en taalschakelaar zijn gereed. Je kan je twee taalmenu’s nu aan de andere pagina’s toevoegen voor die respectieve talen, zoals beschreven in stap 6 hierboven. Let op: zodra de herbruikbare blokken zijn opgeslagen, kan je ze simpelweg toevoegen aan andere pagina’s, maar hoef je ze niet te converteren naar reguliere blokken.

8. Meer pagina’s toevoegen

Heb je meer pagina’s aangemaakt voor elke taal en moet je ze toevoegen aan je menu? Geen probleem. Je kan je herbruikbare blokken bewerken, waarna ze worden bijgewerkt op elke pagina waaraan ze zijn toegevoegd. Bekijk hier meer informatie.