Como ya mencionamos en una entrada anterior, nosotros estuvimos buscando una opción con la cual pudiéramos mostrar 3 plantillas (themes) diferentes en nuestra instalación de Wordpress, 2 versiones para móviles y la «normal» del sitio
Nosotros usamos de base el plugin WPtouch, que es el que provee la versión para el iPhone, y sobre este hicimos que tuviera una plantilla «adicional». En la función detectAppleMobile del archivo wptouch.php:
- Hay un primer ciclo encargado de detectar los «agentes móviles» que deseamos usen la versión para el iPhone.
- Si no es uno de estos hay un segundo ciclo que intentará ver si es otro agente al cual hay que mostrar la versión más sencilla para móviles, como Opera Mini, IE Mobile y otros navegadores
rarosmenos populares - Si ninguno de los ciclo encontró un «agente móvil», entonces se asume que es un cliente de escritorio al que hay que mostrar la plantilla «normal» del sitio, la plantilla que ustedes ya conocen desde el rediseño del sitio
En código, dicha función quedará así:
function detectAppleMobile($query = '') {
$container = $_SERVER['HTTP_USER_AGENT'];
$useragents = array("iphone", "ipod", "aspen", "dream", 'android');
$this->applemobile = false;
foreach ($useragents as $useragent) {
if (eregi($useragent, $container)) {
$this->applemobile = true;
$this->is_iphone = true;
}
}
// if not iphone
if ( !$this->applemobile ) {
$browserAgents = "Elaine/3.0, Palm, EudoraWeb, Blazer, AvantGo, Windows CE, Cellphone, Small, MMEF20, Danger, hiptop, Proxinet, ProxiNet, Newt, PalmOS, NetFront, SHARP-TQ-GX10, SonyEricsson, SymbianOS, UP.Browser, UP.Link, TS21i-10, MOT-V, portalmmm, DoCoMo, Opera Mini, Palm, Handspring, Nokia, Kyocera, Samsung, Motorola, Mot, Smartphone, Blackberry, WAP, SonyEricsson, PlayStation Portable, LG, MMP,OPWV, Symbian, EPOC";
$browserAgents = explode(',',$browserAgents);
if(!empty($browserAgents)){
foreach ($browserAgents as $key => $value){
$browserAgents[$key] = trim($value);
}
}
foreach ( $browserAgents as $userAgent ) {
if(eregi($userAgent,$container)){
$this->applemobile = true;
$this->is_iphone = false;
//return;
}
}
} //if ( !$this->applemobile )
$this->bnc_filter_iphone();
}
Una vez ejecutado esto, ya solo tenemos que ver el valor de $this->applemobile para saber si es un «agente móvil» y $this->is_iphone para saber si le vamos a mostrar la versión para el iphone o no.
Luego de esto, tomamos nuestra plantilla basada sobre MobilePress y la llevamos hacia el directorio de plantillas del WPtouch (si el plugin ya tiene esto): /wp-content/plugins/wptouch/themes/. Hecho esto ya solo tenemos que especificarle a WordPress el directorio de la plantilla que deseamos usar:
function get_stylesheet($stylesheet) {
if ($this->applemobile && $this->desired_view == 'mobile') {
if ( $this->is_iphone )
return 'default'; // './wptouch/themes/default'
else
return 'pda'; // './wptouch/themes/pda'
} else {
return $stylesheet;
}
}
function get_template($template) {
$this->bnc_filter_iphone();
if ($this->applemobile && $this->desired_view === 'mobile') {
if ( $this->is_iphone )
return 'default'; // './wptouch/themes/default'
else
return 'pda'; // './wptouch/themes/pda'
} else {
return $template;
}
}
El cambio de plantilla solo se hace si $this->applemobile tiene el valor true, de lo contrario se usará la que esté configurada desde WordPress.
Con estas modificaciones a estas 3 funciones en wptouch.php ya deberíamos tener funcionando las diferentes plantillas según el agente desde el cual nos visitan.
Compatibilidad con WP-Cache
Para los que usamos WP-Cache nos encontramos con el problema de que usar diferentes plantillas dinámicamente no funciona correctamente con el caché activo, hará que la página se guarde de acuerdo al visitante con el cual se generado; los siguientes visitantes verán la misma versión que el primero.
A pesar de que el autor de WPtouch ofrece una versión modificada de WP-Cache que debería corregir esto, no funciona. Si una página ya está guardada en caché con la versión «normal», todos verán esta versión sin importar que agente usen.
Nosotros decidimos modificar WP-Cache para que detecte que agente se está usando y decida se mostrará o no la página en cache, una modificación a wp-cache-phase1.php resuelve esto:
global $cache_rejected_user_agent;
if ( function_exists('apache_request_headers') ) {
$headers = apache_request_headers();
if ( isset($headers["User-Agent"]) ) {
foreach ($cache_rejected_user_agent as $expr) {
if ( strlen($expr) > 0 && stristr($headers["User-Agent"], $expr))
return; // sale por completo de wp-cache
}
}
}
$cache_rejected_user_agent (definido en wp-cache-config.php) es un array con los nombres de los agentes móviles que deseamos no vean ninguna página en caché, y pase el control hacia WordPress. Como nuestro tráfico desde estos agentes es muy poco, no representa mayor esfuerzo para el servidor. El día que dicho trafico nos genere problemas, la mejor opción será especificar un directorio diferente para cada plantilla que usemos (controlado por $cache_path).
Bonus: Usar un dominio diferente al principal
Si han entrado a maestrosdelweb.com desde un móvil, verán que son redirigidos hacia maestrosdelweb.mobi, lo hicimos para darle algo de movimiento a dicho dominio y cumplir el propósito del TLD.
El primer paso es indicarle a WordPress (en el wp-config.php) que use un dominio diferente al configurado en la base de datos, según la petición:
if ( $_SERVER['HTTP_HOST'] == 'maestrosdelweb.mobi' || $_SERVER['HTTP_HOST'] == 'www.maestrosdelweb.mobi' ) {
define('WP_HOME', 'http://maestrosdelweb.mobi');
define('WP_SITEURL', 'http://maestrosdelweb.mobi');
}
(más detalles sobre estas variables en el Codex de WordPress)
Hecho eso, agregamos a la función detectAppleMobile() de wptouch.php otra condición para redirigir los móviles hacia el dominio .mobi:
if ( ($_SERVER['HTTP_HOST'] == 'maestrosdelweb.com' || $_SERVER['HTTP_HOST'] == 'www.maestrosdelweb.com') && $this->applemobile) {
header('Location: http://maestrosdelweb.mobi'.$_SERVER['REQUEST_URI'] );
die;
}
Obviamente ya debimos haber detectado si es un agente móvil o no, con los ciclos mencionados al inicio de este post. Por último necesitamos redirigir cualquiera que esté entrando al dominio .mobi y que no sea desde uno de los agentes móviles. Esto lo hacemos en wp-cache-phase1.php justo después del ciclo mencionando anteriormente para wp-cache:
if ( ($_SERVER['HTTP_HOST'] == 'maestrosdelweb.mobi' || $_SERVER['HTTP_HOST'] == 'www.maestrosdelweb.mobi') ) {
header('Location: http://www.maestrosdelweb.com'.$_SERVER['REQUEST_URI'],true,301);
die;
}
Y con esto nuestro hack para el cambio de dominio estará listo.
Nos gustaría compartirles la versión final del plugin, ya combinada con MobilePress, pero dado que hicimos algunas personalizaciones a medida y es complicado mantener actualizaciones dependiendo de un tercero; preferimos contarles la historia completa de como reproducir ese cambio. A lo mejor alguien se anima a mantener dicha mezcla de plugins 😉
Muy interesante
Pienso que MDW debería tener algún sitio tipo LABS donde compartir las ideas de laboratorio, como ésta, que seguro muchos podremos disfrutar de ellas.
Se podria crear un repositorio o algún catalogo en dónde MDW pone la piedra y los usuarios contruyen la montaña. Como el caso de éste plugin o conjunto de plugins.
Un saludo
Primero que todo quiero felicitarlos por lo maravilloso sitio que tienen encuentro que tiene muy buena informacion y ademas una muy linda imagen visual (theme), bien ahora con respecto a la implementacion para dispositivos moviles me quede con una dudas que me gustaria que si me la pudieran solucionar:
al tener dos dominios uno web y otro para dispositivos moviles quiere decir que tienen 2 blog o uno solo?
Y ademas quisiera hacerles una peticion podrian crear un buen tutorial paralos que estamos empezando con wordpress para crear theme desde cero, por que he encontrado en internet un monton de comentarios en foros supuestos manuales y tutoriales pero nada es concreto y facil de entender la idea es que sea apto para cualquiera.
Saludos cordiales
Felipe Navarrete
Bien por la implementación.
Saludos.
P.S.: No uses eregi() para saber si una cadena está contenida en otra, mejor usa strpos().
Gracias por el tutorial! Me he animado y lo he implementado en mi blog. Lo he probado con el plugin user agent changer a falta de tener un iphone. Espero que funcione correctamente con la caché. Ahora lo único es vigilar al actualizar el wp-touch. Un saludo!
Hola, tengo una web para pc, y quiero hacer una para movil, para esto tengo dos tres plantillas, una para PC, otra para Iphone y otra para blackberry, como hago para crear un index,php que al acceder a ese direccione a la plantilla o url /./ dependiendo del disposito ya sea iphone, blackberry, y tambien al de PC, gracias
ME SALE ESTE ERROR ME PUEDEN DAR UNA MANO!!!!
Parse error: syntax error, unexpected ‘,’ in C:\xampp\htdocs\wordpress\wp-content\plugins\wptouch\wptouch.php on line 255
Victor, es fácil de adaptarlo para que funcione fuera de wordpress. Create una clase con la función detectAppleMobile. Comenta la última linea que pone $this->bnc_filter_iphone();
Entonces instancias la clase
$detectar = new ClaseDetectar();
$detectar->detectAppleMobile();
Y recupera las variables applemobile y is_iphone. (por ejemplo con una función auxiliar que crees $detectar->getAppleMobile(); )
Entonces dependiendo de estos valores pues aplica la plantilla que quieras. Simplificado sería algo así:
si $applemobile es true –> plantilla mobile
sino si $is_iphone es true –> plantilla iphone
sino –> plantilla normal
Victor, el error te está diciendo que no esperaba una coma en la linea 255. Si quieres te puedo pasar el fichero del wptouch.php que a mi me funciona. Si quieres entra en mi blog y mira si sale la versión mobil.
Un saludo
Excelente, ahora a implementarlo, gracias por la información.
Saludos
Gracias por el tutorial, yo estoy haciendo algo parecido pero con redirección a subdominios, me fije estas técnicas de user agent en algunas Web, quisiera me aconsejen si es buena la idea, otras al poner dominio.mobi (pocas con .mobi) Tb. las redireccionaba al final a m.dominio.com, ósea al final el resultado era dentro del m.dominio.com
1. Si es iphone
m.dominio.com/iphone
2. si es otro modelo
m.dominio.com/mobil
3. ninguno los dos
dominio.com
Muchos los usan así, no se porque no usan el .mobi aun en su mayoría.
Al probar las Web los tres tienen el mismo contenido la diferencia esta en la presentación con el CSS y obviamente en las versiones para celulares su estructura era mas pequeña pero los artículos con el mismo texto en las 3 versiones.
Esto me patina que en cada versión hay una carpeta que guarda la info repetida, ocasionando 3 Web repetidas (duplicado)
Si es confirmado lo que intuyo, mi consulta seria como hacen esas Web para que no las penalicen ya que son contenidos duplicados, no se si será el caos también de ustedes
gracias.