Cum să adăugați paginarea numerică în tema dvs. WordPress

Unul dintre cititorii noștri ne-a întrebat recent cum adăugăm paginarea numerică pe pagina blogului WPBeginner. Temele implicite WordPress și multe alte teme afișează linkuri de paginare adăugând postări mai vechi și linkuri Postări mai noi în partea de jos a paginilor dvs. de arhivă WordPress. Cu toate acestea, există multe site-uri WordPress care utilizează paginarea numerică, cum ar fi WPBeginner. Din experiența noastră, paginarea numerică este mai prietenoasă, atractivă și mai prietenoasă cu SEO. Cele mai avansate cadre cu temă WordPress, precum Genesis, sunt dotate cu o funcționalitate încorporată pentru adăugarea paginării numerice. În acest articol vă vom arăta cum să adăugați paginarea numerică în tema dvs. WordPress. Scopul este înlocuirea legăturilor implicite mai vechi și mai noi de paginare din partea de jos a paginilor de arhivă cu numere de pagină ușor de navigat.


Diferența dintre navigarea implicită WordPress și paginarea numerică

Există două metode de adăugare a paginării numerice în tema dvs. WordPress. Prima metodă este adăugarea manuală a paginării numerice fără a te baza pe un plugin de la terți. Întrucât acest articol se află în categoria temelor și este destinat noilor designeri tematici, vom arăta mai întâi metoda manuală. A doua metodă constă în utilizarea unui plugin de terțe părți pentru a adăuga paginarea numerică. Recomandăm această metodă tuturor utilizatorilor noștri de bricolaj.

Adăugarea manuală a paginării numerice în temele dvs. WordPress

Mai întâi vă vom arăta cum să adăugați manual paginarea numerică în temele dvs. WordPress. Acest lucru va beneficia de utilizatorii noștri avansați și de utilizatorii care învață dezvoltarea temelor sau doresc să facă acest lucru fără să se bazeze pe un plugin terț. Vom începe să adăugăm următorul cod în fișierul funcții.php al temei.

Notă: Acest cod este derivat din Genesis Framework pe care îl folosim pe site-ul nostru. Dacă utilizați Genesis, nu aveți nevoie de acest cod sau plugin.

function wpbeginner_numeric_posts_nav () {

if (is_singular ())
întoarcere;

global $ wp_query;

/ ** Opriți execuția dacă există doar 1 pagină * /
if ($ wp_query->MAX_NUM_PAGES <= 1)
întoarcere;

$ paged = get_query_var (“paginat”)? absint (get_query_var (‘paginat’)): 1;
$ max = intval ($ wp_query)->maxim_num_pagini);

/ ** Adăugați pagina curentă la tablou * /
dacă ($ pag >= 1)
$ links [] = $ paginat;

/ ** Adăugați paginile din jurul paginii curente în tablou * /
dacă ($ pag >= 3) {
$ links [] = $ paginat – 1;
$ links [] = $ paged – 2;
}

if (($ paginat + 2) <= maxim $) {
$ links [] = $ paginat + 2;
$ links [] = $ paginat + 1;
}

