WP-PageNavi WordPress spraudņa veidošanas rokasgrāmata

Ja neesat pazīstams ar WP-PageNavi WordPress spraudnis ļauj jums aizstāt parasto iepriekšējo / ​​nākamo navigāciju ar sarežģītāku, numurētu peidžeru navigāciju. Šī ir funkcija, ko esmu iekļāvis daudzās izstrādātajās tēmās, ieskaitot RS16, Blogwave, RS17, un Spilgta vieta.


RS16 PageNavi

Šajā apmācībā es apskatīšu, kā:

  • Instalējiet WP-PageNavi un pareizi integrējiet to savā tēmā.
  • Divas metodes noklusējuma spraudņu stilu atspējošanai un / vai ignorēšanai.
  • Pārskats par WP-PageNavi HTML marķējuma izvadi
  • Visbeidzot, kā mainīt lapas navigācijas izskatu, izmantojot CSS

Instalējiet spraudni

WP-PageNavi spraudņa instalēšanai ir divas iespējas.

  • Lejupielādējiet to no WordPress.org, augšupielādējiet to mapē / wp-content / plugins / direktorijā un aktivizējiet (aka, vecmodīgs veids).
  • Atkarībā no resursdatora, jūs varat arī automātiski instalēt spraudņus, meklējot tos “Pievienot jaunu” lapas sadaļā Spraudņi WordPress administratora panelī. Vienkārši meklējiet “pagenavi”, un jums tas jāatrod.

Labi, ka tam bija jābūt diezgan vienkāršam. Tagad ir laiks nedaudz netīrīt rokas integrācijas daļai.

Tēmas integrācija

Veicot motīvu integrāciju, mēs nekad nevēlamies, lai tiktu parādītas kļūdas, ja WP-PageNavi nav aktīvs. Tā vietā mēs pārliecināsimies, ka tas atgriežas pie vecā iepriekšējā / nākamā stila navigācijas. Lai to izdarītu, mēs izmantosim a funkcija_eksistē nosacītā pārbaude.

Pieņemsim, ka šis ir parastais iepriekšējais / nākamais WordPress navigācijas kods:

<?php next_posts_link (‘«Vecāki ieraksti’) ?>
<?php previous_posts_link (‘Jaunāki ieraksti’ ‘) ?>

Mēs to mainīsim uz šādiem:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } cits { ?>
<?php next_posts_link (‘«Vecāki ieraksti’) ?>
<?php previous_posts_link (‘Jaunāki ieraksti’ ‘) ?>
<?php} ?>

Tas galvenokārt pārbauda, ​​vai WP-PageNavi ir aktīvs, un, ja tas ir, tas parāda jauno lapas navigācijas kodu. Ja nē, tas graciozi atgriežas pie parastās iepriekšējās / nākamās navigācijas.

Lūdzu, ņemiet vērā: Atkarībā no tā, kā tiek CSS kodēts, ieteicams ievietot wp_pagenavi (); daļa “navigācijas” (vai līdzvērtīgas) div. Paturiet prātā, ka WP-PageNavi izspiež jaunu klasi ar nosaukumu “wp-pagenavi”, lai arī to mēs varam izmantot, lai veidotu stilu atsevišķi.

Ignorēt spraudņa stilus

Pēc noklusējuma WP-PageNavi no spraudņu direktorijas jūsu vietnes galvenē automātiski ievieto CSS failu ar nosaukumu pagenavi-css.css. Mēs nevēlamies, lai šie noklusējuma stili traucē mūsu pašu stilīgajiem pēc pasūtījuma izgatavotajiem stiliem, tāpēc mēs no tiem pilnībā atbrīvosimies, un ir divi vienkārši veidi, kā to izdarīt..

  • Motīvu direktorijā pievienojiet CSS failu – Tas, iespējams, ir vienkāršākais veids, kā ignorēt noklusējuma WP-PageNavi stilus. Ja motīvu direktorijā ir fails pagenavi-css.css, spraudņu direktorijā noklusējuma vietā to izmantos WP-PageNavi.
  • Pievienojiet fragmentu failiem function.php – Šis koda fragments, no kura es paņēmu WP Receptes pilnībā atspējos iepriekšminēto rīcību un neiekļaus spraudņa stila lapu (vai nu noklusējuma, vai ignorēšanu motīvu direktorijā).

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

