Como personalizar a paginação no editor de blocos do WordPress

A paginação é um componente crítico em web design, especialmente para sites que apresentam conteúdo extenso, como blogs ou listas de produtos. A paginação eficaz garante uma experiência de navegação perfeita, aumentando a satisfação do usuário e a otimização do mecanismo de pesquisa (SEO).

O recurso de paginação no editor de blocos do WordPress, comumente conhecido como Gutenberg, faz parte do bloco Query Loop, não um bloco independente. O bloco Query Loop permite exibir postagens ou criar modelos personalizados em um tema de bloco.

O bloco de paginação no Query Loop de Gutenberg é bastante limitado quando se trata de personalização pronta para uso. Seu design padrão nem sempre corresponde às necessidades estéticas do seu site, mas você pode melhorar sua aparência e funcionalidade utilizando CSS personalizado.

Este artigo irá guiá-lo pelas etapas para modificar e otimizar a paginação no editor Gutenberg adicionando CSS personalizado, permitindo aprimorar a navegação do seu site e a experiência geral do usuário.

Etapas para personalizar a paginação no editor de blocos do WordPress

Etapa 1: criar ou editar uma página ou modelo

Crie um novo tipo de postagem (página/post) ou selecione o existente. Se estiver usando um tema de bloco, você também pode adicionar um novo modelo ou editar o existente usando o Site Editor.

Neste exemplo, criaremos uma nova página que usaremos como página de posts (página do blog).

Adicione o bloco de loop de consulta

No painel do WordPress, navegue até Pages -> Add New Page . No Gutenberg, adicione um bloco Query Loop. Este bloco permite exibir postagens, páginas ou tipos de postagem personalizados.

Você pode escolher um padrão para o loop de consulta ou começar em branco. Para este exemplo, escolhemos a opção iniciar preto e, em seguida, para a variação do loop de consulta, selecionamos Imagem, Data e Título.

A seguir, você pode editar e estilizar a aparência de todos os elementos no bloco Query Loop usando as configurações do bloco.

Etapa 2: Identifique a classe CSS do elemento de paginação

Você precisa identificar sua classe CSS específica antes de personalizar o elemento de paginação. Normalmente, o nome da classe depende do tema WordPress e de qualquer plugin ativo que você usa. Então, como você obtém o nome da classe CSS de cada elemento de paginação em sua página?

Visualize sua página clicando no botão Visualizar em uma nova guia .

Você pode usar as ferramentas de desenvolvedor integradas do seu navegador (quase todos os navegadores possuem esse recurso). Se você usa o Google Chrome, pode clicar no ícone do menu (ícone de três pontos) e selecionar More Tools -> Developer Tools .

Depois de entrar na janela Ferramentas para desenvolvedores, clique no ícone de seta para inspecionar um elemento em sua página (veja a imagem abaixo).

Em seguida, aponte o cursor para os elementos de paginação (contêiner de paginação principal, números de páginas individuais, número da página atual, botões anterior e próximo) para determinar suas classes.

Como você pode ver na imagem acima, identificamos as classes CSS dos nossos elementos de paginação, abaixo:

Etapa 3: Adicionar CSS personalizado para paginação

A seguir, adicionaremos o snippet CSS ao personalizador de tema do WordPress para personalizar o elemento de paginação no bloco Query Loop. No painel do WordPress, vá para Aparência -> Personalizador -> CSS adicional . Em seguida, copie o trecho CSS abaixo e cole-o no campo disponível.

Observação : se você estiver usando um tema de bloco, clique aqui para saber como habilitar um personalizador de tema em seu WordPress.

 .wp-block-query-paginação {
  exibição: flexível;
  justificar-conteúdo: centro;
  margem: 20px 0;
}

.wp-block-query-pagination .page-numbers {
  preenchimento: 5px 8px;
  cor de fundo: #f0f0f0;
  margem: 0 3px;
  cor: #000000;
}

.wp-block-query-pagination .page-numbers.current {
  cor de fundo: #601599;
  cor: branco;
}

.wp-block-query-pagination-anterior {
  preenchimento: 8px 12px;
  histórico: #233b27;
  margem: 0 4px;
  cor: #ffffff;
  raio da borda: 4px;

}

