Guia para Estilizar o Plugin WP-PageNavi do WordPress

Se você não está familiarizado com o plugin do WordPress WP-PageNavi, ele permite que você substitua a navegação normal de anterior/próximo por uma navegação de paginação numerada mais avançada.

Neste tutorial, vamos abordar como:

• Instalar o WP-PageNavi e integrá-lo corretamente ao seu tema.
• Dois métodos para desativar e/ou sobrescrever os estilos padrão do plugin.
• Uma visão geral do HTML gerado pelo WP-PageNavi
• Finalmente, como alterar a aparência da sua navegação de página através de CSS

Instale o Plugin

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

• Baixe-o de WordPress.org, faça o upload para o seu diretório /wp-content/plugins/ e ative (ou seja, o método tradicional).
• Dependendo da sua hospedagem, você também pode instalar plugins automaticamente pesquisando-os na página "Adicionar Novo" em Plugins no seu painel de administração do WordPress. Basta pesquisar por "pagenavi" e você deverá encontrá-lo.

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

Integração com o Tema

Na integração do nosso tema, nunca queremos que nenhum erro seja exibido se o WP-PageNavi não estiver ativo. Em vez disso, garantiremos que ele volte para a navegação antiga no estilo anterior/próximo. Para fazer isso, usaremos uma verificação condicional function_exists.

Vamos dizer que este é o seu código de navegação normal de anterior/próximo do WordPress:

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></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('« Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div><?php } ?>

Isso basicamente verifica se o WP-PageNavi está ativo e, se estiver, exibe o novo código de navegação de página. Caso contrário, ele volta graciosamente para a navegação normal de anterior/próximo.

Observação: Dependendo de como seu CSS é codificado, você pode querer colocar a parte wp_pagenavi(); dentro da div “navigation” (ou equivalente). Mantenha em mente que o WP-PageNavi gera uma nova classe chamada “wp-pagenavi”, que podemos usar para estilizar separadamente.

Substituir Estilos do Plugin

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, então vamos eliminá-los completamente, e existem duas maneiras simples de fazer isso.

• Adicione um arquivo CSS ao diretório do seu tema – Esta é 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 seu tema, o WP-PageNavi o usará em vez do padrão no diretório do plugin.
• Adicione um trecho ao seu arquivo functions.php – O seguinte trecho de código que pegamos do WP Recipes desativará completamente o comportamento acima e não incluirá nenhuma folha de estilo do plugin (seja a padrão ou uma substituição no diretório do seu tema).

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

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

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

Observação: Certifique-se de que o código esteja cercado por colchetes como <?php ... ?> se o seu arquivo functions estiver atualmente vazio.

Marcação HTML e Seletores CSS do WP-PageNavi

Veja como é a marcação do WP-PageNavi. No exemplo a seguir, existem 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 »">Last »</a>
</div>

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

• .wp-pagenavi – Aplica-se à div inteira, útil para limpar CSS, preenchimento/margem, tamanhos e estilos de fonte (negrito, itálico, etc.)
• .wp-pagenavi a – Direciona todos os links dentro da navegação de página, incluindo números de página e anterior/próximo.
• .wp-pagenavi a.page – Alvo para números de página especificamente
• .wp-pagenavi a.first – Seleciona o link “primeiro” especificamente (não listado acima)
• .wp-pagenavi a.last – Seleciona o link “último” especificamente
• .wp-pagenavi span – Seleciona o número da página atual junto com a parte de extensão (aquela com três pontos)
• .wp-pagenavi span.current – Seleciona especificamente o número da página atual
• .wp-pagenavi span.extend – Seleciona especificamente a extensão (coisa dos três pontos)
• .wp-pagenavi span.pages – Seleciona especificamente a exibição do número da página (por exemplo, Página 1 de 4)

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

Por exemplo: Digamos que você quisesse que os links anterior e próximo fossem em negrito, mas todos os outros links tivessem 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 link primeiro e o link último em uma única regra para fins de exemplo. Claro, você pode separá-los e adicionar estilos mais específicos a cada um.

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

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

Então, praticamente tudo 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 sobrescrever CSS em outras situações. O exemplo de CSS abaixo ainda se aplicará, pois não usamos esses seletores de qualquer maneira.

Um Exemplo de CSS

Aqui está um exemplo de uma estilização de PageNavi que criamos:

Aqui está o código que usamos para obter este visual, CSS de várias linhas únicas é 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 que tudo isso significa:

Primeira Regra
O seletor .wp-pagenavi a, .wp-pagenavi span seleciona todos os elementos de link (a) e span (span) (praticamente tudo) dentro da div .wp-pagenavi.

• A primeira linha da regra define um preenchimento (padding) de 5px para que não fique colado na borda cinza claro (definida abaixo). Ela também define uma margem consistente de 10px à direita de cada elemento para que haja espaçamento igual entre eles.
• A segunda linha define um tamanho de fonte de 15px, deixa 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 deixa os cantos arredondados.

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

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

Terceira Regra
Este seletor seleciona o número da página atual (novamente) sem afetar o efeito de passar o mouse sobre o link também (como na segunda regra). Isso apenas torna o número da página atual em negrito.

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

Nota: Dependendo de como seu CSS está codificado, você pode precisar usar seletores mais específicos. Por exemplo, se houver estilos para #content a e seu WP-PageNavi estiver dentro da div de conteúdo, você pode precisar reescrever seu CSS do PageNavi como #content .wp-pagenavi a e sobrescrever quaisquer outros estilos menos específicos.

Conclusão

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

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 facilmente escolher se querem usá-lo ou não, e poderia ser uma boa opção para muitos blogs.

Você pode querer ver nossos guias e tutoriais:

• Os Melhores Plugins de Menu Drop-Down para WordPress (Comparados)
• Como Criar um Menu de Navegação Usando Bootstrap
• Como Adicionar Navegação Personalizada no BuddyPress

Estas postagens ajudarão você a encontrar mais soluções que possa estar procurando.