WP-PageNavi - navigare în pagină pentru un blog WordPress - instalare, configurare și schimbarea aspectului paginației. Navigare în pagină WordPress – Trei pluginuri utile

. Editați aspectul butoanelor (principale și culoarea de fundal, cadre, fonturi etc.) se poate face prin fișierul CSS al acestui plugin pagenavi-css.css, suportul acestora poate fi activat în „ Setări pentru lista de pagini" Cu toate acestea, acest lucru nu este foarte convenabil. Prin urmare, un așa-numit plugin de completare numit WP PageNavi Style. După instalarea acestuia, toate opțiunile de editare necesare vor apărea în meniu aspect butoane

Toate întrebările pot fi puse în comentarii dacă cineva nu este clar cu privire la unul sau altul. Vom răspunde întotdeauna la toate întrebările.

Navigare pe blog pe WordPress implicit nu este foarte convenabil. Probabil că ești deja obișnuit să vezi navigarea pagină cu pagină pe multe bloguri sau site-uri web, adică un fel de paginare.

Puteți vedea un exemplu de astfel de navigare la. În partea de jos a paginii veți găsi pagini numerotate unde, de exemplu, făcând clic pe „3” vă va duce la a treia pagină.

Din păcate, WordPress nu are această caracteristică în mod implicit. Inițial, navigarea dvs. va arăta cam așa (va fi vizibilă când numărul de postări depășește 10):
Da, atunci când nu sunt multe articole pe blog, puteți, desigur, să mergeți constant la „înregistrările anterioare”. Dar când numărul lor depășește cel puțin 30, ajunge la pagina dorită devine problematică.

De aceea Majoritatea bloggerilor găsesc o soluție în pluginurile WordPress sau editează ei înșiși codul. Deoarece acest blog este destinat în primul rând începătorilor, nu vă voi deranja, vă voi arăta cu un exemplu de plugin.

Pluginul este numit Numerele paginii WP. Acest plugin este un analog al popularului plugin WP Page Navi, dar îmi place WP Page Numbers mai mult din punct de vedere al funcționalității.

Deci acesta Pluginul trebuie instalat. Depinde de tine să decizi pe care să o alegi. Mă voi uita la un exemplu de instalare și configurare Pluginul WP Page Numbers.

Dacă aveți navigare în pagină încorporată în tema blogului (șablon), nu este necesar să instalați pluginul WP Page Numbers.

Instalarea și configurarea pluginului WP Page Numbers

P.s. Deoarece culoarea albastru-albastru nu se combină în mod deosebit cu schema de culori blogul meu Am decis să schimb culorile. Vă spun cum se face, poate va fi de folos și cuiva.

Accesați folderul plugin wp-content/plugins/wp-page-numbers/theme_name (l-ați selectat în al treilea pas și numele poate fi vizualizat în partea stângă a selecției temei pentru plugin.)

Găsiți imagini acolo și editați-le în oricare editor grafic (Adobe Photoshop,Vopsea etc.). Și actualizați aceste fișiere. Iată rezultatul meu:

Am schimbat și culoarea de fundal la hover. Pentru a face asta am deschis fisierul wp-page-numbers.css, care se află în același folder cu imaginile. Pentru a schimba culoarea, în acest fișier trebuie să găsiți a 44-a linie în cazul meu și să modificați valoarea în #wp_page_numbers li a:hover fundal:. Am ales portocale, setați următorul cod de culoare: #FAD93E.
Dacă brusc nu înțelegeți cum am găsit această linie, atunci vă recomand cu tărie să citiți lecția despre util

Postarea de astăzi va fi despre cum să creați o navigare pagină cu pagină pentru un site WordPress folosind pluginul WP-PageNavi.

Deci, aveți deja un număr suficient de postări care nu se potrivesc pe o singură pagină de blog. WordPress împarte automat blogul în pagini atunci când numărul de postări publicate depășește numărul specificat în setări (Opțiuni - Citire - Afișează nu mai mult de *număr* de postări pe paginile blogului). Implicit număr mare Teme WordPress afișează comutarea între pagini astfel:

Mi se pare că acest lucru nu este foarte convenabil, deoarece navigarea în pagina WordPress este mult mai funcțională.

