Patnubay sa Pag-istilo ng WP-PageNavi WordPress Plugin

Kung hindi ka pamilyar sa WP-PahinaNavi WordPress plugin, pinapayagan ka nitong palitan ang normal na dati / susunod na pag-navigate na may mas advanced, bilang na paging nabigasyon. Ito ay isang tampok na isinama ko sa isang bilang ng mga tema na binuo ko, kasama na RS16, Blogwave, RS17, at Maliwanag na lugar.


RS16 PahinaNavi

Sa tutorial na ito, pupunta ako kung paano:

  • I-install ang WP-PageNavi at maayos na isama ito sa iyong tema.
  • Dalawang pamamaraan upang huwag paganahin at / o i-override ang mga default na estilo ng plugin.
  • Isang pangkalahatang-ideya ng output ng markup ng HTML sa pamamagitan ng WP-PageNavi
  • Sa wakas, kung paano baguhin ang hitsura ng iyong pag-navigate sa pahina sa pamamagitan ng CSS

I-install ang Plugin

Mayroon kang dalawang mga pagpipilian pagdating sa pag-install ng WP-PageNavi plugin.

  • I-download ito mula sa WordPress.org, i-upload ito sa iyong / wp-content / plugin / direktoryo, at isaaktibo (aka, ang lumang paraan).
  • Depende sa iyong host, maaari mo ring awtomatikong mai-install ang mga plugin sa pamamagitan ng paghahanap sa kanila sa “Magdagdag ng Bago” na pahina sa ilalim ng Mga plugin sa iyong panel ng WordPress admin. Maghanap lamang ng “pagenavi” at dapat mo itong mahanap.

Okay, iyon ay naging madali. Ngayon na ang oras upang makuha ang iyong mga kamay ng isang maliit na marumi sa code para sa bahagi ng pagsasama.

Pagsasama ng Tema

Sa pagsasama ng aming tema, hindi namin nais na ipakita ang anumang mga pagkakamali kung ang WP-PageNavi ay hindi aktibo. Sa halip, tiyakin naming babalik ito sa dating nakaraang / susunod na istilo ng pag-navigate. Upang gawin ito, gagamitin namin ang isang kondisyong tseke ng function_exists.

Sabihin natin na ito ang iyong normal na nakaraang / susunod na WordPress code sa pag-navigate:

<?php next_posts_link (‘«Mas lumang Mga Entries’) ?>
<?php previous_posts_link (‘Mas bagong Mga Entries »’) ?>

Babaguhin natin ito sa mga sumusunod:

<?php kung (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } iba pa { ?>
<?php next_posts_link (‘«Mas lumang Mga Entries’) ?>
<?php previous_posts_link (‘Mas bagong Mga Entries »’) ?>
<?php} ?>

Ito ay karaniwang suriin upang makita kung ang WP-PageNavi ay aktibo at kung ito ay, ipinapakita nito ang bagong code ng nabigasyon ng pahina. Kung hindi, maganda itong bumabalik sa normal na nakaraang / susunod na pag-navigate.

Paalala: Depende sa kung paano naka-code ang iyong CSS, maaaring gusto mong ilagay ang wp_pagenavi (); bahagi sa loob ng “nabigasyon” (o katumbas) div. Isaisip ang WP-PageNavi ay naglabas ng isang bagong klase na tinatawag na “wp-pagenavi” kahit na maaari nating magamit upang mag-istilo nang magkahiwalay.

Override Plugin Estilo

Bilang default, awtomatikong sumingit ang WP-PageNavi sa isang CSS file na tinatawag na pagenavi-css.css mula sa direktoryo ng plugin nito sa header ng iyong site. Hindi namin nais na ang mga default na estilo na ito ay makagambala sa aming sariling mga cool na pasadyang mga estilo, kaya tuluyan kaming aalisin, at mayroong dalawang simpleng paraan upang gawin lamang iyon.

  • Magdagdag ng isang CSS file sa iyong direktoryo ng tema – Ito marahil ang pinakamadaling paraan upang ma-override ang default na mga estilo ng WP-PageNavi. Kung mayroon kang isang file na tinatawag na pagenavi-css.css sa iyong direktoryo ng tema, gagamitin ito ng WP-PageNavi sa halip na ang default isa sa direktoryo ng plugin.
  • Magdagdag ng isang snippet sa iyong mga function.php file – Ang sumusunod na code snippet na kinuha ko mula sa Mga Recipe ng WP ay ganap na hindi paganahin ang pag-uugali sa itaas at hindi isasama ang anumang mga styleheet mula sa plugin (alinman sa default na isa o isang override sa iyong direktoryo ng tema).