.wp-block-query-pagination-next {
  preenchimento: 8px 12px;
  histórico: #233b27;
  margem: 0 4px;
  cor: #ffffff;
  raio da borda: 4px;
}

.wp-block-query-pagination .page-numbers:hover {
  cor de fundo: #be76f5;
  cor: branco;
}

.wp-block-query-pagination-anterior:hover {
  plano de fundo: #ffb300;
  cor: #000000;
}

.wp-block-query-pagination-next:hover {
  plano de fundo: #ffb300;
  cor: #000000;
}

Não se esqueça de clicar no botão Publicar para aplicar as alterações feitas.

É isso. Para ver o resultado, retorne à sua página e visualize-o. Você verá que seus elementos de paginação são personalizados. Sinta-se à vontade para substituir os valores das propriedades CSS para obter a aparência que corresponda ao seu design geral.

Não se esqueça de salvar sua página ou publicá-la se desejar.

O que o código CSS fez?

• Contêiner de paginação principal: .wp-block-query-pagination
  • Usa Flexbox para centralizar os itens de paginação e adiciona espaçamento vertical (20px).
• Números de páginas individuais: .wp-block-query-pagination .page-numbers
  • padding: 5px 8px; : Cria espaçamento dentro de cada número de página. Adiciona 5px de preenchimento vertical (superior e inferior) e 8px de preenchimento horizontal (esquerda e direita), aumentando a área clicável.
  • background-color: #f0f0f0; : define a cor de fundo dos números de página para cinza claro (#f0f0f0).
  • margin: 0 3px; : Adiciona espaço horizontal (3px à esquerda e à direita) entre os elementos do número da página. Não há margem vertical, portanto o espaçamento afeta apenas o alinhamento horizontal.
  • color: #000000; : altera a cor do texto dos números das páginas para preto, garantindo um bom contraste com o fundo claro.
• Número da página atual: .wp-block-query-pagination .page-numbers.current
  • background-color: #601599; : altera a cor de fundo do número da página atual (ativa) para um roxo intenso (#601599). Isso indica visualmente qual página está selecionada no momento.
  • color: white; : Define a cor do texto para branco, oferecendo alto contraste contra o fundo roxo, tornando visível o número da página ativa.
• Botões Anterior e Próximo: .wp-block-query-pagination-previous e . wp-block-query-pagination-next
  • Estilizado com fundo verde escuro, texto branco, preenchimento e cantos ligeiramente arredondados.
• Efeitos de foco:
  • .wp-block-query-pagination .page-numbers:hover
    • Quando o usuário passa o mouse sobre qualquer número de página individual, a cor de fundo muda para roxo claro (#be76f5) para um efeito interativo sutil.
    • A cor do texto muda para branco, melhorando o contraste e melhorando a legibilidade durante o foco.Efeitos de foco:
  • .wp-block-query-pagination-previous:hover e . wp-block-query-pagination-next:hover
    • Quando o usuário passa o mouse sobre os botões “Anterior” ou “Próximo”, o fundo muda para um amarelo-laranja vibrante (#ffb300), destacando-os.
    • A cor do texto muda para preto, oferecendo legibilidade nítida contra o fundo brilhante.

O resultado final

Este artigo mostra como você pode facilmente personalizar a paginação no WordPress Block Editor sem a ajuda de nenhum plugin. Personalizar a paginação no Editor de Blocos do WordPress com CSS personalizado permite maior controle sobre a aparência e funcionalidade da navegação do seu site.

Ao aproveitar o CSS, você pode personalizar a paginação para combinar com o estilo da sua marca, melhorar a experiência do usuário e aprimorar o design geral do seu site WordPress. Quer você opte por ajustar cores, tamanhos ou o layout dos elementos de paginação, a flexibilidade do CSS personalizado permite que você crie uma jornada de usuário perfeita e visualmente atraente em seu site.

No entanto, se você deseja opções de design ricas sem a necessidade de CSS personalizado, é altamente recomendável usar um plug-in WordPress como Divi ou Elementor, pois ambos oferecem construtores visuais intuitivos com amplos recursos de personalização, permitindo criar layouts impressionantes e totalmente responsivos com paginação avançada, conteúdo dinâmico e opções de estilo diretamente na interface do construtor de páginas.