Om du inte är bekant med WP-PageNavi WordPress-plugin, låter den dig ersätta den normala föregående/nästa navigeringen med en mer avancerad navigering med numrering. Det här är en funktion som jag har inkluderat i flera teman som jag har utvecklat, inklusive RS16, Blogwave, RS17 och Bright Spot.
I den här handledningen ska jag gå igenom hur man:
- Installera WP-PageNavi och integrera det ordentligt i ditt tema.
- Två metoder för att inaktivera och/eller åsidosätta standardinsticksstilar.
- En översikt över WP-PageNavis HTML-markeringsutdata
- Slutligen, hur du ändrar utseendet på din sida Navigering genom CSS
Installera plugin
Du har två alternativ när det gäller att installera plugin-programmet WP-PageNavi.
- Ladda ner den från WordPress.org, ladda upp den till din /wp-content/plugins/-katalog och aktivera den (aka det gammalmodiga sättet).
- Beroende på din värd kan du också installera plugins automatiskt genom att hitta dem på sidan “Lägg till nytt” under Plugins i din WordPress adminpanel. Sök helt enkelt efter “pagenavi” så borde du hitta det.
Okej, det borde ha varit ganska enkelt. Nu är det dags att smutsa ner händerna lite med koden för integrationsdelen.
Temaintegration
I vår temaintegrering vill vi aldrig att några fel ska visas om WP-PageNavi inte är aktivt. Istället kommer vi att se till att det faller tillbaka till den gamla föregående/nästa stilnavigeringen. För att göra detta kommer vi att använda en function_exists conditional check.
Låt oss säga att detta är din vanliga WordPress nästa/föregående navigeringskod:
Vi kommer att ändra det till följande:
Detta kontrollerar i princip om WP-PageNavi är aktivt och om det är det visar den nya sidnavigeringskoden. Annars återgår den graciöst till normal föregående/nästa navigering.
Kom ihåg: Beroende på hur din CSS är kodad kanske du vill sätta wp_pagenavi(); del inuti “navigations” div (eller motsvarande). Observera att WP-PageNavi spottar ut en ny klass som heter “wp-pagenavi” som vi kan använda för att styla separat.
Åsidosätt plugin-stilar
Som standard infogar WP-PageNavi automatiskt en CSS-fil som heter pagenavi-css.css från din 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 blir av med dem helt, och det finns två enkla sätt att göra det.
- Lägg till en CSS-fil i din temakatalog – Detta är förmodligen det enklaste sättet att åsidosätta standard WP-PageNavi-stilar. Om du har en fil som heter pagenavi-css.css i din temakatalog kommer WP-PageNavi att använda den istället för standardfilen i plugins-katalogen.
- Lägg till ett fragment till din functions.php-fil – Följande kodsnutt som jag hämtade från WP Recipes kommer helt att inaktivera ovanstående beteende och kommer inte att inkludera några plugin-stilark (antingen standard eller en åsidosättning i din temakatalog).
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'wp-pagenavi' );
}
Placera helt enkelt den koden i ditt temas functions.php-fil och lägg till CSS-stilarna till ditt vanliga temas stilmall (vanligtvis style.css).
Notera: Se till att koden är omgiven av hakparenteser som om din funktionsfil för närvarande är tom.
WP-PageNavi HTML Markup och CSS Selectors
Så här ser WP-PageNavi-uppmärkningen ut. I exemplet nedan finns det fyra sidor, för närvarande på sida två.
... Last »
Vi kan använda följande CSS-väljare för att rikta in HTML-uppmärkningen ovan:
- .wp-pagenavi – Gäller hela div, användbart för CSS-utkast, utfyllnad/marginal, teckenstorlekar och stilar (fet, kursiv, etc.)
- .wp-pagenavi a – Pekar på alla länkar i sidnavigeringen, inklusive sidnummer och föregående/nästa.
- .wp-pagenavi a.page – Inriktar sig specifikt på sidnummer
- .wp-pagenavi a.first – riktar sig specifikt till den “första” länken (som inte nämns ovan)
- .wp-pagenavi a.last: riktar sig specifikt till den “sista” länken
- .wp-pagenavi span: pekar på det aktuella sidnumret tillsammans med tilläggsdelen (grejen med tre punkter)
- .wp-pagenavi span.current – riktar sig specifikt mot det aktuella sidnumret
- .wp-pagenavi span.extend – riktar sig specifikt till tillägget (grej med tre punkter)
- .wp-pagenavi span.pages – riktar sig specifikt till sidnummervisning (dvs. sida 1 av 4)
Notera: De föregående och nästa länkarna har som standard inga CSS-klasser. Om du vill att de ska vara helt åtskilda från sidnummer och första/sista länkar, måste de återställa stilarna som lagts till i .wp-pagenavi-väljaren. Om det inte är vettigt, ta en titt på följande (riktigt förenklade) exempel.
Till exempel: Låt oss säga att du vill att föregående och nästa länk ska vara fetstil, men alla andra länkar ska vara normalviktiga. Du bör göra följande:
.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 */
Jag kombinerade sidnummerlänkar, den första länken och den sista länken till en enda regel för exempel. Naturligtvis kan du separera dem och lägga till mer specifika stilar till var och en.
Detta skulle vara mycket enklare om det läggs till en klass i föregående/nästa länkar som standard, men det är det inte. Det är ingen stor sak eftersom du kan återställa dem ändå.
Viktig uppdatering: Tack vare en uppdatering från scribu i kommentarerna visar det sig att den nyare versionen av WP-PageNavi har tidigare/nästa klasser (tack vare Yoast).
Du kan använda .wp-pagenavi a.previouspostslink och .wp-pagenavi a.nextpostslink för att välja föregående respektive nästa länk.
Så i stort sett allt ovan tills den oordnade listan med väljare inte längre är relevant, men jag behåller den bara för att det kan vara en användbar lektion i att åsidosätta CSS i vissa andra situationer. CSS-exemplet nedan 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-stil som jag skapade från Blogwave-temat.
Här är koden jag använde för att få det här utseendet, multi-line CSS är valfritt:
.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; }
Och detta är vad det hela betyder:
Första regeln
.wp-pagenavi a, .wp-pagenavi span väljer alla ankare och span element (i stort sett allt) inom .wp-pagenavi div.
- Den första raden i regeln anger en utfyllnad på 5px så att den inte blir rörig mot den ljusgrå kanten (definierad nedan). Ställ också in en konsekvent marginal på 10px till höger om varje element så att det är lika mellanrum mellan varje element.
- Den andra raden anger en teckenstorlek på 15px, gör texten blå och ser till att länkarna inte har understrykningar.
- Den tredje raden sätter en fast 3px grå ram genomgående. Kantradiekoden gör att hörnen rundas.
Andra regeln
.wp-pagenavi a:hover, .wp-pagenavi span.current väljer länkhovereffekten såväl som aktuellt sidnummer.
- 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 regeln
Detta väljer det aktuella sidnumret (igen) utan att även påverka länksvävningseffekten (som den andra regeln). Detta gör bara det aktuella sidnumret till en fet stil.
Anledningen till att jag inte tog med den med länksvävningseffekten är för att den har en ojämn effekt som går från normal till fetstil.
Notera: Beroende på hur din CSS är kodad kan du behöva använda mer specifika väljare. Till exempel, om det finns stilar för #content a och din WP-PageNavi är inne i content div, kan du behöva skriva om din PageNavi CSS som #content .wp-pagenavi a och åsidosätta alla 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 ytterligare differentiera de olika länkarna och andra element. Förhoppningsvis har du också lärt dig några CSS-tips på vägen.
Den valfria WP-PageNavi-integrationen är en ganska cool funktion som temautvecklare kan integrera i sina teman. Med integrationsmetoden jag beskrev ovan kan användarna enkelt välja om de ska använda den eller inte, och det kan vara ett bra alternativ för många bloggar.
Jag hoppas att ni alla gillade handledningen, och om du har några önskemål om framtida WordPress-tutorials eller CSS-tips, låt mig veta i kommentarerna.
