Este es un tutorial para que nuestro blog de Wordpress se pueda leer perfectamente desde nuestro Iphone. Cuando terminemos tendremos una versión de nuestro theme adaptada al Iphone/Itouch que sólo se verá cuando accedan desde el teléfono, manteniendo el diseño original de nuestro blog.
El merito de todo esto está en el plugin llamado WPTouch. Simplemente con instalarlo ya tendremos un diseño bonito y elegante en nuestro Iphone/Itouch. De todas formas hay que hacer un par de pasos más para dejarlo a nuestro gusto.
Instalación del Plugin:
Para instalar el Plugin basta con descargarse el archivo de aquí. Descomprimirlo en una carpeta en nuestro disco duro y subirlo a la carpeta ‘wp-content/plugins’ en tu servidor.
Debe quedar así: «wp-content/plugins/wptouch/».
Luego hay que ir a la página de administrador de Plugins y activarlo. Y listo. Ya funciona. Pero conviene configurarlo un poco.
Boton de cambio de Tema
Hay que añadir una línea de código a nuestro tema actual. Esta línea de código sólo sirve para que cuando alguien visita nuestro blog desde un Iphone/Itouch y pulsa en el botón de ver el Theme Original pueda volver al tema de Iphone. Vamos, que crea un botón en nuestro tema actual que sólo se ve desde el Iphone.
Debes incluir esto en algún lugar de tu tema actual. Yo lo he puesto justo antes del <?php get_footer();?> dentro de mi archivo index.php quedando así.
<?php if (function_exists(‘wptouch_switch’)) wptouch_switch(‘<h2>’, ‘</h2>’); ?>
<?php get_footer(); ?>
Iconos personalizados
En la parte de arriba sale un listado con todos los iconos que puedes utilizar. Puedes crear nuevos usando el template de photoshop que viene con el plugin. Lo encontraras en la carpeta «wp-content/plugins/wptouch/images/icon-pool/template.psd». En un minuto puedes tener tu propio icono para el Iphone. Es recomendable guardarlo como PNG y manteniendo el tamaño de 60×60 pixeles. Una vez creado el logo.png puedes subirlo a la carpeta «wp-content/plugins/wptouch/images/icon-pool/» y aparecerá en las opciones de administrador del plugin.
Menú del Iphone
En el siguiente apartado podemos seleccionar qué páginas queremos que aparezcan en el maravilloso menú desplegable del Iphone. Es tan sencillo como seleccionar las páginas de nuestro blog y elegir el icono para cada una de ellas.
Si creamos una página llamada «Links», «Photos» o «Archives», podremos disfrutar de tres páginas predefinidas en formato Iphone para los enlaces, las fotos del módulo «FlickrRSS» y una Nube de Tags y archivos mensuales del contenido.
Nota: Lo importante es que el permalink de la página apunte a «/links», a «/archives» o a «/photos», el nombre de la página podemos ponerlo en español para que en el menú principal aparezca con ese nombre (Fotos en lugar de Photos).
El problema que me ha surgido es el siguiente. Al crear esas páginas vacías y publicadas, me aparecían sin contenido en mi menú principal. Puesto que sólo tengo 3 enlaces en el menú principal, y no deseo tener ninguno más por el momento, he editado el header.php del theme de mi blog para desactivar la generación automática de enlaces y he puesto a mano los tres que yo uso, El otro Blog, Contacto y Mapa del Blog.
En mi caso, en el theme que yo utilizo (y supongo que en la mayoría) hay que comentar la línea:
<?php $pages = wp_list_pages(‘exclude=1423&sort_column=menu_order&depth=1&title_li=&echo=0’); $pages = preg_replace(‘/(<a[^>]*>)/’,’$1<span>’,$pages); $pages = str_replace(‘<li ‘, ‘<div ‘, $pages); $pages = str_replace(‘</a>’, ‘</span></a>’, $pages); $pages = str_replace(‘</li>’, ‘</div>’, $pages); echo $pages; ?>
Y añadir los enlaces a páginas fijas con este codigo justo antes del anterior:
<div class=»page_item <?php if(is_home()){echo ‘current_page_item’;}?>»><a title=»Nombre de la pagina» href=»<?php bloginfo(‘siteurl’); ?>/direccion_de_la_pagina»><span>Nombre del menu</span></a></div>
Aparecera un «Nombre del Menu» en el Menu principal apuntando a la url «http://miblog.com/direccion_de_la_pagina».
El problema de este método es que si decidimos modificar la dirección de la página tendremos que editar a mano nuevamente el archivo header.php para que el menú siga funcionando.
Una vez hecho esto, ya podemos añadir todas las páginas necesarias a nuestro Blog sin temor a que aparezcan en nuestro menú principal.
Modificar el menu principal del Iphone/Itouch
Os habréis fijado que en el menú principal de nuestro Iphone/Itouch aparecen dos enlaces que no hemos creado. Uno de ellos es el enlace a los Feeds, con el icono correspondiente, y el otro es un enlace directo a nuestra dirección de Email.
Pues bien, si queréis editar estos enlaces, o crear algún otro para que aparezca en el menú principal solo hay que modificar un pequeño archivo llamado header.php (os suena?) que se encuentra en la carpeta «wp-content/plugins/wptouch/themes/default/».
Lo abrimos con un editor de texto y buscamos las líneas:
<li><a href=»<?php bloginfo(‘rss2_url’); ?>»><img src=»<?php
bloginfo(‘url’);
?>/wp-content/plugins/wptouch/images/icon-pool/RSS.png» alt=»» />RSS Feed</a></li>
<li class=»noborder»><a href=»mailto:<?php
bloginfo(‘admin_email’);
?>»><img src=»<?php
bloginfo(‘url’);
?>/wp-content/plugins/wptouch/images/icon-pool/Mail.png» alt=»» />E-Mail</a></li>
Cada una de estas dos líneas son los enlaces que hemos comentado antes. Podemos borrarlas, modificarlas, o crear otras similares con los enlaces que nosotros deseemos.
NOTA: Para crear un enlace a una página de nuestro blog debemos modificar bloginfo(‘rss2_url’) -> para convertirlo en bloginfo(‘siteurl’).
Previsualizar el Theme
Para poder ver como quedaría nuestro blog en un iphone si no tenemos uno a mano, o simplemente para comprobar los cambios que estamos realizando podemos usar el Iphoney si tenemos un Mac, que no es mi caso, o podemos usar el navegador K-meleon (que por cierto cada vez me gusta más).
Es el navegador más rápido que existe en estos momentos en Windows, o eso dicen… Para usarlo, sólo tenéis que descargaros el instalador o el archivo comprimido 7z. Instalarlo (si alguien no sabe no creo que haya llegado a este punto del tutorial) y abrirlo.
Una vez abierto nos vamos a Tools->User Agent->Custom (En español: Herramientas->Identidad del Navegador->Personalizar), y en el cuadro de texto que no sale escribimos lo siguiente:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
Navegamos a vuestro blog y podréis comprobar lo bonito que se vería en el Iphone. Aviso: Muchos de los botones y menus no se verán correctamente en el K-Meleon, pero es normal, esto sólo sirve para probarlo.
Crear un acceso directo a nuestro Blog desde el Iphone
Para rematar la faena vamos a crear un boton de acceso directo desde nuestro panel de control del Iphone/Itouch. Esto es muy sencillo y solo hace falta que nuestro Iphone/Itouch tengan la versión 1.1.3 o la 1.1.4. Simplemente navegamos hasta la Url de nuestro blog, y pulsando en el boton + nos aparece la opción «Add to Home Screen» y listo!
Excelente trabajo de investigación. Debo confesar que me ha gustado tanto al verlo que he corrido a instalármelo en mi blog, ya que soy un fanático del iPhone. Her de decir que me ha resultado muy sencillo siguiendo estas instrucciones. ¡Enhorabuena y gracias!
Genial. lo he probado en mi blog y va estupendo gracias por el tuto