Blog sobre WordPress
No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
Cadastrar e-mail
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
No Result
View All Result
Blog sobre WordPress
No Result
View All Result

Início » WordPress SEO » Faça a paginação de conteúdo Like a Boss

Faça a paginação de conteúdo Like a Boss

Leandro Vieira by Leandro Vieira
8 anos ago
Reading Time: 4 min
9
Faça a paginação de conteúdo Like a Boss
Compartilhe no FacebookCompartilhe no LinkedIn
Audio

Paginar o conteúdo em uma template do WordPress é uma necessidade real que vamos enfrentar em praticamente todos os projetos no nosso dia a dia.

Conteúdo relacionado

Quando e como fazer redirecionamento 301 ou 302 no WordPress

Speakable e marcação de dados para os assistentes de voz

Intenção de busca aprimorada com WordPress e Google Analytics

Esse procedimento deve ser considerado sempre que for necessário listar uma quantidade massiva de posts, ou tipos de conteúdo personalizados. Assim entregamos ao usuário um pouquinho de cada vez, e poupamos um pouco (bastante, na verdade) do processamento do nosso servidor.

Podemos encontrar por aí diversos materiais tentando nos ajudar a realizar essa tarefa. Mas a melhor ajuda que podemos ter sempre será a do próprio WordPress.

Plugin ou não plugin?

A primeira coisa que certamente irão lhe indicar é a utilização de plugins para facilitar sua vida. Existem alguns bem famosos que podem ser encontrados com uma rápida pesquisa no Google.

Mas sinceramente, depois de conhecer o que o WordPress pode fazer por conta própria, eu não consideraria a utilização de nenhum deles em nossos projetos. Pense, uma dependência a menos que o tema pode ter é uma chance a mais que temos de reutilizar seu código em outros projetos, além de aumentar o poder de customização e diminuir da complexidade de sua manutenção.

Então, me ajuda WordPress!

Claro que ajuda. O WordPress tem por padrão algumas funções que nos permitem fazer paginação de conteúdo, como por exemplo:

  • next_post_link();
  • previous_post_link();
  • posts_nav_link();

Mas essas acima citadas são mais utilizadas para paginação em blogs, e até mesmo, um pouco ultrapassadas.

O nosso foco aqui é na função que veio para minimizar drásticamente a quantidade de código escrito ao realizar uma paginação numérica no WordPress.

Essa função é a paginate_links().

Agora é mão na massa

No local onde desejamos exibir a paginação numérica em nossa template vamos realizar uma chamada à função paginate_links().

global $wp_query;

echo paginate_links( array( 	
    'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
    'format' => '?paged=%#%',
    'current' => get_query_var('paged', 1),
    'total' => $wp_query->max_num_pages
) );

No código acima vemos parâmetros padrões da função, que não precisam ter seus valores alterados:

  • base: Referencia a url que será utilizada para montar a paginação. Está vendo esse número grande (999999999) no str_replace()? Mantenha assim, pois, caso utilize um número que possa aparecer na url do seu site, você certamente terá problemas. Por exemplo, informando somente um 9, e se por acaso seu site for o 9gag, nos links gerados para cada item da paginação o 9 será substituído pelo número da página. Você passará a ter o 1gag, 2gag, 3gag, [n]gag;
  • format: Define o formato do parâmetro de paginação;
  • current: Número da página atualmente em exibição;
  • total: A quantidade total de páginas na query atual. Perceba que nesse parâmetro está sendo utilizada a global $wp_query.

Abaixo vamos um pouco mais fundo na utilização da função, com parâmetros muito interessantes para sua customização:

global $wp_query;

