Lembra quando o WordPress introduziu a escrita livre de distrações, lá atrás no 3.2? É um recurso incrível, que permite que você esqueça todo o resto e se concentre na escrita. Mas e os leitores?
Se você é um purista e gosta de consumir seu conteúdo sem acompanhamentos de anúncios, listas de postagens mais recentes, formulários de boletim informativo, widgets de mídia social e outras coisas, provavelmente é fã do Evernote’s Claramente, Pocket , Reeder ou qualquer outro similar aplicativo. Não estou dizendo que todos os acompanhamentos são ruins, apenas que às vezes ignorá-los e focar em nada além do conteúdo é bom e contribui para um delicioso “infomeal”.
Então, quão difícil é adicionar leitura livre de distrações ao seu site WordPress e melhorar a experiência de leitura de seus visitantes? Morta. Simples.
Aqui está o plano de jogo:
- Encontre uma maneira de isolar o título e o conteúdo do post (usando a função add_filter do WordPress)
- Adicionar link de alternância de leitura sem distrações (jQuery)
- Quando o link de alternância é clicado, mostra o modal de leitura sem distração (jQuery)
- Conteúdo modal de leitura livre de distração de estilo (CSS)
- Quando o link fechar é clicado, ele volta ao normal (jQuery)
Isolando o título e o conteúdo da postagem
O que precisamos fazer aqui é tornar possível direcionar o título e o conteúdo do post em uma função jQuery. Como os temas usam elementos diferentes para exibir esses dois, precisamos usar a função add_filter para envolver o título e o conteúdo em divs, que poderíamos facilmente direcionar :
// 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;
}
Agora temos #thsp-dfr-titlee #thsp-dfr-contentelementos para trabalhar, então vamos enfileirar alguns arquivos JS e 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’
);
}
}
Adicionando Alternância de Leitura Livre de Distração
Como a leitura sem distração não funcionará com o javascript desabilitado, estamos usando o jQuery para adicionar o toggler. É inútil para usuários que não são de javascript, não há necessidade de lançar links mortos para eles.
// Add distraction free reading toggler
$(‘body’).append(‘<a id=”thsp-dfr-toggle” href=”#”>Distraction free reading</a>’);
Adicione algum CSS básico ao elemento link e acabamos com isso:
Alternar leitura sem distração
Mudando para o modo de leitura sem distração
Tudo o que precisamos para que isso aconteça já está lá. Um link para anexar a função de clique a – check, dois elementos com IDs conhecidos que podemos clonar – check. Então, vamos fazê-lo.
// 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;
});
Então, aqui está o detalhamento do que estamos fazendo aqui:
1. Adicionando duas divs logo antes de fechar a tag body
2. Clonando o título e o conteúdo da postagem e adicionando-os à div interna
3. Removendo o link de alternância
4. Adicionando outro link que usaremos para sair da leitura livre de distrações
Clicar nesse link de fechamento removerá o modal e o próprio link de fechamento e trará de volta o link que ativa o modo de leitura sem distrações.
Conteúdo de leitura livre de distração de estilo
Precisamos de algum CSS para posicionar nosso link modal e alternar e dar a eles algum estilo básico, então aqui 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;
}
Lembre-se de que isso só estilizará os divs de sobreposição e wrapper, não o conteúdo dentro deles. No tema Twenty Twelve, isso vai acabar ficando assim:
Leitura sem distração – conteúdo sem estilo
Meio que tem “viva a redefinição de CSS de Eric Meyer” escrito por toda parte, então, naturalmente, você vai querer adicionar algum CSS de tipografia incrível para fazer com que pareça bom. Felizmente, é fácil criar seletores de CSS específicos o suficiente para substituir o CSS padrão do tema, já que nosso conteúdo de leitura livre de distrações é encapsulado #thsp-dfr-overlaye #thsp-dfr-wrapperdivs. Depois de fazer um facelift (verifique a página do Github do projeto para obter o arquivo CSS completo), é isso que temos:
Leitura sem distrações – conteúdo estilizado
Muito melhor, mas você sabe o que dizem…
Dê a um desenvolvedor front-end algum CSS e ele passará horas ajustando-o, deixe um desenvolvedor front-end escrever seu próprio CSS e ele ainda passará horas trabalhando nele.
Portanto, sinta-se à vontade para fazer com que os conteúdos modais de leitura sem distrações pareçam tão bons ou ruins quanto você quiser
O plano é desenvolver este conceito em um plugin WordPress completo, então se você quiser participar e contribuir, aqui está a página do projeto no Github .