Deci, pentru a face navigarea în pagină pentru un blog WordPress, vom instala pluginul WP-PageNavi. Îl poți descărca de pe site-ul oficial, dar îl vom găsi printr-o căutare.

Accesați secțiunea „Plugins - Add new”, introduceți numele „WP-PageNavi” în căutare și faceți clic pe „Search for plugins”.

Pluginul de navigare a paginii WordPress de care avem nevoie va fi primul în rezultatele căutării, faceți clic pe „Instalare”, apoi „Activați pluginul”.

Acum avem o secțiune „Lista de pagini” în parametri, vom intra în ea puțin mai târziu, dar deocamdată vom afișa o nouă navigare în pagină în loc de cea standard.

Accesați „Aspect - Editor” și deschideți codul fișierului care este responsabil pentru navigarea între pagini. În cele mai multe cazuri, acesta este fișierul index.php. Găsim în el secțiunea responsabilă pentru ieșirea de navigare. Ar trebui să arate cam așa:

Trebuie să eliminăm aceste linii și să introducem următorul cod:

Salvăm modificările, mergem pe blogul nostru și vedem cum este afișată acum navigarea în pagină. In cazul meu a devenit asa:

De acord, aceasta arată mai bine decât două butoane „Înapoi” și „Înainte”.

Acum puteți merge la setările pluginului WP-PageNavi și vedeți ce puteți schimba în el:

• eşantion lista generala pagini (puteți înlocui textul „Pagina 1 din 12” cu al dumneavoastră dacă nu vă place cel standard);
• elementul " Pagina curentă„(nu trebuie schimbat);
• elementul „Pagină” (nu trebuie schimbat);
• elementul „Prima pagină” (îl puteți înlocui cu „Înapoi la început” sau altă expresie care vă place);
• elementul " Ultima pagina„(similar cu paragraful anterior, de exemplu, „Până la capăt”);
• elementul „Pagina anterioară” (puteți înlocui standardul „ cu un alt simbol, de exemplu, o săgeată la stânga);
• elementul " Pagina următoare» (la fel cu paragraful anterior, puteți înlocui » cu o săgeată la dreapta);
• elementul „Anterior” (elipse lângă trecerea la pagina anterioară);
• elementul „Următorul” (elipse lângă trecerea la pagina următoare).

• utilizați stilul pagenavi-css.css (se va folosi standardul plugin css);
• stilul listei de pagini (puteți alege lista obisnuita sau meniul drop-down);
• afișați întotdeauna o listă de pagini (activați sau dezactivați navigarea în pagină, chiar dacă nu există pagini cu postări);
• numărul de pagini de afișat (numărul de pagini afișate în listă);
• gama de pagini de afișat (dacă aveți multe pagini pe site);
• coeficient pentru intervale de pagini (dacă este 5, atunci navigarea pe pagină va arăta astfel: 5, 10, 15, 20 etc.).

Dacă înțelegeți css, puteți personaliza singur WP-PageNavi așa cum doriți.

Acum știți cum să creați navigarea în pagină folosind pluginul WP-PageNavi. Dacă aveți întrebări, adresați-le în comentarii, iar pentru a nu rata articole noi, abonați-vă la actualizările blogului.

Bună ziua, cititorii site-ului blogului! Standard Navigare în pagină WordPress se reduce doar la capacitatea de a trece la următorul sau de a reveni la pagina anterioară cu anunţuri de articole. Nicio numerotare a paginilor nu este vizibilă vizual - acest lucru este incomod. Puteți corecta situația folosind plugin-ul WP-PageNavi sau numerele sale analogice WP Page. Al treilea plugin la care mă voi uita astăzi, Number My Post Pages, vă permite să prezentați informații dintr-un singur articol pagină cu pagină.

Instalarea și configurarea WP-PageNavi și stilurile sale

2. Despachetați și încărcați folderul cu fișierele plugin în directorul wp-content/plugins pe server folosind programul gratuit .

3. Activați-l, în lista de plugin-uri trece sub numele „listă de pagini”.

4. Acum trebuie să înlocuiți codul standard pentru navigarea paginii din șabloanele index.php, archive.php și search.php cu unul nou:

Tipul de cod poate varia ușor de la subiect la subiect, așa că căutați un construct care să conțină rândurile next_posts_link și previous_posts_link.

