Kako dodati numerično stran v svoji WordPress temi

Eden od naših bralcev nas je nedavno vprašal, kako na strani spletnega dnevnika WPBeginner dodamo številčno stranico. Privzete teme WordPress in številne druge teme prikazujejo povezave na strani, tako da dodate povezave Starejše objave in Novejše objave na dnu strani arhiva WordPress. Vendar pa obstaja veliko WordPress spletnih mest, ki uporabljajo numerično stran, kot je WPBeginner. Iz naših izkušenj je numerična stran z uporabnikom prijaznejša, privlačnejša in SEO prijaznejša. Večina naprednih tematskih okvirov WordPress, kot je Genesis, ima vgrajeno funkcijo za dodajanje numerične strani. V tem članku vam bomo pokazali, kako v svojo WordPress temo dodati numerično stran. Cilj je nadomestiti privzete povezave starejšega in novejšega strani na dnu arhivskih strani z enostavnimi navigacijami po številkah strani.


Razlika med privzeto navigacijo po WordPressu in numerično stran

Obstajata dva načina za dodajanje številčne strani v vašo WordPress temo. Prva metoda je ročno dodajanje številčne strani, ne da bi se zanašali na vtičnik tretje osebe. Ker je ta članek v tematski kategoriji in je namenjen novim oblikovalcem tem, bomo najprej prikazali ročno metodo. Druga metoda je uporaba obstoječega vtičnika tretje osebe za dodajanje številčne strani. To metodo bi priporočili vsem našim lastnim uporabnikom.

Ročno dodajanje numerične strani v vaših WordPress temah

Najprej vam bomo pokazali, kako ročno dodati teme s številkami v svoje WordPress teme. To bo koristilo našim naprednim uporabnikom in uporabnikom, ki se učijo razvoja tem ali želijo to storiti, ne da bi se zanašali na vtičnik tretje osebe. Začnite z dodajanjem naslednje kode v datoteko function.php teme.

Opomba: Ta koda izhaja iz sistema Genesis Framework, ki ga uporabljamo na našem spletnem mestu. Če uporabljate Genesis, ne potrebujete te kode ali vtičnika.

