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(__('← Older posts', 'roots')); ?></li> <li class="next"><?php previous_posts_link(__('Newer posts →', '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.