De îndată ce înlocuiți codul, pluginul WP-PageNavi va începe să funcționeze. Toate setările pluginului sunt în rusă și sunt descrise clar, așa că înțelegerea lor nu va fi dificilă. Acestea se află în secțiunea „Plugin-uri” - „lista de pagini”.

Pentru a personaliza aspectul, trebuie să editați fișierul de stiluri de plugin WP-PageNavi - wp-pagenavi/pagenavi-css.css. Pentru a face acest lucru, accesați secțiunea „Plugins” - „Editor”, selectați WP-PageNavi ca plugin pentru a schimba și găsiți fișierul cu rezoluția .css în listă.

Desigur, pentru a personaliza stilurile de navigare în pagină trebuie să știți cel puțin Bazele CSS. Pentru a nu pierde timpul studiind-o (deși mai devreme sau mai târziu va trebui să înveți măcar html și css), poți folosi pluginul WP PageNavi Style, care oferă deja stiluri gata făcute pentru fiecare gust.

WP PageNavi Style este standard, nu trebuie să specificați nimic în tema pentru el. Doar descărcați cea mai recentă versiune de pe WordPress.org. După activare, o nouă secțiune cu același nume este creată în panoul de administrare WordPress.

Să ne uităm la setările de bază, nu sunt multe dintre ele.

Opțiunea Select StyleSheet vă permite să comutați între stilurile existente și posibilitatea de a le crea singur (personalizat).

Alegerea de stiluri este foarte mare, chiar și ochii îți scapă. Stilurile CSS3 arată deosebit de frumoase. Cred că fiecare va găsi ceva interesant pentru ei înșiși. După selecție design vizual navigare în pagină, setați locația acesteia - Aliniați navigarea: stânga - stânga, dreapta - dreapta și centru - în centru.

Acum să vedem ce opțiuni ne oferă secțiunea Personalizată.

• Culoare titlu - culoarea antetului, nu trebuie să știți cod html culori, doar faceți clic pe câmp și selectați-l vizual;
• Culoare de fundal- culoarea de fundal;
• Culoare de fundal activă/actuală — fundal din spate butoane pentru pagina curentă (active);
• Dimensiune font - dimensiunea fontului;
• Link Color - culoarea link-ului;
• Link Mouse Hover / Culoare activă— culoarea link-ului când treceți cursorul mouse-ului peste el;
• Legătură Culoarea chenarului— culoarea chenarului butonului cu numărul paginii;
• Link Border Mouse Hover/Active Color— culoarea chenarului când treceți cursorul mouse-ului peste buton;
• Align Navigation - aliniere pe pagină: centru, stânga sau dreapta.

WP-PageNavi nu funcționează

De asemenea, am dat peste faptul că pluginul WP-PageNavi nu funcționează.

1. Pluginul WP-PageNavi nu este activat. Cel mai probabil utilizați o temă deosebit de avansată care utilizează deja navigarea în pagini numerotate. Adăugați mai multe articole pe blogul dvs. pentru a vedea navigarea implicită pe blog. Cel mai probabil, este realizat în stilul temei folosite și nu trebuie schimbat nimic în ea. Dacă nu vă place, curățați șabloanele de teme din codul de navigare a paginii, atunci pluginul WP-PageNavi ar trebui să fie activat.

2. WP-PageNavi de pe pagina principală nu funcționează corect— paginile nu se schimbă, sunt generate erori sau conținutul paginilor nu se modifică. Acest lucru are de-a face din nou cu tema WordPress pe care o utilizați.

Deschideți șablonul index.php pentru editare și găsiți codul care este responsabil pentru afișarea înregistrărilor:

…

Înlocuiește-l cu următorul cod:

…

Verificați funcționalitatea WP-PageNavi.

3. Dacă acest lucru nu ajută, atunci puteți utiliza plugin alternativ — Numerele paginii WP.

Pluginul WP Numere de pagină

Instalarea pluginului WP Page Numbers este similară cu instalarea WP-PageNavi discutată mai sus, se folosește doar un cod ușor diferit:

Setările pluginului se află în secțiunea „Opțiuni” - „Numere de pagină”.

WP Page Numbers vă oferă 5 stiluri de navigare a paginilor WordPress din care să alegeți. Bineînțeles, în comparație cu varietatea stilurilor WP-PageNavi Style, acest lucru pare slab, dar temele sunt universale și sunt perfecte pentru majoritatea blogurilor.

