Hur du lägger till numerisk pagination i ditt WordPress-tema

En av våra läsare frågade oss nyligen hur lägger vi till numerisk pagination på WPBeginner-bloggsidan. Standard WordPress-teman och många andra teman visar sidlänkar genom att lägga till äldre inlägg och länkar till nyare inlägg längst ner på dina WordPress-arkivsidor. Det finns dock många WordPress-webbplatser som använder numerisk pagination, som WPBeginner. Från vår erfarenhet är numerisk pagination mer användarvänlig, attraktiv och SEO-vänlig. De mest avancerade WordPress-temaramar som Genesis har en inbyggd funktionalitet för att lägga till numerisk pagination. I den här artikeln visar vi dig hur du lägger till numerisk pagination i ditt WordPress-tema. Målet är att byta ut de gamla äldre och nyare sidlänkarna längst ner på arkivsidorna med enkla att navigera på sidnummer.


Skillnaden mellan standard WordPress-navigering och numerisk pagination

Det finns två metoder för att lägga till numerisk pagination i ditt WordPress-tema. Den första metoden är manuellt att lägga till numerisk pagination utan att förlita sig på en tredjeparts plugin. Eftersom den här artikeln ingår i temakategorin och är avsedd för nya temadesigners, kommer vi att visa den manuella metoden först. Den andra metoden är att använda ett befintligt tredjeparts plugin för att lägga till numerisk siduppdelning. Vi rekommenderar den metoden för alla våra DIY-användare.

Lägg till numerisk pagination manuellt i dina WordPress-teman

Först kommer vi att visa dig hur man manuellt lägger till numerisk pagination i dina WordPress-teman. Detta kommer att gynna våra avancerade användare och användare som lär sig temautveckling eller vill göra detta utan att förlita sig på en tredjeparts plugin. Låt oss komma igång genom att lägga till följande kod i ditt temas funktioner.php-fil.

Obs! Den här koden är härledd från Genesis Framework som vi använder på vår webbplats. Om du använder Genesis behöver du inte den här koden eller plugin.

