Modo “Lector” en WordPress

modo lector safari

Si usas el navegador Safari de Apple ya sabes de lo que te estoy hablando. Me refiero al “modo Lector” de este navegador, un icono que aparece en la barra de navegación y que te permite visualizar la página que estés visitando sin todo lo que sobra (anuncios, cabecera, etc). Solo ves el contenido del artículo, con sus imágenes y demás pero sin resto de elementos de la web.

Pues bien, la buena noticia es que podemos añadir este modo lectura para nuestros lectores aunque no usen el navegador Safari, como una funcionalidad extra en nuestro WordPress, que será muy apreciada por los visitantes.

El proceso no es tan sencillo como instalar un plugin y ya, pero el resultado merece la pena, dando a tu web una funcionalidad muy profesional.

¡Vamos a ello!

1. La solución

Vamos a conseguir añadir el modo lector gracias a un plugin para jQuery llamado Colorbox. Lógicamente, el primer paso es descargarlo del sitio oficial.

La versión actual de Colorbox es la 1.3.19, que funciona con jQuery 1.4.3+ en Firefox, Safari, Chrome, Internet Explorer 6, 7, 8, 9, Opera 11. Si quieres compatibilidad superior con navegadores más viejos puedes usar la versión anterior del plugin, que también está disponible en la web oficial.

2. Instalando Colorbox

Lo primero de todo es descargar la última versión (enlace directo aquí). Una vez descargado el zip lo descomprimes y verás el contenido, este:

carpetas colorbox

Hay varias carpetas de ejemplos, que contienen distintos estilos que puedes usar para el enlace del “modo Lector“. Si quieres decidirte abre cada carpeta de ejemplo y abre el archivo index.html de cada una para ver como se vería el modo lector.

Una vez decidido ya podemos ponernos a subir el plugin a nuestro servidor por FTP. La idea es esta:

  1. Copia el archivo jquery.colorbox-min.js de la carpeta llamada “colorbox” en el directorio ‘/js/‘ de tu tema (si no existe lo creas).
  2. Elige uno de los estilos de ejemplo y copia el archivo colorbox.css en el directorio de tu tema.
  3. En la misma carpeta de ejemplo, copia todos los archivos de la carpeta ‘/images/‘ en el directorio de imágenes de tu tema.

Si por algún motivo prefieres crear una carpeta llamada ‘colorbox‘ en el directorio de tu tema, y poner ahí todos esos archivos, puedes hacerlo, pero en esta guía los pasos están referidos a la estructura de carpetas del tema TwentyEleven.

3. Conectar el script con WordPress

Una vez hecho lo anterior hay que decirle a WordPress, y en concreto a tu tema, donde está Colorbox y como utilizarlo.

Para ello abrimos el fichero functions.php de tu tema (si no existe lo creas) y le añadimos lo siguiente antes del cierre del mismo (antes de la tag de cierre de PHP ‘?>‘):

Gracias a estas líneas de código, el tema sabrá donde está cada archivo de Colorbox y el JavaScript del “modo Lector” que vamos a crear a continuación. Una vez guardados ya estará listo para cargarlos en el sitio (solo en las páginas de entrada sencilla, o “single“).

Te recuerdo, como puedes ver en las rutas utilizadas, que estoy usando la configuración por defecto; poniendo el script en la carpeta /js/.

4. Definimos qué es el contenido

Para que el script sepa que es lo que tiene que mostrar en el “modo Lector” es conveniente marcarlo claramente. Para ello haremos una división alrededor del contenido con un div.

Me dirás que ya suele estar “rodeado” el “content” con un “div” pero es mejor crearlo “ex profeso” para tenerlo controlado y bien especificado.

Para ello, vamos de nuevo al archivo functions.php de tu tema y le añadimos esto otro:

Este filtro se ejecutará cada vez que tu tema muestre el contenido de una entrada. Si el usuario está en una página de entrada sencilla el código envuelve el contenido con un div y la clase .rm-content a su alrededor.

5. Creamos el enlace para el “modo Lector”

Una vez tenemos toda la infraestructura creada ya estás listo para poner un enlace al “modo Lector“.

Para ello vamos al directorio /js/ del tema y creamos un nuevo archivo al que llamaremos ‘aw-reading-mode.js (si te fijas en el primer código ya preparamos la “llamada” a este archivo.

Pues nada, creado el archivo pegamos este código en el mismo:

Repasando un poco el código, verás que en la línea 4 establecemos el selector para el elemento que envuelve la entrada (en realidad no es necesario si usas el filtro del paso 4), y en la línea 7 está el HTML que se mostrará para el enlace al “modo Lector“, que por supuesto puedes personalizar a tu gusto.

Luego, la línea 10 añade ese HTML al elemento que envuelve al contenido (o sea, crea el enlace). Y en la línea 12 iniciamos Colorbox con las opciones de tamaño, especificando su contenido como el elemento envuelto. Hay más posibilidades, muy bien explicadas en la web oficial de Colorbox.

6. Dando estilo

Con todo lo anterior ya podemos usarlo y hacer pruebas, pero nunca está de más aplicar algo de estilo a nuestro “modo Lector“, poniendo el énfasis en todo caso en la legibilidad y facilidad de lectura, que de eso se trata, y no de hacer virguerías y poner colorines, no se trata de eso como comprenderás.

Un ejemplo de estilo, que queda muy bien, sería este:

Unas notas sobre este CSS:

  • El div #cboxLoadedContent se usa para ajustar el elemento que envuelve al contenido. Puedes hacerlo más flexible especificando un nombre de clase CSS si lo prefieres.
  • La línea 11 se usa para evitar que el enlace al “modo Lector” aparezca dentro de la ventana emergente
  • Si quieres usar los estilos existentes de tu tema puedes saltarte el filtro y, en su lugar, especificar un elemento como .entry-content en el JavaScript. Este elemento se moverá a la ventana emergente, de manera que sus estilos también se aplicarán a la ventana emergente.

Y ya está. Acojona un poco pero en realidad es sencillo, y siguiendo estos sencillos pasos podrás comprobar que funciona de coña, no ralentiza tu sitio (Colorbox solo son 10Kb de script, 5kb con gzip) y ofrece un toque de calidad y profesionalidad a tu web, para los visitantes que no usen el navegador Safari, que ya tiene esta utilidad integrada, como sabes.

(…) Plus: con plugins

Como no podía ser de otro modo, también hay plugins que ofrecen esta funcionalidad, y gracias a Quique que me lo ha recordado en los comentarios aquí tienes unos cuantos que tienen muy buena pinta:

  • Readability: Simple y efectivo, ofrece la ventana emergente de modo Lector fácil
  • Readability plugin: este es algo distinto, pues ofrece una especie de lista de lectura, ideal para vistas cansadas.
  • Easy reader: muy fácil de configurar, ofrece un botón para insertar en entradas y páginas y así ofrece el modo de lectura fácil.

Ahora ya, por opciones que no quede.

AVISO: esta publicación es de hace dos 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.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (2 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Share This