• Hallo! Welkom op mijn site.

    Mark Lindhout

    Ik ben Mark Lindhout, webspecialist.

    Ik ben goed in: Mooie en gebruiksvriendelijke websites, Zoekmachines en vindbaarheid, On-line Marketing en Interface design.

    Daarbij maak ik gebruik van Open Source Software en mijn 15 jaar ervaring met het bouwen van Internet.

    Meer weten? Stuur dan een berichtje!

    Bellen kan natuurlijk ook: 06 - 48072756

Voeg een ‘Call to Action’ toe aan je WordPress theme, nu inclusief een gemakkelijke Meta-box voor het beheer!

Call to Action - metabox

De uiteindelijke metabox voor de ‘Call to Action’.

Een Call to Action is een duidelijke, herkenbare actie die een bezoeker van een website kan ondernemen. Vaak houdt dit in dat men contact opneemt, een mail stuurt, of een product koopt. WordPress biedt deze functionaliteit wel aan, maar voor de minder computer-vaardigen onder ons kan het soms een beetje ingewikkeld zijn. Daarom presenteer ik hier een gebruiksvriendelijke manier om dit in te bouwen. Handig voor jezelf én de eindgebruikers van de website!
Read more »

CSS Syntax in nano

Ik heb al eerder een syntax-highlighting snippet gepubliceerd voor PHP in nano, en als opvolger bij deze de snippet voor CSS, veel plezier!

# Syntax highlighting for Cascading Style Sheets
 
syntax "css" "\.css$"
color brightblue        start="." end="$"
color brightyellow      start="\{" end="\}"
color white             start=":" end=";|$"
color yellow            ":active|:focus|:hover|:link|:visited|:link|:after|:before"
color brightwhite       "\'|\""
color brightred         ";|:"
color red               start="\[" end="\]"
color green             start="/\*" end="\*/"

Vertaal je WordPress theme met xgettext en POedit.

Onlangs stond ik voor de uitdaging om een een meertalige website in WordPress te realiseren.

Omdat WordPress al perfect ingericht is op het gebruik maken van de GNU Portable Object vertaalmethode, heb ik besloten het niet moeilijker te maken dan het is. Ik heb de template te voorzien van .po en .mo bestanden. Dat zijn de bestandstypes die je zelf kunt vertalen in een text editor (.po) en de gecompileerde versie daarvan voor gebruik door software (.mo).

Maar goed, hoe krijg je het nu voor elkaar om je template klaar te stomen voor vertaling?

Stap 1: Omvat alle strings in je template met een vertaalfunctie.

In WordPress wordt gebruik gemaakt van twee vertaalfuncties. De eerste is __(), en de tweede is een ge-echo’de versie daarvan, die heet _e().

Opmerking: Het uitvoeren van echo __() zal dus exact hetzelfde resultaat geven als _e().

Het is dus de bedoeling dat je alle vertaalbare tekst in zo’n functie zet. Een goed voorbeeld is bijvoorbeeld de ‘lees meer’-link die in bijna ieder WordPress template wel voorkomt. Het voorbeeld hieronder laat zien hoe het werkt:

_e('Read More')

Dit zal voor gebruikers die de website in het Engels bekijken de tekst Read More teruggeven, en (als je het allemaal juist vertaald hebt) voor Nederlandse gebruikers Lees Meer. Het is dus de bedoeling dat alle tekst die verschilt per taal in dit soort functies wordt gezet.

Stap 2: Voeg een text domain toe aan je theme

Omdat er best veel plugins, themes en eigen vertalingen in WordPress beschikbaar zijn, kan het soms voorkomen dat er al dingen vertaald zijn. Bijvoorbeel vanuit een plugin kan dan een Nederlandse vertaling opduiken, of zelfs vanuit de WordPress core. Als je het nu wat overzichtelijker wilt houden, en je alleen bezig wilt zijn met de vertalingen binnen je eigen template, dan kun je dat gemakkelijk oplossen door een textdomain toe te voegen aan je vertaalfuncties en je theme.

Allereerst moet je er voor zorgen dat je het textdomain toevoegt aan het template, zodat duidelijk is welke vertaalbare stukjes tekst er eigenlijk bij horen. De vertaalfuncties zoals eerder genoemd zijn hier al voor ingericht, en met een simpele toevoeging zijn we dan ook al klaar. Ik ga in dit voorbeeld uit van het textdomain ‘langdradig’.

_e('Read More', 'langdradig')

Dat viel best mee, toch?

De volgende stap is wat lastiger. De bedoeling is dat in het bestand functions.php (in de map van het template) de volgende regel wordt toegevoegd:

load_theme_textdomain('langdradig', get_template_directory() . '/languages');

Dit betekent dat alle strings met textdomain langdradig hun vertalingen kunnen vinden in de map /languages/ in de map van het template. (Als die dus nog niet bestaat, dan moet je die even aanmaken.)

Let op: Het is wel zaak dat de .po bestanden genoemd worden naar de gekozen taal-localisatie. Dat betekent dus dat het moet zijn en_US.po en nl_NL.po. (Dus niet dutch.po)

