Salutare tuturor!

Continui să scriu articole despre navigarea site-ului pe motorul WordPress.

Și în acest material voi arăta cum se face navigarea în pagină fără pluginuri și folosind binecunoscutul WP-PageNavi. La fel ca și în cazul , voi arăta implementarea în mai multe moduri, astfel încât să puteți alege pe cea care funcționează cel mai bine pentru dvs. Și există cazuri când o metodă nu funcționează pentru cineva. Prin urmare, va exista un fel de plasă de siguranță.

Materialul a fost foarte voluminos și, poate, cel mai cuprinzător de pe rețea.

Navigarea în pagină (paginare) este împărțirea informațiilor în pagini. Dacă luați o mulțime de site-uri pe Wordpres, atunci acest fenomen este exprimat clar în videoclipul listei de numere de pagini din partea de jos a fiecărei pagini cu anunțuri. Pe blogul meu, această funcție arată astfel:

Designul poate varia. Dar esența sa este aceeași - împărțirea informațiilor în pagini. După cum știți, în mod implicit, anunțurile postărilor sunt afișate pe pagina principală a site-ului, dintre care poate exista un anumit număr (în funcție de setările din elementul „Scriere”).

Dacă nu le defalcăm numărul, acestea vor fi afișate pe o singură pagină. Și acest lucru nu este bine, deoarece va fi incomod să folosiți site-ul, iar pagina principală va dura mult timp pentru a se încărca, deoarece în timp va exista un număr mare de anunțuri.

De regulă, acum în șabloanele moderne Wodpress, navigarea în pagină este deja încorporată. Dar există o opțiune când nu există. Atunci va trebui să o implementați. În schimb, poate exista o paginare a anunțurilor sub formă de link-uri către postările anterioare și următoare. Acest lucru este exprimat clar în șabloanele standard.

Această opțiune este, de asemenea, incomodă, deoarece dacă ne întoarcem cu 3 pagini, nu vom putea reveni la pagina originală într-un singur pas. Va trebui să faceți clic de 3 ori pe intrările anterioare sau pe următoarele. Navigarea în pagină vă permite să gestionați acest moment mai flexibil.

În general, să trecem la implementarea sa și primul pas este să îl integrăm într-un șablon fără plugin. Am discutat despre această metodă într-un tutorial video. Vă recomand să îl vizionați mai întâi și apoi să studiați versiunea text a instrucțiunilor.

O facem fără un plugin

Acum vă voi arăta o metodă după care veți avea exact aceeași navigare pe pagina WordPress ca și mine. Totul se face foarte simplu. Veți avea nevoie de 2 părți de cod, care vor trebui plasate în fișierele șablon, apoi trebuie adăugate stiluri pentru a seta designul. Să începem!

Iată prima parte a codului. Acesta trebuie plasat în fișierul functions.php al șablonului de design.

