Het is op iOS apparaten (iPhone, iPad, iPod Touch) mogelijk om webpagina’s aan het beginscherm toe te voegen. Aan deze webpagina wordt dan, net zoals bij alle andere apps op het beginscherm, een afbeelding toegekend als icoontje. Dit icoontje is standaard een kleine afbeelding van de website pagina, maar je kunt aan je website ook een afbeelding toevoegen die in de plaats hiervan gebruikt wordt.
Hoe ziet het iOS icoon eruit
Zoals eerder gezegd, wordt er standaard een afbeelding van de webpagina gebruikt. In de afbeelding rechts is dit het icoontje naast Spotify en, zoals je waarschijnlijk al ziet, is dit niet altijd het meest mooie icoontje. Links van dit icoontje, waar de grote WordPress W te zien is, zie je het icoon nadat er een speciale afbeelding op de website is gezet. Zeg nu zelf; is dat niet een stuk beter?
Voordat we beginnen met het toevoegen van deze afbeelding, moet je eerst controleren of je thema het niet toevallig al ondersteund. Veel Premium Themes van WordPress beschikken tegenwoordig namelijk over de mogelijkheid om dit in thema-opties in te stellen.
Mocht het niet mogelijk zijn om dit standaard in je thema in te stellen, geen nood: hieronder komt de uitleg.
Zelf een iOS icoon toevoegen
Er zijn twee mogelijkheden het icoon op de iOS apparaten te krijgen. De eerste manier is om een plugin te gebruiken. De tweede manier is om zelf een afbeelding te maken in de juiste formaten en een paar regeltjes code in je header.php bestand te plaatsen. Deze tweede manier wordt hieronder verder uitgelegd.
Afbeelding uitzoeken en de formaten
Allereerst moet je beginnen met het beslissen wat je als icoon wilt laten zien. Meestal wordt er gekozen voor het logo van de website, maar je kunt alles gebruiken wat je zelf wilt.
Vervolgens moet je de gekozen afbeelding in een aantal formaten opslaan (in pixels):
- 57×57 (iPod Touch / iPhone zonder retina scherm)
- 72×72 (iPad zonder retina scherm)
- 114×114 (iPod Touch / iPhone met retina scherm)
- 144×144 (iPad met retina scherm)
Sinds de komst van iOS7 zijn de afbeeldingsformaten gedeeltelijk veranderd. Het is dus beter om de volgende formaten aan te houden (in pixels):
- 60×60 (iPod Touch / iPhone zonder retina scherm)
- 76×76 (iPad zonder retina scherm)
- 120×120 (iPod Touch / iPhone met retina scherm)
- 152×152 (iPad met retina scherm)
Let op: zorg ervoor dat je de afbeeldingen als .PNG bestand opslaat. Vervolgens kun je de afbeeldingen naar je website uploaden via FTP. Hierbij kan je zelf uitmaken waar je ze neerzet (bijvoorbeeld wp-content/uploads), zolang je maar onthoudt waar ze staan: dit heb je namelijk later nog nodig.
Code toevoegen aan je website
Nu je de afbeeldingen hebt gemaakt, hoef je alleen nog wat code aan je website toe te voegen. Hiervoor moet je het header.php bestand van je thema aanpassen (of liever een kindthema maken en het daarin aanpassen). Je kunt dit bestand aanpassen onder “Weergave > Bewerker” of door het te downloaden via FTP en een tekst editor te gebruiken.
Wanneer je het header.php bestand hebt geopend, moet je hieraan de volgende regels code toevoegen na de <head> tag (vervang de href link door het pad naar je afbeelding):
<!—iPod Touch / iPhone (60x60)--> <link rel="apple-touch-icon" href="http://www.jesite.nl/pad/naar/afbeelding.png"> <!-- iPad --> <link rel="apple-touch-icon" sizes="76x76" href="http://www.jesite.nl/pad/naar/afbeelding.png"> <!—iPod Touch / iPhone (retina) --> <link rel="apple-touch-icon" sizes="120x120" href="http://www.jesite.nl/pad/naar/afbeelding.png"> <!—iPad (retina) --> <link rel="apple-touch-icon" sizes="152x152" href="http://www.jesite.nl/pad/naar/afbeelding.png">
Nog even een korte uitleg wat de code inhoudt:
Apple-touch-icon is de manier waarop duidelijk gemaakt wordt aan de iOS apparaten dat ze dit icoon moeten gebruiken als afbeelding in plaats van de standaard webpagina. Eerst werd er vaak gebruik gemaakt van apple-touch-icon-precomposed, maar dit is sinds iOS7 niet meer nodig. De functie van dit extra woord was om ervoor te zorgen dat het iOS apparaat geen extra effecten over je icoon zou halen (behalve het afronden van de hoeken).
Sizes geeft aan welk formaat de afbeelding is. Hiervan maakt het iOS apparaat gebruiken om na te gaan welke afbeelding het beste is voor gebruik. Indien er geen afbeelding wordt gevonden van het juiste formaat (bijvoorbeeld een iPad die 76×76 nodig heeft), wordt het eerstvolgende grotere formaat gebruikt. Om deze reden is het beter om de nieuwe iOS7 formaten te gebruiken, want als bijvoorbeeld het 72×72 icoon niet gevonden wordt, wordt er automatisch over gegaan op 76×76 (wat op het oog geen verschil zal opleveren). Indien er geen sizes wordt gebruikt, gaat het apparaat er vanuit dat er 60×60 mee wordt bedoeld. Om deze reden maakt de eerste regel dus geen gebruik van sizes.
Href geeft de locatie van de afbeelding aan. Hierbij dien je de volledige URL naar de afbeelding te gebruiken zoals in het voorbeeld.
Nadat je de wijzigingen in het header.php bestand hebt opgeslagen (en weer hebt geüpload naar je website indien je het via FTP hebt gedaan) ben je klaar. Vanaf nu zal er op iOS apparaten die jouw website op het beginscherm zetten, de door jou ingestelde afbeelding worden getoond.
Michel Kraaijeveld
Michel Kraaijeveld is oprichter van WPsitemaken. Hij is ervan overtuigd dat het voor iedereen mogelijk moet zijn om een eigen website te maken, zonder lastige handleidingen door te hoeven nemen. Zelf is hij al 6 jaar actief met WordPress en probeert zijn kennis op een simpele manier over te brengen aan anderen.
Laat een reactie achter