Slik legger du til numerisk paginering i ditt WordPress-tema

En av leserne våre spurte oss nylig hvordan vi legger til numerisk paginering på WPBeginner-bloggsiden. Standard WordPress-temaer og mange andre temaer viser paginasjonslenker ved å legge til lenker til eldre innlegg og nyere innlegg nederst på WordPress-arkivsidene. Imidlertid er det mange WordPress-nettsteder som bruker numerisk paginering, for eksempel WPBeginner. Ut fra vår erfaring er numerisk paginering mer brukervennlig, attraktiv og SEO-vennlig. De mest avanserte WordPress-temarammene som Genesis har en innebygd funksjonalitet for å legge til numerisk paginering. I denne artikkelen vil vi vise deg hvordan du legger til numerisk paginering i ditt WordPress-tema. Målet er å erstatte standardkoblinger for eldre og nyere paginering nederst på arkivsider med enkle å navigere på sidetall.


Forskjell mellom standard WordPress-navigasjon og numerisk paginering

Det er to metoder for å legge til numerisk paginering i WordPress-temaet. Den første metoden er å legge til numerisk paginering manuelt uten å stole på en tredjeparts plugin. Siden denne artikkelen er i temakategorien og beregnet på nye temadesignere, vil vi først vise den manuelle metoden. Den andre metoden er å bruke en eksisterende tredjeparts plugin for å legge til numerisk paginering. Vi vil anbefale denne metoden for alle våre DIY-brukere.

Legge manuelt til numerisk paginering manuelt i WordPress-temaene

Først viser vi deg hvordan du manuelt legger til numerisk paginering i WordPress-temaene dine. Dette vil gagne våre avanserte brukere og brukere som lærer temautvikling, eller ønsker å gjøre dette uten å stole på en tredjeparts plugin. La oss komme i gang ved å legge til følgende kode i temaets funksjoner.php-fil.

Merk: Denne koden er avledet fra Genesis Framework som vi bruker på nettstedet vårt. Hvis du bruker Genesis, trenger du ikke denne koden eller plugin-modulen.

funksjon wpbeginner_numeric_posts_nav () {

if (is_singular ())
komme tilbake;

global $ wp_query;

/ ** Stopp kjøringen hvis det bare er 1 side * /
if ($ wp_query->MAX_NUM_PAGES <= 1)
komme tilbake;

$ paged = get_query_var (‘paged’)? absint (get_query_var (‘paged’)): 1;
$ max = intval ($ wp_query->max_num_sider);

/ ** Legg til gjeldende side i matrisen * /
if ($ paged >= 1)
$ lenker [] = $ paged;

/ ** Legg sidene rundt den aktuelle siden til matrisen * /
if ($ paged >= 3) {
$ lenker [] = $ paged – 1;
$ lenker [] = $ paged – 2;
}

if (($ paged + 2) <= $ maks) {
$ lenker [] = $ paged + 2;
$ lenker [] = $ paged + 1;
}

ekko ‘

    ‘ . "\ n";

    / ** Forrige innleggslenk * /
    if (get_previous_posts_link ())
    printf (‘

  • % s
  • ‘ . "\ n", get_previous_posts_link ());

    / ** Link til første side, pluss ellipser om nødvendig * /
    if (! in_array (1, $ lenker)) {
    $ class = 1 == $ paged? ‘klasse ="aktiv"’:’ ‘;

    printf (‘% s

    ‘ . "\ n", $ klasse, esc_url (get_pagenum_link (1)), ‘1’);

    if (! in_array (2, $ lenker))
    ekko ‘

  • ‘;
    }

    / ** Link til gjeldende side, pluss 2 sider i begge retninger om nødvendig * /
    sortering ($ lenker);
    foreach ((array) $ lenker som $ link) {
    $ class = $ paged == $ link? ‘klasse ="aktiv"’:’ ‘;
    printf (‘% s

    ‘ . "\ n", $ klasse, esc_url (get_pagenum_link ($ link)), $ link);
    }

    / ** Link til siste side, pluss ellipser om nødvendig * /
    if (! in_array ($ maks, $ lenker)) {
    if (! in_array ($ maks – 1, $ lenker))
    ekko ‘

  • ‘ . "\ n";

    $ class = $ paged == $ max? ‘klasse ="aktiv"’:’ ‘;
    printf (‘% s

    ‘ . "\ n", $ klasse, esc_url (get_pagenum_link ($ maks)), $ maks);
    }

    / ** Neste innleggslenk * /
    if (get_next_posts_link ())
    printf (‘

  • % s
  • ‘ . "\ n", get_next_posts_link ());

    ekko ‘

‘ . "\ n";

}

