Sprievodca stylingom doplnku WP-PageNavi WordPress

Ak nie ste oboznámení s WP-PageNavi Doplnok WordPress umožňuje nahradiť bežnú predchádzajúcu / nasledujúcu navigáciu pokročilejšou, číslovanou stránkovou navigáciou. Toto je funkcia, ktorú som zahrnul do mnohých tém, ktoré som vyvinul, vrátane RS16, Blogwave, RS17, a Jasné miesto.


RS16 PageNavi

V tomto tutoriále sa zameriam na to, ako:

  • Nainštalujte si WP-PageNavi a správne ho integrujte do svojej témy.
  • Dve metódy na zakázanie a / alebo prepísanie predvolených štýlov doplnkov.
  • Prehľad výstupu značky HTML pomocou programu WP-PageNavi
  • Nakoniec, ako zmeniť vzhľad navigácie na stránke prostredníctvom CSS

Nainštalujte doplnok

Pokiaľ ide o inštaláciu doplnku WP-PageNavi, máte dve možnosti.

  • Stiahnite si ju z WordPress.org, nahrajte ho do adresára / wp-content / plugins / a aktivujte (aka, staromódny spôsob).
  • V závislosti od vášho hostiteľa môžete tiež nainštalovať doplnky automaticky tak, že ich vyhľadáte na stránke „Pridať nový“ pod položkou Pluginy na paneli správcu WordPress. Stačí vyhľadať výraz „pagenavi“ a mali by ste ho nájsť.

Dobre, malo to byť celkom ľahké. Teraz je čas, aby ste si trochu integrovali ruky v integračnej časti.

Integrácia tém

Pri integrácii tém nikdy nechceme, aby sa zobrazovali žiadne chyby, ak WP-PageNavi nie je aktívny. Namiesto toho sa ubezpečíme, že sa vráti späť k starej predchádzajúcej / nasledujúcej navigácii. Na tento účel použijeme a function_exists podmienená kontrola.

Povedzme, že toto je váš normálny predchádzajúci / nasledujúci navigačný kód WordPress:

<?php next_posts_link (‘«Staršie záznamy’) ?>
<?php previous_posts_link (‘Novšie záznamy »’) ?>

Zmeníme to na nasledujúce:

<?php if (function_exists (‘wp-pagenavi’))) {wp_pagenavi (); } else { ?>
<?php next_posts_link (‘«Staršie záznamy’) ?>
<?php previous_posts_link (‘Novšie záznamy »’) ?>
<?php} ?>

To v podstate skontroluje, či je aktívny WP-PageNavi a či je, zobrazí nový navigačný kód stránky. Ak nie, elegantne sa vráti k normálnej predchádzajúcej / nasledujúcej navigácii.

Vezmite prosím na vedomie: Podľa toho, ako je kódovaný váš CSS, môžete vložiť wp_pagenavi (); časť vo vnútri „navigácie“ (alebo jej ekvivalentu) div. Nezabudnite, že program WP-PageNavi vypláva novú triedu s názvom „wp-pagenavi“, ktorú však môžeme použiť na samostatné vytváranie štýlov.

Prepísať štýly doplnkov

V predvolenom nastavení WP-PageNavi automaticky vkladá súbor CSS s názvom pagenavi-css.css z adresára doplnkov do hlavičky vášho webu. Nechceme, aby tieto predvolené štýly zasahovali do našich vlastných skvelých štýlov na mieru, takže sa ich úplne zbavíme. Existujú dva jednoduché spôsoby, ako to urobiť..

  • Pridajte súbor CSS do adresára témy – Toto je pravdepodobne najjednoduchší spôsob, ako prepísať predvolené štýly WP-PageNavi. Ak máte v adresári tém súbor s názvom pagenavi-css.css, použije ho WP-PageNavi namiesto predvoleného v adresári doplnkov..
  • Pridajte útržok do súboru features.php – Nasledujúci útržok kódu, ktorý som prevzal Recepty WP úplne zakáže vyššie uvedené správanie a z doplnku nebude obsahovať žiadnu šablónu so štýlmi (predvolenú ani prepísanú v adresári tém).

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

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

