Guide till styling av WP-PageNavi WordPress-plugin

Om du inte är bekant med WP-PageNavi WordPress-plugin, det gör att du kan ersätta normal föregående / nästa navigering med en mer avancerad, numrerad söknavigering. Detta är en funktion som jag har inkluderat i ett antal teman som jag har utvecklat, inklusive RS16, Blogwave, RS17, och Ljuspunkt.


RS16 PageNavi

I den här tutorialen ska jag gå igenom hur:

  • Installera WP-PageNavi och integrera den ordentligt i ditt tema.
  • Två metoder för att inaktivera och / eller åsidosätta standard plugin-format.
  • En översikt över HTML-markeringsutgången från WP-PageNavi
  • Slutligen, hur du ändrar utseendet på din sidnavigering genom CSS

Installera plugin

Du har två alternativ när det gäller att installera WP-PageNavi-plugin.

  • Ladda ner den från WordPress.org, ladda upp den till din / wp-content / plugins / katalog och aktivera (aka, det gammaldags sättet).
  • Beroende på din värd kan du också automatiskt installera plugins genom att söka efter dem på “Lägg till ny” -sidan under Plugins i din WordPress adminpanel. Sök bara efter “pagenavi” så borde du hitta det.

Okej, det borde ha varit ganska enkelt. Nu är det dags att få dina händer lite smutsiga i kod för integrationsdelen.

Temaintegration

I vår temaintegration vill vi aldrig att några fel ska visas om WP-PageNavi inte är aktivt. Istället ser vi till att det faller tillbaka på den gamla navigeringen i föregående / nästa stil. För att göra detta använder vi a function_exists villkorlig kontroll.

Låt oss säga att detta är din normala föregående / nästa WordPress-navigeringskod:

<?php next_posts_link (‘«Äldre poster’) ?>
<?php previous_posts_link (‘Nyare poster »’) ?>

Vi kommer att ändra det till följande:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } annat { ?>
<?php next_posts_link (‘«Äldre poster’) ?>
<?php previous_posts_link (‘Nyare poster »’) ?>
<?php} ?>

Detta kontrollerar i princip att se om WP-PageNavi är aktivt och om den är den visar den nya sidnavigeringskoden. Om inte faller det graciöst tillbaka till den normala föregående / nästa navigering.

Vänligen notera: Beroende på hur din CSS är kodad kanske du vill placera wp_pagenavi (); del inuti “navigering” (eller motsvarande) div. Kom ihåg att WP-PageNavi spottar ut en ny klass som heter “wp-pagenavi” men som vi kan använda för att utforma separat.

Åsidosätt pluginstilar

Som standard infogar WP-PageNavi automatiskt en CSS-fil som heter pagenavi-css.css från sin plugin-katalog i rubriken på din webbplats. Vi vill inte att dessa standardstilar ska störa våra egna coola skräddarsydda stilar, så vi kommer helt att bli av med dem, och det finns två enkla sätt att göra just det.

  • Lägg till en CSS-fil i din temakatalog – Det här är förmodligen det enklaste sättet att åsidosätta standard WP-PageNavi-format. Om du har en fil som heter pagenavi-css.css i din temakatalog, kommer WP-PageNavi att använda den i stället för standardfilen i plugin-katalogen.
  • Lägg till ett fragment till din features.php-fil – Följande kodavsnitt jag hämtade från WP-recept kommer att inaktivera ovanstående beteende fullständigt och inte inkludera något formatmall från plugin-programmet (antingen standardinställningen eller en åsidosättning i din temakatalog).

add_action (‘wp_print_style’, ‘my_deregister_style’, 100);

funktion my_deregister_style () {
wp_deregister_style (‘wp-pagenavi’);
}

Ploppa bara den koden i ditt temas funktioner.php-fil och lägg till CSS-stilar i ditt vanliga temas stilark (vanligtvis style.css).

Notera: Se till att koden är omgiven av parentes som <?php … ?> om din funktionsfil för närvarande är tom.

WP-PageNavi HTML Markup och CSS-väljare

Så här ser WP-PageNavi-markeringen ut. I följande exempel finns det fyra sidor, för närvarande på sidan två.

Tidigare1
2
3
Nästa

Sista »

Vi kan använda följande CSS-väljare för att rikta in ovanstående HTML-markering:

  • .wp-pagenavi – Gäller hela div, användbar för CSS-rensningar, polstring / marginal, teckenstorlekar och stilar (fetstil, kursiv, etc.)
  • .wp-pagenavi a – Målriktar alla länkar i sidnavigeringen, inklusive sidnummer och föregående / nästa.
  • .wp-pagenavi a.page – Siktar specifikt på sidnummer
  • .wp-pagenavi a.first – Mål specifikt den “första” länken (inte listad ovan)
  • .wp-pagenavi a.last – Mål specifikt den “sista” länken
  • .wp-pagenavi span – Mål det aktuella sidnumret tillsammans med den utsträckta delen (saken med tre prickar)
  • .wp-pagenavi span.current – Mål specifikt det aktuella sidnumret
  • .wp-pagenavi span.extend – Riktar sig specifikt förlängningen (tre punkter)
  • .wp-pagenavi span.pages – Siktar specifikt på sidnummervisning (dvs. sida 1 av 4)