funkcija my_deregister_styles () {
wp_deregister_style (‘wp-pagenavi’);
}

Vienkārši ierakstiet šo kodu motīva function.php failā un pievienojiet CSS stilus parastās motīva stila lapai (parasti style.css)..

Piezīme: Pārliecinieties, ka kodu ieskauj iekavas, piemēram <?php … ?> ja jūsu funkciju fails pašlaik ir tukšs.

WP-PageNavi HTML marķēšana un CSS atlasītāji

Lūk, kā izskatās WP-PageNavi marķējums. Šajā piemērā ir četras lapas, šobrīd otrajā lappusē.

Iepriekšējais1
2
3
Nākamais

Pēdējais “

Mēs varam izmantot šādus CSS atlasītājus, lai atlasītu iepriekš minēto HTML marķējumu:

  • .wp-pagenavi – attiecas uz visu divdaļu, noderīga CSS tīrīšanai, polsterēšanai / piemales, fontu lielumiem un stiliem (treknrakstā, slīprakstā utt.)
  • .wp-pagenavi a – mērķē visas saites navigācijā lapas iekšpusē, ieskaitot lappušu numurus un iepriekšējo / ​​nākamo.
  • .wp-pagenavi a.page – īpaši mērķē lapu numurus
  • .wp-pagenavi a.first – mērķauditorija tiek atlasīta tieši ar “pirmo” saiti (kas nav uzskaitīta iepriekš)
  • .wp-pagenavi a.last – īpaši mērķē uz “pēdējo” saiti
  • .wp-pagenavi span – mērķē pašreizējo lapas numuru kopā ar paplašināto daļu (lieta ar trim punktiem)
  • .wp-pagenavi span.current – jo īpaši mērķē pašreizējo lapas numuru
  • .wp-pagenavi span.extend – konkrēti mērķa paplašinājums (trīs punktu lieta)
  • .wp-pagenavi span.pages – ir īpaši paredzēts lappuses numura attēlošanai (t.i., lapa 1 no 4)

Piezīme: Iepriekšējai un nākamajai saitēm pēc noklusējuma tām nav CSS klases. Ja vēlaties, lai tie pilnībā atšķirtos no lappušu numuriem un pirmajām / pēdējām saitēm, tiem būs jāatiestata visi stili, kas pievienoti .wp-pagenavi atlasītājam. Ja tam nebija jēgas, apskatiet šo (patiešām vienkāršoto) piemēru.

Piemēram: Pieņemsim, ka jūs vēlējāties, lai iepriekšējā un nākamā saites būtu treknrakstā, bet visām pārējām saitēm būtu normāls svars. Jums būs jāveic šādas darbības:

.wp-pagenavi a {font-weight: treknrakstā; } / * Tikai iepriekšējās un nākamās saites * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-weight: normal; } / * Citas saites * /

Piemēram, es kombinēju lapas numuru saites, pirmo saiti un pēdējo saiti vienā noteikumā. Protams, jūs varat tos atdalīt un katram pievienot specifiskākus stilus.

Tas būtu daudz vienkāršāk, ja iepriekšējām / nākamajām saitēm pēc noklusējuma tiktu pievienota klase, bet to nav. Tas nav milzīgs darījums, jo jebkurā gadījumā varat tos vienkārši atiestatīt.

Svarīgs atjauninājums: Pateicoties atjauninājumam no scribu komentāros izrādās, ka jaunākajā WP-PageNavi versijā ir iepriekšējās / nākamās klases (daļēji pateicoties Raugs).

Varat izmantot .wp-pagenavi a.prepaidpostslink un .wp-pagenavi a.nextpostslink, lai attiecīgi atlasītu iepriekšējās un nākamās saites..

Līdz ar to viss iepriekš minētais, līdz nesakārtotam atlasītāju sarakstam vairs nav nozīmes, bet es to paturēšu tikai tāpēc, ka tā varētu būt noderīga mācība CSS ignorēšanā citās citās situācijās. Zemāk esošais CSS piemērs joprojām tiks piemērots, jo es šos atlasītājus tik un tā neizmantoju.

