Hoy en AyudaWordPress.com

Detectar usuarios con iPhone de forma nativa en WordPress

Posted: 07 Aug 2011 03:15 PM PDT

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:

Clic para ver Texto Plano

PHP:

<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:

Clic para ver Texto Plano

PHP:

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:

Clic para ver Texto Plano

PHP:

<?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:

Clic para ver Texto Plano

CSS:

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.

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía para Administrar WordPress

M-shots en WordPress alojado

Posted: 07 Aug 2011 08:34 AM PDT

Hace mucho tiempo, te guste o no, existe en WordPress.com el servicio conocido como Snap Shots, facilitado por 'mshots', mediante el cual, si está activo, puedes ver una captura emergente de una web sobre su enlace ¿a que te suena?.

Pues bien, puedes usar este servicio también en tu WordPress alojado de dos maneras, mediante un código que aprovecha el 'mshots' alojado en WordPress.com, para que no tengas que instalarlo tu mismo y, si lo prefieres, mediante un sencillo plugin.

Vamos a ver las dos maneras de hacerlo …

1. Plugin

Bien sencillo, solo tienes que instalar el plugin Snap Shots para WordPress.org, activarlo y ya podrán ver tus visitantes capturas emergentes de las URLs enlazadas en tus entradas. El resultado es fácil e inmediato.

Solo hay un paso previo, registrarte y obtener un código en la web de Snap Shots

2. Código

El otro modo, más personalizable por supuesto, pasa por añadir un código al fichero functions.php de tu tema activo y luego activar - a voluntad - las capturas (o no) de las URLs que enlaces en tus entradas. Como puedes ya vislumbrar aquí tienes mucho más control sobre el contenido que en la opción de plugin.

Lo primero es añadir este código al fichero functions.php:

Clic para ver Texto Plano

PHP:

function aw_snap($atts, $content = null) {
extract(shortcode_atts(array(
"captura" => 'http://s.wordpress.com/mshots/v1/', //usamos el servicio ya instalado en wordpress.com
"url" => 'http://ayudawordpress.com', //url por defecto de las capturas si no modificamos el shortcode
"alt" => 'Mi sitio',
"w" => '400', // ancho
"h" => '300' // alto
), $atts));
$img = '<img src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '"/>';
return $img;
}
add_shortcode("snap", "aw_snap");

Con esta función creamos el 'shortcode' que podrás usar en tus entradas y, en caso contrario, hará capturas por defecto de tu propia URL, en este caso a ayudawordpress.com. También definimos una altura y ancho de la captura por defecto, que podemos modificar en cada shortcode si lo deseamos.

Por ejemplo, si en una entrada introducimos esto …

[captura url="http://ayudawordpress.com/servicios/" alt="Servicios Ayuda WordPress" w="300" h="200"]

Lo que hacemos es introducir una captura de la página de servicios de Ayuda WordPress con un ancho de 300px y un alto de 200px, con lo que modificamos los parámetros por defecto.

Fácil ¿no?

Bueno, pues tu eliges el método, si es que te gusta esto de los "snap shots", a mi personalmente me horroriza.

AYUDA WORDPRESS

domingo, 7 de agosto de 2011