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

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

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. Desenvolva a paginação de conteúdo "like a boss" após a leitura deste artigo.
Escrito Por Leandro Vieira em julho de 2015 /6 min de leitura
Conteúdo escrito por humano

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.

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.

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.
Qual nota você da para este artigo?
Ruim

O que você achou disso?

Clique nas estrelas

Média da classificação 0 / 5. Número de votos: 0

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Excelente
Artigos Relacionados
CDN melhora a performance

Como uma CDN melhora a performance

  1. 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.
  2. Arilton Freitas
    Opa, maravilha Fred. Obrigado pelo complemento da dica. Grande Abraço!
  3. Rodrigo Vieira Eufrasio da Silva
    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.
    1. Que legal Rodrigo! Que bom que pude ajudar através do nosso curso! Grande abraço!
  4. Sandro
    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.
  5. Ótimo post, me ajudou bastante. Como posso adicionar link de ultima e primeira página dentro da função?
    1. Arilton Freitas
      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.
  6. Jhonatan Souza
    Show, muito obrigado!
  7. Carlos Jardon Pestana
    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?
  8. Valber
    Olá, estou criando um site e queria colocar uma paginacao em minha pagina de autor. Como faria para colocar a paginacao nessa pagina????

Construa seu site WordPress sob medida com os maiores especialistas em WordPress da America Latina
Conheça a Apiki

Faça um comentário
Cadastre-se rápido

Fazer Login