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:
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:
- Copia el archivo
jquery.colorbox-min.js de la carpeta llamada “colorbox” en el directorio ‘/js/‘ de tu tema (si no existe lo creas).
- Elige uno de los estilos de ejemplo y copia el archivo
colorbox.css en el directorio de tu tema.
- 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 ‘?>‘):
**
* Conectando el script y estilos del modo Lector.
*/
function pbd_rm_scripts() {
if(is_single() ) :
wp_enqueue_script(
'colorbox',
get_bloginfo('template_directory') . '/js/jquery.colorbox-min.js',
array('jquery'),
'1.3.19',
true
);
wp_enqueue_script(
'pbd-reading-mode',
get_bloginfo('template_directory') . '/js/aw-reading-mode.js',
array('jquery', 'colorbox'),
'0.1',
true
);
wp_enqueue_style(
'colorbox',
get_bloginfo('template_directory') . '/colorbox.css',
array(),
'1.3.19'
);
endif;
}
add_action('wp_enqueue_scripts', 'aw_rm_scripts');
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:
**
* En los posts envuelve el contenido en un div.
*/
function pbd_rm_content_filter($content) {
if(is_single() ) {
$content = '<div class="rm-content">'. $content .'</div>';
}
return $content;
}
add_filter('the_content', 'aw_rm_content_filter');
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:
jQuery(document).ready(function($) {
// Esto es el selector CSS del elemento que envuelve el contenido de la entrada.
// por ejemplo: .entry o .entry-content
var selector = '.rm-content';
// El HTML para el enlace "Ver esta entrada en modo Lector".
var html = '<p class="rm-button">Ver esta entrada en <a href="#" class="reading-mode" rel="nofollow"><strong>modo Lector</strong></a>.</p>';
$(selector)
.prepend(html)
.find('.reading-mode')
.colorbox({
innerHeight: "80%",
innerWidth: 700,
inline: true,
href: selector
});
});
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:
/**
* Modo lector
*/
#cboxLoadedContent > div {
text-align: left;
padding: 20px;
font: 16px/24px Georgia, serif;
width: 90%;
}
#cboxLoadedContent > div .rm-button {
display: none;
}
#cboxLoadedContent > div p {
margin-bottom: 24px;
}
#cboxLoadedContent > div h2 {
font-size: 22px;
margin-bottom: 24px;
}
#cboxLoadedContent > div h3 {
font-size: 18px;
margin-bottom: 24px;
}
#cboxLoadedContent > div h4 {
font-size: 16px;
margin-bottom: 24px;
}
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.