Dintre celelalte setări, am înlocuit doar valorile „Pagină” cu „Pagină”, iar prepoziția „din” cu „de la”.

Pluginul Number My Post Pages

Ultimul plugin din colecția mea se numește Numărează-mi paginile de postareși este conceput pentru a crea navigarea în pagină într-o singură postare. Vă va fi util dacă volumul de material pe o pagină de blog este foarte mare și este mai bine să îl prezentați pagină cu pagină pentru confortul cititorului.

1. Descărcați pluginul Number My Post Pages.

2. Despachetați arhiva și transferați folderul cu fișierele plugin în directorul wp-content/plugins prin ftp.

3. Activați pluginul Number My Post Pages.

4. Adăugați single.php și page.php la șabloanele folosite Teme WordPress următorul cod:

Pentru a împărți conținutul unui articol în pagini, utilizați eticheta:

Setările pluginului Number My Post Pages se află la adresa „Opțiuni” - „Număr pagini de postare”.

• Text pentru numărul de pagini - text pentru numărul de pagini.
• Afișați „Textul pentru numărul de pagini”— dacă să afișați „text pentru numărul de pagini” sau nu.
• Numărul de pagini după pagina curentă— numărul de pagini după pagina curentă.
• Numărul de pagini înainte de pagina curentă— numărul de pagini înainte de cea actuală.
• Text pentru pagina următoare - textul butonului pentru a merge la pagina următoare.
• Text pentru pagina anterioară — textul butonului pentru a merge la pagina anterioară.
• Utilizați foaia de stil implicită — dacă doriți să utilizați o temă standard.
• Show Dropdown este un așa-numit dropdown care afișează o listă cu toate numerele de pagină.
• Afișează întotdeauna navigarea - arată întotdeauna navigarea, chiar dacă conținutul articolului nu este paginat.

Salutări, dragi cititori ai site-ului blogului. Astăzi vom vorbi despre foarte popularul plugin WP-PageNavi, care vă permite să afișați navigarea în pagină a blogului dvs. sub Gestionarea WordPress la un nou nivel de calitate.

În principiu, navigarea în pagină (paginare), care este folosită implicit, este destul de ușor de utilizat, dar opțiunea pe care o oferă această extensie pare mult mai atractivă.

De ce să folosiți pluginul WP-PageNavi

Judecăți singuri, așa arată paginarea implicită:

Și asta după instalarea pluginului:

sau cam asa:

depinde de opțiunile pe care le selectați în fereastra de setări.

După părerea mea, a doua opțiune este mult mai drăguță decât prima, care este implicită. Dacă și dvs. credeți așa, atunci ar trebui să citiți acest articol până la sfârșit și să aflați totul despre nuanțele de instalare și despre cum să configurați această extensie minunată.

Mai întâi va trebui să descărcați pluginul de aici. Găsiți butonul „Descărcare” din dreapta și salvați arhiva wp-pagenavi.zip pe computer. Apoi dezarhivați-l și încărcați folderul rezultat pe serverul de găzduire în directorul cu pluginuri wp-content/plugins/ .

Pentru a face acest lucru, va trebui să accesați fișierele și folderele blogului dvs. WP prin protocol FTP ().

La dezarhivare, se întâmplă ca un plus folder extern, așa că verificați-l și scăpați de el dacă este necesar. Sper ca am explicat clar? Altfel altfel Caz WordPress nu va vedea pluginul pe care l-ați instalat. Bine, hai să continuăm.

