In mijn SEO artikel geef ik vooral tips waarmee je je website zelf zoekmachinevriendelijk maakt. Dat noemt men on page optimalisatie. Maar off page optimalisatie is minstens net zo belangrijk. Daarmee bedoelen we alle dingen die je buiten je eigen website doet om beter vindbaar te worden, en het verkrijgen van links naar je website is het belangrijkste onderdeel daarvan. Dat proces wordt linkbuilding genoemd. (meer…)
Categorie: Tutorial
-

Een meertalige WordPress website met qTranslate X
LET OP: qTranslate X lijkt niet meer bijgewerkt of ondersteund te worden. Ik adviseer daarom deze plugin niet meer te gebruiken. Polylang is een veelgebruikt en eveneens gratis alternatief, maar ik heb zelf inmiddels de premium plugin WPML aangeschaft. Deze geldt als dé standaard vertaalplugin en wordt dan ook door de meeste themes en plugins ondersteund.
Lees mijn WPML review en tutorial
Ik ontwerp regelmatig meertalige websites in WordPress, waarvoor ik de populaire qTranslate plugin gebruikte. Na de update naar WordPress 3.9.1 zorgde qTranslate echter voor zoveel problemen dat ik op zoek gegaan naar een alternatief, wat ik gevonden heb in qTranslate X.In dit artikel lees je:
- Dat qTranslate X een prima alternatief is dat vrijwel hetzelfde werkt als qTranslate
- Dat je kunt instellen welke talen je wilt gebruiken door op “enable” of “disable” te klikken bij de instellingen
- Dat de taal waar het bolletje bij staat de standaard taal is
- Dat je het beste de pre-path mode kan gebruiken en hoe je dit instelt
- Dat je in de editor met de buttons bovenaan kunt selecteren welke taal je wilt bewerken
- Dat je met een widget vlaggetjes kunt weergeven op je website zodat bezoekers een taal kunnen kiezen
qTranslate alternatief: qTranslate X!
Dat alternatief heb ik gevonden in qTranslate X, een zogenaamde fork (in het Nederlands “afsplitsing”) van qTranslate. De plugin is dan ook gebaseerd op dezelfde broncode, wat erg prettig is omdat je vertalingen gewoon behouden blijven. Je kunt dan ook probleemloos overschakelen van qTranslate naar qTranslate X zonder je werk kwijt te raken. Ook de interface werkt vrijwel hetzelfde dus je merkt er eigenlijk niets van.Talen instellen bij qTranslate X
Nadat je de plugin geïnstalleerd hebt (zie deze pagina als je niet weet hoe dat werkt) moet je nog wel wat dingen instellen, te beginnen met de talen die je op de website wil hebben.Op de afbeelding hiernaast (klik om te vergroten) zie je een flink rijtje talen staan. Naast elke taal staan “enable” of “disable”. Standaard zijn Duits, Engels en Chinees ingeschakeld. Als je bijvoorbeeld Chinees wilt uitschakelen klik je naast Chinees op “disable”. Als je Nederlands wilt inschakelen klik je naast Nederlands op “enable”.
Standaard taal instellen
Vervolgens scroll je naar boven, waar je de standaard taal kunt instellen (zie de afbeelding hiernaast). De taal waar het bolletje naast staat is de standaard taal.Met de pijltjes naast de vlaggetjes bepaal je de volgorde, daarmee bepaal je welk vlaggetje als eerste (en tweede, en derde enzovoorts) getoond wordt bij de taalkiezer (zie verderop).
In hetzelfde scherm kun je ook nog instellen of een pagina of bericht verborgen moet worden als deze niet beschikbaar in de geselecteerde taal. Ik laat deze optie meestal uit, dan toont qTranslate X een bericht in de geselecteerde taal dat de pagina niet beschikbaar is in deze taal, met daarbij linkjes naar de talen waarin het bericht wel beschikbaar is.
Verder kun je nog instellen dat de plugin detecteert welke taal in de browser is ingesteld, waarna de bezoeker automatisch wordt doorgestuurd naar de betreffende taal. Het spreekt voor zich dat het verstandig is deze optie in te schakelen.
Advanced settings
Onder advanced settings vind je nog een aantal opties, maar deze laat ik meestal op de standaard instellingen staan. De eerste instelling, URL Modification Mode, is eigenlijk de belangrijkste. Die bepaalt namelijk op welke URL de taal staat. Deze instelling staat standaard op “pre-path mode”, wat betekent dat de Engelse site op www.site.nl/en/ staat, de Duitse site op www.site.nl/de/ enzovoorts. Dat is een prima manier.
In de editor de taal kiezen die je wilt bewerken
Als je alles hebt ingesteld verschijnt er voor iedere taal een button bovenaan bij berichten en pagina’s. Als je de Engelse versie wilt bewerken klik je op de button “English”, als je de Duitse versie wilt bewerken klik je op de button “Deutsch” enzovoorts.Die buttons is eigenlijk het enige verschil met de oude qtranslate, daar vind je de talen als tabblad terug naast “wysiwyg” en “tekst”.
Language chooser (taalkiezer)
Tenslotte dien je de language chooser nog op je site te plaatsen, anders kunnen bezoekers geen taal kiezen. Bij je widgets vind je nu een nieuwe widget, qtranslate language chooser, en deze kun je toevoegen aan één van de widget areas op je site (zie deze pagina als je niet weet hoe dat werkt).Zoals je op de afbeelding hiernaast kunt zien kun je nog enkele dingen instellen. Het eerste is, zoals bij vrijwel iedere widget, de titel. Standaard is de titel “languages”, maar je kunt de titel ook verbergen door het vakje bij “hide title” aan te vinken. Ik verberg de titel persoonlijk altijd, mensen snappen inmiddels wel dat ze op een taal of vlaggetje kunnen klikken om de site in die taal te bekijken.
Tenslotte kun je nog instellen hoe de taalkeuze weergegeven dient te worden. “Text only” geeft een lijstje met de beschikbare talen als tekst, “image only” laat alleen het vlaggetje van het betreffende land zien (die optie gebruik ik meestal), “text and image” toont dan uiteraard zowel de tekst als het vlaggetje en “dropdown box” toont tenslotte een dropdown menu met de beschikbare talen.
Als je overstapt van qtranslate of één van de oude qtranslate alternatieven (bijvoorbeeld mqtranslate of ztranslate) kan het noodzakelijk zijn enkele CSS regels aan te passen, anders zie je wellicht de vlaggetjes niet (of niet op de juiste plek).
Veel Succes! Good Luck! Viel Glück! Bonne chance! 😉
Meertalige WordPress website laten bouwen door Bob de webbouwer
Wil je ook een meertalige WordPress website laten maken? Dan is Bob je uiteraard graag van dienst!
Vraag direct een vrijblijvende offerte aan! -