CSS piemērs

Šis ir PageNavi stila piemērs, kuru izveidoju no Blogwave tēma.

Blogwave atjaunināta lapaNavi

Šis ir kods, kuru es izmantoju, lai iegūtu šo izskatu, vairāku vienrindu CSS nav obligāti:

.wp-pagenavi a, .wp-pagenavi span {
polsterējums: 5px; labā mala: 10 pikseļi;
fonta lielums: 15 pikseļi; krāsa: # 03719c; teksta noformējums: nav;
apmale: 3px ciets #ccc; -moz-robežas rādiuss: 5px; -webkit-robežas rādiuss: 5 pikseļi; apmales rādiuss: 5 pikseļi;
}
.wp-pagenavi a: lidināties, .wp-pagenavi span.current {
fons: # 03719c;
krāsa: #fff;
apmale: 3px ciets #AFAFAF;
}
.wp-pagenavi span.current {font-weight: treknraksts; }

Un tas ir viss, ko tas nozīmē:

Pirmais noteikums
.Wp-pagenavi a, .wp-pagenavi span izvēlas visus enkura un laiduma elementus (gandrīz visu) iekšā .wp-pagenavi div.

  • Noteikuma pirmajā rindā ir noteikts 5 pikseļu polsterējums, lai tas netiktu saspiests pret gaiši pelēko apmali (definēta zemāk). Tas arī nosaka nemainīgu 10 pikseļu rezervi pa labi no katra elementa, lai starp tiem būtu vienādas atstarpes.
  • Otrajā rindā tiek iestatīts fonta lielums 15 pikseļi, teksta krāsa kļūst zila un tiek pārliecināts, ka saitēm nav pasvītrojuma.
  • Trešā rinda visam nosaka stabilu 3xx pelēko apmali. Apmales rādiusa kods padara stūrus noapaļotus.

Otrais noteikums
.Wp-pagenavi a: lidināties, .wp-pagenavi span.current attiecīgi izvēlas saites pārvietošanas efektu, kā arī pašreizējās lapas numuru..

  • Pirmā rinda nosaka tumši zilu fona krāsu.
  • Otrā rinda tekstu padara baltu.
  • Trešā rinda dod nedaudz tumšāku apmali.

Trešais noteikums
Tādējādi tiek atlasīts pašreizējais lappuses numurs (atkal), neietekmējot arī saites virzīšanas efektu (piemēram, otro kārtulu). Tas tikai padara pašreizējā lappuses numuru treknrakstā par fonta svaru.

Iemesls, kāpēc es to neiekļāvu saites virzīšanas efektā, ir tāpēc, ka tam ir nevienmērīga ietekme, sākot no parastā burta un treknrakstā..

Piezīme: Atkarībā no tā, kā jūsu CSS tiek kodēts, jums, iespējams, būs jāizmanto specifiskāki atlasītāji. Piemēram, ja ir #content a stili un jūsu WP-PageNavi atrodas satura dalījumā, jums var nākties pārrakstīt PageNavi CSS kā #content .wp-pagenavi a un ignorēt visus citus mazāk specifiskos stilus.

Secinājums

Es zinu, ka tas bija salīdzinoši vienkāršs piemērs. Jums varētu būt daudz modernāki CSS noteikumi, lai vēl vairāk atšķirtu dažādas saites un citus elementus. Cerams, ka jūs arī paņēmāt dažus CSS padomus.

Izvēles WP-PageNavi integrācija ir diezgan lieliska funkciju motīvu izstrādātāji, kurus viņi varētu integrēt savās tēmās. Izmantojot iepriekš aprakstīto integrācijas metodi, lietotāji varēja viegli izvēlēties, vai to izmantot vai ne, un tā varētu būt jauka iespēja daudziem emuāriem..

Es ceru, ka jums visiem patika apmācība, un, ja jums ir kādi pieprasījumi par turpmākām WordPress apmācībām vai CSS padomiem, dariet man to zināmu komentāros.

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