fbpx

Javascript Desativado!

É necessário ativar o javascript do seu navegador para acessar!

Como criar paginação com Wordpress e Bootstrap - Evertec Digital

Como criar paginação com WordPress e Bootstrap

Vamos mostrar como criar paginação com Wordpress e Bootstrap sem a utilização de plugins para aplicar em sem tema.

Como criar paginação com WordPress e Bootstrap
0111
Compartilhe esse conteúdo!

Se você é um desenvolvedor raiz que cria seus próprios temas utilizando o CMS WordPress , criar paginação com WordPress e Bootstrap sem a utilização de plugins, pode ser um diferencial na hora de aplicar em seus projetos. Iremos mostrar aqui como criar uma função para utilizar em seus projetos com praticidade e agilidade.

Estamos utilizando aqui o Bootstrap 4.6, mas já vimos que a versão 5  do framework também funcionará da mesma forma. Iremos utilizar as seguintes definições em nosso sistema de paginação:

  • Utilização da classe pagination do Bootstrap;
  • Padrão visual grande (pagination-lg);
  • Exibição Centralizada, com a utilização da classe ‘justify-content-center’;
  • Marcar página atual;
  • Marcar links desativados;
  • Exibição dos botões Next e Prev, com código ASCII;

Você poderá modificar a sua função de acordo com o que for mais adequado para o seu projeto, como por exemplo, remover a classe pagination-lg para a utilização do tamanho padrão dos elementos, mudar o alinhamento mundando a classe justify-content-center para justify-content-right ou justify-content-left e também mudar o conteúdo dos botões Next e Prev, adicionando textos ou fontes personalizadas como o Fontawesome.

Vamos criar paginação com WordPress e Bootstrap na Prática

Indo direto ao ponto, para criar paginação com WordPress e Bootstrap, copie a função abaixo e cole dentro do arquivo functions.php do seu tema. Se seu tema ainda não tem esse arquivo, basta cria-lo utilizando exatamente o mesmo nome citado aqui, que o WordPress irá reconhecer automaticamente.

function ed_get_pagination() {
    global $wp_query;

    $big = 999999999;

    $pages = paginate_links(array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format' => '?paged=%#%',
        'current' => max(1, get_query_var('paged')),
        'total' => $wp_query->max_num_pages,
        'type' => 'array',
        'prev_next' => true,
        'prev_text' => __('⇦'),
        'next_text' => __('⇨'),
            )
    );

    if (is_array($pages)) {
        $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');

        $pagination = '<nav aria-label="Paginação"><ul class="pagination pagination-lg justify-content-center">';

        foreach ($pages as $page) {
            $pagination .= "<li class='page-item " . (strstr($page, 'dots') ? 'disabled' : (strstr($page, 'current') ? 'active' : '')) . "'>" . str_replace(array('page-numbers'), array('page-link'), $page) . "</li>";
        }

        $pagination .= '</ul></nav>';

        echo $pagination;
    }
}

Após ter adicionado a função acima dentro do seu arquivo functions.php, acesse o arquivo no qual seus posts estão listados, provavelmente front-page.php ou home.php e adicione o código ed_get_pagination() logo após a seção dos loopings dos posts.

<div class="row justify-content-center">
   <?php
   global $wp_query;

   if (have_posts()) : while (have_posts()) : the_post();
     (...) // bloco de exibição do post
   endwhile; else: endif; ?>
 </div>
 
<?php 

ed_get_pagination(); // chamada para paginação customizada com Bootstrap

?>

Pronto, sua paginação com WordPress e Bootstrap está ativa e funcional. Espero que esse conteúdo tenha lhe ajudado!

 

 

Já conhece nossa pagina de Ferramentas? Nela criamos uma lista das principais ferramentas e recursos que utilizamos no dia a dia e frequentemente adicionamos novos recursos a ela. Clique aqui e saiba mais.

 


Compartilhe esse conteúdo!
Tags do Post:

Conheça nossos cursos

Cursos de Desenvolvimento Web para você elevar ainda mais as suas habilidades profissionais!

Conheça nossos cursos

Conteúdos Relacionados

Veja alguns conteúdos que também podem lhe interessar.

Mais Populares

Veja os nossos conteúdos mais acessados.