WordPress Bootstrap e menu de Paginação

O Bootstrap é um framework para desenvolver websites compatíveis para vários tipos de dispositivos.

É muito utilizado como base em temas para o wordpress, no entanto para usarmos alguns dos componentes ou formatação do Bootstrap em conjunto com o WordPress temos de construir alguma “pontes” entre ambos.

Vamos ver o caso do menu de paginação do wordpress no tema Roots, que é simples demais, só tendo link para página anterior e seguinte como se pode ver na imagem abaixo.

WordPress Bootstrap – Menu de paginação do tema Roots

Menu de paginação normal:

Vamos então transformar o menu simples noutro com os números de páginas e identificação da página actual

Vamos aproveitar o código gerado pelo WordPress em conjunto com o CSS de paginação do Bootstrap, para construir um menu mais amigável.

Vamos começar por, no tema Roots abrir o ficheiro "index.php" que está na raíz da pasta do tema, e encontrar o código abaixo:

<?php if ($wp_query->max_num_pages > 1) : ?>
  <nav class="post-nav">
    <ul class="pager">
      <li class="previous"><?php next_posts_link(__('&larr; Older posts', 'roots')); ?></li>
      <li class="next"><?php previous_posts_link(__('Newer posts &rarr;', 'roots')); ?></li>
    </ul>
  </nav>
<?php endif; ?></pre>
<p>Substitua o código acima pelo seguinte:</p>
<pre lang="php"><div class="pagination ">
<?php
global $wp_query;
$big = 999999999; 
echo paginate_links( array(
'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
'format' => '?paged=%#%',
'show_all' => False,
'end_size' => 1,
'mid_size' => 2,
'prev_next' => True,
'prev_text' => '<span>Anterior</span>',
'next_text' => '<span>Próximo</span>',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'list',
) );
?>
</div>

Tem dúvidas sobre a função “paginate_links($args)” visite o site do wordpress da função.

Na pasta "roots/assets/css" encontra o ficheiro "app.css" onde pode personalizar o tema acrescente o código css abaixo, tenha em atenção que as cores aqui definidas estão de acordo com o meu tema, se desejar outras basta alterar directamente.

ul.pagination li span.current {
    color: #FFF;
    background-color: #428BCA;
    border-color: #428BCA;
    cursor: default;
}

Agora para que o código gerado pelo wordpress seja entendido pelo Bootstrap, vamos precisar de um pequeno script jquery para adicionar uma class ao elemento actual.

Este código deve colocá-lo no "footer.php" (pasta roots/templates/) para que não empate o carregamento da página

<script>
jQuery(document).ready(function () { 
$("ul.page-numbers").addClass("pagination");
});
</script>

Se colocou os códigos php, css e jquery nos sítios certos o seu menu deve estar bem diferente, e deve ter mais ou menos esta aparência:

Isto está implementado neste site, basta escolher a página principal ou uma categoria e deslizar para o fundo da página para ver o menu.