add_action (‘wp_print_styles’, ‘my_deregister_styles’, 100);

gumana ang aking_deregister_styles () {
wp_deregister_style (‘wp-pagenavi’);
}

I-plug lamang ang code na file sa file ng function.php ng ​​iyong tema at idagdag ang mga estilo ng CSS sa stylesheet ng iyong regular na tema (karaniwang style.css).

Tandaan: Siguraduhin na ang code ay napapalibutan ng mga bracket na tulad ng <?php … ?> kung ang iyong mga file ng function ay kasalukuyang walang laman.

WP-PageNavi HTML Markup at CSS Selectors

Narito kung ano ang hitsura ng markup ng WP-PageNavi. Sa sumusunod na halimbawa, mayroong apat na pahina, na kasalukuyang nasa pahina dalawa.

Nakaraan1
2
3
Susunod

Huling »

Maaari naming gamitin ang mga sumusunod na Cors selectors upang ma-target ang itaas na markup ng HTML:

  • .wp-pagenavi – Nalalapat sa buong div, kapaki-pakinabang para sa CSS clears, padding / margin, laki ng font at istilo (bold, italic, atbp.)
  • .wp-pagenavi a – Target ang lahat ng mga link sa loob ng nabigasyon ng pahina, kabilang ang mga numero ng pahina at nauna / susunod.
  • .wp-pagenavi a.page – Partikular na mga numero ng pahina ng Mga target
  • .wp-pagenavi a.first – Target ang partikular na link na “una” (hindi nakalista sa itaas)
  • .wp-pagenavi a.last – Natukoy ang partikular na link na “huling”
  • .wp-pagenavi span – Target ang kasalukuyang numero ng pahina kasama ang palugit na bahagi (ang bagay na may tatlong tuldok)
  • .wp-pagenavi span.current – Partikular na target ang kasalukuyang numero ng pahina
  • .wp-pagenavi span.extend – Partikular na target ang palawig (tatlong tuldok na bagay)
  • .wp-pagenavi span.pages – Partikular na mga target na pahina ng pagpapakita ng numero (i.e. Pahina 1 ng 4)

Tandaan: Ang nauna at susunod na mga link nang default, walang klase sa CSS sa kanila. Kung nais mo silang ganap na magkakaiba mula sa mga numero ng pahina at una / huling mga link, kakailanganin ang i-reset ang anumang mga estilo na idinagdag sa .wp-pagenavi isang tagapili. Kung walang kahulugan, tingnan ang sumusunod (talagang pinasimple) na halimbawa.

Halimbawa: Sabihin natin na nais mo ang nakaraang at susunod na mga link na maging matapang, ngunit ang bawat iba pang mga link ay magkaroon ng isang normal na timbang. Kailangan mong gawin ang sumusunod:

.wp-pagenavi a {font-weight: bold; } / * Nakaraan at Susunod na mga link lamang * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-weight: normal; } / * Iba pang mga link * /

Pinagsama ko ang mga link ng numero ng pahina, ang unang link, at ang huling link sa isang patakaran halimbawa ng mga layunin. Siyempre, maaari mong paghiwalayin ang mga ito at magdagdag ng mas tiyak na mga estilo sa bawat isa.

Mas madali ito kung mayroong isang klase na naidagdag sa mga naunang / susunod na mga link nang default, ngunit wala. Ito ay hindi isang malaking deal dahil maaari mo lamang i-reset ang mga ito pa rin.

Mahalagang Update: Salamat sa isang pag-update mula sa scribu sa mga puna, lumiliko ang pinakabagong bersyon ng WP-PageNavi ay mayroong nakaraang / susunod na mga klase sa kanila (salamat sa bahagi sa Yoast).

Maaari mong gamitin ang .wp-pagenavi a.previouspostlink at .wp-pagenavi a.nextpostlink upang pumili ng mga nauna at susunod na mga link, ayon sa pagkakabanggit..