Stačí vložiť tento kód do súboru funkcií vašej témy.php a pridať štýly CSS do šablóny so štýlmi bežného motívu (zvyčajne style.css).

Poznámka: Uistite sa, že kód je obklopený zátvorkami ako <?php … ?> ak je váš súbor funkcií momentálne prázdny.

WP-PageNavi Výber značiek HTML a CSS

Ako vyzerá značka WP-PageNavi. V nasledujúcom príklade sú štyri stránky, momentálne na strane dve.

predchádzajúca1
2
3
Ďalšie

Posledné »

Na zacielenie vyššie uvedeného označenia HTML môžeme použiť nasledujúce selektory CSS:

  • .wp-pagenavi – Vzťahuje sa na celý oddiel, ktorý je užitočný pre vymazanie CSS, odsadenie / okraj, veľkosť a štýl písma (tučné, kurzíva atď.)
  • .wp-pagenavi a – Zameriava sa na všetky odkazy v navigácii na stránke, vrátane čísel stránok a predchádzajúcich / nasledujúcich.
  • .wp-pagenavi a.page – Zacieluje konkrétne na čísla strán
  • .wp-pagenavi a.first – špecificky zameriava na „prvý“ odkaz (nie je uvedený vyššie)
  • .wp-pagenavi a.last – Zameriava sa konkrétne na „posledný“ odkaz
  • .wp-pagenavi span – Zacieluje na aktuálne číslo strany spolu s predlžovanou časťou (vec s tromi bodkami)
  • .wp-pagenavi span.current – Konkrétne zacieľuje na aktuálne číslo strany
  • .wp-pagenavi span.extend – Konkrétne sa zameriava na rozsah (vec s tromi bodkami)
  • .wp-pagenavi span.pages – Konkrétne sa zameriava na zobrazenie čísla strany (t. j. strana 1 zo 4)

Poznámka: Predchádzajúce a nasledujúce odkazy v predvolenom nastavení neobsahujú triedu CSS. Ak chcete, aby sa úplne odlíšili od čísel stránok a od prvých / posledných odkazov, bude potrebné resetovať všetky štýly pridané do selektora .wp-pagenavi. Ak to nedávalo zmysel, pozrite sa na nasledujúci (skutočne zjednodušený) príklad.

Napríklad: Povedzme, že ste chceli, aby predchádzajúce a nasledujúce odkazy boli odvážne, ale každý ďalší odkaz mal normálnu váhu. Mali by ste urobiť nasledovné:

.wp-pagenavi a {font-weight: bold; } / * Iba predchádzajúce a nasledujúce odkazy * /
.wp-pagenavi a.page,
.wp-pagenavi a.prvé,
.wp-pagenavi a.last {font-weight: normal; } / * Iné odkazy * /

Pre účely príkladu som skombinoval odkazy na číslo stránky, prvý odkaz a posledný odkaz do jedného pravidla. Samozrejme ich môžete oddeliť a ku každému z nich pridať špecifickejšie štýly.

Bolo by to oveľa jednoduchšie, keby bola k predošlým / nasledujúcim odkazom v predvolenom nastavení pridaná trieda, ale nie je. Nie je to obrovský problém, pretože ich môžete aj tak resetovať.

Dôležitá aktualizácia: Vďaka aktualizácii z Scribe v komentároch sa ukazuje, že najnovšia verzia WP-PageNavi má predchádzajúce / nasledujúce triedy (čiastočne vďaka Yoast).

Na výber predchádzajúcich a nasledujúcich odkazov môžete použiť .wp-pagenavi a.previouspostslink a .wp-pagenavi a.nextpostslink..

