¿Recuerda cuando WordPress introdujo la escritura sin distracciones, allá por la 3.2? Es una característica asombrosa, que te permite olvidarte de todo lo demás y concentrarte en escribir. ¿Pero qué hay de los lectores?
Si eres un purista y te gusta consumir tu contenido sin guarniciones de anuncios, listas de publicaciones más recientes, formularios de boletines, widgets de redes sociales y otras cosas, probablemente seas fanático de Evernote’s Clearly, Bolsillo, Reeder o cualquier otra aplicación similar. No digo que todas las guarniciones sean malas, solo que a veces ignorarlas y concentrarse en nada más que el contenido se siente bien y lo convierte en un delicioso «infomeal».
Entonces, ¿qué tan difícil es agregar lectura sin distracciones a su sitio web de WordPress y mejorar la experiencia de lectura de sus visitantes? Muerto. Simple.
Aquí está el plan de juego:
- Encuentre una manera de aislar el título y el contenido de la publicación (usando la función add_filter de WordPress)
- Agregar enlace de alternancia de lectura sin distracciones (jQuery)
- Cuando se hace clic en el enlace de alternancia, muestra modal de lectura sin distracciones (jQuery)
- Contenido modal de lectura sin distracciones de estilo (CSS)
- Cuando se hace clic en el enlace cerrar, vuelve a la normalidad (jQuery)
Aislar el título y el contenido de la publicación
Lo que debemos hacer aquí es hacer posible orientar el título y el contenido de la publicación en una función jQuery. Dado que los temas utilizan diferentes elementos para mostrar esos dos, necesitamos usar la función add_filter para envolver tanto el título como el contenido en divs que luego podríamos apuntar fácilmente:
// Wrap post title in a div
add_filter( 'the_title', 'thsp_dfr_title', 1 );
function thsp_dfr_title( $title ) {
global $post;
// We only want to do this for the post in main loop in single post view
if( is_singular() && $title == $post->post_title && in_the_loop() ) {
return '<h1 id="thsp-dfr-title">' . $title . '</h1>';
}
return $title;
}
// Wrap post content in a div
add_filter( 'the_content', 'thsp_dfr_content', 1 );
function thsp_dfr_content( $content ) {
global $post;
// Again, only do this in single post view
if( is_singular() ) {
/*
* New lines are necessary so WordPress wpautop would
* create the first paragraph
*/
return '<div id="thsp-dfr-content">' . "n" . "n" . $content . '</div>';
}
return $content;
}
Ahora tenemos #thsp-dfr-title
y #thsp-dfr-content
elementos con los que trabajar, así que pongamos en cola algunos archivos JS y CSS:
// Enqueue scripts and styles
add_action('wp_enqueue_scripts', 'thsp_dfr_styles');
function thsp_dfr_styles() {
global $post;
if( is_singular() ) {
wp_enqueue_script(
'thsp_dfr',
plugins_url( '/js/distraction-free-reading.js', __FILE__ ),
array( 'jquery' ),
'v1.0'
);
wp_enqueue_style(
'thsp_dfr',
plugins_url( '/css/distraction-free-reading.css', __FILE__ ),
array(),
'v1.0'
);
}
}
Adición de alternancia de lectura sin distracciones
Dado que la lectura sin distracciones no funcionará con JavaScript desactivado, estamos usando jQuery para agregar toggler. No sirve de nada para los usuarios que no utilizan JavaScript, no es necesario lanzarles enlaces muertos.
// Add distraction free reading toggler
$('body').append('<a id="thsp-dfr-toggle" href="#">Distraction free reading</a>');
Agregue algo de CSS básico al elemento de enlace y terminamos con esto:
Cambio al modo de lectura sin distracciones
Todo lo que necesitamos para que esto suceda ya está ahí. Un enlace para adjuntar la función de clic a – verificar, dos elementos con ID conocidos que podemos clonar – verificar. Hagamoslo.
// Clicking toggle link
$('#thsp-dfr-toggle').click(function(){
// Add distraction free modal
$('body').append('<div id="thsp-dfr-overlay"><div id="thsp-dfr-wrapper"></div></div>');
// Add post title to distraction free modal
$('#thsp-dfr-title').clone().attr('id', 'thsp-dfr-title-cloned').appendTo('#thsp-dfr-wrapper');
// Add post content to distraction free modal
$('#thsp-dfr-content').clone().attr('id', 'thsp-dfr-content-cloned').appendTo('#thsp-dfr-wrapper');
// Add close link to distraction free modal
$('body').append('<a id="thsp-dfr-close" href="#">Close</a>');
// Hide show modal link
$(this).hide();
return false;
});
// Clicking close link
$('#thsp-dfr-close').live('click', function(){
// Remove modal
$('#thsp-dfr-overlay').remove();
// Show distraction free toggle again
$('#thsp-dfr-toggle').show();
// Hide close modal link
$(this).hide();
return false;
});
Entonces, aquí está el desglose de lo que estamos haciendo aquí:
1. Agregar dos divs justo antes de cerrar la etiqueta del cuerpo
2. Clonar el título y el contenido de la publicación y agregarlos al div interno
3. Eliminando el vínculo de alternancia
4. Agregar otro vínculo que usaremos para salir de la lectura sin distracciones.
Al hacer clic en ese enlace de cierre, se eliminará el enlace modal y se cerrará y se recuperará el enlace que activa el modo de lectura sin distracciones.
Contenido de lectura sin distracciones de estilo
Necesitamos algo de CSS para posicionar nuestro enlace modal y de alternancia y darles un estilo básico, así que aquí está:
/* 100% width and height element to hide site's regular look */
#thsp-dfr-overlay {
background: #222;
background: rgba(0,0,0,0.9);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 50px 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.admin-bar #thsp-dfr-overlay {
/* Make it look good with admin bar */
padding: 78px 0 50px;
}
/* Distraction free reading content wrapper */
#thsp-dfr-wrapper {
background: #f9f9f9;
width: 45em;
max-width: 90%;
margin: 0 auto;
padding: 2em 3em;
height: 100%;
overflow: scroll;
box-shadow: 0 0 2em rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 2em rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 2em rgba(0,0,0,0.8);
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* Distraction free toggle and close buttons */
#thsp-dfr-toggle,
#thsp-dfr-close {
position: fixed;
bottom: 3px;
right: 3px;
z-index: 999;
display: inline-block;
background: #333;
color: #fff;
padding: 0.5em;
border: 1px solid #fff;
text-decoration: none;
}
Tenga en cuenta que esto solo aplicará estilo a los divs de superposición y envoltura, no al contenido dentro de ellos. En el tema Twenty Twelve, eso terminará luciendo así:
Algo así como «viva el restablecimiento de CSS de Eric Meyer» escrito por todas partes, así que, naturalmente, querrás agregar un CSS de tipografía increíble para que se vea bien. Afortunadamente, crear selectores de CSS suficientemente específicos que anulen el CSS predeterminado del tema es fácil, ya que nuestro contenido de lectura sin distracciones está envuelto dentro #thsp-dfr-overlay
y #thsp-dfr-wrapper
divs. Después de darle un lavado de cara (ver página de Github del proyecto para el archivo CSS completo), esto es lo que tenemos:
Mucho mejor, pero ya sabes lo que dicen…
Dale a un desarrollador de front-end algo de CSS y pasará horas modificándolo, deja que un desarrollador de front-end escriba su propio CSS y todavía pasará horas trabajando en él.
Así que siéntete libre de hacer que los contenidos modales de lectura sin distracciones se vean tan bien o mal como quieras 🙂
El plan es desarrollar este concepto en un complemento de WordPress con todas las funciones, por lo que si desea unirse y contribuir, aquí está página de Github del proyecto.