Kaya’t halos lahat ng bagay sa itaas hanggang sa hindi nakaugnay na listahan ng mga napili ay hindi na nauugnay, ngunit panatilihin ko lamang ito dahil ito ay maaaring maging kapaki-pakinabang na aralin sa pag-overriding ng CSS sa ilang iba pang mga sitwasyon. Ang ibaba ng halimbawa ng CSS ay mailalapat pa rin dahil hindi ko pa ginagamit ang mga piniling iyon.

Isang Halimbawa ng CSS

Narito ang isang halimbawa ng isang pag-istil ng PageNavi na itinayo ko sa Blogwave tema.

Nai-update na PahinaNavi ang Blogwave

Narito ang code na ginamit ko upang makuha ang hitsura na ito, multi-single-line na CSS ay opsyonal:

.wp-pagenavi a, .wp-pagenavi span {
padding: 5px; margin-kanan: 10px;
laki ng font: 15px; kulay: # 03719c; dekorasyon ng teksto: wala;
hangganan: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; hangganan-radius: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
background: # 03719c;
kulay: #fff;
hangganan: 3px solid #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

At narito ang ibig sabihin ng lahat:

Unang Panuntunan
Pinipili ng .wp-pagenavi a, .wp-pagenavi span ang lahat ng mga elemento ng angkla at span (halos lahat ng bagay) sa loob ng .wp-pagenavi div.

  • Ang unang linya ng panuntunan ay nagtatakda ng isang padding ng 5px kaya hindi ito mai-cramed laban sa light grey border (tinukoy sa ibaba). Nagtatakda rin ito ng isang pare-pareho na margin ng 10px sa kanan ng bawat elemento kaya mayroong pantay na puwang sa pagitan ng bawat isa.
  • Ang pangalawang linya ay nagtatakda ng laki ng font na 15px, ginagawang asul ang kulay ng teksto, at tinitiyak na walang salungguhit ang mga link.
  • Ang ikatlong linya ay nagtatakda ng isang solidong hangganan na kulay abo na 3px sa lahat. Ang border-radius code ay ginagawang bilog ang mga sulok.

Pangalawang Batas
Ang .wp-pagenavi a: hover, .wp-pagenavi span.current pinipili ang link hover effect pati na rin ang kasalukuyang numero ng pahina, ayon sa pagkakabanggit..

  • Ang unang linya ay nagtatakda ng isang madilim na asul na kulay ng background.
  • Ang pangalawang linya ay pinaputi ang teksto.
  • Ang ikatlong linya ay nagbibigay ng isang bahagyang madidilim na hangganan.

Pangatlong Batas
Pinipili nito ang kasalukuyang numero ng pahina (muli) nang hindi naaapektuhan ang epekto ng hover ng link (tulad ng pangalawang panuntunan). Ginagawa lamang nito ang kasalukuyang bilang ng pahina ng isang naka-bold na bigat ng font.

Ang dahilan na hindi ko isinama ito sa epekto ng link ng hover ay dahil ito ay may hindi pantay na epekto na mula sa normal hanggang sa bigat na font ng bigat.

Tandaan: Depende sa kung paano naka-code ang iyong CSS, maaaring gumamit ka ng mas tiyak na mga pumipili. Halimbawa, kung mayroong mga estilo para sa #content a at ang iyong WP-PageNavi ay nasa loob ng div ng nilalaman, maaaring kailanganin mong muling isulat ang iyong PageNavi CSS bilang #content..

Konklusyon

Alam kong ito ay medyo simpleng halimbawa, maaari kang magkaroon ng maraming mas advanced na mga patakaran ng CSS upang makilala ang iba’t ibang mga link at iba pang mga elemento. Sana pumili ka rin ng ilang mga tip sa CSS.

Opsyonal na pagsasama ng WP-PageNavi ay isang medyo cool na tampok na tampok ng tampok na maaaring isama sa kanilang mga tema. Gamit ang paraan ng pagsasama na nabalangkas ko sa itaas, ang mga gumagamit ay madaling pumili kung gagamitin ito o hindi, at maaaring maging isang magandang pagpipilian para sa maraming mga blog.

Sana ay nagustuhan mo ang lahat ng tutorial, at kung mayroon kang anumang mga kahilingan para sa mga tutorial sa WordPress o mga tip sa CSS, hayaan mo akong malaman sa mga komento.

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