Paano Magdagdag ng Numeric Pagination sa Iyong WordPress Tema

Ang isa sa aming mga mambabasa kamakailan ay tinanong sa amin kung paano namin idagdag ang numerong pagination sa WPBeginner na pahina ng blog. Ang mga Default na tema ng WordPress at maraming iba pang mga tema ay nagpapakita ng mga link sa pagination sa pamamagitan ng pagdaragdag ng mga Lumang mga post at mga link ng Mga Mas Bagong Mga Post sa ilalim ng iyong mga pahina ng archive ng WordPress. Gayunpaman, maraming mga site sa WordPress na gumagamit ng numerong pagination, tulad ng WPBeginner. Mula sa aming karanasan, ang pagbilang ng numero ay mas madaling gamitin, kaakit-akit, at friendly sa SEO. Karamihan sa mga advanced na mga balangkas ng tema ng WordPress tulad ng Genesis ay may built-in na pag-andar para sa pagdaragdag ng numerong pagination. Sa artikulong ito ipapakita namin sa iyo kung paano magdagdag ng numerong pagination sa iyong WordPress tema. Ang layunin ay upang palitan ang default na Mga Mas luma at Mas bagong pag-link sa pag-link sa ilalim ng mga pahina ng archive na madaling mag-navigate ng mga numero ng pahina.


Pagkakaiba sa pagitan ng default na WordPress nabigasyon at Numeric Pagination

Mayroong dalawang mga pamamaraan sa pagdaragdag ng numero ng pagination sa iyong WordPress tema. Ang unang pamamaraan ay mano-mano ang pagdaragdag ng numero ng pagination nang hindi umaasa sa isang plugin ng third party. Dahil ang artikulong ito ay nasa kategorya ng tema at inilaan para sa mga bagong disenyo ng tema, ipapakita muna namin ang manu-manong pamamaraan. Ang pangalawang pamamaraan ay ang paggamit ng isang umiiral na plugin ng third party upang magdagdag ng numerong pagination. Inirerekumenda namin ang pamamaraan na iyon para sa lahat ng aming mga gumagamit ng DIY.

Manu-manong pagdaragdag ng Numeric Pagination sa Iyong Mga Tema ng WordPress

Una ay ipapakita namin sa iyo kung paano manu-manong magdagdag ng numerong pagination sa iyong mga tema ng WordPress. Makikinabang ito sa aming mga advanced na gumagamit, at mga gumagamit na natututo ng pag-unlad ng tema, o nais gawin ito nang hindi umaasa sa isang plugin ng third party. Hinahayaan magsimula sa pamamagitan ng pagdaragdag ng sumusunod na code sa file ng iyong function.php file.

Tandaan: Ang code na ito ay nagmula sa Genesis Framework na ginagamit namin sa aming site. Kung gumagamit ka ng Genesis, hindi mo na kailangan ang code o ang plugin.