echo paginate_links( array(
    'base' => str_replace( 9999999999999, '%#%', esc_url( get_pagenum_link( 9999999999999 ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var( 'paged' ) ),
    'total' => $wp_query->max_num_pages,
    'type' => 'list',
    'prev_next' => true,
    'prev_text' => 'Página Anterior',
    'next_text' => 'Próxima Página',
    'before_page_number' => '-',
    'after_page_number' => '>',
    'show_all' => false,
    'mid_size' => 3,
    'end_size' => 1,
) );

Aqui utilizamos os parâmetros:

  • type: Define o tipo de retorno que a função terá, uma lista não ordenada (ul), uma string simples com os links, ou um array para ser tratado pelo desenvolvedor. Esse paramêtro nos dá bastante flexibilidade em relação à marcação html possível de ser gerada.
  • prev_next: Deseja exibir os botões de próxima página e página anterior?
  • prev_text e next_text: É possível definir o texto, ou html, dos botões de próxima página e página anterior.
  • before_page_number e after_page_number: Mais uma possibilidade bacana de personalização do html gerado, podendo inserir alguma coisa antes e depois de cada número na paginação.
  • mid_size: Quantos links serão exibidos de cada lado da página atual.
  • end_size: Quantos links serão exibidos ao lado da primeira página e da última página.
  • show_all: Aqui controlamos se desejamos sempre exibir os links de todas as páginas ou se consideramos o que foi definido em mid_size e end_size para a quantidade de links exibidos.

Usou, organizou. Pronto, acabou.

Para facilitar a reutilização do nosso código e deixar a template de listagem de posts mais limpa e organizada, é importante que não deixemos a chamada direta à função paginate links em cada local que desejamos exibir a paginação.

Vamos abrir o arquivo functions.php, criar uma nova função para o nosso tema, abstraindo o código da paginate_links(), e inserido em seu lugar na template de listagem a chamada à função criada.

// No arquivo functions.php
function my_pagination() {
global $wp_query;

echo paginate_links( array(
    'base' => str_replace( 9999999999999, '%#%', esc_url( get_pagenum_link( 9999999999999 ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var( 'paged' ) ),
    'total' => $wp_query->max_num_pages,
    'type' => 'list',
    'prev_next' => true,
    'prev_text' => 'Página Anterior',
    'next_text' => 'Próxima Página',
    'before_page_number' => '-',
    'after_page_number' => '>',
    'show_all' => false,
    'mid_size' => 3,
    'end_size' => 1,
) );
}

// No arquivo de listagem
while ( have_posts() ) :
// Conteúdo do loop
endwhile;

my_pagination();

Então meu amigo, quando lhe perguntarem: Que plugin vamos utilizar para fazer a paginação nesse site? Estufe o peito e solte o verbo: – Nenhum!

Apresentação do Apiki WP Cursos. Cursos de WordPress para Devs e Gestores.

Tags: Developerpaginação
Share8Share1SendShare
Previous Post

A Search Box do Google melhora as buscas em seu WordPress

Next Post

Child Themes – Altere seu tema principal do jeito certo

Leandro Vieira

Leandro Vieira

Uma das grandes referências de WordPress no Brasil, entusiasta e evangelista da plataforma. Fundador e CEO da Apiki, empresa especializada no desenvolvimento web com WordPress.

Related Posts

Como os dados estruturados aceleram sua indexação no Google
WordPress SEO

Como os dados estruturados aceleram sua indexação no Google

4 de agosto de 2020
As mudanças do Google para com a meta tag Robots
WordPress SEO

As mudanças do Google para com a meta tag Robots

28 de julho de 2020
marketing digital
WordPress SEO

Marketing digital, negócios e tecnologia

15 de janeiro de 2021
Otimização para mecanismos de busca para pequenos negócios
WordPress SEO

Otimização para mecanismos de busca para pequenos negócios

19 de agosto de 2020
Next Post
Child Themes – Altere seu tema principal do jeito certo

Child Themes - Altere seu tema principal do jeito certo

As estatísticas do Facebook Insights para o seu domínio.

As estatísticas do Facebook Insights para o seu domínio.

Comments 9

  1. Fred Bueno says:
    8 anos ago

    Muito bom esse script. Eu aprendi ele meses atrás em um curso online que você ministraram. Muito bom, vale apenas ressaltar que, caso de algum erro e não apareça a paginação, tente acrescentar ou retirar alguns desses noves no parâmentro Base. 😉 (gravei essa dica com vcs tb). Abraço.

    Responder
  2. Arilton Freitas says:
    8 anos ago

    Opa, maravilha Fred. Obrigado pelo complemento da dica. Grande Abraço!

    Responder
  3. Rodrigo Vieira Eufrasio da Silva says:
    8 anos ago

    O que falar deste conteúdo, excelente, eu aprendi desenvolver o mesmo com o pessoal da Apiki quando realizei treinamento, afinal foi o melhor treinamento em WordPress que fiz. Parabéns ao Leandro Vieira, por realizar treinamento e eventos de WordPress no Brasil, e sou grato ao Daniel Antunes meu sensei em WordPress, afinal eu sou um ninja em WordPress.

    Responder
    • Daniel Antunes says:
      8 anos ago

      Que legal Rodrigo! Que bom que pude ajudar através do nosso curso!

      Grande abraço!

      Responder
  4. Sandro says:
    8 anos ago

    O problema dessa paginação é que se você usa AJAX, pra puxar os posts, a paginação não funciona! Mas mesmo assim pra uso normal é uma boa pedida, parabéns por compartilhar as dicas.

    Responder
  5. Emanoel says:
    7 anos ago

    Ótimo post, me ajudou bastante.
    Como posso adicionar link de ultima e primeira página dentro da função?

    Responder
    • Arilton Freitas says:
      7 anos ago

      Olá Emanoel, bom que te ajudou. Para adicionar o link da primeira e última página você deve utilizar o parâmetro prev_next com o valor true. E você pode customizar o texto que aparece com os parâmetros prev_text e next_text.

      Responder
  6. Jhonatan Souza says:
    6 anos ago

    Show, muito obrigado!

    Responder
  7. Carlos Jardon Pestana says:
    5 anos ago

    mas como montar isso numa página de um blogger que não tem a plataforma php ele tem widget dá para ciar um vinculo como posso montar em uma pagina única não tenho a minima ideia de como começar a fazer isso. vc pode me ajudar?

    Responder

Deixe um comentário Cancelar resposta

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

Receba no seu e-mail uma série de conteúdos sobre Infra para WordPress.

  • Este campo é para fins de validação e não deve ser alterado.

Facebook LinkedIn Instagram Twitter Youtube Github RSS

Sobre a Apiki

Empresa especializada em WordPress com três unidades de negócios.

  1. Design e Desenvolvimento;
  2. Infra e Hospedagem;
  3. Suporte e manutenção.

Em resumo, só fazemos uma coisa em WordPress: tudo.

Páginas do Apiki.com

  • Apiki.com
  • Sobre a Apiki
  • Hospedagem
  • Desenvolvimento
  • UX & UI para WordPress
  • Growth em WordPress
  • Suporte
  • Atendimento

Páginas do Blog

  • Sobre
  • Newsletter
  • Desenvolvimento WordPress
  • Segurança para WordPress
  • WordPress Mobile
  • Infra para WordPress
  • WordPress SEO
  • WordPress Performance
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.

No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.