Guide to Styling WP-PageNavi WordPress Plugin

Hvis du ikke er kjent med WP-PageNavi WordPress-plugin, den lar deg erstatte normal forrige / neste navigasjon med en mer avansert, nummerert personsøkernavigasjon. Dette er en funksjon jeg har tatt med på en rekke temaer jeg har utviklet, inkludert RS16, Blogwave, RS17, og Lyst sted.


RS16 SideNavi

I denne opplæringen skal jeg gå nærmere inn på hvordan:

  • Installer WP-PageNavi og integrer den riktig i temaet ditt.
  • To metoder for å deaktivere og / eller overstyre standard plugin-stiler.
  • En oversikt over HTML-merkeutdataene fra WP-PageNavi
  • Til slutt, hvordan du endrer utseendet til sidenavigering gjennom CSS

Installer plugin-modulen

Du har to alternativer når det gjelder installering av WP-PageNavi-plugin.

  • Last ned den fra WordPress.org, laste den opp til / wp-content / plugins / katalogen, og aktiver (aka, den gammeldagse måten).
  • Avhengig av verten din, kan du også installere plugins automatisk ved å søke dem på “Legg til ny” -siden under Plugins i WordPress-adminpanelet. Bare søk etter “pagenavi”, og du skulle finne det.

Det burde ha vært ganske enkelt. Nå er det på tide å få hendene litt skitne i koden for integrasjonsdelen.

Temaintegrasjon

I vår temaintegrasjon ønsker vi aldri at noen feil skal vises hvis WP-PageNavi ikke er aktiv. I stedet sørger vi for at den faller tilbake på den gamle navigasjonen i forrige / neste stil. For å gjøre dette, bruker vi a funksjon_eksisterer betinget sjekk.

La oss si at dette er din normale forrige / neste WordPress-navigasjonskode:

<?php next_posts_link (‘«Eldre oppføringer’) ?>
<?php previous_posts_link (‘Nyere oppføringer »’) ?>

Vi vil endre det til følgende:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } annet { ?>
<?php next_posts_link (‘«Eldre oppføringer’) ?>
<?php previous_posts_link (‘Nyere oppføringer »’) ?>
<?php} ?>

Dette sjekker i utgangspunktet for å se om WP-PageNavi er aktiv, og om den er det, viser den den nye sidenavigasjonskoden. Hvis ikke faller den grasiøst tilbake til den normale forrige / neste navigasjonen.

Merk: Avhengig av hvordan CSS-en din er kodet, kan det være lurt å sette wp_pagenavi (); del inne i “navigasjonen” (eller tilsvarende) div. Husk at WP-PageNavi spytter ut en ny klasse som heter “wp-pagenavi”, men som vi kan bruke til å style separat.

Overstyre plugin-stiler

Som standard setter WP-PageNavi automatisk inn en CSS-fil kalt pagenavi-css.css fra plugin-katalogen sin i overskriften på nettstedet ditt. Vi ønsker ikke at disse standardstilene skal forstyrre våre egne kule skreddersydde stiler, så vi vil bli kvitt dem helt, og det er to enkle måter å gjøre nettopp det.

  • Legg til en CSS-fil i temakatalogen – Dette er sannsynligvis den enkleste måten å overstyre standard WP-PageNavi-stiler. Hvis du har en fil som heter pagenavi-css.css i temakatalogen din, vil WP-PageNavi bruke denne i stedet for standardfilen i plugin-katalogen.
  • Legg til et kodebit i funksjonsfilen – Følgende kodebit hentet jeg fra WP-oppskrifter vil deaktivere oppførselen ovenfor fullstendig og ikke inkludere noen stilark fra plugin-en (enten standardinnstillingen eller overstyring i temakatalogen).

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

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

Bare plop den koden i temaets funksjoner.php-filen, og legg til CSS-stilene i stilbildet til ditt vanlige tema (vanligvis style.css).

Merk: Forsikre deg om at koden er omgitt av parenteser som <?php … ?> hvis funksjonsfilen din for øyeblikket er tom.

WP-PageNavi HTML Markup og CSS velgere

Slik ser WP-PageNavi-markeringen ut. I det følgende eksemplet er det fire sider, for øyeblikket på side to.

Tidligere1
2
3
neste

Siste “

Vi kan bruke følgende CSS-velgere for å målrette HTML-merkingen ovenfor:

  • .wp-pagenavi – Gjelder hele div, nyttig for CSS-slettinger, polstring / margin, skriftstørrelser og stiler (fet, kursiv osv.)
  • .wp-pagenavi a – Målretter alle koblinger på sidenavigasjonen, inkludert sidetall og forrige / neste.
  • .wp-pagenavi a.page – Mål spesifikt på sidetall
  • .wp-pagenavi a.first – Målretter den “første” linken spesifikt (ikke oppført ovenfor)
  • .wp-pagenavi a.last – Målretter den “siste” lenken spesifikt
  • .wp-pagenavi span – Målretter gjeldende sidetall sammen med utvidelsesdelen (tingen med tre prikker)
  • .wp-pagenavi span.current – Målriktig mot det gjeldende sidetallet
  • .wp-pagenavi span.extend – Mål spesielt mot utvidelsen (tre punkter ting)
  • .wp-pagenavi span.pages – Mål spesifikt sidenummervisning (dvs. side 1 av 4)