funcția wp_corenavi() ( global $wp_query, $wp_rewrite; $pages = ""; $max = $wp_query->max_num_pages; if (!$current = get_query_var("paginat")) $curent = 1; $a["bază "] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["total"] = $max; $a["curent"] = $actual; $total = 0; //1 - afișați textul „Pagina N din N”, 0 - nu afișați $a["mid_size"] = 1 //câte link-uri să afișați în stânga și dreapta celui curent $a["end_size"] = 1; ; //câte linkuri trebuie afișate la început și la sfârșit $a["prev_text"] = "" //link text "Previous page" $a["next_text"] = ""; Pagina următoare" dacă ($max > 1) echo "

Am plasat codul chiar la începutul fișierului, după eticheta de deschidere

În acest cod putem ajusta câțiva parametri:

• Linia 10 - dacă modificați valoarea de la 0 la 1, atunci lângă numerele paginii va fi afișată o inscripție precum „Pagina 3 din 45”. Puteți face această opțiune, dar cred că în acest caz nu este nevoie, deoarece numerele paginilor deja arată clar câte pagini sunt pe site. Și pagina activă este evidențiată într-o culoare diferită;
• Rândurile 11 și 12 - un anumit număr de numere anterioare sau următoare ar trebui să fie afișate în stânga și în dreapta numărului paginii active, respectiv. Aici afișăm numărul lor. Acest cod conține valoarea 1. Puteți pune 2 sau 3. Aici va trebui să experimentați puțin, deoarece cu cât numărul de numere este mai mare, cu atât navigarea va fi mai largă. Totul depinde de lățimea șablonului.

Deoarece navigarea în pagină ar trebui să fie afișată oriunde este afișată lista de anunțuri, acest cod trebuie să fie plasat în toate fișierele în care se întâmplă acest lucru:

• Pagina principală - index.php;
• Pagini de categorie și arhivă - category.php și archive.php;
• Pagina de căutare - search.php.

Apropo, în unele șabloane, ieșirea paginilor de categorii și arhive poate fi efectuată într-un singur fișier. Fișierul meu archive.php este responsabil pentru acest lucru.

Dacă șablonul dvs. nu are nicio navigare pentru împărțirea anunțurilor în pagini, atunci plasăm al doilea cod după afișarea conținutului. Dacă aveți legături anterioare și următoare, ceea ce este mai probabil, atunci această opțiune este mai ușor de implementat, deoarece trebuie doar să le înlocuiți cu codul furnizat mai sus.

De regulă, navigarea standard sub formă de precedent și următor. link-urile sunt afișate folosind un cod similar.

Acest cod poate fi diferit pentru toată lumea, dar conținutul său principal va fi același. Va trebui să găsiți un cod care va conține cod numit next_posts_link și previous_posts_link.

Când îl găsiți, nu ezitați să ștergeți acest conținut din fișier și să copiați în locul lui codul necesar care afișează navigarea în pagină.

Astfel, trebuie să înlocuiți navigarea standard cu navigarea pagină cu pagină în toate fișierele în care sunt afișate anunțuri. Am dat numele fișierelor mai sus.

Apropo, dacă aveți probleme cu acest proces, mă puteți contacta pentru ajutor în comentarii. Încerc să ajut.

/* NAVIGARE */ .navigation ( float: stânga; lățime: automat; margin-left: 216px; margin-top: -2px; font-size: 16px; ) .navigation > a ( float: stânga; lățime: 32px; font -weight: 700 text-align: text-decor: 7px; înălțime: 34px; fundal: url ("imagini/bow_left.png") no-repeat: 0.navigation > .next (float: stânga; lățime: 34px; fundal: url("); images/bow_right.png") fără repetare; margine-stânga: 14px; .navigation > .dots (float: stânga; dimensiunea fontului: 14px; greutatea fontului: 700; lățime: 32px; text-align: center; culoare : #c4c8cc umplutură- sus: 7px)

De asemenea, trebuie să încărcați imagini cu săgețile de mișcare înainte și înapoi în găzduire în folderul de imagini al șablonului de design. . Pentru a descărca, puteți utiliza managerul de fișiere standard al furnizorului de găzduire. Eu sunt.

Cand am plasat codurile in fisierele functions.php, in toate fisierele care afiseaza pagini cu anunturi si au stiluri scrise, putem verifica functionalitatea navigarii. Totul funcționează pentru mine și în șablonul standard arată așa.

Am discutat despre metoda fără un plugin. Sunt 100% sigur că, dacă ați făcut totul așa cum este descris mai sus, atunci totul ar trebui să funcționeze pentru dvs. Exista și o a doua opțiune fără plugin, dar după ce m-am uitat la ea mi-am dat seama că era în esență aceeași opțiune, doar puțin modificată. Prin urmare, trec la o modalitate de a implementa navigarea în pagină folosind un plugin.

Plugin WP-PageNavi

Mai întâi, descărcați pluginul de pe pagina oficială și instalați-l pe site.

După instalarea pluginului, va trebui să plasați și codul care va afișa navigarea în partea de jos a paginii.

Acum pluginul își va îndeplini sarcina și numerele paginilor vor avea următorul design.

Pe de o parte, designul nu este atât de fierbinte, dar, pe de altă parte, nu este deloc rău, deoarece nu este o bătaie de vedere. Utilizatorii iubesc simplitatea! Prin urmare, puteți lăsa totul așa cum este. Dacă vrei ceva mai colorat, acum ne vom uita la câteva opțiuni. Între timp, vom discuta despre un lucru precum configurarea wp pagenavi. Există setări și despre ele merită să vorbim.

În ceea ce privește primul element de setare „Șabloane de listă de pagini”, nu trebuie să modificați nimic în el. Suntem mulțumiți. Trecem la elementul „Setări liste de pagini”.

Observ că trebuie să experimentați cu toți parametrii în acest moment pentru a găsi valoarea optimă pentru dvs. Voi explica pe scurt ce face fiecare parametru.

• Folosește stil - dacă setăm valoarea la „Nu”, atunci stilurile de plugin vor fi eliminate și numerele de pagină nu vor fi formatate;

• Stilul listei de pagini - pe lângă lista obișnuită de numere de pagini, putem alege o opțiune de listă derulantă;

• Afișați întotdeauna o listă de pagini - nu activăm această setare. Doriți ca lista să fie afișată numai acolo unde este nevoie;
• Număr de pagini de afișat - este responsabil pentru numărul de numere de pagini afișate la începutul listei. Implicit, valoarea este 5 și în capturile de ecran de mai sus puteți vedea că sunt afișate exact 5 pagini;
• Gama de pagini de afișat - dacă site-ul dvs. are multe pagini, atunci această funcție va fi extrem de utilă. Va afișa numere de pagină după lista principală cu valori de 10, 20, 30, 40 și așa mai departe. Intervalul dintre aceste valori este determinat de următorul parametru;
• Coeficient pentru intervale de pagini - dacă setați valoarea la 5, atunci intervalul de pagini va arăta ca - 10, 15, 20, 25 etc. Dacă 10, atunci 10, 20, 30, 40 și așa mai departe. O valoare de 10 este suficientă.

Acestea sunt toate setările pe care trebuie să le ajustați pentru a se potrivi nevoilor dvs. Aici fiecare se va regla singur.

Cea mai simplă opțiune este să instalați un plugin suplimentar, care are stiluri pregătite în prealabil și, de asemenea, face posibilă personalizarea fiecărui parametru individual. Se numește plugin.

După instalarea acestuia, apare un nou articol în panoul de administrare WordPress.

După trecerea la acesta, putem selecta imediat spațiile de design existente.

Dacă dorim să personalizăm stilurile în mod individual, atunci în primul element al setărilor „Select Stylesheet”, selectați opțiunea „Custom” și configurați parametrii tuturor elementelor (bordurile și culorile acestora, culorile și dimensiunile fontului, culoarea link-urilor când trecerea cursorului mouse-ului și așa mai departe).

Îți voi traduce toți parametrii.

• Culoare titlu - culoarea textului „Pagina 3 din 45”;
• Culoare de fundal - culoare de fundal;
• Culoare de fundal activ/actuală - culoarea de fundal a numărului paginii active;
• Dimensiune font - dimensiunea fontului;
• Link Color - culoarea link-ului;
• Link Mouse Hover/ Active Hover - culoarea link-ului atunci când treceți mouse-ul peste un număr și când numărul este activ;
• Link Border Color - culoarea chenarului;
• Link Border Mouse Hover/Active Color - culoarea chenarului când treceți cursorul mouse-ului și când numărul este activ;
• Align Navigation - locație de navigare (stânga, dreapta, centru).

Puteți căuta valori de culoare pe Internet sau în Photoshop atunci când alegeți culoarea de umplere dorită.

Opțiunea de plugin nu este rea, dar mereu spun că trebuie să scapi de pluginurile inutile, iar în acest caz este.

A doua opțiune este realizată prin editarea fișierului de stiluri, care se află în folderul cu pluginul Wp-pagenavi de pe găzduire - pagenavi-css.css.

Acest fișier este inclus atunci când setarea „Utilizați stilul pagenavi-css.css” este activă în setările pluginului. Prin urmare, dacă îl edităm, atunci după actualizarea pluginului, toate stilurile vor fi înlocuite cu unele standard. Pentru a nu înlocui acest fișier de fiecare dată și pentru a nu rescrie stilurile, vă recomand să faceți următoarele:

1. Editați stilurile din acest fișier în stilurile dvs., dând designul dorit navigării paginii;
2. Dezactivați setarea „Utilizați stilul pagenavi-css.css”;
3. Plasați aceste stiluri în fișierul de stil principal al șablonului de design style.css.

În acest fel, aceste stiluri vor funcționa indiferent de plugin. Și când se actualizează, nu se vor rătăci. Aceasta este probabil cea mai bună opțiune de design pentru navigarea în acest plugin pe care aș face-o singur. Dar, din fericire, folosesc opțiunea fără plugin, ceea ce vă sfătuiesc să faceți.

Deci, prieteni. Materialul va iesi foarte bun, ca si pentru mine. Ce părere ai despre această? Sper că ai terminat. Dacă ceva nu merge, voi încerca să ajut în comentarii. Scrie, nu te teme! Și eu am suferit mult o dată și am reușit să-mi dau seama.

În această notă, vreau să închei rapid această postare, deoarece a fost nevoie de multă energie. Asta voi face. Îmi voi lua la revedere și mă voi odihni, apoi mă voi ocupa să scriu conținut nou.

Salutări, Konstantin Khmelev!

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 era încă tânăr și nu ar fi multe articole despre el, dar dacă există deja peste 200-300 dintre ele? În acest caz, o astfel de navigare îi poate speria cu ușurință pe mulți dintre cititorii tăi, 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ă plănuiți să navigați pagină cu 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.

Aceeași operațiune o facem cu fișierele archive.php și search.php dacă doriți ca această navigare să fie nu doar pe pagina principală, ci și pe categorii individuale și în timpul căutărilor. Bine, 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ă instalarea acestuia, va apărea o nouă filă PageNavi Style î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 „Existing Styles” la „Custom”, un editor va apărea în fața dvs., 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) echo "

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ă se afișeze 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) ecou "

.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(
greutatea fontului: 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.

Pe pagina de start, precum și pe paginile de categorii, arhive și rezultatele căutării, este de obicei necesară navigarea în pagină (cunoscută și sub denumirea de paginare). Blogurile de pe WordPress nu fac excepție, ele folosesc și paginarea, atunci când rezultatele informațiilor sunt împărțite în mai multe pagini.

Anterior, pentru a implementa această caracteristică, au fost folosite pluginuri terțe sau funcții speciale care se aflau în fișier funcții.php. Cu toate acestea, odată cu lansarea versiunii WordPress 4.1, caracteristica de paginare a fost încorporată în nucleul CMS-ului, iar acum funcțiile interne ale WordPress sunt suficiente pentru a implementa navigarea în pagină și nu este nevoie să adăugați cod sau pluginuri terțe.

Am scris mai devreme despre o îmbunătățire similară din partea WordPress în ceea ce privește eticheta TITLE - https://aboutwordpress.ru/post/wordpress-title/.

Ce este paginarea

Paginarea este împărțirea informațiilor în pagini. Acest concept înseamnă și numerotarea secvențială a paginilor, indicată prin numere situate în partea de jos, sus sau laterală a paginii.

WP-PageNavi - plugin de paginare WordPress

Cel mai popular plugin de paginare pentru WordPress este WP-PageNavi. Sincer să fiu, face față atât de bine sarcinii de paginare încât nu are rost să discutăm și să comparăm alte plugin-uri.

Paginare WordPress - plugin WP-PageNavi

Paginare WordPress fără plugin

Pentru a face paginarea pe un site web fără pluginuri, vom folosi funcția WordPress încorporată the_posts_pagination(). În locul de care avem nevoie, trebuie să inserăm următorul cod (de obicei acestea sunt fișiere index.php, categorie.phpși altele asemenea):

Rezultatul funcției the_posts_pagination() va fi aproximativ următorul cod HTML:

Eliminarea titlului H2 din paginare

Antetul H2 „Post Navigation” vă atrage imediat atenția. Care în cele mai multe cazuri nu are loc pe site. Pentru a scăpa de el, adăugați următorul cod în fișier funcții.php:

/* Eliminați H2 din paginare */ add_filter("navigation_markup_template", "my_navigation_template", 10, 2); function my_navigation_template($template, $class)( return "

Configurarea paginilor de paginare

În mod implicit, the_posts_pagination() afișează prima și ultima pagină, precum și o pagină în jurul celei curente. Toate celelalte sunt înlocuite cu o elipsă. Acest comportament poate fi modificat folosind argumente:

• show_all - arată toate paginile
• end_size - numărul de pagini la începutul și la sfârșitul listei
• mid_size - numărul de pagini din stânga și dreapta paginii curente

De exemplu astfel:

2, „end_size” => 2,)); ?>

Stiluri de paginare CSS

Salutări, dragi cititori ai site-ului blogului. Astăzi vom vorbi despre foarte popularul plugin WP-PageNavi, care vă permite să duceți navigarea pe pagina blogului dvs. WordPress la un nou nivel.

Î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ă singur, 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 FTP().

La dezarhivare, se întâmplă să apară un folder extern suplimentar, așa că verificați acest lucru și scăpați de el dacă este necesar. Sper ca am explicat clar? În caz contrar, 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).

Acestea. 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, să mergeți la pagina principală a blogului și să vă asigurați că totul funcționează așa cum trebuie. Acestea. Î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, în locul codului standard de navigare, o condiție care determină când să afișați 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:

Acestea. Numerele de numai trei pagini web îndepărtate sunt afișate cu un interval (pas) egal cu doi (6, 8, 10). Pentru a nu folosi 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 „Salvați modificările” situat în partea de jos.

Modificarea aspectului barei de navigare de paginare

Pentru a schimba schema de culori, umplutura, fonturile și alte atribute de aspect ale panoului de paginare afișat pe blogul dvs., va trebui să adăugați proprietățile CSS necesare la fișierul foaie de stil în cascadă al acestui plugin.

Adevărat, pentru ca acesta să ia forma prezentată în capturile de ecran date în acest articol, am adăugat proprietăți suplimentare nu fișierului CSS al pluginului (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), ci pentru fișierul pe care l-am folosit teme (wp-content/themes/numele folderului cu theme/style.css).

În acest fișier, proprietățile 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;

setează marginile externe și interne (vezi despre ele) pentru butoanele panoului (de fapt, pentru legăturile de la aceste butoane, deoarece aceste proprietăți vor fi aplicate în mod specific legăturilor specificate de eticheta A și plasate în containerul wp-pagenav) .

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

Nu va exista chenar în jurul legăturilor (proprietatea border: 0px), iar culoarea de fundal pentru containerele cu aceste legături 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 linkului rămâne albă, dar culoarea de fundal (de fapt, culoarea butonului) se schimbă într-o culoare mai închisă (culoarea fundalului: #154b7d;). Acestea. 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:

Această regulă CSS setează culoarea de fundal a acestui buton activ să se schimbe (fondul proprietății: #26343c), culoarea textului linkului de pe acest buton (culoarea proprietății: #add352) și, în plus, fontul textului linkului va fi bold datorită acestei proprietăți CSS - font-weight :bold().

Dar pentru a schimba aspectul panoului de navigare a paginii, puteți adăuga proprietățile CSS necesare la fișierul de stil al pluginului însuși. 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 există un fișier 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; chenar-sus: 1px solid #00598F; chenar-jos: 1px solid #00598F; culoare: #FFFFFF; fundal: url("imagini/fon.gif") centru stânga repetare-x; greutatea fontului: bold; ) .wp-pagenavi span.next-prev (familie de fonturi: Arial; /* IE fix */ )

Salvați modificările în fișierul pagenavi-css.css și vizitați blogul pentru a vedea dacă navigarea s-a schimbat. Dacă nu s-a schimbat, încercați să reîmprospătați conținutul ferestrei în browser ținând apăsat butonul SHIFT, iar dacă acest lucru nu ajută, ștergeți memoria cache a browserului.

Multă baftă! Ne vedem curând pe paginile site-ului blogului

S-ar putea să fiți interesat

Butoane Easy Social Share - plugin pentru adăugarea butoanelor rețelelor sociale la WordPress, inclusiv VKontakte și Odnoklassniki
Abonare la comentarii pentru WordPress - abonare la comentarii la articolele din WordPress
Breadcrumbs în WordPress folosind pluginul Breadcrumb NavXT (întărirea legăturii)
Contoare simple și pictograme pentru categorii și pagini - contoare frumoase RSS și Twitter, precum și pictograme pentru categorii și pagini în WordPress
Instalarea si configurarea pluginurilor pentru WordPress, rezolvarea eventualelor probleme
Pachetul SEO All in One și optimizarea internă a motorului de căutare a unui blog WordPress (meta tag-uri Canonical, Description și Title)
Galerie pentru WordPress bazată pe pluginul NextGEN Gallery - crearea și afișarea de galerii foto și prezentări de diapozitive în articole
Google XML Sitemaps - crearea unui sitemap pentru WordPress
Feed mai bun pentru WordPress - cum să nu trimiteți texte complete ale postărilor la RSS și să vă protejați de furtul de conținut printr-un canal de știri
Reconectarea paginilor site-ului folosind exemplul pluginului upPrev (panou extras) pentru WordPress

Salutări cititorilor site-ului meu blog, astăzi voi împărtăși cu voi setările pentru navigarea în pagină fără plugin pe blog. De ce este chiar necesară navigarea în pagină pe un site web și ce beneficii utile aduce aceasta? Aceasta este utilizarea blogului, datorită căreia vizitatorii site-ului pot găsi cu ușurință informații utile pentru ei.

Deci, înainte de a trece la setările de navigare, trebuie să configurați un mod convenabil de citire pentru postările dvs. care vor fi afișate pe pagina blogului. Pentru a face acest lucru, accesați Panoul de administrare - Setări - Citire:

și setați numărul de postări afișate care vor fi afișate pe fiecare pagină:

În acest caz, sunt instalate 5 intrări. De obicei, un blog afișează 5 până la 7 intrări pe fiecare pagină. Acum că am rezolvat aceste setări, în partea de jos a paginii vedem navigarea standard a paginii WordPress, care arată cam așa:

Când numărul de postări de pe blogul tău este, să zicem, 10-15 și ocupă nu mai mult de 2-3 pagini, atunci o astfel de navigare este destul de convenabilă, dar când blogul este plin în mod regulat cu conținut și numărul de articole este aproape de 100 sau 200 și toate aceste postări sunt postate câte 5 pe fiecare pagină. Atunci cred că nu va fi dificil să calculez câte pagini vor fi postate pe blog. În același timp, pentru ca un vizitator al blogului tău să nu fie nevoit să parcurgă toate paginile blogului tău WordPress pentru a găsi vreo postare, navigarea în pagină ar trebui să aibă un aspect mai convenabil și mai funcțional pentru utilizator:

O astfel de navigare va ajuta la menținerea cititorului pe blogul dvs., astfel încât să fie mai convenabil pentru el să deruleze site-ul dvs. în căutarea postărilor care sunt relevante pentru el. Astfel, ne îmbunătățim din nou, ceea ce ne ajută să ne promovăm blogul.

O bară de navigare similară poate fi afișată folosind pluginul WP-PageNavi. În același timp, cred că un blog ar trebui să funcționeze cu un număr mic de plugin-uri, pentru a nu crea încărcări suplimentare la afișarea site-ului. Prin urmare, vom lua în considerare o configurare simplă a afișajului de navigare a paginii WordPress fără un plugin.

Setări tehnice

Deschideți Panoul de Administrare - Setări - Editor - deschideți fișierul functions.php și introduceți următorul cod la început:

// Bară de navigare
funcția wp_corenavi() (
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"] = 1; //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ă se afișeze la început și la sfârșit
$a["prev_text"] = '"'; //Citate de tranziție la stânga"
$a["next_text"] = '"'; //Citate de tranziție la dreapta"

dacă ($max > 1) echo ‘

’;
dacă ($total == 1 && $max > 1) $pagini = ‘ Pagina ' . $curent. ' din ' . $max. ‘'."\r\n";
echo $pagini . paginate_links($a);
dacă ($max > 1) echo ‘

’;
}

sau cam asa:

și înlocuiți codul evidențiat cu următorul:

După aceasta, verificăm setările de pe site-ul dvs. și ar trebui să fie afișată afișarea standard a setărilor de navigare:

Bară de navigare

*/
.wp-pagenavi (
înălțime: 50px;
clar: ambele;

culoare:#BB7B00;
}
.wp-pagenavi span.pages(
culoare: #BB7B00;
}
.wp-pagenavi a, .wp-pagenavi span (
text-decor: niciuna;
umplutură: 6px 9px;
marginea: 2px;
fundal:#ffffff;
font: bold 14px Verdana,sans-serif;
culoare: #85B6C5;
raza-chenar:5px ;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current (
culoare-chenar: #BB7B00;
fundal:#85B6C5;
culoare:#ffffff;
}
.wp-pagenavi span.current (
culoare: #f5f5f5;
fundal:#85B6C5;
umplutură: 8px 9px;
}

Acum că am inclus stiluri pentru a afișa bara de navigare în WordPress fără a folosi un plugin, vom putea vedea ceva de genul acesta:

Pentru a scăpa de paginile duplicat suplimentare pe care motoarele de căutare nu le plac, trebuie să blocăm indexarea paginii. Pentru a face acest lucru, trebuie să adăugăm următorul cod la începutul fișierului functions.php:

/*** ADĂUGAREA meta-roboților noindex,nofollow PENTRU PAGINI ***/
funcția my_meta_noindex() (

dacă (
is_paged() // Toate paginile și paginile de navigare
) (eco "".' '."\n";)
}

add_action('wp_head', 'my_meta_noindex', 3); // adaugă noindex,nofollow la cap

Salvăm și ne verificăm setările. Pentru a face acest lucru, deschideți oricare dintre paginile 2, 3-10 etc., apăsați Ctrl+U și următorul cod ar trebui să fie afișat în codificarea paginii:

Este important Disallow: /page nu ar trebui să fie închisă în fișierul robots.txt din indexare. Acest lucru completează setările. Sper că înțelegeți toate aceste codificări. Dacă aveți întrebări, scrieți în comentarii, cu siguranță voi răspunde. Pe curând!