funkcija wpbeginner_numeric_posts_nav () {

če (is_singular ())
vrnitev;

globalna $ wp_query;

/ ** Zaustavite izvedbo, če obstaja samo 1 stran * /
če ($ wp_query->max_num_stran <= 1)
vrnitev;

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

/ ** Dodaj trenutni strani v matriko * /
če ($ strani >= 1)
$ povezave [] = $ strani;

/ ** Array dodajte strani okoli trenutne strani * /
če ($ strani >= 3) {
$ povezave [] = $ zasledeno – 1;
$ povezave [] = združene strani – 2;
}

če ((preimenovano v $ + 2) <= $ max) {
$ povezave [] = $ paged + 2;
$ povezave [] = $ paged + 1;
}

odmev ‘

    ‘ . "\ n";

    / ** Prejšnja povezava do sporočila * /
    če (get_previous_posts_link ())
    printf (‘

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

    / ** Povezava do prve strani in po potrebi elipsa * /
    if (! in_array (1, $ povezave)) {
    $ class = 1 == $ stranski? ‘class ="aktivno"’:’ ‘;

    printf (‘% s

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

    if (! in_array (2, $ povezave))
    odmev ‘

  • ‘;
    }

    / ** Povezava do trenutne strani in po potrebi 2 strani v katero koli smer * /
    razvrsti ($ povezave);
    foreach ((array) $ povezave kot $ link) {
    $ class = $ paged == $ povezava? ‘class ="aktivno"’:’ ‘;
    printf (‘% s

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

    / ** Povezava do zadnje strani in po potrebi elipsa * /
    if (! in_array ($ max, $ povezave)) {
    if (! in_array ($ max – 1, $ povezave))
    odmev ‘

  • ‘ . "\ n";

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

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

    / ** Naslednja objava povezave * /
    če (get_next_posts_link ())
    printf (‘

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

    odmev ‘

‘ . "\ n";

}

Na WPBeginner uporabljamo to isto kodo za numerično paginacijo na naših arhivskih straneh (na primer na našem spletnem dnevniku ali strani z kategorijami vadnic WordPress-a). Ta koda počne, da pridobi število strani in pripravi seznam z oštevilčenimi povezavami. Če želite to dodati v svoje predloge, morate dodati naslednjo oznako predloge v indeks.php teme, archive.php, category.php in katero koli drugo predlogo strani arhivske strani..

<?php wpbeginner_numeric_posts_nav (); ?>

Zdaj, ko imamo svoj seznam oštevilčenih strani, ga moramo oblikovati. Želimo, da se seznam prikaže v vrstici v vrstici, kjer je aktivna stran označena z drugačno barvo ozadja. Če želite to doseči, pojdite naprej in v datoteko style.css teme dodajte naslednje:

.navigacija li a,
.navigacija li a: lebdite,
.navigacija li.ctive a,
.navigacija li.disabled {
barva: #fff;
urejanje besedila: nič;
}

.navigacija li {
zaslon: inline;
}

.navigacija li a,
.navigacija li a: lebdite,
.navigacija li.ctive a,
.navigacija li.disabled {
barva ozadja: # 6FB7E9;
meja polmera: 3px;
kazalec: kazalec;
oblazinjenje: 12px;
oblazinjenje: 0,75rem;
}

.navigacija li a: lebdite,
.navigacija li.active a {
barva ozadja: # 3C8DC5;
}

Tu ga imate. V tej temi imamo seznam številčnih strani, ki izgledajo odlično.

Ročno dodajanje numerične strani s temami WordPress brez vtičnika

Dodajanje numerične strani v WordPressu z uporabo WP-PageNavi

Zdaj pa si poglejmo, kako v svojo WordPress temo dodati številčno stran s pomočjo obstoječega vtičnika, imenovanega WP-PageNavi. Prva stvar, ki jo morate storiti, je namestitev in aktiviranje vtičnika WP-PageNavi. Po aktiviranju vtičnika pojdite na Nastavitve »PageNavi nastavite nastavitve vtičnika.

Konfiguracija nastavitev WP-PageNavi

Na strani z nastavitvami vtičnika lahko po želji zamenjate privzete nastavitve besedila in številske strani s svojimi. Privzete nastavitve pa bi morale delovati na večini spletnih mest.

V naslednjem koraku morate v temo WordPress dodati oznako predloge. Pojdite v tematsko mapo in poiščite vrstice za starejšo in novejšo stran v predlogah vaše arhivske strani: index.php, archive.php in drugih datotekah s predlogi arhiva. Dodajte naslednjo oznako predloge, da nadomestite stare prejšnje oznake_posts_link in next_posts_link.

<?php wp_pagenavi (); ?>

Ko dodate delček wp_pagenavi, bo tako izgledala številčna stran.

Privzeti pogled številčne strani na strani wp-pagenavi

Če želite spremeniti, kako izgledajo barve in slog številčne strani na wp-pagenavi, potem bi morali iti na Nastavitve »PageNavi. Počistite možnost, če želite uporabiti Uporabi pagenavi-css.css in shranite spremembe. Zdaj pa pojdi na Vtičniki »Urejevalnik. V spustnem meniju Izberite vtičnik za urejanje izberite WP-PageNavi in ​​kliknite gumb Izberi. Urejevalnik bo vstavil datoteke vtičnikov v desno stransko vrstico. Kliknite na pagenavi-css.css, da ga odprete v urejevalniku in nato kopirate vsebino datoteke.

Kopirajte vsebino datoteke pagenavi-css

Nato morate iti Videz »Urednik in prilepite vsebino pagenavi-css.css v datoteko style.css teme. Zdaj lahko tukaj spremenite barvno shemo in slog. Razlog, zakaj smo kopirali vsebino css-ja vtičnika v tabelo sloga teme, je, da preprečimo izgubo sprememb sloga, če posodobite vtičnik. Tu je nekoliko spremenjena različica numerične strani, ki jo lahko uporabljate in spreminjate v svoji temi.

.wp-pagenavi {
jasno: oboje;
}

.wp-pagenavi a, .wp-pagenavi razpon {
barva: #FFF;
urejanje besedila: nič;
barva ozadja: # 6FB7E9;
obroba: 1px trdna # B2D1E5;
oblazinjenje: 5px 5px;
marža: 2px;
}

.wp-pagenavi a: hover, .wp-pagenavi span.current {
barva obrobe: # E9F2F9;
barva ozadja: # 6FB7E9;
}

.wp-pagenavi span.current {
pisava: krepka;
barva ozadja: # 3C8DC5;
}

Tukaj je, kako bi to izgledalo:

Prilagojeni PageNavi CSS

Kot vedno bi morali eksperimentirati s CSS-om. Cilj mora biti uskladitev številčne strani z videzom barv na vašem spletnem mestu, tako da se lepo zlije in ne izgleda kot nenavadno postavljen izdelek.

Upamo, da vam je ta članek pomagal dodati in prikazati numerično stran s svojo WordPress temo. Katero metodo najraje uporabljate? Ali vam je všeč številčna stran, ali imate raje vgrajeno prejšnjo / naslednjo navigacijo? Sporočite nam v spodnjih komentarjih.

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