Hoe optimaliseer ik mijn WordPress website voor Mobiele gebruikers?

Een heel belangrijke trend die de afgelopen jaren is ingezet maar nu sterker is dan ooit, is de opkomst van mobiel internet. De verwachting is dat in 2014 mobiel internet, desktop gebruik gaat overtreffen. Niet alleen dát, er zijn nu al opkomende landen waarbij het gros van de potentiele internetgebruikers nooit achter een PC heeft gezeten. Ook WordPress houdt al rekening met mobiele gebruikers in zijn nieuwe standaard thema Twenty Twelve (WordPress 3.5). Helaas moeten gebruikers met een klein scherm toch al snel veel scrollen met een normale WordPress website.

Om te zorgen dat je geen bezoekers kwijt raakt, is het dus enorm van belang te zorgen dat ook mobiele gebruikers je website goed kunnen gebruiken. Je ziet de bui alweer hangen, een hele nieuwe website of thema maken voor je website? Dat gaat veel werk kosten. Als je WordPress gebruikt hebben we goed nieuws voor je; in veel gevallen kun je in een handomdraai een mobiele versie van je website online zetten!

Er is een WordPress plugin, genaamd WordPress Mobile Pack met onder andere browserdetectie, een standaard mobiel thema en allerlei mogelijkheden tot het uitschakelen en/of inschakelen van functionaliteiten voor mobiele devices. Om deze te installeren log je in op je WordPress Admin Panel via www.jouweigenwebsite.com/wp-admin/ (vervang daar jouweigenwebsite.com door je eigen domein).

Vervolgens klik je aan de linkerkant op Plugins->Nieuw Plugin en zoek je naar “WordPress Mobile Pack”:

Installeer plugin

In bovenstaande scherm kies je voor “Nu Installeren”.

Je komt dan in het installatie scherm waar je de FTP gegevens voor je website moet opgeven. Soms staan die standaard al ingevuld. Zo niet, geef dan je gebruikersnaam en wachtwoord op en klik op doorgaan:

Installeer plugin FTP

Als alles goed gaat, krijg je vervolgens een melding dat de installatie voltooid is:

Installatie success

Hierna is het van belang om de rechten op de cache map aan te passen. Als je dat niet doet, krijg je een foutmelding bij het activeren. Deze rechten kun je aanpassen met een FTP programma zoals FileZilla. Als je dat nog nooit eerder hebt gedaan is het wellicht even lastig. Je kunt ons ook een e-mail sturen met de vraag deze rechten aan te passen:

chmod 777 /wp-content/plugins/wordpress-mobile-pack/plugins/wpmp_transcoder/c/
chmod 777//wp-content/themes/

Als je het zelf wilt doen kan dat op de volgende manier (onder het plaatje staan de overeenkomende nummers uitgelegd):

FTP Rechten

1. Log daarvoor in met de juiste domeinnaam, gebruikersnaam en wachtwoord.

2. Klik vervolgens naar de juiste map in het rechtergedeelte van het scherm of typ handmatig in jouweigenwebsite.com/www/wp-content/plugins/wordpress-mobile-pack/plugins/wpmp_transcoder/.

3. Klik vervolgens met je muis rechts op de map “c”, en kies voor File Permissions (Bestandsrechten). Je krijgt dan een pop-up scherm te zien waar je 2 vinkjes extra moet zetten bij Group Permissions en Public Permissions. Als je klaar ben zijn alle vinkjes aangevinkt zoals in onderstaande scherm en klik je op ok:

Bestandsrechten

Herhaal dit instellen van de juiste rechten nog 1 keer voor de map “/jouweigenwebsite.com/www/wp-content/themes/”.

Je kunt nu weer terug gaan naar het WordPress Admin Panel, en daar de plugin activeren. Klik daarvoor in het Admin Panel in het linkermenu op Plugins->Geïnstalleerde plugins en kies voor Activeren bij de plugin WordPress Mobile Pack:

Activeren plugin

Als je dit gedaan hebt zie je bij WordPress Mobile Pack onder andere staan “Switcher Options”. Ook heb je in het menu “weergave” een optie “Switcher Options” erbij gekregen. Klik op Switcher Options om de plugin te configureren.

Switcher Options

De makkelijkste manier om te beginnen is om de opties zoals in bovenstaande scherm te activeren. De eerste optie is “Browser Detectie”. Dat betekent dat de plugin op basis van de gebruikte browser de mobiele versie van je website laat zien.

In de plugin zijn enkele mobiele thema’s meegeleverd. Mobile Base is een goed thema om mee te beginnen. In een later stadium zou je er ook voor kunnen kiezen een eigen thema hiervoor te maken of aan te passen, maar dat is een meer geavanceerd onderwerp.

Tot slot raad ik aan “Footer Options” aan te vinken, om gebruikers gemakkelijk te laten switchen naar de desktop versie via een link onderaan de pagina. Dat is tegenwoordig vrij gebruikelijk voor mobiele websites, zeker omdat sommige mobiele devices zo groot zijn dat gebruikers liever de desktop versie zien.

Druk nadat je klaar bent op Save Changes, en je mobiele site staat Live!

Ik raad aan ook even de andere opties van de plugin te bekijken, zoals de optie om widgets aan/uit te zetten voor de mobiele site.

Het resultaat op een mobiele telefoon met 4 inch scherm kun je hieronder zien:

Voor en Na WordPress op Samsung