Paginação sem plug-in

Está procurando uma maneira de criar paginação manual sem plugin? Embora provavelmente exista um plug-in para isso, criamos um trecho de código rápido que você pode usar para criar uma navegação de paginação clássica e controlar a saída do seu conteúdo no WordPress.

Instruções:

Tudo o que você precisa fazer é adicionar esse código ao arquivo functions.php do seu tema ou em um plugin específico do site:

function pagination($prev = '«', $next = '»') {
    global $wp_query, $wp_rewrite;
    $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
    $pagination = array(
        'base' => @add_query_arg('paged','%#%'),
        'format' => '',
        'total' => $wp_query->max_num_pages,
        'current' => $current,
        'prev_text' => __($prev),
        'next_text' => __($next),
        'type' => 'plain'
);
    if( $wp_rewrite->using_permalinks() )
        $pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );

    if( !empty($wp_query->query_vars['s']) )
        $pagination['add_args'] = array( 's' => get_query_var( 's' ) );

    echo paginate_links( $pagination );
};

Opcionalmente, use este código para a matriz $pagination para exibir uma aparência diferente:

$pagination = array(
  'base' => @add_query_arg('paged','%#%'),
  'format' => '',
  'total' => $wp_query->max_num_pages,
  'current' => $current,
  'prev_text' => __('« Previous'),
  'next_text' => __('Next »'),
  'end_size' => 1,
  'mid_size' => 2,
  'show_all' => true,
  'type' => 'list'
);

Em seguida, você pode adicionar a paginação usando a função pagination(). Você pode adicioná-la em algum lugar fora do loop, mas dentro da instrução if( have_post() ) do seu arquivo de modelo.

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        // post goes here
    <?php endwhile; ?>

    <div class="pagination"><?php pagination('»', '«'); ?></div>

<?php endif; ?>

O WordPress também permite que você adicione classes CSS personalizadas que podem ser usadas para gerenciar a aparência de sua nova navegação. Veja este exemplo de CSS para descobrir como estilizá-lo:

.page-numbers { font-size: 15px; }
.page-numbers.current { color: #222; }
.page-numbers .dots { letter-spacing: 1px }
a.page-numbers  { font-size: 14px; color: #3888ff; }

Observação: Se esta é a primeira vez que você adiciona trechos de código no WordPress, consulte nosso guia sobre como adicionar corretamente trechos de código no WordPress para não danificar acidentalmente seu site.

Se você gostou desse snippet de código, considere dar uma olhada em nossos outros artigos no site, como: 43 melhores temas de fotografia para WordPress e como mudar facilmente do Squarespace para o WordPress.