Vodnik za oblikovanje vtičnika WP-PageNavi WordPress

Če niste seznanjeni z WP-StranNavi WordPress vtičnik, ki vam omogoča, da nadomestite običajno prejšnjo / naslednjo navigacijo z naprednejšo, oštevilčeno navigacijo. To je funkcija, ki sem jo vključila v številne teme, ki sem jih razvil, tudi RS16, Blogwave, RS17, in Svetla točka.


RS16 StranNavi

V tej vadnici bom opisal, kako:

  • Namestite WP-PageNavi in ​​ga pravilno vključite v svojo temo.
  • Dva načina za onemogočanje in / ali razveljavitev privzetih slogov vtičnikov.
  • Pregled označevanja HTML pri WP-PageNavi
  • Na koncu, kako spremeniti videz navigacije po strani po CSS-ju

Namestite vtičnik

Ob namestitvi vtičnika WP-PageNavi imate dve možnosti.

  • Prenesite ga s WordPress.org, naložite ga v /pp-content / plugins / imenik in ga aktivirajte (aka, staromodni način).
  • Odvisno od svojega gostitelja lahko vtičnike samodejno namestite tudi tako, da jih poiščete na strani »Dodaj novo« pod vtičniki na skrbniški plošči WordPress. Samo poiščite “pagenavi” in to bi morali najti.

Ok, to bi moralo biti zelo enostavno. Zdaj je čas, da si roke malo umažete v kodo za integracijski del.

Vključevanje teme

Pri integraciji tematik nikoli ne želimo, da se prikažejo napake, če WP-PageNavi ni aktiven. Namesto tega bomo poskrbeli, da se vrne na staro prejšnjo / naslednjo navigacijo v slogu. Za to bomo uporabili function_ obstaja pogojno preverjanje.

Recimo, da je to vaša običajna prejšnja / naslednja navigacijska koda WordPress:

<?php next_posts_link (“” Starejši vnosi “) ?>
<?php previous_posts_link (‘Novejši vnosi’ ‘) ?>

Spremenili ga bomo v naslednje:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } else { ?>
<?php next_posts_link (“” Starejši vnosi “) ?>
<?php previous_posts_link (‘Novejši vnosi’ ‘) ?>
<?php} ?>

To v bistvu preveri, ali je WP-PageNavi aktiven in če je, prikazuje novo navigacijsko kodo strani. V nasprotnem primeru se vrne na običajno prejšnjo / naslednjo navigacijo.

Prosimo, upoštevajte: Glede na to, kako je kodiran vaš CSS, boste morda želeli postaviti wp_pagenavi (); del znotraj „navigacijskega“ (ali enakovrednega) div. Upoštevajte, da WP-PageNavi izpusti nov razred, imenovan “wp-pagenavi”, čeprav ga lahko uporabljamo za ločen slog.

Preveri stile vtičnikov

WP-PageNavi privzeto samodejno vstavi datoteko CSS, imenovano pagenavi-css.css, iz svojega imenika vtičnikov v glavo vašega spletnega mesta. Ne želimo, da ti privzeti slogi posegajo v naše kul po meri narejene sloge, zato se jih bomo popolnoma znebili, in obstajata dva preprosta načina, kako to storiti.

  • V imenik tem dodajte datoteko CSS – To je verjetno najlažji način za preglasitev privzetih stilov WP-PageNavi. Če imate v tematskem imeniku datoteko z imenom pagenavi-css.css, bo WP-PageNavi to uporabil namesto privzete v imeniku vtičnikov..
  • V datoteko svoje funkcije.php dodajte delček – Naslednji delček kode, ki sem ga prevzel WP recepti bo v celoti onemogočilo zgornje vedenje in ne bo vključilo nobene tabele stilov iz vtičnika (bodisi privzeto bodisi preglasitev v vašo temo imenika).

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

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

Prepišite to kodo v datoteki function.php teme in dodajte CSS sloge v tabelo stilov navadne teme (ponavadi style.css).

Opomba: Prepričajte se, da je koda obdana z oklepaji <?php … ?> če je datoteka funkcij trenutno prazna.

WP-PageNavi Izbira HTML in izbirniki CSS

Tukaj je opisano oznako WP-PageNavi. V naslednjem primeru so štiri strani, trenutno na strani dve.

Prejšnja1
2
3
Naslednji

Zadnji »

Za ciljanje na zgornjo oznako HTML lahko uporabimo naslednje izbirnike CSS:

  • .wp-pagenavi – Velja za celoten div, uporaben za odstranjevanje CSS, oblazinjenje / rob, velikosti in sloge pisav (krepko, poševno ipd.)
  • .wp-pagenavi a – Ciljno usmeri vse povezave znotraj navigacije po strani, vključno s številkami strani in prejšnjo / naslednjo.
  • .wp-pagenavi a.page – Ciljne številke strani
  • .wp-pagenavi a.first – Ciljno usmeri “prvo” povezavo (ni navedeno zgoraj)
  • .wp-pagenavi a.last – Posebej cilja na zadnjo povezavo
  • .wp-pagenavi span – Ciljanje trenutne številke strani skupaj s podaljšanim delom (stvar s tremi pikami)
  • .wp-pagenavi span.current – Posebej cilja na trenutno številko strani
  • .wp-pagenavi span.extend – Posebej cilja ciljno širino (stvar s tremi pikami)
  • .wp-pagenavi span.pages – Posebej cilja na prikaz številke strani (tj. Stran 1 od 4)

