Roger.OverdevestIn iOS kunnen gebruikers webpagina’s aan hun begin-scherm toevoegen (op de iPhone, iPad en iPod Touch). Hier komt dan een icoontje te staan dat er hetzelfde uitziet als die van “gewone” apps op hun telefoon of tablet. Wanneer je hier op klikt, opent je telefoon of tablet de website in Safari, de standaard webbrowser van iOS.
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.
Hoe ziet een iOS-icoon er uit?
Inhoud
In de afbeelding aan de rechterkant zie je het iOS-icoon van www.wplounge.nl op mijn iPhone-beginscherm staan (rechts naast de NS Reisplanner).
Veel andere websites hebben dit ook, en het is erg makkelijk om dit in te stellen. Veel Premium WordPress themes hebben standaard een theme options-paneel waarin je dit kunt instellen.
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!
Bekijk de themes »»
Lees meer over Divi.
Niet alle WordPress-themes hebben de optie om een iOS-icoon toe te voegen. In dat geval moet je het dus zelf doen. Dit kan met een plugin, of je kunt het zelf in het header.php-bestand van je (child) theme plaatsen.
Welke iconen gaan we toevoegen?
Om te zorgen dat je iOS-icoon op alle Apple-apparaten wordt getoond, dienen we meerdere versies te uploaden en in de header te plaatsen. Dit heeft te maken met het feit dat we voor retina-schermen een extra grote afbeelding moeten uploaden, omdat hij anders niet scherp wordt weergegeven op bijvoorbeeld een iPhone 5.
De formaten
Allereerst gaan we drie afbeeldingen aanmaken. Open je logo of andere beeldmerk dat je als iOS-icon wilt gebruiken in Photoshop en sla hem in drie formaten op:
- 57 x 57 pixels (voor iPhones zonder retina-scherm)
- 72 x 72 pixels (voor iPads zonder retina-scherm)
- 114 x 114 pixels (voor iPhones en iPads met retina scherm)
De code
Ik leg verder in dit artikel uit hoe je de icons met behulp van een plugin aan je WordPress-website toevoegt. Doe je het liever zonder plugin? Dan kun je de onderstaande codes gebruiken in de <head> van je website. Deze vind je in het header.php-bestand van je (child) theme. Heb je geen WordPress-website? Ook dan kun je de code gebruiken.
<!-- iPhone (niet retina) --> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://www.wplounge.nl/wp-content/uploads/2014/04/wplounge-ios.png"> <!-- iPad (niet retina) --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.wplounge.nl/wp-content/uploads/2014/04/wplounge-ios-ipad.png"> <!-- Retina --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.wplounge.nl/wp-content/uploads/2014/04/wplounge-ios-retina.png">
In de code hierboven hoef je alleen nog de locatie van de afbeeldingen aan te passen.
Plugin gebruiken
Je kunt natuurlijk ook een WordPress-plugin gebruiken om deze icoontjes aan je website toe te voegen. Bijvoorbeeld de Add to home screen WP-plugin. Het nadeel hiervan is, is dat deze alleen een touch-icon toevoegt, en dus geen speciale iconen toevoegt voor retina-displays of iPads.
Wolter
Handig. Ook maar eens snel in orde gemaakt. ;-)
Ziet er goed uit! :)