APRENDA COMO ADICIONAR PAGINAÇÃO EM POSTS NO WORDPRESS

A alma do blog é o seu conteúdo. Para ser bem ranqueado é imprescindível a qualidade dos nossos textos e ainda, quanto mais caracteres, melhores chances você tem. Muitas vezes precisamos oferecer ao nosso público conteúdos extensos e ricos em informações altamente interessantes, mas nos deparamos com uma página que “não acaba mais”. Assim, o layout do site pode ficar feio e ainda desmotivar a leitura por parte dos visitantes. Então, como solução você precisa criar uma paginação em posts e o script certo vai te mostrar como.

Paginação em Posts

No WordPress o sistema de paginação tem bases nativas e é um processo relativamente simples para começar a utilizá-lo. Entender a importância de utilizar paginação em posts para o seu site é interessante para ver a sua taxa de rejeição (bounce rate) reduzida.

Para acompanhar estatísticas e relatórios completos sobre o desempenho do seu site, indicamos a leitura deste post  – Como Instalar e Configurar WordPress SEO Plugin by Yoast. Você vai aprender a ter direto na sua Dashboard dados e informações completas sobre os resultados, visitantes, localidades e pesquisa orgânica que estão levando usuários ao seu site.

Você Precisa Saber

Assim como o ambiente de leitura dos seus posts fica mais organizado com a paginação de posts, tornar a navegabilidade mais rápida e estável dentro do seu site é excelente para fidelizar visitantes e diminuir a taxa de rejeição. Então, se você quer sempre ter novos visitantes o ideal é ler este post para saber como trabalhar com um serviço de hospedagem de qualidade para WordPress e ainda este outro sobre como utilizar as redes sociais para atrair público para suas postagens mais antigas.

Teste Antes de Modificar

Atualmente a maioria dos temas WordPress já vem com um sistema de paginação implementado. Por isso, é interessante fazer um teste para saber se será necessário ou não modificar os arquivos do seu tema. Assim, pule para Paginação na Prática e veja o que acontece. Se a paginação funcionou, excelente! Caso contrário, é só seguir o fluxo do nosso tutorial que rapidinho você terá a paginação de posts em seu site WordPress. Lembre-se de fazer o BACKUP do seu WordPress antes de realizar qualquer mudança de código! (Principalmente se for um site ativo).

Editando os Arquivos do seu Tema

Se você já acompanha o script certo há um certo tempo, sabe que muitos dos nossos tutoriais requerem a edição e manipulação de código por meio do arquivo functions.php do tema de seu site. No entanto, para o tutorial de hoje onde vamos te mostrar como implementar a paginação de posts para os conteúdos do seu blog, em momento algum necessitaremos desse arquivo de funções.

Paginação em Posts - Acessando o Editor

Por meio do seu editor de código preferido via FTP (wp-content > themes > SEU TEMA) ou pelo Editor existente na sua Dashboard (Aparência > Editor) acesse o arquivo single.php.

Paginação em Posts - Arquivo Single

Esse arquivo possui a estrutura e a chamada de funções utilizadas para a página que exibe o conteúdo completo do seu post. Assim, se você precisa modificar algo para a página dos seus posts (não é a home page) é o single.php que você precisa editar.

Ao localizar o final da área de exibição do texto, cole o seguinte código PHP:

Clique 2x para copiar
1
<?php wp_link_pages();?>

 

Agora, clica lá no botão de Atualizar Arquivo – no final da página (Aparência > Editor),  para que a adição de código que acabamos de fazer não se perca.

Paginação na Prática

Agora que você já adicionou o código da chamada de função referente a paginação dentro do post, precisamos fazer marcações em nossos conteúdos. Sendo assim, acesse a área de Posts (Posts > Todos os Posts) e escolha editar ou adicionar um novo post.

Por exemplo, digamos que você já possui em seu blog um post com 1000 palavras e você quer exibir o texto dividido em 3 páginas. No local onde o texto deve ser quebrado, forçando o usuário a clicar na página seguinte, você deve fazer o seguinte:

  • Dentro do post acesse a aba Texto – Por padrão escrevemos na aba Visual.
  • Depois, localize os locais onde o conteúdo deve ser quebrado e a paginação deve ser exibida.
  • Agora, adicione o código HTML que segue abaixo para todos os locais onde você deseja a quebra de conteúdo por meio de paginação:
Clique 2x para copiar
1
<!–-nextpage–->

 

Quero deixar bem claro e explicado, que a marcação com o código <!–nextpage–> deve ser inserida em todos os lugares que você deseja interromper o texto.

Paginação em Posts - Marcação para Paginação

Logo, se você quer dividir um grande conteúdo em 5 páginas, será necessário incluir a marcação diversas vezes ao longo do post e segundo a sua necessidade.

Paginação em Posts - Paginação na Prática

 Aprimorando a Paginação

Como você viu no exemplo acima, a paginação será mostrada de forma bem simples. Então, para deixar de uma forma mais elegante e com o mesmo estilo do seu site precisamos fazer alterações no código do single.php – adicionando marcações para que o CSS que vem a seguir funcione.

Volte lá no Editor (Aparência > Editor) e acesse novamente o arquivo single.php. Agora, onde você adicionou o código:

Clique 2x para copiar
1
<?php wp_link_pages();?>

Troque pelo seguinte:

Clique 2x para copiar
1
2
3
4
<?php wp_link_pages( array( 'before' => '
<div class="page-links clr">', 'after' => '</div>
', 'link_before' => '<span>', 'link_after' => '</span>' ) );?>

 

Beleza! Já temos a função para exibir a paginação adicionada e com as marcações HTML necessárias para trabalhar o estilo dos links de paginação. Ainda no Editor ou no programa para edição de código que você está utilizando, abra o arquivo style.css do seu tema. Cole as seguintes regras CSS no final do código e depois salve o arquivo.

Clique 2x para copiar
1
2
3
4
.page-links span { float: left; margin-right: 5px; }
.page-links span, .page-links a span { display: block; padding: 4px 10px; color: #666; font-size: 0.923em; line-height: 1.5em; text-decoration: none; background: #fff; border: 1px solid #ddd; cursor: pointer; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.07); }
.page-links span { color: #fff; background: #ed6c3f; border: 1px solid rgba(0,0,0,0.2); box-shadow: inset 0 1px 1px #f7a762, 0 1px 2px rgba(0,0,0,0.07); }
.page-links a span { background: none !important; color: #666 !important; }

 

O resultado será o seguinte:

Paginação em Posts - Com Estilo

Para deixar com cores e formatos diferentes, basta alterar o CSS que utilizamos. Não esqueça de atualizar o arquivo para depois ver seu funcionamento no Front-End. Se não estiver conseguindo ver os resultados (mesmo logado) então você precisa limpar o cache do seu site utilizando o sistema de limpeza do seu plugin de cache ou utilizando a limpeza de cache do seu servidor de hospedagem.

Conclusão

Aprimorar seu blog é muito importante para seus visitantes, leitores e clientes. Quanto mais prático, leve e simples mais posts serão lidos e consequentemente mais visitantes e fãs do seu trabalho. A paginação de posts no WordPress está diretamente ligada à redução de bounce rate que seu site pode ter. Por isso, ofereça um ambiente agradável e que dá aquele gostinho de “quero ficar mais” ao seu público.

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixe seu comentário abaixo para podermos saber a sua opinião.

AVALIE GORA MESMO!
More from William Freitas

5 FERRAMENTAS DE EDIÇÃO DE VÍDEO PARA USAR EM 2018

As taxas de visualização de vídeo estão em alta. Aliás, estão se...
Read More

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *