Plugin de navigare în pagină. Plugin de navigare a paginii WordPress (paginare).

În articolul de astăzi vom vorbi despre un plugin numit WP-PageNavi. Acest plugin la îndemână vă permite să vă organizați navigarea pe blogul WordPress mai convenabil decât dacă ați folosi metoda implicită. În principiu, comoditatea navigării standard în pagină este o întrebare relativă și este destul de posibil să folosim așa-numitele instrumente implicite, dar WP-PageNavi ne oferă o opțiune mult mai atractivă. Dacă implicit avem două butoane „mai devreme” și „mai târziu” ca navigare în pagină, adică parcurgem paginile secvențial în căutarea celei de care avem nevoie, atunci după ce WP-PageNavi este în sfârșit instalat și configurat, primim butoane care indică numere de pagină, ceea ce ne permite să navigăm cu ușurință la pagina dorită. În funcție de setările selectate, bara de navigare poate arăta diferit, dar ne vom uita la asta puțin mai târziu.

Ce motive specifice ar putea avea un blogger începător pentru a utiliza pluginul PageNavi pentru a organiza navigarea pe blog? Poate că la început o astfel de nevoie nu apare și două butoane sunt destul de suficiente pentru a naviga în cinci pagini de blog. Dar, în timp, cantitatea de informații și, prin urmare, paginile, crește constant, iar navigarea obișnuită devine incomodă și este mai ușor pentru cititor să-și amintească pe ce pagină a terminat de citit sau a găsit articolul necesar decât să-și amintească de câte ori să faceți clic pe butonul „următorul”. De aceea, PageNavi este o evoluție logică a navigației aproape oricărui blog; Desigur, există și alte pluginuri similare, dar WP-PageNavi a câștigat cea mai mare faimă și popularitate.

Instalarea WP-PageNavi

Desigur, înainte de a lucra cu acest plugin, îl descarcăm și îl instalăm. După ce am descărcat arhiva necesară cu pluginul, aceasta trebuie dezambalată; ca urmare, obținem un folder numit WP-PAGENAVI, pe care apoi îl încărcăm pe serverul tău de găzduire în folderul cu pluginuri WordPress, pe care îl găsim sub numele wp-content/plugins/.

Pentru a face acest lucru, trebuie să accesați folderele blogului WordPress folosind FTP.

O atenție deosebită trebuie acordată faptului că folderul în care se află fișierele plugin trebuie copiat direct pe serverul de găzduire. Dacă copiați un folder cu același nume, în interiorul căruia se află folderul de care avem nevoie, WordPress nu va putea vedea pluginul instalat și, în consecință, nu va putea continua să lucreze.
După ce ați finalizat copierea fișierelor plugin WP-PageNavi, următorul pas este să vă conectați în zona de administrare WordPress și să selectați „Plugins”. După aceasta, în fața ta va apărea fereastra de gestionare a pluginurilor, unde alegerea ta este linkul „Inactiv” („Inactiv”, în versiunea în limba engleză). Această acțiune vă permite să deschideți o listă de pluginuri instalate, dar neactivate încă pentru blogul dvs.

În această listă, trebuie să găsiți pluginul WP-PageNavi de care avem nevoie și să faceți clic pe linkul „Activare” (se află chiar sub numele pluginului).

Inserarea codului de ieșire al pluginului WP-PageNavi în șabloanele de teme WordPress

Așadar, am activat pluginul necesar, dar pentru a vedea în sfârșit rezultatele muncii sale, de multe ori acest lucru nu este suficient. După activarea pluginului, trebuie să mergeți la blog ca utilizator obișnuit și să vedeți dacă au apărut modificări în afișajul de navigare. Dacă bara de navigare a dobândit în sfârșit un nou aspect, puteți trece imediat la configurarea pluginului. Dacă nimic nu s-a schimbat, va trebui să introducem manual codul de apelare al pluginului în fișierele principale ale temei WordPress care este utilizată în prezent pe blog. Din fericire, nu este nimic deosebit de complicat în acest sens - principala condiție pentru succes este cunoașterea structurii șablonului WordPress și înțelegerea la ce fișiere (și în ce secțiune specifică a acestora) să adăugați codul pluginului.

De regulă, utilizarea navigării în pagină este relevantă pe pagina principală (acesta este fișierul INDEX.PHP din folderul cu tema utilizată), precum și în încă două cazuri - pe pagina de arhive (ARHIVE.PHP) și pagina cu rezultatele căutării pentru întregul blog (SEARCH.PHP ). Prin urmare, în aceste trei fișiere va trebui să inserăm codul de serviciu al pluginului PageNavi, ceea ce ne va permite să afișam un panou de navigare convenabil în locul potrivit pe blogul nostru WordPress. Pentru a introduce codul de serviciu al pluginului PageNavi în fișierele șablon necesare, trebuie să vă conectați la blog prin protocolul FTP și să mergeți la folderul cu tema utilizată în prezent.

Mai întâi, să găsim un fișier numit INDEX.PHP în folderul cu teme și să începem să-l edităm în cel mai convenabil și familiar editor (personal, folosesc notepad-ul avansat Notepad++ în aceste scopuri).

În fișierul care se deschide, va trebui să găsiți secțiunea de cod care este în mod clar responsabilă pentru navigarea în numeroasele pagini ale blogului dvs. Trebuie spus că în unele cazuri aceasta devine o sarcină destul de dificilă. Cu toate acestea, fișierul INDEX.PHP în sine este mic și studiul atent al acestuia nu va dura mult timp. Sarcina ta este să găsești comentarii care sunt legate de navigare, de exemplu, și. În astfel de comentarii, creatorii de teme includ de obicei zona de cod de serviciu care este responsabilă pentru navigarea paginii pe un blog WordPress.

Codul de navigare a paginii din fișierul INDEX.PHP al temei dvs. poate arăta ca orice, dar acum trebuie să îl identificați corect și apoi să îl înlocuiți cu linia de apel a pluginului wp_pagenavi pe care îl luăm în considerare. Această linie arată astfel: . Salvăm modificările aduse fișierului, mergem pe pagina principală a blogului și ne asigurăm că totul funcționează exact așa cum aveam nevoie.

În principiu, codul standard de navigare aflat în fișierul INDEX.PHP nu trebuie să fie șters, astfel încât ulterior, atunci când eliminați pluginul nostru, navigarea pe pagina blogului dvs. va funcționa corespunzător. Pentru a face acest lucru, în loc de codul standard pentru navigarea în pagină, va trebui să scrieți o condiție care va determina când ar trebui să fie afișată navigarea standard WordPress și când ar trebui să fie afișată bara de navigare a paginii care este creată folosind plugin-ul WP-PageNavi. .

Apropo, adecvarea navigației constă și în a putea accesa, de exemplu, din pagina principală, la oricare alta. Este ușor de înțeles că butoanele standard „înainte” și „înapoi” nu sunt potrivite în acest scop, în special pentru blogurile cu mai multe pagini.

Odată ce ați terminat cu fișierul INDEX.PHP, va trebui să faceți același lucru pentru fișierele rămase (SEARCH.PHP și ARCHIVE.PHP) din același folder cu tema pentru blogul dvs. După finalizarea cu succes a acestor operațiuni, putem presupune că ne-am dat seama complet cum să setăm afișarea panoului care oferă navigare în pagină pe blogul nostru WordPress. Cu toate acestea, acesta nu este tot, deoarece acum suntem pe cale să ne familiarizăm cu setările pluginului care ne permit să schimbăm structura panoului de navigare a paginii.

Configurare detaliată a WP-PageNavi

Pentru a începe configurarea pluginului, trebuie să selectați „PageNavi” sau, în versiunea rusă, „Lista de pagini” în meniul din stânga al panoului de administrare WordPress din zona „Setări”. Această acțiune deschide o fereastră care conține o listă de setări pentru pluginul WP-PageNavi în zona de șabloane pentru lista de pagini.

Primul câmp, numit „șablon de listă totală de pagini”, conține o afișare specificată a paginii curente și numărul total de pagini. Dacă această opțiune este selectată, atunci în blogul WordPress panoul de navigare a paginii va deveni o listă secvențială de pagini cu numărul paginii curente evidențiat; De asemenea, puteți adăuga un cuvânt în acest câmp, de exemplu, „Pagină” - acest lucru nu va afecta deloc funcționalitatea în sine. Dacă există o astfel de dorință, acest câmp poate fi complet golit.

Următoarele câmpuri sunt denumite „Elementul paginii curente”, mai departe - „Element de pagină”. Nu atingem conținutul acestor câmpuri, deoarece aici este setat afișarea paginilor (atât cea actuală, cât și toate celelalte) sub forma unui număr de serie. În ceea ce privește panoul WP-PageNavi, totul aici va arăta destul de standard și natural. Un sistem similar de navigare pe pagini poate fi găsit acum pe multe bloguri.

Câmpurile de text pentru prima și ultima pagină au scopul de a specifica textul afișat pe butoanele pentru trecerea la prima și ultima pagină. Soluția clasică este să scrieți unul în loc de text pentru câmpul din prima pagină și să completați „Text pentru ultima pagină” cu linia %TOTAL_PAGES% - datorită acestui lucru, numărul total de pagini ale blogului dvs. va fi afișat în ultima pagină. linia.

Următoarele câmpuri sunt concepute pentru a afișa butoane pentru a accesa paginile de blog anterioare și următoare. Au nume „Text pentru postarea anterioară”și, respectiv, „Text pentru următorul post”. De regulă, aici sunt scrise săgețile obișnuite în direcția corespunzătoare.

Eu personal prefer să șterg cele două câmpuri rămase, pentru că altfel ne vor afișa câteva butoane albe fără text. Cu toate acestea, în blogul dvs. puteți găsi un loc pentru aceste câmpuri cu butoanele corespunzătoare.

Acum este momentul să treceți la setările suplimentare ale pluginului WP-PageNavi și să treceți la setările listei de pagini. Primul lucru pe care îl întâlnim la fereastră „Setări liste de pagini”- acesta este elementul „Utilizați pagenavi-css.css”, care vă permite să dezactivați sau să conectați fișierul cu foi de stil în cascadă care vine cu pluginul discutat astăzi, bifând caseta.

Următorul câmp, numit „Stil listă de pagini”, ne invită să deschidem o listă derulantă de stiluri CSS, care în esență ne invită să alegem un stil dintre cele două oferite. Stilul obișnuit este butoanele de navigare în pagină pe care le-am menționat deja, în timp ce stilul numit „Lista derulantă” afișează navigarea sub forma unei liste derulante laconice cu numere de pagină.

Următorul câmp de setare ne solicită să verificăm sau să debifăm elementul „Afișați întotdeauna navigarea în pagină”. Dacă bifați caseta de aici, navigarea va fi afișată chiar și pentru acele pagini care nu au încă suficiente postări de împărțit - de exemplu, pe pagina principală.

Câmpul „Număr de pagini de afișat” este destinat să indicați câte pagini vor fi afișate ca o serie secvențială de numere, în timp ce navigarea către alte pagini de pe blogul dvs. se va efectua folosind butoanele „următorul” și „anterior”. (aceleași pe care le-am marcat cu săgeți), precum și butoane pentru a merge la prima pagină și la ultima.

Câmp sunat „Numărul de numere de pagină mai mari de afișat” specifică câte numere îndepărtate care sunt mai mari decât numerele cu valori numerice afișate vor fi văzute de un vizitator al blogului după ce a făcut clic pe butonul pentru a merge la pagina următoare în ordine.

În cele din urmă, un câmp numit „Afișați numerele de pagină mai mari în multipli de” oferă posibilitatea de a seta pasul în care vor fi afișate numerele de pagini îndepărtate ale blogului tău. De exemplu, în primul dintre aceste câmpuri descrise vom pune un trei, iar pentru al doilea - un doi. Aceasta va duce la faptul că în panoul WP-PageNavi, cu pagina curentă numerotată 1 și numărul de pagini afișate specificat de numărul 5, după paginile afișate secvenţial de la prima la a cincea, paginile numerotate 6, 8, 10 va fi vizibil - adică trei pagini ale blogului tău cu un pas (interval) egal cu doi. Cu toate acestea, nu trebuie să utilizați această funcție, doar introduceți 0 în câmpul pentru numărul de numere îndepărtate afișate.

După ce ați făcut toate modificările necesare setărilor de afișare a barei de navigare, trebuie să le salvați. Pentru a face acest lucru, faceți clic pe butonul corespunzător din partea de jos a panoului de setări.

Lucrul cu aspectul barei de navigare a paginii

Desigur, poate doriți să schimbați schema de culori standard a barei de navigare sau fontul acesteia și alte atribute externe cu cele care sunt mai potrivite pentru stilul de design al blogului dvs. Pentru a face acest lucru, va trebui să scrieți proprietățile CSS necesare în fișierul foaie de stil în cascadă.

Cu toate acestea, puteți adăuga proprietăți suplimentare direct la fișierul CSS al temei dvs. WordPress actuale ( wp-content/themes/curent theme/style.css), și nu la fișierul plugin corespunzător, care se află la: .

O altă modalitate de a schimba aspectul barei noastre de navigare a paginii plasate pe paginile blogului atunci când utilizați pluginul WP-PageNavi este să schimbați fișierul de stil al pluginului în sine. Acest fișier se află în folder /wp-content/plugins/wp-pagenavi/pagenavi-css.css.

(3)

WordPress este o platformă de blogging foarte versatilă, iar cu ajutorul pluginurilor poate fi făcută și mai ușor de utilizat.

Acest lucru este valabil și pentru navigarea (paginarea) paginilor, care inițial este absentă în WordPress. Dar acest lucru poate fi rezolvat cu ușurință alegând unul dintre cele mai bune 10 plugin-uri pentru site-ul dvs.

1.WP-PageNavi

Unul dintre cele mai populare și frecvent utilizate plugin-uri. Folosind funcția încorporată wp_pagenavi() link-uri uzuale ← Înapoi | Următorul → se va schimba în paginare atractivă.

2. WP Smart Pagination


Un alt plugin util care are o funcție foarte convenabilă. Puteți merge la pagina dorită introducând numărul acesteia în fereastra suplimentară.

3. Paginare simplă

Unul dintre cele mai bune și mai simple pluginuri pe care le puteți folosi pentru a adăuga paginare suplimentară pentru postări și comentarii, făcând navigarea pe site-ul dvs. WordPress mult mai ușoară.

4. Paginare alfabetică


Folosind acest plugin, puteți filtra postările și paginile în ordine alfabetică. Nu este doar ușor de instalat, ci și de utilizat.

5. Paginare jPages pentru WordPress


Acesta este unul dintre cele mai bune plugin-uri pentru crearea de paginare pentru paginile galeriei, comentarii etc. Cu ajutorul lui, galeriile se transformă într-o galerie cu paginare.

6.Paginați


Acest plugin vă permite să creați paginarea paginii conform cerințelor dvs. Puteți crește numerotarea pe o pagină, selectați numărul de unități de afișat. În mod implicit, pot fi 10.

7. Articolul următor Fly Box pentru WordPress


Unul dintre cele mai bune plugin-uri care creează navigare între postarea următoare și cea anterioară sub forma unei casete pop-up în partea stângă sau dreaptă a ferestrei. Când utilizatorul derulează pagina, apare o casetă pop-up în care puteți selecta intrarea următoare sau anterioară.

8. Pluginul JQuery Paginator


Pluginul vă permite să alegeți între 3 tipuri de paginare dacă setați parametrul dorit. Acesta este unul dintre cele mai atractive pluginuri de paginare.

9. Paginare inteligentă


Un plugin excelent care oferă 11 opțiuni de paginare diferite.

Bonus. Stiluri CSS pentru pluginul WP-PageNavi


O colecție excelentă de stiluri CSS pentru plugin-uri WordPress populare - WP-PageNavi și WP-Paginate. Include pagini HTML cu demonstrații de stil și fiecare stil conține un fișier CSS separat.

Navigare în pagină este ceva căruia orice blogger ar trebui să-i acorde o atenție deosebită. Constă în afișarea postărilor WordPress, pagină cu pagină. De obicei, postările sunt afișate într-o ordine ierarhică și, deși aveți opțiuni de selecție, cum ar fi Postări vechi și Postări noi, nu aveți opțiunea de a afișa postări pagină cu pagină cu pagini numerotate.

Utilizând navigarea în pagină, utilizatorul poate merge direct la pagina 6 sau 8 fără a fi nevoit să navigheze de la o pagină la alta. Această navigare este utilă și pentru SEO; preferă această navigare; Folosind pluginurile WordPress gratuite furnizate în acest articol, puteți instala navigarea prin paginare pe site-ul dvs.

1 – WP Page Navi

WP Page Navi este un plugin popular care va permite vizitatorilor site-ului dvs. să se deplaseze cu ușurință de la o pagină la alta. Acesta va înlocui opțiunea Postări vechi/Postări noi cu o navigare paginată. Pluginul nu necesită resurse mari și nu afectează viteza de încărcare a paginii.

Acest plugin este compatibil cu majoritatea temelor existente.

  • Necesită puține resurse.
  • SEO prietenos.
  • Foarte popular.
2 – WP Paginate

Acest plugin este o modalitate bună de a adăuga navigare prin paginare la site-ul dvs. WordPress, cu el puteți adăuga paginație numerotată care afișează pagina de început, pagina de mijloc și numerele paginii de final.

Cu el, puteți chiar adăuga navigare prin comentarii la postări, acest lucru va ușura încărcarea paginii.

Puncte cheie și caracteristici:

  • Utilizează navigarea simplă pe pagină.
  • SEO prietenos.
  • Ușor de utilizat.
3 – Paginare simplă
Paginare simplă este un plugin care vă va permite să aveți navigare atât prin postările, cât și prin comentarii. După cum sugerează și numele, acest plugin este foarte ușor de utilizat. Puteți chiar să stilați navigarea pentru a se potrivi cu tema blogului dvs. folosind foi de stil.

Există 6 foi de stil care se potrivesc cu site-ul dvs. și suport în două limbi.

Puncte cheie și caracteristici:

  • Utilizează navigarea simplă pe pagină.
  • Utilizează navigarea în comentarii.
  • Există foi de stil pentru diferite tipuri de afișare.
  • Există 6 tipuri de stiluri.
4 – Legături către pagini Plus

Link-uri pagini Plus– un plugin care îndeplinește funcția de a adăuga navigare la o postare. Există momente când înregistrarea dvs. devine atât de mare încât trebuie să o împărțiți în părți. În astfel de cazuri, pluginul Page Links Plus vă va ajuta, ceea ce vă va împărți postarea în pagini, arătând legătura dintre ele, permițându-vă să vizualizați întreaga postare.

Pluginul vine cu o varietate de setări pentru a vă ajuta să obțineți rezultatele dorite pentru postarea dvs.

Puncte cheie și caracteristici:

  • Vă permite să numerotați postările și paginile.
  • Există o opțiune pentru a vizualiza întreaga înregistrare.
  • Există multe setări.
  • Există o versiune Pro disponibilă.
5 – Paginare alfabetică

Paginare alfabetică va numerota postările și paginile site-ului dvs. în ordine alfabetică. Dacă vindeți produse pe site-ul dvs. WordPress, atunci acest plugin va face minuni, vă va numerota toate produsele în ordine alfabetică.

