Apple icons toevoegen aan een WordPress website

Probleem:
Bij toeval kwam ik erachter dat mijn website geen ondersteuning had voor Apple icons. Dit zijn de icons die worden gebruikt als een bezoeker jouw website op zijn iPad of iPhone als snelkoppeling toevoegt. Zo kan hij of zij in een later stadium snel terugkeren naar de website.

Een iPad of iPhone verwacht dat de icons in de root van de website staan. Dit is dezelfde map waar ook het “wp-config.php” en “.htaccess” bestand inzitten. Persoonlijk vind ik dit niet de juiste locatie. De themes map is een betere locatie omdat de icons conform de huisstijl van het thema zullen zijn. Hoe ik dat heb gedaan lees je hieronder.

Oplossing:
Stap 1 – Apple icons generen:
Ga naar iconifier.net en upload de afbeelding die je wilt gebruiken voor de icons. Download het ZIP bestand en pak die uit in de volgende map: wp-content/themes/<< jouw thema>>/icons. Maak je gebruik van een gedownload of gekocht thema? Dan plaats je de icons natuurlijk in een child theme.

Stap 2 – Icons toevoegen aan het thema:
Voeg onderstaande code toe aan het functions.php bestand van het thema. Hiermee wordt de juiste locatie van alle verschillende soorten icons opgegeven.

/**
 * Add Apple icons to the <head> section.
 */
function child_add_apple_icons()
{
    echo '<link rel="apple-touch-icon" href="' . get_stylesheet_directory_uri() . '/icons/apple-touch-icon.png" />' . PHP_EOL;
    echo '<link rel="apple-touch-icon" sizes="57x57" href="' . get_stylesheet_directory_uri() . '/icons/apple-touch-icon-57x57.png" />' . PHP_EOL;
    echo '<link rel="apple-touch-icon" sizes="72x72" href="' . get_stylesheet_directory_uri() . '/icons/apple-touch-icon-72x72.png" />' . PHP_EOL;
    echo '<link rel="apple-touch-icon" sizes="76x76" href="' . get_stylesheet_directory_uri() . '/icons/apple-touch-icon-76x76.png" />' . PHP_EOL;
    echo '<link rel="apple-touch-icon" sizes="114x114" href="' . get_stylesheet_directory_uri() . '/icons/apple-touch-icon-114x114.png" />' . PHP_EOL;
    echo '<link rel="apple-touch-icon" sizes="120x120" href="' . get_stylesheet_directory_uri() . '/icons/apple-touch-icon-120x120.png" />' . PHP_EOL;
    echo '<link rel="apple-touch-icon" sizes="144x144" href="' . get_stylesheet_directory_uri() . '/icons/apple-touch-icon-144x144.png" />' . PHP_EOL;
    echo '<link rel="apple-touch-icon" sizes="152x152" href="' . get_stylesheet_directory_uri() . '/icons/apple-touch-icon-152x152.png" />' . PHP_EOL;
    echo '<link rel="apple-touch-icon" sizes="180x180" href="' . get_stylesheet_directory_uri() . '/icons/apple-touch-icon-180x180.png" />' . PHP_EOL;
}
add_action('wp_head', 'child_add_apple_icons');

 

Stap 3 – Voeg RewriteRules toe:
Zoals eerder al besproken worden de icons in de root verwacht. Voeg daarom onderstaande RewriteRules toe aan het “.htaccess” bestand voor “# BEGIN WordPress”.

Vergeet niet om THEMA aan te passen naar de naam van jouw thema. Deze regels zorgen ervoor dat de verzoeken die verwachten dat de icons in de root zitten worden doorgestuurd naar de map uit stap 1.

RewriteEngine on
RewriteRule ^apple-touch-icon.png$ /wp-content/themes/THEMA/icons/apple-touch-icon.png [R=301,L]
RewriteRule ^apple-touch-icon-57x57.png$ /wp-content/themes/THEMA/icons/apple-touch-icon-57x57.png [R=301,L]
RewriteRule ^apple-touch-icon-72x72.png$ /wp-content/themes/THEMA/icons/apple-touch-icon-72x72.png [R=301,L]
RewriteRule ^apple-touch-icon-76x76.png$ /wp-content/themes/THEMA/icons/apple-touch-icon-76x76.png [R=301,L]
RewriteRule ^apple-touch-icon-114x114.png$ /wp-content/themes/THEMA/icons/apple-touch-icon-114x114.png [R=301,L]
RewriteRule ^apple-touch-icon-120x120.png$ /wp-content/themes/THEMA/icons/apple-touch-icon-120x120.png [R=301,L]
RewriteRule ^apple-touch-icon-144x144.png$ /wp-content/themes/THEMA/icons/apple-touch-icon-144x144.png [R=301,L]
RewriteRule ^apple-touch-icon-152x152.png$ /wp-content/themes/THEMA/icons/apple-touch-icon-152x152.png [R=301,L]
RewriteRule ^apple-touch-icon-180x180.png$ /wp-content/themes/THEMA/icons/apple-touch-icon-180x180.png [R=301,L]

Oplossing getest op:
WordPress 5.0.3

Laat een reactie achter

Your email address will not be published. Required fields are marked *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.