Como adicionar paginação numérica ou numerada no WordPress

Como adicionar paginação numérica ou numerada no WordPress

Categoria

WordPress

Postado em

6 de dezembro de 2019

Tempo de leitura

5 minutos

Visualizações

9015

Você pode adicionar paginação numérica ou numerada em qualquer tipo de modelo de página (modelo de página personalizado) no WordPress. Neste tutorial, mostrarei como adicionar a paginação numérica do WordPress usando WP_Querye também daremos um bom estilo usando CSS .

Adicionar paginação na página de índice

A maioria dos Temas do WordPress usa a função the_posts_pagination para exibir uma navegação paginada para o conjunto de postagens seguinte / anterior, quando aplicável. Mas essa função funciona apenas na página Índice ( index.php , archive.php ou category.php e search.php).

Nota: Alguns temas podem usar a função the_posts_navigation() para exibir o conjunto de postagens seguinte / anterior. Mas ele mostra apenas os links “Postagens anteriores” e “Postagens mais antigas”. Se desejar exibir os números de página com links nessas páginas, remova essa função e use o código a seguir.

<?php
the_posts_pagination( array(
    'mid_size'  => 2,
    'prev_text' => __( '&laquo; Prev', 'textdomain' ),
    'next_text' => __( 'Next &raquo;', 'textdomain' ),
) );
?>
  • mid_size (int) – Quantos números de página serão exibidos em ambos os lados da página atual ou ativa. O padrão é 1.
  • prev_text (string) – Texto do link para o próximo conjunto de postagens. O padrão é “Anterior”.
  • next_text (string) – Texto do link para o próximo conjunto de postagens. O padrão é “Avançar”.

Definir quantas postagens mostrar por página

Para definir quantas postagens serão exibidas por página, vá para Configurações> Leitura e defina o número no campo Mostrar no máximo as páginas do blog .

Adicionar paginação no modelo de página personalizada

Se você criar um modelo de página personalizado e criar uma consulta personalizada new WP_Querypara exibir postagens do blog, precisará usar a paginate_linksfunção para mostrar a paginação.

Código de exemplo de uma consulta personalizada

<?php
// Protect against arbitrary paged values
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
 
$args = array(
    'post_type' => 'post',
    'post_status'=>'publish',
    'posts_per_page' => 12,
    'paged' => $paged,
);
 
$the_query = new WP_Query($args);
?>
  • post_type (string / array) ─ Use tipos de postagem. O valor padrão é ‘post’. Você pode alterá-lo para seus tipos de postagem personalizados (por exemplo, filmes).
  • posts_per_page (int) ─ Número de postagens a serem exibidas por página.
  • paginado (int) ─ Número da página. Mostre as postagens que normalmente apareceriam apenas na página X ao usar o link “Entradas mais antigas”.

Exemplo de código de paginação

<?php
echo paginate_links( array(
    'format'  => 'page/%#%',
    'current' => $paged,
    'total'   => $the_query->max_num_pages,
    'mid_size'        => 2,
    'prev_text'       => __('&laquo; Prev Page'),
    'next_text'       => __('Next Page &raquo;')
) );
?>
  • ‘format’ (string) ─ Formato para a estrutura de paginação.
  • ‘atual’ (int) ─ O número da página atual. O padrão é consulta paginada var ou 1.
  • ‘total’ (int) ─ A quantidade total de páginas.

Código completo de paginação do WordPress

Use os seguintes códigos no seu modelo de página personalizado onde exibir as postagens com paginação.

<?php
// Protect against arbitrary paged values
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
 
$args = array(
    'post_type' => 'post',
    'post_status'=>'publish',
    'posts_per_page' => 10,
    'paged' => $paged,
);
 
$the_query = new WP_Query($args);
?>
 
<?php if ( $the_query->have_posts() ) : ?>
     
    <?php while ( $the_query->have_posts() ) : $the_query->the_post();
        // Post content goes here...
    endwhile; ?>
 
    <div class="pagination">
        <?php
        echo paginate_links( array(
            'format'  => 'page/%#%',
            'current' => $paged,
            'total'   => $the_query->max_num_pages,
            'mid_size'        => 2,
            'prev_text'       => __('&laquo; Prev Page'),
            'next_text'       => __('Next Page &raquo;')
        ) );
        ?>
    </div>
     
<?php endif; ?>

Estilo de paginação usando CSS

Copie o seguinte CSS e cole no arquivo style.css .

.pagination .page-numbers {
   background: #db605d;
   color: #fff;
   display: block;
   width: auto;
   float: left;
   margin: 4px 4px 4px 0;
   padding: 15px 18px 14px 18px;
   text-decoration: none;
}
 
.pagination .page-numbers:hover {
   background: #24221D;
   color: #fff;
   text-decoration: none;
}
 
.pagination .current {
   background: #24221D;
   color: #fff;
   padding: 15px 18px 14px 18px;
}

Resultado:

Como adicionar paginação numérica ou numerada no WordPress

Gostou? compartilhe nas redes!! ;)

Deixe seu comentário