Poate fi folosit oriunde pe site-ul dvs. folosind un shortcode.

Puncte cheie și caracteristici:

  • Există navigare alfabetică.
  • Asistența comercială este disponibilă.
  • Poate fi plasat oriunde folosind un shortcode.
  • Poate afișa o listă de utilizatori în ordine alfabetică.
6 – Paginare galerie pentru WordPress

Plugin de paginare a galeriei pentru WordPress vă va ajuta să navigați prin galeriile de imagini ale site-ului dvs. WordPress. Acesta va afișa toate imaginile din galerie, ceea ce va ajuta utilizatorul să meargă direct la orice imagine fără a fi nevoie să parcurge imaginile una câte una.

Suportul CDN vă ajută să faceți galeriile de imagini prietenoase cu SEO. Există, de asemenea, cache pentru a crește viteza de încărcare a paginii, precum și Ajax pentru a face modificări fără a fi nevoie să reîncărcați pagina.

Puncte cheie și caracteristici:

  • Există navigare prin galerii de imagini.
  • Suportul CDN este disponibil.
  • SEO prietenos.
  • Memorarea în cache este disponibilă.
7 – Post paginare avansată
Plugin avansat de post paginare va naviga prin intrările dvs. Dacă postarea ta este prea mare, poți folosi acest plugin pentru a o împărți în mai multe pagini. Pentru a nu te încurca de butoanele digitale obișnuite, folosind acest plugin poți plasa text și imagini pe butoane. Puteți folosi codul scurt pentru a vă pagina postarea în orice fel doriți.

Ajax vă va ajuta să navigați la o secțiune fără a fi nevoie să reîncărcați întreaga pagină.

Puncte cheie și caracteristici:

  • Împărțirea unei singure înregistrări.
  • Utilizarea textului și a imaginilor pe butoane.
  • Folosind coduri scurte.
  • Folosind Ajax.
8 – WP Smart Pagination
Paginare inteligentă WP este o modalitate convenabilă de a afișa postările separate pe pagini, împreună cu un câmp în care puteți introduce numărul paginii, permițându-vă să ajungeți instantaneu la pagina de care aveți nevoie. Acest lucru este foarte util dacă aveți o mulțime de postări pe site-ul dvs., ceea ce face dificil pentru utilizatori să navigheze la o pagină care este foarte îndepărtată. În cazul în care aveți 4000 de pagini de postări, iar utilizatorul dorește să vadă pagina 2555, acest plugin vă poate oferi un serviciu de neprețuit.

Puncte cheie și caracteristici:

  • Utilizează navigarea simplă pe pagină.
  • Există un câmp pentru navigarea directă către pagina dorită.
  • Teme de potrivire.
  • Există o modificare a stilurilor.
9 – Paginare jPages pentru WordPress
Acesta este un plugin jQuery inspirat de jPages, care facilitează paginarea galeriilor de imagini și a comentariilor. Acesta este un plugin complet receptiv care va oferi navigare prin conținut pentru toate tipurile de dispozitive cu diferite dimensiuni de ecran. jPages Pagination For WordPress este un mic plugin care vă permite să integrați cu ușurință navigarea cu jQuery.

Toate browserele majore acceptă acest plugin, astfel încât vizitatorii site-ului dvs. nu vor avea probleme la vizualizarea conținutului atunci când folosesc acest plugin pentru navigare.

Puncte cheie și caracteristici:

  • Se folosește jQuery.
  • Plugin receptiv.
  • Sprijinit de browserele majore.
  • Integrare ușoară.
Concluzie
Acest articol oferă o listă cu cele mai bune pluginuri gratuite de paginare WordPress care vă pot ajuta să vă paginați site-ul în cel mai bun mod posibil. Toate pluginurile au caracteristici diferite, așa că alege-l pe cel care se potrivește cel mai bine site-ului tău.

4 761

În acest articol, vă voi arăta cum să creați un meniu de navigare WordPress. Folosind un simplu instrument de glisare și plasare, veți crea un meniu derulant frumos pe site-ul dvs. web.

Meniul de navigare WordPress

De ce ai nevoie de un meniu? Vă permite să prezentați structura site-ului dvs. utilizatorilor - îi ajută să răsfoiască secțiuni și să găsească rapid informațiile de care au nevoie.

Meniul poate fi situat sus/jos și dreapta/stânga pe pagina site-ului.

Aproape toate temele WordPress conțin cel puțin un tip de aspect de meniu.

Crearea unui meniu WordPress

Puteți adăuga un meniu din panoul de administrare WordPress - Aspect - Meniuri.

O nouă fereastră „Creați meniu” va apărea pe ecran, constând din două zone. Zona din stânga conține paginile dvs., linkurile personalizate și categoriile. Și în dreapta sunt elemente de meniu personalizabile.

Să creăm primul tău meniu.

Furnizați un nume pentru meniul dvs., de ex. „Primul meu meniu” și apoi faceți clic pe butonul „Creați meniu”.