Hos WPBeginner bruker vi den samme koden for numerisk paginering på arkivsidene våre (for eksempel vår blogg, eller WordPress tutorials kategoriside). Hva denne koden gjør er at den henter antall sider og utarbeider en punktliste med nummererte lenker. Hvis du vil legge til dette i malene dine, må du legge til følgende malkode i temaets indeks.php, arkiv.php, kategori.php og enhver annen arkivsidemal..

<?php wpbeginner_numeric_posts_nav (); ?>

Nå som vi har fått listen over nummererte sider, må vi style denne listen. Vi ønsker å få listen til å vises på linje der den aktive siden er uthevet med en annen bakgrunnsfarge. For å oppnå det, la oss gå videre og legge til følgende i temaets style.css-fil:

.navigasjon li a,
.navigasjon li a: hover,
.navigasjon li.active a,
.navigasjon li.disabled {
farge: #fff;
text-decoration: none;
}

.navigasjon li {
skjerm: inline;
}

.navigasjon li a,
.navigasjon li a: hover,
.navigasjon li.active a,
.navigasjon li.disabled {
bakgrunnsfarge: # 6FB7E9;
border-radius: 3px;
markør: peker;
polstring: 12px;
polstring: 0,75rem;
}

.navigasjon li a: hover,
.navigasjon li.active a {
bakgrunnsfarge: # 3C8DC5;
}

Der har du det. Vi har en liste over numerisk paginering i temaet vårt som ser bra ut.

Legge manuell numerisk paginering manuelt til WordPress-temaer uten plugin

Legge til numerisk paginering i WordPress ved hjelp av WP-PageNavi

La oss nå se på hvordan du legger til numerisk paginering i WordPress-temaet ditt ved å bruke en eksisterende plugin som heter WP-PageNavi. Det første du trenger å gjøre er å installere og aktivere WP-PageNavi-plugin. Etter aktivering av plugin går du til Innstillinger »PageNavi for å konfigurere plugin-innstillingene.

Konfigurere WP-PageNavi-innstillinger

På plugininnstillingssiden kan du bytte ut standardinnstillinger for tekst og numeriske paginering med dine egne hvis du vil. Standardinnstillingene skal imidlertid fungere for de fleste nettsteder.

I neste trinn må du legge til en malkode i WordPress Theme. Gå til temamappen din og finn linjene for eldre og nyere paginering i arkivsidemalene dine: index.php, archive.php og eventuelle andre arkivmalefiler. Legg til følgende mal for å erstatte de gamle forrige_posts_link- og next_posts_link-taggene.

<?php wp_pagenavi (); ?>

Når du har lagt til wp_pagenavi-utdraget, er det slik den numeriske paginasjonen vil se ut:

Standardvisning av wp-pagenavis numeriske paginering

Hvis du vil endre hvordan fargene og stilen til numerisk paginering i wp-pagenavi ser ut, må du gå til Innstillinger »PageNavi. Fjern merket for alternativet å bruke Bruk pagenavi-css.css og lagre endringer. Gå nå til Plugins »Editor. Fra Velg plugin for å redigere rullegardinmenyen, velg WP-PageNavi og klikk på Velg-knappen. Redaktøren vil laste inn plugin-filer i høyre sidefelt. Klikk på pagenavi-css.css for å åpne den i redigeringsprogrammet og deretter kopiere innholdet i filen.

Kopier innholdet i pagenavi-css-filen

Deretter må du gå til Utseende »Redaktør og lim inn innholdet i pagenavi-css.css i temaets stil.css-fil. Nå kan du endre fargevalg og styling herfra. Årsaken til at vi kopierte innholdet i plugins css til temas stilark er å forhindre tap av stilendringer hvis du oppdaterer plugin-modulen. Her er en litt modifisert versjon av numerisk paginering, bruk og endre den i temaet ditt.

.wp-pagenavi {
tydelig: begge deler;
}

.wp-pagenavi a, .wp-pagenavi span {
farge: #FFF;
tekstdekorasjon: ingen;
background-color: # 6FB7E9;
kant: 1px solid # B2D1E5;
polstring: 5px 5px;
margin: 2px;
}

.wp-pagenavi a: hover, .wp-pagenavi span.current {
kantfarge: # E9F2F9;
background-color: # 6FB7E9;
}

.wp-pagenavi span.current {
font-vekt: fet;
background-color: # 3C8DC5;
}

Slik ser det ut:

Tilpasset PageNavi CSS

Som alltid bør du eksperimentere med CSS. Målet bør være å matche den numeriske paginasjonen med utseendet og følelsen av nettstedets farger, slik at det smelter sammen og ikke ser ut som et underlig plassert element.

Vi håper at denne artikkelen hjalp deg med å legge til og vise numerisk paginering i ditt WordPress-tema. Hvilken metode foretrekker du å bruke? Liker du den numeriske paginasjonen, eller foretrekker du den innebygde forrige / neste navigasjonen? Gi oss beskjed i kommentarene nedenfor.

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