function wpbeginner_numeric_posts_nav () {

kung (is_singular ())
bumalik;

pandaigdigang $ wp_query;

/ ** Itigil ang pagpapatupad kung mayroon lamang isang 1 pahina * /
kung ($ wp_query->max_num_pages <= 1)
bumalik;

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

/ ** Magdagdag ng kasalukuyang pahina sa array * /
kung ($ paged >= 1)
$ link [] = $ paged;

/ ** Idagdag ang mga pahina sa paligid ng kasalukuyang pahina sa array * /
kung ($ paged >= 3) {
$ link [] = $ paged – 1;
$ link [] = $ paged – 2;
}

kung (($ paged + 2) <= $ max) {
$ link [] = $ paged + 2;
$ link [] = $ paged + 1;
}

sigaw

    ‘ . "\ n";

    / ** Nakaraang Link na Link * /
    kung (get_previous_posts_link ())
    printf (‘

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

    / ** Mag-link sa unang pahina, kasama ang mga ellipses kung kinakailangan * /
    kung (! in_array (1, $ mga link)) {
    $ class = 1 == $ paged? ‘klase ="aktibo"’:’ ‘;

    printf (‘% s

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

    kung (! in_array (2, $ link))
    sigaw

  • ‘;
    }

    / ** Mag-link sa kasalukuyang pahina, kasama ang 2 mga pahina sa alinmang direksyon kung kinakailangan * /
    ayusin ($ link);
    unahan ((array) $ link bilang $ link) {
    $ class = $ paged == $ link? ‘klase ="aktibo"’:’ ‘;
    printf (‘% s

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

    / ** Mag-link sa huling pahina, kasama ang mga ellipses kung kinakailangan * /
    kung (! in_array ($ max, $ link)) {
    kung (! in_array ($ max – 1, $ link))
    sigaw

  • ‘ . "\ n";

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

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

    / ** Susunod na Link Link / /
    kung (get_next_posts_link ())
    printf (‘

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

    sigaw

‘ . "\ n";

}

Sa WPBeginner, ginagamit namin ang parehong code para sa numerong pagination sa aming mga pahina ng archive (halimbawa sa aming blog, o pahina ng kategorya ng mga tutorial sa WordPress). Ang ginagawa ng code na ito ay kinukuha nito ang bilang ng mga pahina at naghahanda ng isang bullet list ng mga bilang ng mga link. Upang idagdag ito sa iyong mga template, kailangan mong idagdag ang sumusunod na template ng tag sa index.php ng ​​iyong tema, archive.php, kategorya.php, at anumang iba pang template ng pahina ng archive.

<?php wpbeginner_numeric_posts_nav (); ?>

Ngayon na nakuha namin ang aming listahan ng mga bilang na pahina, kailangan naming istilo ng listahang ito. Gusto naming gawing lilitaw ang listahan ng in-line block kung saan ang aktibong pahina ay naka-highlight na may ibang kulay ng background. Upang maisakatuparan iyon, hayaang magpatuloy at idagdag ang sumusunod sa file ng style.css ng iyong tema:

.nabigasyon li a,
.nabigasyon li a: hover,
.nabigasyon li.active a,
.nabigasyon li.disabled {
kulay: #fff;
dekorasyon ng teksto: wala;
}

.nabigasyon
display: inline;
}

.nabigasyon li a,
.nabigasyon li a: hover,
.nabigasyon li.active a,
.nabigasyon li.disabled {
kulay ng background: # 6FB7E9;
hangganan-radius: 3px;
cursor: pointer;
padding: 12px;
padding: 0.75rem;
}

.nabigasyon li a: hover,
.nabigasyon li.active a {
kulay ng background: # 3C8DC5;
}

Ayan. Mayroon kaming isang listahan ng mga numero ng pagination sa aming tema na mukhang mahusay.

Manu-manong pagdaragdag ng numerong pagination sa mga tema ng WordPress nang walang isang plugin

Pagdaragdag ng Numeric Pagination sa WordPress gamit ang WP-PageNavi

Ngayon tingnan natin kung paano magdagdag ng numerong pagination sa iyong WordPress tema sa pamamagitan ng paggamit ng isang umiiral na plugin na tinatawag na WP-PageNavi. Ang unang bagay na kailangan mong gawin ay i-install at i-aktibo ang WP-PageNavi plugin. Matapos ang pag-activate ng plugin pumunta sa Mga Setting »PahinaNavi upang i-configure ang mga setting ng plugin.

Pag-configure ng mga setting ng WP-PageNavi

Sa pahina ng mga setting ng plugin maaari mong palitan ang default na mga setting ng teksto at numerong pagination sa iyong sarili kung nais mo. Gayunpaman, ang mga default na setting ay dapat gumana para sa karamihan sa mga website.

Sa susunod na hakbang, kailangan mong magdagdag ng isang template ng tag sa iyong WordPress Tema. Pumunta sa iyong folder ng tema at hanapin ang mga linya para sa mas luma at mas bagong pagination sa iyong mga template ng pahina ng archive: index.php, archive.php at anumang iba pang mga file ng archive template. Idagdag ang sumusunod na tag na template upang mapalitan ang mga dating previous_post_link at mga susunod na tag na link.

<?php wp_pagenavi (); ?>

Kapag naidagdag mo ang snpet ng wp_pagenavi, ganito ang hitsura ng numerong pagination:

Default na pagtingin sa numerong pagoravi ng wp-pagenavi

Kung nais mong baguhin kung paano ang hitsura ng mga kulay at estilo ng numero ng pagination sa wp-pagenavi, kung gayon kailangan mong pumunta sa Mga Setting »PahinaNavi. Alisan ng tsek ang pagpipilian na gamitin Gumamit ng pagenavi-css.css at i-save ang mga pagbabago. Pumunta ka na ngayon Mga plugin »Editor. Mula sa Piliin na plugin upang i-edit ang drop down menu, piliin ang WP-PageNavi at mag-click sa pindutang Piliin. Ang editor ay mag-load ng mga file ng plugin sa kanang sidebar ng kamay. Mag-click sa pagenavi-css.css upang buksan ito sa editor at pagkatapos ay kopyahin ang mga nilalaman ng file.

Kopyahin ang mga nilalaman ng pagenavi-css file

Susunod, kailangan mong pumunta sa Hitsura »Editor at i-paste ang mga nilalaman ng pagenavi-css.css sa style.css ng iyong tema. Ngayon ay maaari mong baguhin ang scheme ng kulay at estilo mula dito. Ang dahilan kung bakit namin kinopya ang mga nilalaman ng css ng plugin sa istilo ng tema ay upang maiwasan ang pagkawala ng mga pagbabago sa estilo kung dapat mong i-update ang plugin. Narito ang isang bahagyang binagong bersyon ng pagal na pagination, huwag mag-atubiling gamitin at baguhin ito sa iyong tema.

.wp-pagenavi {
malinaw: pareho;
}

.wp-pagenavi a, .wp-pagenavi span {
kulay: #FFF;
dekorasyon ng teksto: wala;
kulay ng background: # 6FB7E9;
hangganan: 1px solid # B2D1E5;
padding: 5px 5px;
margin: 2px;
}

.wp-pagenavi a: hover, .wp-pagenavi span.current {
kulay na hangganan: # E9F2F9;
kulay ng background: # 6FB7E9;
}

.wp-pagenavi span.current {
bigat ng font: bold;
kulay ng background: # 3C8DC5;
}

Narito kung paano ito magmukhang:

Pasadyang PahinaNavi CSS

Tulad ng dati dapat kang mag-eksperimento sa CSS. Ang layunin ay dapat na tumugma sa numerong pagination na may hitsura at pakiramdam ng mga kulay ng iyong website, upang ito ay sumasama sa mabuti at hindi mukhang isang kakaibang inilagay na item.

Inaasahan namin na ang artikulong ito ay nakatulong sa iyo na magdagdag at magpakita ng numerong pagination sa iyong WordPress tema. Aling pamamaraan ang mas gusto mong gamitin? Gusto mo ba ng numerong pagination o mas gusto mo ang built-in na dati / susunod na nabigasyon? Ipaalam sa amin sa mga komento sa ibaba.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me