Setările meniului vor apărea în fața ta:

După cum puteți vedea, tema site-ului Azbuka WordPress oferă 3 opțiuni de aspect de meniu: principal, secundar, subsol.

Numele și locațiile meniurilor depind de tema selectată și pot varia.

Apoi selectați paginile pe care doriți să le adăugați - verificați paginile listate în panoul din stânga și faceți clic pe Adăugare la meniu.

Apoi selectați locația meniului și salvați.

Puteți încerca diferite machete pentru a vedea cum arată finisat.

Plasarea elementelor de meniu

Veți observa că fiecare element de meniu pe care îl adăugați este în ordinea în care l-ați adăugat. De exemplu, pagina Despre mine apare la sfârșit și pagina Produse apare la început.

Nu vă faceți griji, puteți să glisați și să plasați elementele de meniu cu mouse-ul și să le aranjați în ordinea dorită.

Astfel, puteți crea numărul necesar de meniuri pentru diferite zone ale site-ului.

Crearea unui meniu derulant de navigare WordPress

Meniul drop-down este un meniu de navigare. Cu elemente părinte și copil.

Când utilizatorul trece mouse-ul peste elementul de meniu părinte, toate celelalte elemente secundare apar fără probleme unul după altul sub elementul părinte.

Folosind meniul drop-downputeți crea un sistem de navigație bine structurat.

Acum să adăugăm un element de submeniu pentru noul tău meniu.

ÎN structura, trageți elementul chiar sub elementul părinte, apoi trageți elementul ușor spre dreapta. Veți observa că va deveni automat un element de submeniu.

În acest fel puteți crea mai multe niveluri de submeniuri. Dar, din păcate, nu toate temele acceptă crearea unor astfel de meniuri cu mai multe niveluri - majoritatea vă permit să creați doar 2 niveluri.

Adăugarea de categorii în meniu

Categoriile sunt folosite pentru a crea un meniu derulant pe un blog. Și sunt adăugate după același principiu ca paginile. Extindeți fila „Categorii”, selectați-le pe cele de care aveți nevoie și adăugați-le în meniu.

Veți observa că categoriile vor apărea ca elemente de meniu. Ca și în cazul paginilor, puteți glisa și plasa categoriile cu mouse-ul pentru a le aranja în ordinea dorită.

În exemplul de mai jos, m-am asigurat că toate categoriile devin elemente copil ale paginii blogului.

Adăugarea de linkuri personalizate la meniul de navigare WordPress

Editarea unui element de meniu

Când adăugați pagini sau o categorie, WordPress folosește automat titlul paginii sau numele categoriei ca text link.

Asta nu înseamnă că nu o poți schimba.

Extindeți elementul și editați-l după cum este necesar.

Aici puteți schimba titlul, textul linkului și puteți adăuga un atribut titlu la link. Salvați meniul pentru a nu pierde toate modificările.

Eliminați din meniu

De asemenea, extindeți elementul de meniu și în partea de jos veți vedea textul roșu „Șterge”.

Zonele meniului de navigare

Fiecare temă oferă propriile tipuri de aspect al meniului de navigare.

În tema acestui site, pe care am arătat-o ​​în exemple, există 3 tipuri de layout de meniu. S-ar putea să fie mai multe sau mai puține în subiectul dvs. Și, desigur, pot fi numiți diferit.

Adăugarea unui meniu de navigare în bara laterală

Pe lângă zonele standard, puteți adăuga un meniu în bara laterală și alte zone cu widget-uri.

În panoul de administrare, selectați „Aspect” - „Widget-uri” și adăugați widgetul „Meniu personalizat” în bara laterală.

Apoi, trebuie să dați titlu widget-ului și să selectați unul dintre meniurile dvs. personalizate din listă. Faceți clic pe butonul de salvare.

Acum accesați site-ul și verificați cum este afișat meniul în bara laterală.

Când vine vorba de butoanele sociale din meniuri, unele teme oferă butoane de social media încorporate.

Dacă tema dvs. nu le are, puteți instala un plugin precum Menu Social Icons pentru a adăuga singur butoane.

Te-ar putea interesa:

Dacă aveți întrebări, scrieți în comentarii.

Și urmăriți-ne mai departe

O zi buna, dragi prieteni! Astăzi vă vom vorbi despre cum să faceți un lucru atât de frumos și convenabil pe WordPress ca navigare pe pagină folosind plugin-ul WP-PageNavi sau cod simplu. Nu știu despre tine, dar personal nu-mi place deloc navigarea încorporată în motorul WordPress.

Ce fel de navigație este aceasta? Bine, dacă blogul ar fi încă tânăr și nu ar fi multe articole despre el, dar dacă sunt deja mai mult de 200-300? În acest caz, o astfel de navigare îi poate speria cu ușurință pe mulți dintre cititorii dvs., deoarece nimeni nu vrea să apese pe butonul „postarea anterioară” până când își pierde pulsul pentru a ajunge la materialul dorit. În plus, această inscripție pare atât de discretă încât s-ar putea să nu fie văzută, ceea ce va duce în cele din urmă la o scădere a afișărilor de pagină per vizitator și a timpului petrecut pe site, iar acest lucru este acum foarte important atunci când promovați orice site, ceea ce nu poate fi ignorat. . Deci, dacă încă intenționați să navigați pe pagină, puteți utiliza orice metodă prezentată mai jos.