Notera: De föregående och nästa länkar som standard har ingen CSS-klass på dem. Om du vill att de ska skilja sig helt från sidnumren och de första / sista länkarna måste de återställa alla stilar som läggs till .wp-pagenavi en väljare. Om det inte var meningsfullt, titta på följande (verkligen förenklade) exempel.

Till exempel: Låt oss säga att du vill att de föregående och nästa länkar ska vara djärva, men alla andra länkar ska ha en normal vikt. Du måste göra följande:

.wp-pagenavi a {font-vikt: fet; } / * Endast föregående och nästa länkar * /
.wp-pagenavi a.sida,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-vikt: normal; } / * Andra länkar * /

Jag kombinerade sidnummerlänkar, den första länken och den sista länken till en regel till exempel. Naturligtvis kan du separera dem och lägga till mer specifika stilar till var och en.

Det här skulle vara mycket lättare om det fanns en klass som läggs till tidigare / nästa länkar som standard, men det finns det inte. Det är inte en enorm affär eftersom du bara kan återställa dem ändå.

Viktig uppdatering: Tack vare en uppdatering från scribu i kommentarerna visar det sig att den senaste versionen av WP-PageNavi har tidigare / nästa klasser på dem (delvis tack till Yoast).

Du kan använda .wp-pagenavi a.previouspostslink och .wp-pagenavi a.nextpostslink för att välja respektive föregående respektive nästa länk.

Så ganska mycket allt ovan tills den oordnade listan med väljare inte är relevant längre, men jag kommer att behålla det bara för att det kan vara en användbar lektion för att åsidosätta CSS i vissa andra situationer. Nedanstående CSS-exempel kommer fortfarande att gälla eftersom jag inte använde dessa väljare ändå.

Ett CSS-exempel

Här är ett exempel på en PageNavi-styling som jag byggde upp från Blogwave tema.

Bloggvåg uppdaterad PageNavi

Här är koden jag använde för att få det här utseendet, CSS med flera linjer är valfritt:

.wp-pagenavi a, .wp-pagenavi span {
stoppning: 5px; marginal-höger: 10px;
teckenstorlek: 15px; färg: # 03719c; textdekoration: ingen;
gräns: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; gränstradius: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
bakgrund: # 03719c;
färg: #fff;
gräns: 3px fast #AFAFAF;
}
.wp-pagenavi span.current {font-vikt: fet; }

Och här är vad allt betyder:

Första regel
.Wp-pagenavi a, .wp-pagenavi span väljer alla ankare och span element (ganska mycket allt) inuti .wp-pagenavi div.

  • Den första raden i regeln anger en stoppning av 5px så att den inte kommer att klämmas upp mot den ljusgrå gränsen (definieras nedan). Det sätter också en jämn marginal på 10px till höger om varje element så att det är lika avstånd mellan varje.
  • Den andra raden anger en teckenstorlek på 15px, gör textfärgen blå och ser till att länkar inte har någon understrykning.
  • Den tredje raden sätter en solid 3px grå kant på allt. Gränseradiuskoden gör hörnen rundade.

Andra regeln
.Wp-pagenavi a: hover, .wp-pagenavi span.current väljer länken hover-effekten såväl som det aktuella sidnumret..

  • Den första raden anger en mörkblå bakgrundsfärg.
  • Den andra raden gör texten vit.
  • Den tredje raden ger en något mörkare kant.

Tredje regel
Detta väljer det aktuella sidnumret (igen) utan att även påverka länken hover-effekten (som den andra regeln). Detta gör bara det aktuella sidnumret till en fet typsnittsvikt.

Anledningen till att jag inte inkluderade den med länken hover-effekten är för att den har en ojämn effekt som går från normal till fet skriftvikt.

Notera: Beroende på hur din CSS kodas kan du behöva använda mer specifika väljare. Om det till exempel finns stilar för #content a och din WP-PageNavi finns i innehållsavdelningen, kan du behöva skriva om din PageNavi CSS som #content .wp-pagenavi a och åsidosätta andra mindre specifika stilar.

Slutsats

Jag vet att detta var ett relativt enkelt exempel, du kan ha mycket mer avancerade CSS-regler för att differentiera de olika länkar och andra element ännu mer. Förhoppningsvis tog du upp några CSS-tips längs vägen också.

Valfri WP-PageNavi-integration är en ganska cool funktion som temautvecklare kan integrera i sina teman. Med den integrationsmetod som jag beskrev ovan kan användare enkelt välja om de vill använda den eller inte, och det kan vara ett trevligt alternativ för många bloggar.

Hoppas att ni alla gillade tutorialen, och om ni har några förfrågningar om framtida WordPress-tutorials eller CSS-tips, låt mig veta i kommentarerna.

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