Opomba: V prejšnjih in naslednjih povezavah privzeto ni nobenega razreda CSS. Če želite, da se popolnoma razlikujejo od številk strani in prve / zadnje povezave, bodo morali ponastaviti vse sloge, ki so dodani izbirniku .wp-pagenavi. Če to ni imelo smisla, si oglejte naslednji (res poenostavljeno) primer.

Na primer: Recimo, da ste želeli, da sta prejšnja in naslednja povezava krepka, vsaka druga povezava pa ima normalno težo. Morali bi narediti naslednje:

.wp-pagenavi a {font-weight: bold; } / * Samo prejšnje in naslednje povezave * /
.wp-pagenavi a.page,
.wp-pagenavi a.prv,
.wp-pagenavi a.last {font-weight: normal; } / * Druge povezave * /

Povezave s številko strani, prvo povezavo in zadnjo povezavo sem na primer združil v eno pravilo. Seveda jih lahko ločite in vsakemu dodate bolj določene sloge.

To bi bilo veliko lažje, če bi bil k prejšnjim / naslednjim povezavam privzeto dodan razred, vendar ga ni. To ni veliko, saj jih lahko tako ali tako ponastavite.

Pomembna posodobitev: Hvala za posodobitev od scribu v komentarjih se izkaže, da ima najnovejša različica WP-PageNavi na njih prejšnje / naslednje razrede (deloma hvala za Yoast).

Uporabite lahko .wp-pagenavi a.previouspostslink in .wp-pagenavi a.nextpostslink, da izberete prejšnjo in naslednjo povezavo..

Tako rekoč vse zgoraj, dokler urejeni seznam izbirnikov ni več pomemben, vendar ga bom ohranil samo zato, ker bi lahko bil koristen pouk pri prevladovanju CSS-a v nekaterih drugih situacijah. Spodnji primer CSS bo še vedno veljal, saj teh izbirnikov tako ali tako nisem uporabljal.

Primer CSS

Tu je primer oblikovanja PageNavi, ki sem ga sestavil iz Blogwave tema.

Blogwave posodobljena stranNavi

Tu je koda, ki sem jo uporabil za videz, večnamenski CSS ni obvezno:

.wp-pagenavi a, .wp-pagenavi razpon {
oblazinjenje: 5px; meja-desno: 10px;
velikost pisave: 15px; barva: # 03719c; urejanje besedila: nič;
obroba: 3px trdna #ccc; -moz-meja-polmer: 5px; -webkit-meja-polmer: 5px; meja polmera: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
ozadje: # 03719c;
barva: #fff;
obroba: 3px trdna #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

In to je tisto, kar vse pomeni:

Prvo pravilo
.Wp-pagenavi a, .wp-pagenavi razpon izbere vse elemente sidra in razpona (skoraj vse) znotraj div .wp-pagenavi div.

  • Prva vrstica pravila nastavi oblazinjenje 5px, tako da ne bo natisnjeno ob svetlo sivi obrobi (opredeljeni spodaj). Prav tako določi enakomeren rob 10px na desni strani vsakega elementa, tako da je med njimi enak razmik.
  • Druga vrstica nastavi velikost pisave 15 px, barvo besedila postane modra in poskrbi, da povezave nimajo podčrtaja.
  • Tretja vrstica določa trdno 3px sivo obrobo na vsem. Koda polmera obroba naredi vogale zaobljene.

Drugo pravilo
.Wp-pagenavi a: hover, .wp-pagenavi span.current izbere učinek ležanja povezave in trenutno številko strani..

  • Prva vrstica nastavi temno modro barvo ozadja.
  • V drugi vrstici je besedilo belo.
  • Tretja vrstica daje nekoliko temnejšo mejo.

Tretje pravilo
S tem izberete trenutno številko (znova) trenutne številke strani, ne da bi to vplivalo tudi na učinek premikanja povezave (kot drugo pravilo). Zaradi tega je trenutna številka strani krepka teža pisave.

Razlog, da ga nisem vključil v učinek kazanja povezave, je, ker ima neenakomeren učinek od običajne do krepke teže pisave.

Opomba: Glede na to, kako je kodiran vaš CSS, boste morda morali uporabiti bolj določene izbirnike. Na primer, če obstajajo slogi za #content a in je vaš WP-PageNavi znotraj vsebine div, boste morda morali napisati svoj PageNavi CSS kot #content .wp-pagenavi a in preglasiti vse druge manj specifične sloge.

Zaključek

Vem, da je bil to razmeroma preprost primer, lahko bi imeli veliko bolj napredna pravila CSS, da bi še bolj razlikovali različne povezave in druge elemente. Upajmo, da ste ob poti našli tudi nekaj nasvetov za CSS.

Neobvezna integracija WP-PageNavi je zelo kul funkcija, ki bi jo lahko razvijalci vključili v svoje teme. Z načinom integracije, ki sem ga opisal zgoraj, so uporabniki lažje izbrali, ali ga bodo uporabljali ali ne, in to bi bila lepa možnost za veliko blogov.

Upam, da vam je vsem všeč vadnica, in če imate kakršne koli zahteve za prihodnje vadnice za WordPress ali nasvete za CSS, me obvestite v 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