Navigare în pagină pentru WordPress utilizând pluginul WP-PageNavi.

Metoda 1. Descărcați pluginul WP-PageNavi aici și încărcați-l pe blog, activează-l, accesează panoul de administrare a blogului în „setări” „lista de pagini”. Aici trebuie să configuram un singur parametru - „numărul de pagini de afișat”. Am specificat personal 10 pentru ca navigarea mea să fie foarte vizibilă pentru vizitatori. Apropo, dacă dintr-o dată întreaga navigare a paginii nu se încadrează în șablonul de temă, adică dacă arată cam așa:

atunci puteți pur și simplu să reduceți acest număr sau, și mai bine, să eliminați inscripția „pagină” din setările pluginului și să le înlocuiți cu săgeți. Ok, după aceea, dă clic pe salvare și vezi cum avem acum o simplă navigare pagină cu pagină pe blog. Dacă acest lucru nu se întâmplă, atunci mergeți la „aspect” „editor”, deschideți fișierul șablon principal (index.php) și căutați ceva de genul acesta: sau ceva de genul asta și schimbați-l în: , salvați înregistrarea.

Efectuăm aceeași operațiune cu fișierele archive.php și search.php dacă doriți ca această navigare să fie nu doar pe pagina principală, ci și în secțiuni individuale și în timpul căutărilor. Bun, vreau să vă avertizez pentru orice eventualitate, că acest plugin nu funcționează pentru toată lumea, așa că dacă nimic nu funcționează pentru dvs., atunci puteți instala un plugin similar WP-Page Numbers. Dacă îl instalați, va trebui să introduceți și un cod special în aceleași fișiere.

Stiluri de design frumoase pentru navigarea în pagină a pluginurilor WP-PageNavi și WP-Page Numbers.

Probabil ați observat deja că navigarea în pagina mea arată mult mai bine și mai atractivă decât a dumneavoastră. Acest lucru se datorează faptului că am un plugin suplimentar stil WP-Page Numbers , care funcționează atât pentru WP-PageNavi, cât și pentru WP-Page Numbers. Dacă dintr-o dată ești un programator, ca mine, ca să zic așa, nu un profesionist, ca să zic așa, să prescrii singur modele în fișierele plugin, atunci poți pur și simplu să instalezi acest plugin pentru tine. După instalare, o nouă filă PageNavi Style va apărea în panoul de administrare. În el puteți alege orice stil de design de navigare a paginii care vă place.

În total, pluginul are 20 de tipuri de stiluri cu toate culorile disponibile. De asemenea, dacă brusc nu vă place nimic din listă, atunci în fila Select StyleSheet puteți schimba setările de la „Stiluri existente” la „Custom” în fața dvs. va apărea un editor, unde puteți specifica setările , culori, etc ai nevoie. Dacă da, iată traducerea lor:

Culoare titlu - culoarea antetului.

Culoare de fundal - culoare de fundal.

Culoare de fundal activă/actuală- culoarea butonului când treceți cursorul mouse-ului peste el.

Dimensiunea fontului - dimensiunea fontului.

Link Mouse Hover / Culoare activă- culoarea link-ului când treceți cursorul mouse-ului peste el.

Link Border Color - culoarea marginii butonului cu numărul paginii.

Link Border Mouse Hover/Active Color- culoarea chenarului când treceți cursorul mouse-ului.

Align Navigation - aliniere pe pagină: centru, stânga sau dreapta.

Cum se face navigarea în pagină fără pluginul WP-PageNavi?

Dacă nu sunteți unul dintre cei cărora le place să instaleze altele noi pentru a îmbunătăți funcționalitatea, atunci puteți lua o soluție - instalați doar codul care va afișa această navigare, dar înainte de asta, faceți-o pentru orice eventualitate.

Metoda 2. Accesați „editorul” „aspect” și deschideți fișierul cu funcția temei (functions.php) și la sfârșit înainte de etichetă?>

funcția wp_corenavi() (

$pagini = "";
$max = $wp_query->max_num_pages;


$a["total"] = $max;
$a["curent"] = $curent;
$total = 1; //1 — afișați textul „Pagina N din N”, 0 — nu afișați
$a["mid_size"] = 3; //câte link-uri să se afișeze în stânga și în dreapta celui curent
$a["end_size"] = 1; //câte link-uri să afișați la început și la sfârșit
$a["prev_text"] = """; //text link „Pagina anterioară”
$a["next_text"] = """; //text link „Pagina următoare”
dacă ($max > 1) ecou "

";
dacă ($total == 1 && $max > 1) $pagini = ""."\r\n";

dacă ($max > 1) ecou "
";
}

