Guia para estilizar o plug-in do WordPress WP-PageNavi

Se você não conhece o plug-in WP-PageNavi para WordPress, ele permite que você substitua a navegação anterior/seguinte normal por uma navegação de paginação numerada mais avançada.

Neste tutorial, veremos como fazer isso:

• Instalar o WP-PageNavi e integrá-lo adequadamente ao seu tema.
• Dois métodos para desativar e/ou substituir os estilos padrão do plug-in.
• Uma visão geral da marcação HTML produzida pelo WP-PageNavi
• Por fim, como alterar a aparência da navegação de sua página por meio de CSS

Instalar o plug-in

Você tem duas opções quando se trata de instalar o plug-in WP-PageNavi.

• Faça o download em WordPress.org, carregue-o no diretório /wp-content/plugins/ e ative-o (ou seja, da maneira antiga).
• Dependendo do seu host, você também pode instalar plug-ins automaticamente pesquisando-os na página “Adicionar novo” em Plug-ins no painel de administração do WordPress. Basta procurar por “pagenavi” e você o encontrará.

Ok, isso deve ter sido bem fácil. Agora é hora de sujar um pouco as mãos no código para a parte da integração.

Integração de temas

Em nossa integração de temas, não queremos que nenhum erro seja exibido se o WP-PageNavi não estiver ativo. Em vez disso, garantiremos que ele retorne ao antigo estilo de navegação anterior/próximo. Para fazer isso, usaremos uma verificação condicional function_exists.

Digamos que esse seja o código normal de navegação anterior/seguinte do WordPress:

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

Vamos alterá-lo para o seguinte:

<?php if (function_exists('wp-pagenavi')) { wp_pagenavi(); } else { ?><div class="navigation">
	<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div><?php } ?>

Isso basicamente verifica se o WP-PageNavi está ativo e, se estiver, exibe o código de navegação da nova página. Caso contrário, ele retorna à navegação anterior/próxima normal.

Observação: dependendo de como seu CSS está codificado, talvez você queira colocar a parte wp_pagenavi(); dentro da div “navigation” (ou equivalente). Lembre-se de que o WP-PageNavi gera uma nova classe chamada “wp-pagenavi”, que pode ser usada para estilizar separadamente.

Substituir estilos de plug-in

Por padrão, o WP-PageNavi insere automaticamente um arquivo CSS chamado pagenavi-css.css do diretório do plugin no cabeçalho do seu site. Não queremos que esses estilos padrão interfiram em nossos próprios estilos personalizados, portanto, vamos nos livrar completamente deles, e há duas maneiras simples de fazer isso.

• Adicionar um arquivo CSS ao diretório do tema – Essa é provavelmente a maneira mais fácil de substituir os estilos padrão do WP-PageNavi. Se você tiver um arquivo chamado pagenavi-css.css no diretório do tema, o WP-PageNavi usará esse arquivo em vez do arquivo padrão no diretório do plug-in.
• Adicione um snippet ao seu arquivo functions.php – O seguinte snippet de código que pegamos do WP Recipes desativará completamente o comportamento acima e não incluirá nenhuma folha de estilo do plug-in (seja a padrão ou uma substituição no diretório do tema).

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

Basta inserir esse código no arquivo functions.php do seu tema e adicionar os estilos CSS à folha de estilos do seu tema normal (geralmente style.css).

Observação: Certifique-se de que o código esteja entre colchetes, como <?php ... ?>, se o arquivo de funções estiver vazio no momento.

WP-PageNavi Marcação HTML e seletores CSS

Esta é a aparência da marcação do WP-PageNavi. No exemplo a seguir, há quatro páginas, atualmente na página dois.

<div class="wp-pagenavi">
	<a href="http://example.com/" >Previous</a><a href="http://example.com/" class="page" title="1">1</a>
	<span class="current">2</span>
	<a href="http://example.com/?paged=3" class="page" title="3">3</a>
	<a href="http://example.com/?paged=3" >Next</a></div>
	<span class="extend">...</span>
	<a href="http://example.com/?paged=4" class="last" title="Last &raquo;">Last &raquo;</a>
</div>

Podemos usar os seguintes seletores CSS para direcionar a marcação HTML acima:

• .wp-pagenavi – Aplica-se a toda a div, útil para limpeza de CSS, preenchimento/margem, tamanhos e estilos de fonte (negrito, itálico etc.)
• .wp-pagenavi a – Direciona todos os links dentro da navegação da página, incluindo números de página e anterior/seguinte.
• .wp-pagenavi a.page – Direciona especificamente os números de página
• .wp-pagenavi a.first – Direciona o “primeiro” link especificamente (não listado acima)
• .wp-pagenavi a.last – Direciona o “último” link especificamente
• .wp-pagenavi span – Direciona o número da página atual junto com a parte estendida (a coisa com três pontos)
• .wp-pagenavi span.current – Direciona especificamente o número da página atual
• .wp-pagenavi span.extend – Direciona especificamente para a extensão (a parte com três pontos)
• .wp-pagenavi span.pages – Visa especificamente a exibição do número da página (ou seja, página 1 de 4)