Responsive “hamburger” dropdown menu
Je komt ze steeds vaker tegen, vooral op tablets en smartphones: de zogenaamde hamburger dropdown menu’s. In deze tutorial leg ik stap voor stap uit hoe je zo’n menu maakt. (meer…)
-

Divs dezelfde hoogte geven met CSS faux columns
Heel veel websites beschikken tegenwoordig over een sidebar, wat eigenlijk gewoon een kolom naast de gewone content is. Meestal heeft de sidebar dezelfde kleur als de content div, maar wat nu als de sidebar een andere kleur moet krijgen dan de content div terwijl de hoogte verschilt? In deze tutorial beschrijf ik 2 manieren om dit te bereiken! (meer…)
-

Andere afbeelding bij hover
Als je een mooie button wilt maken kun je dat prima met CSS bereiken. Maar wat als je nu een afbeelding wilt gebruiken, en bij een hover een andere afbeelding wilt tonen? In deze tutorial legt Bob de webbouwer je uit hoe je dat voor elkaar kunt krijgen, met alleen de afbeeldingen en een beetje css… (meer…)
-

Responsive design tutorial : hoe maak je een responsive website
Zoals je misschien wel is opgevallen is Bobdewebbouwer.com voorzien van een responsive design, wat wil zeggen dat deze website zich automatisch aanpast aan het apparaat waarop hij bekeken wordt. Zo ziet deze website er op je PC anders uit dan op een tablet en weer anders op een mobiele telefoon. In deze tutorial lees je hoe dat werkt! (meer…)
-

CSS dropdown menu
Usability experts adviseren dat de hoofdnavigatie van je website niet meer dan 9 items bevat. Dat is voor veel websites ook meer dan genoeg, maar als je een uitgebreide website hebt kun je natuurlijk behoefte hebben aan een uitgebreider menu. In zo’n geval is een dropdown menu een logische keuze. (meer…)
-

Een navigatie menu maken met HTML en CSS
Het navigatiemenu is één van de belangrijkste onderdelen van je website. In deze tutorial lees je hoe je een navigatiemenu maakt met HTML en CSS. Deze tutorial is onderdeel van de webdesign basics reeks en daarom wordt alles uitvoerig uitgelegd (ook de dingen die misschien erg voor de hand liggen). (meer…)
-

Schaduw met CSS 3
Vind je de schaduwrand onder het menu op deze website ook zo mooi en wil je dat ook op jouw website?
In deze CSS tutorial lees je hoe schaduw kunt maken met CSS 3! (meer…) -

Ronde hoeken met CSS 3
In deze CSS tutorial lees je hoe je afgeronde hoeken maakt met CSS 3. (meer…)