Takmer všetko vyššie, až kým neusporiadaný zoznam selektorov už nie je relevantný, budem si ho ponechať len preto, že by to mohla byť užitočná lekcia pri potlačení CSS v niektorých iných situáciách. Nižšie uvedený príklad CSS sa bude naďalej uplatňovať, pretože som tieto selektory nepoužíval.

Príklad CSS

Tu je príklad štýlu PageNavi, z ktorého som vychádzal Blogwave téma.

Blogwave Aktualizované PageNavi

Tu je kód, ktorý som použil na získanie tohto vzhľadu, multi-single-line CSS je voliteľné:

.wp-pagenavi a .wp-pagenavi span {
čalúnenie: 5px; pravý okraj: 10px;
veľkosť písma: 15px; farba: # 03719c; dekorácia textu: žiadna;
rámček: 3px pevný #ccc; -moz-hraničný-polomer: 5px; -webkit-border-radius: 5px; polomer okraja: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
pozadie: # 03719c;
farba: #fff;
okraj: 3px pevný #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

A to všetko znamená:

Prvé pravidlo
Rozpätie .wp-pagenavi a .wp-pagenavi vyberá všetky prvky kotvy a rozpätia (skoro všetko) vo vnútri oddielu .wp-pagenavi.

  • Prvý riadok pravidla nastaví výplň 5px tak, aby nebola preplnená proti svetlo šedému okraju (definované nižšie). Nastavuje tiež konzistentný okraj 10px napravo od každého prvku, takže medzi nimi je rovnaká vzdialenosť.
  • Druhý riadok nastavuje veľkosť písma 15 pixlov, farbu textu zmení na modrú a zabezpečí, aby odkazy neobsahovali podčiarknutie.
  • Tretí riadok nastavuje solídny sivý okraj 3 pixlov na všetko. Kód ohraničenia polomeru umožňuje zaoblenie rohov.

Druhé pravidlo
Wp-pagenavi a: hover, .wp-pagenavi span.current vyberie efekt vznášania odkazu, ako aj aktuálne číslo stránky..

  • Prvý riadok nastavuje tmavomodrú farbu pozadia.
  • V druhom riadku je text biely.
  • Tretí riadok poskytuje mierne tmavšie orámovanie.

Tretie pravidlo
Týmto vyberiete aktuálne číslo stránky (znova) bez toho, aby to malo vplyv aj na účinok umiestnenia odkazu na odkaz (podobne ako druhé pravidlo). To len robí z aktuálneho čísla strany výrazné písmo.

Dôvod, prečo som ho nezahrnul s efektom umiestnenia odkazu, je ten, že má nerovnomerný efekt od normálnej po tučné písmo..

Poznámka: V závislosti od toho, ako je váš kód CSS kódovaný, budete možno musieť použiť konkrétnejšie selektory. Napríklad, ak existujú štýly pre #content a a váš WP-PageNavi je vo vnútri oddielu content, možno budete musieť prepísať CSN PageNavi ako #content .wp-pagenavi a a prepísať akékoľvek iné menej špecifické štýly..

záver

Viem, že to bol relatívne jednoduchý príklad, mohli by ste mať oveľa pokročilejšie pravidlá CSS, aby ste ešte viac odlíšili rôzne odkazy a ďalšie prvky. Dúfajme, že ste si vybrali aj niekoľko tipov CSS.

Voliteľná integrácia WP-PageNavi je celkom cool funkcia, ktorú by vývojári mohli integrovať do svojich tém. S metódou integrácie, ktorú som načrtol vyššie, si používatelia mohli ľahko vybrať, či ju použijú alebo nie, a mohla by to byť pekná voľba pre veľa blogov..

Dúfam, že sa vám všetci páčili výukové programy, a ak máte akékoľvek žiadosti o budúce príručky WordPress alebo tipy CSS, dajte mi vedieť v komentároch.

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