Cómo sabreis, los dispositivos de Apple nos permiten guardar un «acceso directo» a nuestras páginas web favoritas en su escritorio cómo si de una aplicación más se tratara.
El icono de dicho acceso se compone de una captura de la página web en si, pero Apple nos da la posibilidad de definir una imagen personalizada
Creación del icono
Primero de todo vamos a crear la imagen que vamos a utilizar de icono, para hacerlo, si teneis Photoshop os recomiendo la plantilla de PixelResort, es muy completa y te genera el icono en todos los tamaños necesarios (llegaremos a eso más tarde).
Aquí os dejo el que voy a utilizar yo:
Configuración básica
Para añadir el icono a nuestro WordPress tenemos que añadir el siguiente código a la theme de nuestro functions.php
function ios_app_icon() { ?> <!-- Apple Devices Icons --> <link href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon.png" rel="apple-touch-icon" /> <!-- END Apple Devices Icons --> } add_action('wp_head','ios_app_icon');
¿Fácil no? Hemos añadido el link a nuestro icono (que se encuentra dentro de la carpeta de imágenes de nuestra theme) en la cabecera de nuestro sitio web.
Mejorando lo básico
Con el código de aquí arriba ya nos basta, pero Apple dispone de varios dispositivos en el mercado y por lo tanto resoluciones distintas, así que si queremos que nuestro icono se vea optimamente en todos ellos lo ideal seria generar 4 imágenes diferentes (Una para cada resolución).
Ahora mismo contemplamos 4 tamaños (57×57, 72×72, 114×114, 144×144) y el nuevo código seria cómo sigue:
function ios_app_icon() { ?> <!-- Apple Devices Icons --> <link href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon.png" rel="apple-touch-icon" /> <link href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x72.png" rel="apple-touch-icon" sizes="72x72" /> <link href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x114.png" rel="apple-touch-icon" sizes="114x114" /> <link href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x144.png" rel="apple-touch-icon" sizes="144x144" /> <!-- END Apple Devices Icons --> } add_action('wp_head','ios_app_icon');
En este caso hemos generado 4 links a las 4 imagenes definiendo cual es la que utilizar según el tamaño.
Podeis hacer la prueba, si guardais esta página en el escritorio de vuestro dispositivo iOS os quedará algo parecido a esto:
Precomposed?
Si os fijais, Apple le añade un efecto de brillo encima de nuestro icono, que en algunos casos pueda quedar bien pero si lo preferimos sin hay que añadir la opción «precomposed», el código seria exactamente el mismo, solo añadiendo esto:
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x72.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x114.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x144.png" />
Cómo podeis ver el brillo ya no aparece, ahora el icono es tal y cómo nosotro lo hemos creado
Eso es todo por hoy, espero que os haya sido de utilidad ¡Hasta la próxima!
3 comentarios en “Añadir el icono de aplicación de iOS a tu sitio web en WordPress”
orietta bock
18 mayo 2013 el 12:23Buen articulo, coloco el código en functions.php pero no me funciona, donde debe ir colocado exactamente para no romper nada?
Gracias
orietta bock
18 mayo 2013 el 12:24Buen articulo, coloco el código en functions.php pero no me funciona, donde debe ir colocado exactamente para no romper nada?
Gracias
Pol
21 mayo 2013 el 22:57Hola Orietta, puedes poner este código en cualquier parte de tu functions.php, asegurate que tu theme tenga dentro de su header.php el código , sinó esté código no funcionara, ya me dirás si te funciona 🙂