Stap 3: Haal de vertaalbare strings op uit je template

Om dit voor elkaar te krijgen heeft POedit een catalogusmanager. Ik vind het zelf echter sneller en prettiger om via de command-line te werken. Daarbij maken we in dit geval gebruik van het programma xgettext.

Xgettext is verkrijgbaar voor alle besturingssystemen, maar ik maak in dit geval gebruik van de versie voor OSX.

Als eerste navigeren we in de terminal naar de map waar de template-bestanden zich bevinden. Deze is meestal geplaatst onder /wp-content/themes/, maar als je hem ergens anders op je computer hebt staan, moet je daarheen gaan. Het volgende commando zorgt er voor dat alle door vertaalfuncties omvatte strings in het bestand /languages/default.pot terecht komen.

xgettext -k_e -k__ -o languages/default.pot $(find . -name "*.php")

Dit bestand is dan gemakkelijk met POedit te openen en te vertalen.

Stap 4: Vertalen met POedit

poedit

poedit

Om het vertalen gemakkelijk te maken kun je ook gebruik maken van het programma POedit, een gratis open source programma om.po‘s mee te vertalen. Dit programma maakt ook automatisch de .mo bestanden aan, dus daar hoef je je ook al geen zorgen meer over te maken dan!

POedit wijst zich eigenlijk vanzelf. Het programma heeft een eenvoudige functie: Het vertalen van stukjes text, en deze vertalingen opslaan in bestanden. Als je een vertaling opslaat krijg je twee bestanden, de eerder genoemde .po en een .mo. Deze kun je beide in de map /languages plaatsen, zodat wordpress ze herkent samen met wat we in stap 2 gedaan hebben.

Zoals hierboven al opgemerkt is het erg belangrijk dat de juiste bestandsnaam wordt gebruikt. De twee Nederlandse vertalingen die het meest voorkomen zijn de volgende twee:

  • nl_NL.po voor Nederlands uit Nederland
  • nl_BE.po voor Nederlands uit België.

Stap 5: WordPress omzetten naar een andere taal

Als alles klaar is, kunnen we WordPress overzetten naar een andere taal. In dit voorbeeld gebruik ik Nederlands, dat is wel zo makkelijk :)

Let op: Omdat deze actie de taal van de gehele wordpress-installatie verandert, zal ook het beheergedeelte in het Nederlands verschijnen als de vertalingsbestanden daarvoor aanwezig zijn.

Alle centrale wordpress-instellingen worden bijgehouden in het bestand wp-config.php. Dit bevindt zich in de map waarin de wordpress installatie staat, dus het bevindt zich naast de map /wp-content/. In het bestand komt de volgende regel voor:

define ('WPLANG', '');

Deze moet gewijzigd worden naar:

define ('WPLANG', 'nl_NL');

En voila! Een Nederlandse wordpress website met een vertaalde template!

De nieuwe BOXwise website draait op WordPress!

BOXwise

Sinds een maand ondersteun ik Trancon in Nieuw-Vennep bij het realiseren van hun webwinkel-pakket Cartwise. Tijdens de werkzaamheden zijn we aan de praat geraakt over websites, zoekmachines en weblogs. Ik vertelde dat mijn website op WordPress draait, mijn pakket van voorkeur voor het ontwikkelen van SEO-geoptimaliseerde, toegankelijke websites.

De zoekresultaten van boxwise.nl waren op dat moment niet naar tevredenheid, en daarom werd mij gevraagd om de bestaande website voor BOXwise over te zetten naar WordPress.

Dit biedt een aantal zeer belangrijke voordelen ten opzichte van de vorige website:

  • Video-integratie voor een indrukwekkende eerste indruk
  • Gemakkelijk te beheren inhoud, snel te publiceren, met ingebouwde spellings-controle.
  • Uitgebreide aanpassingsmogelijkheden voor inhoud, afbeeldingen, en media
  • De website is zeer zoekmachine-vriendelijk
  • Integratie met Twitter-accounts van @trancon en @boxwisewms.

De site biedt veel meer mogelijkheden om Social Media in te zetten in de marketing van BOXwise, en maakt het product toegankelijker voor mensen die zoeken naar een barcode-oplossing. De komende weken zullen laten zien dat er een aanzienlijke verbetering optreedt in de vindbaarheid van de website.

Kort samengevat, een grote verbetering met open source software op de nieuwe BOXwise website!

Snellere pagina’s met Lighttpd

Zoals je misschien al eerder had gelezen, draait deze website op Lighttpd, een efficiente en snelle webserver. Deze server gebruikt minder werkgeheugen als bijvoorbeeld Apache, en is met eenvoudige configuratie zeer goed te optimaliseren voor snelheid en hoge beschikbaarheid.

In dit artikel zal ik een aantal technieken behandelen die de snelheid van de server aanzienlijk te goede komen, en het laden van pagina’s tot 3 maal zo snel kan maken.

Read more »