Observação: Os links anterior e seguinte, por padrão, não têm classe CSS. Se você quiser que eles sejam completamente diferenciados dos números de página e dos links primeiro/último, será necessário redefinir todos os estilos adicionados ao seletor .wp-pagenavi a. Se isso não fez sentido, dê uma olhada no exemplo a seguir (realmente simplificado).

Por exemplo: Digamos que você queira que os links anterior e seguinte estejam em negrito, mas que todos os outros links tenham um peso normal. Você precisaria fazer o seguinte:

.wp-pagenavi a { font-weight: bold; } /* Previous and Next links only */
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last { font-weight: normal; } /* Other links */

Combinei os links de número de página, o primeiro link e o último link em uma única regra para fins de exemplo. É claro que você pode separá-los e adicionar estilos mais específicos a cada um deles.

Isso seria muito mais fácil se houvesse uma classe adicionada aos links anteriores/próximos por padrão, mas não há. Não é um grande problema, pois você pode simplesmente redefini-los de qualquer forma.

Você pode usar .wp-pagenavi a.previouspostslink e .wp-pagenavi a.nextpostslink para selecionar os links anterior e seguinte, respectivamente.

Portanto, praticamente tudo o que foi dito acima até a lista não ordenada de seletores não é mais relevante, mas vamos mantê-la porque pode ser uma lição útil para substituir o CSS em outras situações. O exemplo de CSS abaixo ainda se aplicará, pois não usamos esses seletores de qualquer forma.

Um exemplo de CSS

Aqui está um exemplo de um estilo PageNavi que criamos:

Aqui está o código que usamos para obter essa aparência, o CSS de várias linhas simples é opcional:

.wp-pagenavi a, .wp-pagenavi span {
	padding: 5px; margin-right: 10px;
	font-size: 15px; color: #03719c; text-decoration: none;
	border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background: #03719c;
	color: #fff;
	border: 3px solid #AFAFAF;
	}
.wp-pagenavi span.current { font-weight: bold; }

E aqui está o significado de tudo isso:

Primeira regra
O .wp-pagenavi a, .wp-pagenavi span seleciona todos os elementos âncora e span (praticamente tudo) dentro da div .wp-pagenavi.

• A primeira linha da regra define um padding de 5px para que o elemento não fique amontoado contra a borda cinza claro (definida abaixo). Ela também define uma margem consistente de 10px à direita de cada elemento para que haja um espaçamento igual entre eles.
• A segunda linha define um tamanho de fonte de 15px, torna a cor do texto azul e garante que os links não tenham sublinhado.
• A terceira linha define uma borda cinza sólida de 3px em tudo. O código border-radius torna os cantos arredondados.

Segunda regra
O .wp-pagenavi a:hover, .wp-pagenavi span.current seleciona o efeito de hover do link, bem como o número da página atual, respectivamente.

• A primeira linha define uma cor de fundo azul escuro.
• A segunda linha torna o texto branco.
• A terceira linha dá uma borda ligeiramente mais escura.

Terceira regra
Essa regra seleciona o número da página atual (novamente) sem afetar o efeito de foco do link (como a segunda regra). Isso apenas torna o número da página atual uma fonte com peso em negrito.

O motivo pelo qual não o incluímos no efeito de passar o mouse sobre o link é que ele tem um efeito desigual ao passar do peso da fonte normal para o negrito.

Observação: dependendo de como seu CSS está codificado, talvez seja necessário usar seletores mais específicos. Por exemplo, se houver estilos para #content a e o WP-PageNavi estiver dentro da div de conteúdo, talvez seja necessário reescrever o CSS do PageNavi como #content .wp-pagenavi a e substituir quaisquer outros estilos menos específicos.

Conclusão

Sabemos que esse foi um exemplo relativamente simples, mas você poderia ter regras de CSS muito mais avançadas para diferenciar ainda mais os vários links e outros elementos. Esperamos que você também tenha aprendido algumas dicas de CSS ao longo do caminho.

A integração opcional do WP-PageNavi é um recurso muito interessante que os desenvolvedores de temas poderiam integrar em seus temas. Com o método de integração que descrevemos acima, os usuários poderiam escolher facilmente se querem ou não usá-lo, e essa poderia ser uma boa opção para muitos blogs.

Talvez você queira consultar nossos guias e tutoriais:

• Melhores plug-ins de menu suspenso para WordPress (comparados)
• Como criar um menu de navegação usando o Bootstrap
• Como adicionar navegação personalizada no BuddyPress

Essas publicações o ajudarão a encontrar mais soluções que você pode estar procurando.