Merk: Den forrige og neste lenken har som standard ingen CSS-klasse. Hvis du vil at de skal skille seg helt fra sidetallene og de første / siste linkene, må de tilbakestille alle stiler som er lagt til .wp-pagenavi en velger. Hvis det ikke hadde noen mening, ta en titt på følgende (virkelig forenklet) eksempel.

For eksempel: La oss si at du ville at de forrige og neste linkene skal være dristige, men at alle andre lenker skal ha en normal vekt. Du må gjøre følgende:

.wp-pagenavi a {font-weight: bold; } / * Bare forrige og neste lenker * /
.wp-pagenavi a.side,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-vekt: normal; } / * Andre lenker * /

Jeg kombinerte sidetallkoblinger, den første lenken og den siste lenken til en regel for eksempel. Selvfølgelig kan du skille dem og legge til mer spesifikke stiler til hver enkelt.

Dette ville være mye enklere hvis det som standard ble lagt til en klasse til forrige / neste lenker, men det er det ikke. Det er ikke veldig mye fordi du bare kan tilbakestille dem uansett.

Viktig oppdatering: Takket være en oppdatering fra scribu i kommentarene viser det seg at den nyeste versjonen av WP-PageNavi har tidligere / neste klasser på seg (delvis takk til Yoast).

Du kan bruke .wp-pagenavi a.previouspostslink og .wp-pagenavi a.nextpostslink for å velge henholdsvis forrige og neste lenke..

Så stort sett alt over til den uordnede listen over utvalgere ikke er relevant lenger, men jeg vil beholde den bare fordi det kan være en nyttig leksjon å overstyre CSS i noen andre situasjoner. CSS-eksemplet nedenfor vil fremdeles gjelde, ettersom jeg ikke brukte disse valgene uansett.

Et CSS-eksempel

Her er et eksempel på en PageNavi-styling som jeg bygde av Blogwave tema.

Bloggbølgen oppdaterte PageNavi

Her er koden jeg brukte for å få dette utseendet, flerstrenget CSS er valgfritt:

.wp-pagenavi a, .wp-pagenavi span {
polstring: 5px; margin-høyre: 10px;
skriftstørrelse: 15px; farge: # 03719c; tekstdekorasjon: ingen;
grense: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
bakgrunn: # 03719c;
farge: #fff;
grense: 3px solid #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

Og her er hva det hele betyr:

Første regel
.Wp-pagenavi a, .wp-pagenavi-spennet velger alle anker- og spennelementer (stort sett alt) inne i .wp-pagenavi div.

  • Den første linjen i regelen setter en polstring på 5px slik at den ikke blir stappet opp mot den lysegrå kanten (definert nedenfor). Den setter også en jevn margin på 10px til høyre for hvert element, slik at det er lik avstand mellom hvert.
  • Den andre linjen angir en skriftstørrelse på 15px, gjør tekstfargen blå og sørger for at lenker ikke har noen understreking.
  • Den tredje linjen setter en solid 3px grå kant på alt. Grensradius-koden gjør hjørnene avrundede.

Andre regel
.Wp-pagenavi a: hover, .wp-pagenavi span.current velger henholdsvis koblingens hovereffekt og gjeldende sidetall..

  • Den første linjen angir en mørk blå bakgrunnsfarge.
  • Den andre linjen gjør teksten hvit.
  • Den tredje linjen gir en litt mørkere kant.

Tredje regel
Dette velger det gjeldende sidenummeret (igjen) uten å påvirke koblingshevareffekten også (som den andre regelen). Dette gjør bare det gjeldende sidetallet til en fet skriftvekt.

Årsaken til at jeg ikke inkluderte den med koblingsoverføringseffekten er fordi den har en ujevn effekt som går fra normal til fet skriftvekt.

Merk: Avhengig av hvordan CSS-en din er kodet, kan det hende du må bruke mer spesifikke velgere. For eksempel, hvis det er stiler for #content a og WP-PageNavi er inne i innholdsdelingen, kan det hende du må omskrive PageNavi CSS som #content .wp-pagenavi a og overstyre andre mindre spesifikke stiler.

Konklusjon

Jeg vet at dette var et relativt enkelt eksempel, du kan ha mye mer avanserte CSS-regler for å differensiere de forskjellige lenker og andre elementer enda mer. Forhåpentligvis hentet du noen CSS-tips underveis også.

Valgfri WP-PageNavi-integrasjon er en ganske kul funksjon som temautviklere kan integrere i temaene sine. Med integrasjonsmetoden jeg skisserte ovenfor, kunne brukere enkelt velge om de vil bruke den eller ikke, og det kan være et fint alternativ for mange blogger.

Håper dere alle likte opplæringen, og hvis dere har noen forespørsler om fremtidige WordPress-tutorials eller CSS-tips, gi meg beskjed i kommentarene.

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