Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Adicionando leitura livre de distração ao WordPress

Você está em:

Adicionando leitura livre de distração ao WordPress

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

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 livre de distração - conteúdo sem estilo

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 livre de distração - conteúdo estilizado

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 .

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.