Detectar usuarios con iPhone de forma nativa en WordPress

Ayuda WordPress iPhone

Aunque hay algunos plugins, y temas, que sirven para ofrecer una versión móvil de tu sitio WordPress a usuarios de dispositivos móviles como iPhone igual tiene sentido usar una variable nativa que ya existe en WordPress para detectar este tipo de cacharritos y así prescindir de ayudas externas ¿sabías que existía esta función?, pues existe.

Así que, si te animas, es bastante fácil, solo tienes que hacer dos pasos: crear la función y añadir un poco de CSS para que se vea distinto (es lo menos ¿no?).

Vamos a ver como sería … 

1. Crear la función

Asegúrate, eso si, de que pegas la función antes del cierre de la etiqueta . Por defecto, por ejemplo, el tema TwentyEleven usa la función body_class(); en la cabecera del fichero header.php para añadir clases de manera dinámica a la etiqueta < body >, pero cada tema es distinto.

Por ejemplo, si estás viendo una página en WordPress, es un ejemplo de una clase para el cuerpo de una página o entrada sencilla, lo que te permite cambiar el estilo de ciertos elementos de tu diseño de manera dinámica usando CSS. Si tu tema no usa la etiqueta body_class(); inclúyela de este modo:

WordPress dispone de variables globales que pueden usarse para detectar navegadores, como la que aquí estamos tratando, la variable $is_iphone. Esta variable está incluida en el fichero vars.php de la instalación de WordPress, en estas líneas:

Vamos a usar esta variable junto con la clase ‘body’. Para hacerlo primero escribimos esta función:

Ya tenemos hecha la función. Lo primero que hace es darle un nombre, en este caso ‘detectar_iphone’, para poder reconocerla entre el resto de funciones. Luego se le añade la variable ‘global’, nuestra ya querida $is_iphone, esto se hace así porque la variable está definida fuera de nuestra función. A continuación le decimos a WordPress que si se produce esa condición (que hay un iPhone navegando por nuestro sitio) añadamos ‘iphone’ a nuestra clase ‘body’. Una vez lo tenemos ya podemos pegar este código de arriba antes de < / head > en nuestro tema activo, normalmente en el archivo header.php, como he comentado antes.

2. Un poco de CSS

Como ya hems creado la función ya solo nos queda crear un CSS específico para esa clase ‘iphone’ a la que llamamos. En la misma podemos añadir muchos elementos de estilo, como por ejemplo una etiqueta h1 distinta, algo así:

Por ejemplo, donde tengamos la clase h1 de nuestra hoja de estilos (habitualmente en el fichero style.css de nuestro tema activo) le vamos añadiendo la clase ‘iphone’ que adapte el diseño al dispositivo:

Y así sucesivamente, hasta que ofrezcas una versión para iPhone totalmente a tu gusto.

¿Que no te animas?, pues puedes recurrir a plugins como mobble que añade más variables o WpTouch que lo hace todo el solito.

Si te gusta este contenido prueba tambien a suscribirte al canal en YouTube.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
FlojitoNo está malEstá bienMe ha servidoFantástico (Ninguna valoración todavía)
Cargando…

Al dejar una valoración se recopila la IP para evitar fraudes

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Compartir
Ir al contenido