ecou ‘

    ‘ . "\ n";

    / ** Postare anterioară Link * /
    if (get_previous_posts_link ())
    printf (‘

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

    / ** Link către prima pagină, plus elipsuri, dacă este necesar * /
    if (! in_array (1, $ links)) {
    $ class = 1 == $ paginat? ‘clasă ="activ"’:’ ‘;

    printf (‘% s

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

    if (! in_array (2, $ links))
    ecou ‘

  • „;
    }

    / ** Link la pagina curentă, plus 2 pagini în ambele direcții, dacă este necesar * /
    sortare ($ linkuri);
    foreach ((array) $ linkuri ca $ link) {
    $ class = $ paged == $ link? ‘clasă ="activ"’:’ ‘;
    printf (‘% s

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

    / ** Link la ultima pagină, plus elipsuri, dacă este necesar * /
    if (! in_array ($ max, $ links)) {
    if (! in_array ($ max – 1, $ links))
    ecou ‘

  • ‘ . "\ n";

    $ class = $ paged == $ max? ‘clasă ="activ"’:’ ‘;
    printf (‘% s

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

    / ** Următorul mesaj Link * /
    if (get_next_posts_link ())
    printf (‘

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

    ecou ‘

‘ . "\ n";

}

La WPBeginner, folosim același cod pentru paginarea numerică în paginile noastre de arhivă (de exemplu blogul nostru sau pagina de categorii tutoriale WordPress). Ce face acest cod este că preia numărul de pagini și pregătește o listă cu link-uri numerotate. Pentru a adăuga acest lucru în șabloane, va trebui să adăugați următoarea etichetă de șablon în index.php, archive.php, category.php și orice alt model de pagină de arhivă..

<?php wpbeginner_numeric_posts_nav (); ?>

Acum că am obținut lista noastră de pagini numerotate, trebuie să modelăm această listă. Vrem să facem ca lista să apară în linie bloc în care pagina activă este evidențiată cu o culoare diferită de fundal. Pentru a realiza acest lucru, permiteți să continuați și să adăugați următoarele în fișierul dvs. style.css tema:

.navigare li a,
.navigare li a: hover,
.navigare li.activ a,
.navigare li.disabled {
culoare: #fff;
text-decoration: none;
}

.navigare li {
afișare: inline;
}

.navigare li a,
.navigare li a: hover,
.navigare li.activ a,
.navigare li.disabled {
culoare de fundal: # 6FB7E9;
rază de graniță: 3px;
cursor: pointer;
căptușire: 12px;
căptușire: 0,75rem;
}

.navigare li a: hover,
.navigare li.active a {
culoare de fundal: # 3C8DC5;
}

Acolo îl ai. Avem o listă de paginare numerică în tema noastră care arată minunat.

Adăugarea manuală a paginării numerice la temele WordPress fără un plugin

Adăugarea paginării numerice în WordPress cu WP-PageNavi

Acum aruncăm o privire la cum să adăugați paginarea numerică în tema dvs. WordPress, folosind un plugin existent numit WP-PageNavi. Primul lucru pe care trebuie să îl faceți este să instalați și să activați pluginul WP-PageNavi. După activarea pluginului mergeți la Setări »PageNavi pentru a configura setările pluginului.

Configurarea setărilor WP-PageNavi

În pagina cu setările pluginului puteți înlocui textul implicit și setările de paginare numerică cu cele proprii, dacă doriți. Cu toate acestea, setările implicite ar trebui să funcționeze pentru majoritatea site-urilor web.

În pasul următor, trebuie să adăugați o etichetă de șablon în tema dvs. WordPress. Accesați folderul tematic și găsiți liniile pentru paginarea mai veche și mai nouă în șabloanele paginii dvs. de arhivă: index.php, archive.php și orice alte fișiere de șabloane de arhivă. Adăugați următoarea etichetă de șablon pentru a înlocui vechile taguri anterioare_posts_link și next_posts_link.

<?php wp_pagenavi (); ?>

După ce ați adăugat fragmentul wp_pagenavi, așa va arăta paginarea numerică:

Vizualizare implicită a paginării numerice a wp-pagenavi

Dacă doriți să schimbați cum arată culorile și stilul paginării numerice din wp-pagenavi, atunci trebuie să accesați Setări »PageNavi. Debifează opțiunea de a utiliza Utilizați pagenavi-css.css și salvați modificările. Acum du-te la Plugin-uri »Editor. Din meniul derulant Selectați plugin pentru a edita, selectați WP-PageNavi și faceți clic pe butonul Selectare. Editorul va încărca fișierele de plugin în bara laterală din dreapta. Faceți clic pe pagenavi-css.css pentru al deschide în editor și apoi copiați conținutul fișierului.

Copiați conținutul fișierului pagenavi-css

În continuare, trebuie să mergi la Aspect »Editor și lipiți conținutul pagenavi-css.css în fișierul temei style.css. Acum puteți modifica schema de culori și stilul de aici. Motivul pentru care am copiat conținutul css-ului pluginului în fișa de stil a temei este de a preveni pierderea modificărilor de stil în cazul în care actualizați pluginul. Iată o versiune ușor modificată a paginării numerice, nu ezitați să o utilizați și să o modificați în tema dvs..

.wp-pagenavi {
clar: amândouă;
}

.wp-pagenavi a, .wp-pagenavi span {
culoare: #FFF;
text-decor: nici unul;
background-color: # 6FB7E9;
graniță: 1px solid # B2D1E5;
căptușire: 5px 5px;
marja: 2px;
}

.wp-pagenavi a: hover, .wp-pagenavi span.current {
culoare de bordură: # E9F2F9;
background-color: # 6FB7E9;
}

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

Iată cum ar arăta:

CSS PageNavi personalizat

Ca întotdeauna, ar trebui să experimentezi cu CSS. Obiectivul ar trebui să fie potrivirea paginării numerice cu aspectul și culorile site-ului dvs. web, astfel încât să se îmbine frumos și să nu pară un articol ciudat.

Sperăm că acest articol v-a ajutat să adăugați și să afișați paginarea numerică în tema dvs. WordPress. Ce metodă preferați să utilizați? Îți place paginarea numerică sau preferi navigarea integrată anterioară / următoare? Spuneți-ne în comentariile de mai jos.

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