WordPress, temas para móviles y WP-Cache

Autor: Armonth | El lunes 24 de septiembre del 2007 @ 00:35.

Hablando con Javi Vicente me ha preguntado si sigue siendo incompatible WP-PDA con WP-Cache. Aprovechando la coyuntura y el creciente interés por las webs en versión móvil (aunque algunas personas me han dicho que el Adsense para móviles directamente no les funciona, yo de momento lo voy a usar) vamos a tratar el tema.

Lo primero que toca aclarar es que es lo más natural del mundo que un sistema de cache sea incompatible con la generación de contenidos dinámicos. Por ello, si queremos hacer una versión móvil de nuestro sitio y al mismo tiempo tener contenido cacheado tenemos que tener unos requisitos a cumplir:

  • Tener en cuenta lo anteriormente dicho.
  • Contenido en XHTML.
  • Aprovecharnos de la separación de contenidos (XHTML) y presentación (CSS).
  • Un poco de conocimientos de PHP.

Existen plugins como WP-PDA para PDAs y iWPhone para el iPhone que lo que hacen es detectar el agente de usuario y cambiar la plantilla al vuelo.

Se me ocurren, de entrada, dos soluciones al problema:

  1. Detectar el User-Agent y cargar la plantilla personalizada (por ejemplo combinando con ThemeSwitcher).
  2. Cargar contenido según el User-Agent.

Detectar User-Agent y cargar la plantilla personalizada

La primera opción sería activar el ThemeSwitcher y poner un trozo de código que se cargará dinámicamente en WP-Cache mediante mclude/mfunc. Si el User Agent coincide, a la URL actual se le añade al final de la URL ?wptheme=X donde X el nombre del tema.

Pero creo que esto se puede hacer mucho más sencillo mediante htaccess, no estoy seguro del todo de si es 100% efectivo pero por ejemplo con: 

RewriteCond %{HTTP_USER_AGENT} iPhone [OR]   
RewriteCond %{HTTP_USER_AGENT} iPod [OR]   
RewriteRule ^(.*)$ $1?wptheme=iphone [R=300,L]

Debería funcionar. Advierto que esto nunca lo he hecho y el código lo digo de memoria. De todas maneras esto nos soluciona muchos problemas:

  • No depende de WordPress, WP-Cache ni de nada.

  • Detecta el user-agent y si contiene iPod/iPhone añade al final de la URL ?wptheme=iphone para que cargue la plantilla "iPhone" por lo que solamente tenemos que tenerla preparada en wp-content/themes/iphone.

  • Se usa el código HTTP 300 ya que en teoría sirve para ofrecer múltiples opciones.

  • Se puede mejorar haciendo que Google no cachee URLs con ese parámetro (incluso podríamos cambiar la URL a algo tipo /theme/iphone para poder añadirla al robots.txt).

Aunque tiene el problema de que, seguramente, se guarden en cache varias copias distintas de cada página.

Cargar contenido según el User-Agent

La segunda opción es mucho más sencilla y se trata de hacer un tema un poco más complejo de lo habitual, por ejemplo cargar plantillas CSS distintas para cada dispositivo y contenido distinto, todo ello usando mclude/mfunc de WP-Cache, en el fichero header.php cambiamos la línea que carga el CSS por: 

<!--mclude header-css-switcher.php-->
<?php include_once(ABSPATH . 'header-css-switcher.php'); ?>
<!--/mclude-->`

Creamos el fichero header-css-switcher.php y ya podemos empezar a jugar: 

if (preg_match('iPod|iPhone/', $_SERVER['HTTP_USER_AGENT']) ) {   
  print '<link rel="stylesheet" href="<?php bloginfo('template_directory')?>/style-iphone.css" type="text/css" media="handheld" />';   
} elseif (preg_match('Palm|PalmOS|Nokia/',$_SERVER['HTTP_USER_AGENT']) ) { 
  print '<link rel="stylesheet" href="<?php bloginfo('template_directory')?>/style-pda.css" type="text/css" media="handheld" />';
} else {
  print '<link rel="stylesheet" href="<?php bloginfo('template_directory')?>/style.css" type="text/css" media="screen" />';
} ?>

En éste caso, si el User-Agent contiene iPod/iPhone cargará la plantilla style-iphone.css, dado que usa de base Safari seguramente incluso puede ser la misma que el style.css normal. Si detecta Palm/PalmOS/Nokia cargará un style-pda.css y si no coincide nada cargará el style.css normal.

En el plugin WP-PDA tenemos un montón de "User Agent" distintos para varios PDA que podemos tener en cuenta:

  • 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, BlackBerry, MOT-V, portalmmm, Nokia, DoCoMo, Opera Mini, Palm, Handspring, Nokia, Kyocera, Samsung, Motorola, Mot, Smartphone, Blackberry, WAP, Playstation Portable, LG, MMP, OPWV, Symbian, EPOC.

Teniendo en cuenta eso, podemos adaptar cualquier tema y por ejemplo a los PDA/móviles cambiarles el the_content() del index.php (mostrar todo el contenido en portada) por un the_excerpt() para mostrar sólo un extracto.

La primera solución tiene la ventaja de que separa las distintas plantillas y no deja engorroso el código y es ideal para hacer plantillas muy distintas aunque seguramente no funcionará ad-hoc con sistemas de cache. La segunda puede ser más sencilla para cambiar pequeñas líneas de código.

Comentarios