Apropo, codul are câteva explicații în rusă, așa că te poți juca puțin cu numerele dacă ai nevoie. Acum, ca și în cazul pluginului WP-PageNavi, accesați fișierele: functions.php, index.php și archive.php și găsiți linia acolo iar după el sau mai multe rânduri, adăugați codul

Metoda 3. Această metodă este similară cu a doua, dar codul este încă ușor diferit. În fișierul de funcție a temei (functions.php), la sfârșitul etichetei ?>, introduceți acest cod și salvați intrarea.

funcția de navigare() (
global $wp_query, $wp_rewrite;
$pagini = "";
$max = $wp_query->max_num_pages;
if (!$current = get_query_var("paginat")) $current = 1;
$a["bază"] = str_replace (999999999, "%#%", get_pagenum_link (999999999));
$a["total"] = $max;
$a["curent"] = $curent;
$total = 0; //1 — afișați textul „Pagina N din N”, 0 — nu afișați
$a["mid_size"] = 2; //câte link-uri să se afișeze în stânga și în dreapta celui curent
$a["end_size"] = 5; //câte link-uri să afișați la început și la sfârșit
$a["prev_text"] = ""Anterior"; //text link „Pagina anterioară”
$a["next_text"] = "Următorul"; //text link „Pagina următoare”
dacă ($max > 1) echo "

";
dacă ($total = 1 && $max > 1) $pagini = " Pagina „ . $current . ” din „ . $max .”"."\r\n";
echo $pagini . paginate_links($a);
dacă ($max > 1) echo "
";
}

. Acum mergeți la fișierul foaia de stil (style.css) și introduceți acest cod de stil undeva, unde codurile fișierelor încep cu un punct și salvați intrarea.

.navigator (marja:10px 7px;
fundal:#fff;
chenar:1px solid #aaa;
umplutură: 15px;
preaplin:ascuns;
dimensiunea fontului: 13px;
culoare:#000;)

.navigator a(fond: #fff;
chenar: 1px solid #DDDDDD;
culoare: #000000;
dimensiunea fontului: 13px;
umplutură: 10px;
text-decor: niciuna;)


fundal:#f1f8f9;
chenar: 1px solid #C6D2D4;)

.navigator a:hover(fond: #fff;
chenar: 1px solid #111;
culoare: #0000cc;
dimensiunea fontului: 13px;
umplutură: 10px;
text-decor: niciuna;)

.navigator span.pages (padding: 3px 5px;
fundal:#f1f8f9;
chenar: 1px solid #C6D2D4;)

.navigator span.current (fond: #fff;
chenar: 1px solid #111;
culoare: #0000cc;
dimensiunea fontului: 15px;
umplutură: 10px;
text-decor: niciuna;)

.navigator span.extend (padding: 3px 5px;
fundal:#f1f8f9;
chenar: 1px solid #C6D2D4;)

.str(fond: #fff;
chenar: 1px solid #DDDDDD;
culoare: #000000;
dimensiunea fontului: 13px;
umplutură: 10px;
text-decor: niciuna;)

Metoda 4. În fișierul de funcție a temei (functions.php), la sfârșitul etichetei ?>, introduceți acest cod și salvați intrarea.

funcția my_pagenavi ($pagini = "", $interval = 2)
{
$showitems = ($interval * 2)+1;

global $paged;
if (gol ($paginat)) $paginat = 1;

dacă ($pagini == "")
{
global $wp_query;
$pagini = $wp_query->max_num_pages;
dacă (!$pagini)
{
$pagini = 1;
}
}

dacă (1 != $pagini)
{
ecou"

»;
}
}

În fișierele: functions.php, index.php și archive.php găsim acolo linia iar după el sau mai multe rânduri adăugați codul . Acum mergeți la fișierul foaia de stil (style.css) și, ca în exemplul anterior, introduceți acest cod și salvați intrarea.

.paginare(
clar: ambele;
dimensiunea fontului: 12px;
margine-sus: 10px;
text-align: centru;
}

.pagination span, .pagination a (
text-decor: niciuna;
chenar: 1px solid #BFBFBF;
umplutură: 3px 5px;
marginea: 2px;
}

.pagination a:hover(
culoare-chenar: #000;
}
.pagination .current(
greutate font: bold;
}

Metoda 5. Descărcați acest fișier, luați codul din el și inserați-l în (functions.php) la sfârșit, înainte de eticheta ?> și salvați intrarea. Dacă ceva, îmi cer scuze anticipat pentru inconvenient, deoarece codul era prea mare pentru a fi publicat. Acum, în fișierele: functions.php, index.php și archive.php găsim acolo linia iar după el sau mai multe rânduri adăugați codul

În orice caz, toate codurile au fost testate pentru funcționalitate, așa că unul dintre exemple ar trebui să funcționeze pentru dvs., în orice caz. Asta e tot, succes.

Distribuie