Maak een app van je WordPress website met deze simpele stappen!

Apps zijn hot. En ze zijn ook nog eens hartstikke handig voor je klanten. Het geeft hen meer vrijheid met betrekking tot de manier waarop ze met je site bezig zijn. Tegenwoordig bezoeken meer mensen het internet via mobiele apps dan via desktop browsers; alle reden dus om ook van jouw WordPress site een app te maken!

Vroeger zat er behoorlijk wat werk in het bouwen van een app. Het was ook behoorlijk lastig om te doen, dus het bouwen werd meestal uitbesteed, wat flink in de kosten liep. Maar tegenwoordig heb je helemaal niet zoveel geld of expertise meer nodig om een goede app te bouwen.

Hosting en Webhosting bij Combell

Wat je moet doen voor je begint met het bouwen van je app

In de afgelopen jaren zijn er talloze gratis app builders verschenen. Eén van de simpelste gratis app builders is Adobe PhoneGap Build. Hiermee kun je simpelweg je website bestanden uploaden en PhoneGap tovert deze om in een mooie app die je direct kunt downloaden. Het mooie van Adobe PhoneGap Build is dat je drie apps tegelijk kunt bouwen: één voor iOS, één voor Android en één voor Windows. Dat scheelt je flink wat tijd!

App bouwen van je WordPress website

Deze builder ‘verkleedt’ je homepage in feite als een app. Je bezoekers worden naar dezelfde mobiele website geleidt die ze zouden zien als ze hem op hun smartphone zouden bekijken. Met andere woorden, als je wil dat deze methode effectief is, moet je een site hebben die geoptimaliseerd is voor mobiel. Daarom moet je zorgen dat je WordPress site een mobiele versie heeft.

Als je WordPress website niet responsive is, heeft het weinig zin om er een app van te maken. Je eerste stap is dus om te zorgen dat je site een mobiele versie heeft. Er zijn tal van plugins verkrijgbaar waarmee je dat kun bereiken, zoals WPtouch, iThemes Mobile en het WordPress Mobile Pack. Ook Any Mobile Theme Switcher is een goede optie. Deze detecteert wat voor apparaat je bezoeker gebruikt en geeft een specifiek thema weer dat geschikt is voor dat apparaat.

Zodra je een goede mobiele versie van je site hebt, kunnen we verder gaan met het daadwerkelijk bouwen van je app.

Stap 1: Voorbereiding

Maak een PhoneGap Builder account aan. Als je van plan bent om slechts één app te bouwen, dan is de gratis account prima. Wil je meerdere apps maken, dan moet je een premium account hebben.

Stap 2: App bestanden creëren

Je root directory moet de volgende bestanden bevatten:

  • index.html
  • config.xml
  • Een aantal standaard icoontjes in .png formaat

Als je geen expert bent met Photoshop of Illustrator kun je altijd nog gebruik maken van een app creator, zoals bijvoorbeeld The iOS and Android App Icon Size Generator of App Icon Maker.

Stap 3: De app configureren

Config.xml bepaald de meeste functies van je app. Het werkt op alle platformen, dus je hoeft niet voor elk besturingssysteem dingen aan te passen. Je moet wel de onderstaande zaken aanpassen:

  • widget @id

Gebruik de domeinnaam van je site en voeg er .app aan toe

  • name

De titel van je site

  • description

Een korte beschrijving van je site

  • author (@email, @href)

Jouw gegevens

  • content@src

Vul hier je homepage in

Stap 4: Het bouwen van de app

Goed, nu kunnen we met het echte werk beginnen. Je gaat naar de PhoneGap Builder website en logt in. Hier krijg je de lege app schermen te zien. Via de knop aan de rechterzijde kun je al je app bestanden uploaden. Vervolgens wordt de data door het programma geanalyseerd en wordt er een scherm getoond met alle details van je app. Nu hoef je alleen nog maar op ‘ready yo build’ te klikken.

Het is wel belangrijk om te weten dat PhoneGab Builder alleen met iOS werkt als je lid bent van het iOS Developer Program.

Stap 5: Testen

Zodra je app klaar is kun je gaan testen. Als je bijvoorbeeld een smartphone met een Android besturingssysteem hebt, klik je op het Android icoontje om de app te downloaden. Als er geen icoontje wordt weergegeven, heb je waarschijnlijk de verkeerde URL in je config.xml bestand staan. Dan is het een kwestie van aanpassen, opnieuw uploaden en opnieuw bouwen.

Als alles in orde is, kun je er mee gaan spelen en kijken of alles goed werkt.

Alternatieve app builders

We hebben hier PhoneGap Build als voorbeeld genomen, maar er zijn nog talloze andere app builders en plugins die je kunt gebruiken, waarmee je in elk geval kosteloos een Android app kunt bouwen. Een erg populaire app builder voor WordPress is AppPresser. Een groot voordeel van AppPresser is dat je app automatisch wordt geüpdate zodra je iets aan je site aanpast. Daarbij biedt het ook volledige ondersteuning voor e-commerce. Een andere WordPress plugin is WP Webapp. Deze plugin werkt min of meer hetzelfde als PhoneGab, maar net even iets makkelijker. Zo hoef je bijvoorbeeld niet het config.xml bestand aan te passen.

Tot slot

Het lijkt in de eerste instantie wellicht hoog gegrepen om zelf een app te bouwen, maar met alle tools die er tegenwoordig beschikbaar zijn is het helemaal niet zo moeilijk. Zorg in elk geval altijd dat je een goede mobiele versie van je site hebt, en je zult niet snel problemen ervaren.

8 reacties op “Maak een app van je WordPress website met deze simpele stappen!”

  1. Ard schreef:

    Is het ook mogelijk om een compleet andere app te maken dan de website zelf is. Hiermee bedoel ik dat de website de uitleg over de app etc. is en de app het daadwerkelijke product?

  2. E-Litt schreef:

    Cool artikel, ik ga er snel zelf mee aan de slag!
    Groet,
    Peter Damen Elitt

  3. Negeso schreef:

    Bedankt voor het artikel. Het zou echt belangrijk om app te maken voor uw site, maar als het past bij uw niche en product, moet ook het comfortabel voor klanten.

  4. bas schreef:

    Beste,
    Waar vind ik het config.xml bestand van mijn website? Moet je deze zelf creeëren of staat deze al ergens in de Root van mijn website?

  5. TheBoss schreef:

    Ah dit is super handig als je je WordPress ook een app wilt laten zijn. En keuze voor iOs, Android of Windows is ook fijn. Een echte app ziet er waarschijnlijk wel wat beter uit maar op deze manier hoef je je geen zorgen meer te maken dat bepaalde links op je site niet werken. Goede en snelle oplossing!

  6. Webskillz schreef:

    Coole oplossing voor een app. Natuurlijk niet zo geavanceerd als een echt app laten ontwikkelen 😉

Geef een reactie