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 …
Índice de contenidos
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:
<body <?php body_class(); ?>>
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:
if ( $is_safari && stripos($_SERVER['HTTP_USER_AGENT'], 'mobile') !== false ) $is_iphone = true;
Vamos a usar esta variable junto con la clase ‘body’. Para hacerlo primero escribimos esta función:
<?php
function detectar_iphone($iphone) {
global $is_iphone;
if($is_iphone) $iphone[] = 'iphone';
return $iphone;
}
add_filter('body_class','detectar_iphone');
?>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:
h1 {
font-size: 30px;
line-height: 110%;
text-decoration: underline;
}
.iphone h1 {
font-size: 35px;
text-decoration: none;
color: #FF0000;
}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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