funktion wpbeginner_numeric_posts_nav () {

if (is_singular ())
lämna tillbaka;

global $ wp_query;

/ ** Stoppa körningen om det bara finns en sida * /
if ($ wp_query->max_num_pages <= 1)
lämna tillbaka;

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

/ ** Lägg till aktuell sida i matrisen * /
if ($ sid >= 1)
$ länkar [] = $ sid;

/ ** Lägg till sidorna runt den aktuella sidan i matrisen * /
if ($ sid >= 3) {
$ länkar [] = $ sid – 1;
$ länkar [] = $ sid – 2;
}

if (($ paged + 2) <= $ max) {
$ länkar [] = $ paged + 2;
$ länkar [] = $ paged + 1;
}

echo ‘

    ‘ . "\ n";

    / ** Tidigare inläggslänk * /
    if (get_previous_posts_link ())
    printf (‘

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

    / ** Länk till första sidan, plus ellipser vid behov * /
    if (! in_array (1, $ länkar)) {
    $ klass = 1 == $ sid? ‘klass ="aktiva"’:’ ‘;

    printf (‘% s

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

    if (! in_array (2, $ länkar))
    echo ‘

  • ‘;
    }

    / ** Länk till aktuell sida, plus 2 sidor i båda riktningarna vid behov * /
    sortera ($ länkar);
    foreach ((array) $ -länkar som $ -länk) {
    $ class = $ paged == $ länk? ‘klass ="aktiva"’:’ ‘;
    printf (‘% s

    ‘ . "\ n", $ klass, esc_url (get_pagenum_link ($ länk)), $ länk);
    }

    / ** Länk till sista sidan, plus ellipser vid behov * /
    if (! in_array ($ max, $ länkar)) {
    if (! in_array ($ max – 1, $ länkar))
    echo ‘

  • ‘ . "\ n";

    $ class = $ paged == $ max? ‘klass ="aktiva"’:’ ‘;
    printf (‘% s

    ‘ . "\ n", $ klass, esc_url (get_pagenum_link ($ max)), $ max);
    }

    / ** Nästa inläggslänk * /
    if (get_next_posts_link ())
    printf (‘

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

    echo ‘

‘ . "\ n";

}

På WPBeginner använder vi samma kod för numerisk paginering på våra arkivsidor (till exempel vår blogg eller WordPress tutorials kategorisida). Vad den här koden gör är att den hämtar antalet sidor och förbereder en punktlista med numrerade länkar. För att lägga till detta i dina mallar måste du lägga till följande malltagg i tematets index.php, archive.php, category.php och alla andra arkivsidor..

<?php wpbeginner_numeric_posts_nav (); ?>

Nu när vi har fått vår lista med numrerade sidor måste vi utforma denna lista. Vi vill att listan ska visas i raden där den aktiva sidan är markerad med en annan bakgrundsfärg. För att åstadkomma det låter vi gå vidare och lägga till följande i ditt temas stil.css-fil:

.navigering li a,
.navigering li a: hover,
.navigering li.active a,
.navigation li.disabled {
färg: #fff;
text-decoration: none;
}

.navigering li {
display: inline;
}

.navigering li a,
.navigering li a: hover,
.navigering li.active a,
.navigation li.disabled {
bakgrundsfärg: # 6FB7E9;
gränsradie: 3px;
markör: pekare;
stoppning: 12px;
stoppning: 0,75rem;
}

.navigering li a: hover,
.navigering li.active a {
bakgrundsfärg: # 3C8DC5;
}

Där har du det. Vi har en lista med numerisk pagination i vårt tema som ser bra ut.

Lägga till numerisk pagination manuellt till WordPress-teman utan ett plugin

Lägga till numerisk pagination i WordPress med WP-PageNavi

Låt oss nu titta på hur du lägger till numerisk pagination i ditt WordPress-tema genom att använda ett befintligt plugin som heter WP-PageNavi. Det första du behöver göra är att installera och aktivera WP-PageNavi-plugin. Efter aktivering av plugin går du till Inställningar »PageNavi för att konfigurera insticksinställningarna.

Konfigurera WP-PageNavi-inställningar

På plugin-inställningssidan kan du byta ut standardtext- och numeriska sidinställningar med dina egna om du vill. Standardinställningarna bör dock fungera för de flesta webbplatser.

I nästa steg måste du lägga till en malltagg i ditt WordPress-tema. Gå till din temamapp och hitta raderna för äldre och nyare pagination i dina arkivsidesmallar: index.php, archive.php och andra arkivmallfiler. Lägg till följande malltagg för att ersätta de gamla taggarna föregående_posts_link och next_posts_link.

<?php wp_pagenavi (); ?>

När du har lagt till wp_pagenavi-utdraget är det så här den numeriska paginationen ser ut:

Standardvy av wp-pagenavis numeriska pagination

Om du vill ändra hur färgerna och stilen för numerisk pagination i wp-pagenavi ser ut, måste du gå till Inställningar »PageNavi. Avmarkera alternativet för att använda Använd pagenavi-css.css och spara ändringar. Gå nu till Plugins »Editor. Från Välj plugin för att redigera rullgardinsmenyn, välj WP-PageNavi och klicka på knappen Välj. Redaktören laddar plugin-filer i den högra sidofältet. Klicka på pagenavi-css.css för att öppna den i redigeraren och kopiera sedan innehållet i filen.

Kopiera innehållet i pagenavi-css-filen

Därefter måste du gå till Utseende »Redaktör och klistra in innehållet i pagenavi-css.css i ditt temas stil.css-fil. Nu kan du ändra färgschema och styling härifrån. Anledningen till att vi kopierade innehållet i plugins css till temas stilblad är att förhindra förlust av stiländringar om du uppdaterar plugin. Här är en något modifierad version av numerisk pagination, känn dig fri att använda och ändra den i ditt tema.

.wp-pagenavi {
tydlig: båda;
}

.wp-pagenavi a, .wp-pagenavi span {
färg: #FFF;
textdekoration: ingen;
background-color: # 6FB7E9;
kant: 1px solid # B2D1E5;
stoppning: 5px 5px;
marginal: 2px;
}

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

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

Så här ser det ut:

Anpassad PageNavi CSS

Som alltid bör du experimentera med CSS. Målet borde vara att matcha den numeriska paginationen med utseendet och känslan i webbplatsens färger, så att den smälter in och inte ser ut som ett konstigt placerat objekt.

Vi hoppas att den här artikeln hjälpte dig att lägga till och visa numerisk pagination i ditt WordPress-tema. Vilken metod föredrar du att använda? Gillar du den numeriska paginationen eller föredrar du den inbyggda föregående / nästa navigering? Låt oss veta i kommentarerna nedan.

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