După ce copiați fișierele plugin pe serverul de găzduire în folderul wp-content/plugins/, va trebui să mergeți la panoul de administrare WordPress (http://vash_sait.ru/wp-admin/) și să selectați „Plugins” din meniul admin din stânga " În partea de sus a ferestrei „Management” care se deschide, trebuie să faceți clic pe linkul „Inactiv” (sau, dacă nu există traducere, atunci „Inactiv”).

Se va deschide o fereastră cu toate extensiile instalate, dar neactivate încă. Găsiți „WP-PageNavi” printre ele și faceți clic pe linkul „Activare” aflat sub numele acestuia.

Lipiți codul de ieșire al pluginului în șabloanele WordPress necesare

Plugin-ul este activat, dar pentru a vedea rezultatele muncii sale pe blogul dvs., va trebui, de asemenea, să introduceți codul pentru apelarea funcției wp_pagenavi în fișierele temei dvs. care este utilizată în prezent. .

În mod obișnuit, paginarea este utilizată pe pagina de pornire a blogului (fișierul INDEX.PHP din folderul cu tema), paginile web de arhivare (ARCHIVE.PHP) și rezultatele căutării (fișierul SEARCH.PHP). De fapt, va trebui să inserăm codul pentru apelarea funcției de care avem nevoie în aceste fișiere (șabloane).

Aceste. Va trebui să vă conectați din nou prin FTP și să mergeți la folderul cu tema curentă:

Wp-conținut/teme/Numele folderului cu tema ta

Găsiți INDEX.PHP în el și deschideți-l pentru editare într-un editor convenabil pentru dvs. (folosesc NotePad++ avansat în acest scop - am un articol despre lucrul cu el). Acum sarcina dvs. este să găsiți secțiunea de cod în INDEX.PHP care este responsabilă pentru trecerea la pagina anterioară sau următoare. Nu este o sarcină ușoară, nu-i așa? Deși, desigur, depinde de cine.

INDEX.PHP nu este foarte mare, studiază-i cu atenție conținutul pentru a căuta comentarii legate de paginare, de exemplu, acestea:

De obicei, creatorii de teme WordPress includ astfel de comentarii în zona de cod responsabilă pentru afișarea navigării paginii. Codul standard în sine poate arăta, de exemplu, astfel:

Odată ce identificați fragmentul de care aveți nevoie, va trebui să îl înlocuiți cu linia de apelare a funcției wp_pagenavi:

Acum trebuie să salvați modificările făcute în INDEX.PHP, accesați pagina de start blogul tău și asigură-te că totul funcționează așa cum ar trebui. Aceste. În loc de paginarea standard folosită în WordPress, folosiți frumusețea WP-PageNavi.

Apropo, paginarea standard nu trebuie eliminată din codul INDEX.PHP, astfel încât atunci când eliminați acest plugin nu veți avea probleme cu el mai târziu. Pentru a face acest lucru, va trebui să scrieți în INDEX.PHP cod standard condiția de navigare care determină când se afișează standardul și când panoul WP-PageNavi.

Condiția va depinde dacă pluginul WP-PageNavi este instalat sau nu pe blogul tău. Ar putea arăta cam așa:

În acest cod condiția este:

If(function_exists("wp_pagenavi"))

verifică dacă pluginul este instalat, iar dacă nu este instalat, scriptul standard va rula:

Altfel (?>

Și dacă WP-PageNavi este instalat, atunci bara de navigare va fi formată de acesta:

{ ?>

}

Deși, desigur, nu trebuie să vă deranjați și să înlocuiți unul cu celălalt, dar asta depinde de dvs.

Deci, acum va trebui să faceți același lucru pentru fișierele ARCHIVE.PHP și SEARCH.PHP din folderul cu tema dvs. (wp-content/themes/Numele folderului cu tema dvs.).

Setările pluginului WP-PageNavi pentru un blog WordPress

Pentru a intra în ele, va trebui să selectați „Lista de pagini” din meniul din stânga din zona „Opțiuni” din panoul de administrare. Se va deschide o fereastră cu fila „Șabloane de listă de pagini” activă:

În câmpul „Șablon al listei generale de pagini” din figura de mai sus, este setat afișarea paginii curente și numărul total de pagini. Cu această opțiune de completare a acestui câmp, panoul WP-PageNavi va arăta astfel:

Puteți adăuga cuvântul „Pagină” în acest câmp dacă preferați:

Pagina %CURRENT_PAGE% din %TOTAL_PAGES%

Și dacă doriți, îl puteți curăța complet. În coloanele „Element „Pagină curentă”” și „Element „Pagină”” lăsați totul așa cum este. Aici puteți seta afișarea etichetei pentru pagina actuală și pentru toate celelalte pagini web sub forma unui număr de serie. Va arata cam asa:

În câmpurile „Text pentru prima pagină” și „Text pentru ultima pagină” puteți seta textul pentru primul și ultimul buton:

În loc de text în coloana „Text pentru prima pagină”, puteți scrie unul și câmpul „Text pentru ultima pagină” - %TOTAL_PAGES% (în loc de această inscripție va fi afișat numărul tuturor paginilor web):

În câmpurile „Text pentru postarea următoare” și „Text pentru postarea anterioară”, semnele săgeților sunt scrise pentru a fi afișate pe butoanele următoare și anterioară:

Am curățat următoarele două câmpuri, pentru că... în caz contrar, au fost afișate două butoane albe fără text. Este posibil să nu aveți asta și să decideți singur pentru ce sunt necesare.

Să trecem la alte setări numite „Setări listă”:

Caseta de selectare din „Utilizați pagenavi-css.css” vă permite să dezactivați sau să activați fișierul foaie de stil în cascadă (CSS) care vine cu pluginul. În câmpul „Stil listă”, puteți selecta unul dintre cele două stiluri CSS din lista derulantă.

Ați văzut „Normal” în capturile de ecran anterioare, iar când selectați stilul „Lista derulantă”, veți obține ceva de genul acesta a panoului WP-PageNavi din WordPress:

Dacă bifați caseta „Afișează întotdeauna navigarea în pagină”, atunci chiar și pentru paginile web care nu necesită încă numerotare (să spunem că încă nu sunt suficiente postări pe pagina principală pentru ca împărțirea să aibă loc), navigarea va fi în continuare afisat ceva de genul asta:

În „Număr de pagini de afișat” puteți seta câte pagini vor fi afișate ca o serie continuă (secvențială) de numere. Trecerea la restul va fi posibilă folosind butoanele următor și precedent, precum și butoanele de comutare la primul și ultimul. Am pus un cinci acolo, rezultând:

În „Număr de numere de pagină mai mari de afișat” puteți seta câte numere de pagini web îndepărtate (mai mari decât numerele cu valori numerice afișate în prezent) vor fi afișate după butonul următor.

Iar în câmpul „Afișează numere mai mari de pagini în multiple de” poți seta pasul cu care vor fi afișate numerele de pagini web îndepărtate. Să presupunem că am pus un trei în primul câmp și un doi în al doilea:

Ca rezultat, panoul PageNavi va arăta astfel:

Aceste. Numerele de numai trei pagini web îndepărtate sunt afișate cu un interval (pas) egal cu doi (6, 8, 10). Pentru a nu utiliza afișarea numerelor îndepărtate, va trebui doar să puneți un zero în coloana „Număr de numere de pagină mai mari de afișat”.

Pentru a aplica și afișa modificările pe care le-ați specificat, în setările pluginului va trebui să faceți clic pe butonul „Salvare modificări” situat în partea de jos.

Modificarea aspectului barei de navigare de paginare

Pentru a se schimba schema de culori, padding, fonturi și alte atribute ale aspectului panoului de paginare afișat pe blogul dvs., va trebui să adăugați proprietățile CSS necesare fișierului foaie de stil în cascadă a acestui plugin.

Adevărat, pentru ca acesta să ia forma arătată în capturile de ecran date în acest articol, am adăugat proprietăți suplimentare nu in fișier CSS plugin (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), și în fișierul temă pe care îl folosesc (wp-content/themes/numele folderului cu theme/style.css).

În acest dosar Proprietăți CSS, care definesc aspectul panoului WP-PageNavi, arată astfel:

#conținut .wp-pagenavi a, #conținut .wp-pagenavi a:link, #conținut .wp-pagenavi a:activ ( padding: 3px 8px 3px 8px; margine: 2px; text-decor: niciunul; culoare: #fff; border: 0px line-height:24px; culoare de fundal: #2b99ff; ) #conținut .wp-pagenavi a:hover (color:#fff; culoare de fundal: #154b7d; ) #conținut .wp-pagenavi span.pages ( umplutură: 3px 8px 3px 8px; margine: 2px 2px 2px 2px; #add352 fundal:#26343c)

Vă rugăm să rețineți că numele claselor și ID() folosite aici se referă în mod specific la șablonul meu. Permiteți-mi să explic scopul unor reguli și proprietăți CSS.

#conținut .wp-pagenavi a, #conținut .wp-pagenavi a:link, #conținut .wp-pagenavi a:activ ( padding: 3px 8px 3px 8px; margine: 2px; text-decor: niciunul; culoare: #fff; chenar: 0px line-height:24px culoare de fundal: #2b99ff;

seturi externe și umplutura(vezi despre ele) pentru butoanele panoului (de fapt, pentru link-urile de la aceste butoane, deoarece aceste proprietăți vor fi aplicate în mod specific link-urilor specificate de eticheta A și plasate în containerul wp-pagenav).

Această regulă stabilește și culoarea textului linkului ( alb este setat în proprietatea culoare: #fff; — ).

Nu va exista nicio chenar în jurul legăturilor ( proprietate de frontieră: 0px), iar culoarea de fundal pentru containerele cu aceste link-uri va fi determinată de proprietatea background-color: #2b99ff; . Este această culoare pe care o puteți vedea în capturile de ecran de mai sus pentru butoanele inactive ale panoului de navigare a paginii.

Regula CSS:

#conținut .wp-pagenavi a:hover (culoare:#fff; culoare de fundal: #154b7d; )

setează culoarea pentru textul și fundalul containerului (buton) cu linkul peste care trece cursorul mouse-ului (proprietățile CSS ale linkului când trece cu mouse-ul - a:hover - ).

Culoarea textului link-ului rămâne albă, dar culoarea de fundal (de fapt, culoarea butonului) se schimbă într-o culoare mai închisă (background-color: #154b7d;). Aceste. Când un vizitator trece mouse-ul peste butoanele de pe bara de navigare, va vedea culoarea acelui buton schimbându-se, creând un sentiment de interactivitate.

Regula CSS:

#conținut .wp-pagenavi span.current ( umplutură: 3px 8px 3px 8px; margine: 2px; line-height:25px; font-weight: bold; culoare: #add352; fundal:#26343c; )

Setează aspectul butonului cu numărul paginii de blog deschisă în prezent (eticheta SPAN cu clasa CURRENT va fi scrisă în codul acestui link). Acest buton va arăta la fel cu butonul numărul unu din imaginea de mai jos:

In aceasta regula CSS setează culoarea de fundal a acesteia butonul activ(background:#26343c proprietate), culoarea textului linkului de pe acest buton (proprietatea culoare: #add352) și, în plus, fontul textului linkului va fi aldine datorită acestei proprietăți CSS - font-weight: bold ().

Dar pentru a schimba aspectul panoului de navigare a paginii, puteți scrie proprietățile necesare CSS și la fișier styling pluginul în sine. Puteți deschide acest fișier foaie de stil în cascadă pentru editare din folder:

/wp-content/plugins/wp-pagenavi/pagenavi-css.css

De exemplu, pentru a obține un panou ca acesta:

Va trebui să descărcați această arhivă, să o dezarhivați și să copiați folderul IMAGES în folderul plugin WP-PageNavi, pe care îl puteți găsi în următoarea cale:

/wp-content/plugins/wp-pagenavi

În folderul IMAGES se află fisier grafic fon.gif , care va forma fundalul pentru panoul PageNavi. Acum va trebui să deschideți fișierul /wp-content/plugins/wp-pagenavi/pagenavi-css.css pentru editare și să înlocuiți codul de acolo cu următoarele reguli:

Wp-pagenavi ( lățime: 100%; overflow: ascuns; umplutură: 4px 0px 4px 0px; margin-left: 0px; chenar: 1px solid #00598F; fundal: url("images/fon.gif") centru stânga repetare-x ; ) .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited (padding: 4px 5px 4px 5px; margine: 2px 0px 2px 0px; culoare: #ffffff; font-weight: bold; text -decor: niciunul; .wp-pagenavi a.last ( padding: 4px 5px 4px 5px; ) .wp-pagenavi a.first ( padding: 4px 5px 4px 5px; ) .wp-pagenavi a:hover ( background-color: #00598F; culoare: #FFFFFF; grosimea fontului: bold; gif") centru stânga repetare-x; culoare de fundal: #4f4f4f; greutate font: bold; ) .wp-pagenavi span.current ( umplutură: 4px 7px 4px 7px; margine: 2px 0px 2px 0px; font-weight: bold ; border-top: 1px solid #00598F: 1px solid-color: #00598F .wp-pagenavi span.extend;

margine: 2px 0px 2px 0px; margine-dreapta: 0px; margine-stânga: 0px;