Guia para estilizar o plug-in WP-PageNavi WordPress

Se você não estiver familiarizado com o WP-PageNavi Plug-in do WordPress, permite substituir a navegação anterior / seguinte normal por uma navegação de paginação numerada mais avançada. Esse é um recurso que incluí em vários temas que desenvolvi, incluindo RS16, Blogwave, RS17, e Ponto brilhante.


RS16 PageNavi

Neste tutorial, abordarei como:

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

Instale o plug-in

Você tem duas opções para instalar o plugin WP-PageNavi.

  • Faça o download em WordPress.org, faça o upload para o diretório / wp-content / plugins / e ative (também conhecido como, à moda antiga).
  • Dependendo do seu host, você também pode instalar plugins automaticamente pesquisando-os na página “Adicionar novo” em Plugins no painel de administração do WordPress. Basta procurar por “pagenavi” e você deve encontrá-lo.

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

Integração de temas

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

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

<?php next_posts_link (‘«Entradas mais antigas’ ‘) ?>
<?php previous_posts_link (‘Entradas mais recentes »’) ?>

Vamos mudar para o seguinte:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } outro { ?>
<?php next_posts_link (‘«Entradas mais antigas’ ‘) ?>
<?php previous_posts_link (‘Entradas mais recentes »’) ?>
<?php} ?>

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

Observe: Dependendo de como seu CSS é codificado, você pode colocar o wp_pagenavi (); parte dentro da div “navegação” (ou equivalente). Lembre-se de que o WP-PageNavi apresenta 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 de plug-ins no cabeçalho do seu site. Não queremos que esses estilos padrão interfiram nos nossos estilos legais e personalizados, para nos livrarmos completamente deles, e há duas maneiras simples de fazer exatamente isso.

  • Adicione um arquivo CSS ao diretório de temas – 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 de temas, o WP-PageNavi usará isso em vez do padrão no diretório de plugins.
  • Adicione um trecho ao seu arquivo functions.php – O seguinte snippet de código que eu peguei de WP Recipes desabilitará completamente o comportamento acima e não incluirá nenhuma folha de estilo do plug-in (o padrão ou uma substituição no diretório de temas).

add_action (‘wp_print_styles’, ‘my_deregister_styles’, 100);

função 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 estilo do seu tema normal (geralmente style.css).

Nota: Verifique se o código está entre colchetes, como <?php … ?> se o seu arquivo de funções estiver vazio no momento.

Marcação HTML WP-PageNavi e seletores CSS

Aqui está a aparência da marcação WP-PageNavi. No exemplo a seguir, existem quatro páginas, atualmente na página dois.

Anterior1
2
3
Próximo

Último “

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

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

Nota: Os links anterior e seguinte, por padrão, não têm classe CSS neles. Se você desejar que eles sejam completamente diferenciados dos números de página e dos primeiros / últimos links, eles precisarão redefinir qualquer estilo adicionado ao seletor .wp-pagenavi a. Se isso não fazia sentido, dê uma olhada no exemplo a seguir (realmente simplificado).

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

.wp-pagenavi a {font-weight: bold; } / * Apenas links anteriores e próximos * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-weight: normal; } / * Outros links * /

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

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 é grande coisa, pois você pode redefini-las de qualquer maneira.

Atualização Importante: Graças a uma atualização de scribu nos comentários, a versão mais recente do WP-PageNavi tem classes anteriores / seguintes (graças em parte a Yoast).

Você pode usar .wp-pagenavi a.previouspostslink e .wp-pagenavi a.nextpostslink para selecionar links anteriores e seguintes, respectivamente.

Portanto, praticamente tudo o que está acima até a lista não ordenada de seletores não é mais relevante, mas vou mantê-lo apenas porque pode ser uma lição útil sobre como substituir o CSS em outras situações. O exemplo de CSS abaixo ainda será aplicado, pois eu não usei esses seletores.

Um exemplo de CSS

Aqui está um exemplo de um estilo PageNavi que eu criei do Blogwave tema.

PageNavi atualizado

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

.wp-pagenavi, extensão .wp-pagenavi {
estofamento: 5px; margem direita: 10 px;
tamanho da fonte: 15 px; cor: # 03719c; decoração de texto: nenhuma;
borda: 3px sólido #ccc; -moz-border-raio: 5px; -webkit-border-radius: 5px; raio da borda: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
fundo: # 03719c;
cor: #fff;
borda: 3px sólido #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

E aqui está o que tudo isso significa:

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

  • A primeira linha da regra define um preenchimento de 5 px, para que não fique pressionada contra a borda cinza clara (definida abaixo). Ele também define uma margem consistente de 10px à direita de cada elemento, para que haja espaçamento igual entre cada elemento..
  • A segunda linha define um tamanho de fonte de 15 px, 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 do raio da borda torna os cantos arredondados.

Segunda regra
O .wp-pagenavi a: hover, .wp-pagenavi span.current seleciona o efeito de foco 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 fornece uma borda um pouco mais escura.

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

O motivo de eu não incluí-lo no efeito de foco do link é porque ele tem um efeito desigual, passando da fonte normal para a negrita.

Nota: Dependendo de como seu CSS é codificado, pode ser necessário usar seletores mais específicos. Por exemplo, se houver estilos para #content a e seu WP-PageNavi estiver dentro da div de conteúdo, talvez seja necessário reescrever o CSS do PageNavi como #content .wp-pagenavi ae substituir outros estilos menos específicos.

Conclusão

Sei 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. Espero que você tenha escolhido algumas dicas de CSS ao longo do caminho também.

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

Espero que todos tenham gostado do tutorial, e se você tiver algum pedido de futuros tutoriais do WordPress ou dicas de CSS, deixe-me saber nos comentários.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map