Cum să personalizați paginarea în WordPress Block Editor

Paginarea este o componentă critică în designul web, în ​​special pentru site-urile web care prezintă conținut de lungă durată, cum ar fi bloguri sau listări de produse. Paginarea eficientă asigură o experiență de navigare perfectă, sporind atât satisfacția utilizatorilor, cât și optimizarea pentru motoarele de căutare (SEO).

Funcția de paginare din editorul de blocuri WordPress, cunoscută în mod obișnuit ca Gutenberg, face parte din blocul Query Loop, nu un bloc independent. Blocul Query Loop vă permite să afișați postări sau să creați șabloane personalizate într-o temă de bloc.

Blocul de paginare din bucla de interogare a lui Gutenberg este destul de limitat atunci când vine vorba de personalizare imediată. Este posibil ca designul său implicit să nu se potrivească întotdeauna cu nevoile estetice ale site-ului dvs., dar îi puteți îmbunătăți aspectul și funcționalitatea utilizând CSS personalizat.

Acest articol vă va ghida prin pașii de modificare și optimizare a paginii în editorul Gutenberg adăugând CSS personalizat, permițându-vă să îmbunătățiți navigarea site-ului și experiența generală a utilizatorului.

Pași pentru a personaliza paginarea în WordPress Block Editor

Pasul 1: Creați sau editați o pagină sau un șablon

Creează un nou tip de postare (pagină/postare) sau selectează-l pe cel existent. Dacă utilizați o temă de blocare, puteți, de asemenea, să adăugați un șablon nou sau să îl editați pe cel existent folosind Editorul site-ului.

În acest exemplu, vom crea o pagină nouă pe care o vom folosi ca pagină de postări (pagină de blog).

Adăugați blocul de buclă de interogare

Pe tabloul de bord WordPress, navigați la Pagini -> Adăugați o pagină nouă . În Gutenberg, adăugați un bloc Query Loop. Acest bloc vă permite să afișați postări, pagini sau tipuri de postări personalizate.

Puteți alege un model pentru bucla de interogare sau puteți începe gol. Pentru acest exemplu, alegem opțiunea start black, iar apoi pentru variația buclei de interogare, selectăm Image, Date și Title.

Apoi, puteți edita și stiliza aspectul tuturor elementelor din blocul Query Loop utilizând setările Blocare.

Pasul 2: Identificați clasa CSS Element de paginare

Trebuie să identificați clasa sa specifică CSS înainte de a personaliza elementul de paginare. De obicei, numele clasei depinde de tema WordPress și de orice plugin activ pe care îl utilizați. Deci, cum obțineți numele clasei CSS al fiecărui element de paginare de pe pagina dvs.?

Previzualizează-ți pagina făcând clic pe butonul Previzualizare în filă nouă .

Puteți utiliza Instrumentele pentru dezvoltatori încorporate ale browserului dvs. web (aproape toate browserele web au această caracteristică). Dacă utilizați Google Chrome, puteți face clic pe pictograma meniu (pictograma cu trei puncte) și puteți selecta Mai multe instrumente -> Instrumente pentru dezvoltatori .

După ce ați intrat în fereastra Instrumente pentru dezvoltatori, faceți clic pe pictograma săgeată pentru a inspecta un element de pe pagina dvs. (vezi imaginea de mai jos).

Apoi, îndreptați cursorul către elementele de paginare (containerul principal de paginare, numerele individuale ale paginii, numărul actual al paginii, butoanele precedente și următoare) pentru a determina clasele acestora.

După cum puteți vedea din imaginea de mai sus, am identificat clasele CSS ale elementelor noastre de paginare, mai jos:

Pasul 3: Adăugarea CSS personalizat pentru paginare

În continuare, vom adăuga fragmentul CSS la personalizarea temei WordPress pentru a personaliza elementul de paginare în blocul Query Loop. Pe tabloul de bord WordPress, accesați Aspect -> Personalizator -> CSS suplimentar . După aceea, copiați fragmentul CSS de mai jos și inserați-l în câmpul disponibil.

Notă : Dacă utilizați o temă de blocare, faceți clic aici pentru a afla cum să activați un personalizat de temă pe WordPress.

 .wp-block-query-pagination {
  display: flex;
  justificare-conținut: centru;
  marjă: 20px 0;
}

.wp-block-query-pagination .page-numbers {
  umplutură: 5px 8px;
  culoare de fundal: #f0f0f0;
  marjă: 0 3px;
  culoare: #000000;
}

.wp-block-query-pagination .page-numbers.current {
  culoare de fundal: #601599;
  culoare: alb;
}

.wp-block-query-pagination-previous {
  umplutură: 8px 12px;
  fundal: #233b27;
  marjă: 0 4px;
  culoare: #ffffff;
  chenar-rază: 4px;

}

.wp-block-query-pagination-next {
  umplutură: 8px 12px;
  fundal: #233b27;
  marjă: 0 4px;
  culoare: #ffffff;
  chenar-rază: 4px;
}

.wp-block-query-pagination .page-numbers:hover {
  culoare de fundal: #be76f5;
  culoare: alb;
}

.wp-block-query-pagination-previous:hover {
  fundal: #ffb300;
  culoare: #000000;
}

.wp-block-query-pagination-next:hover {
  fundal: #ffb300;
  culoare: #000000;
}

Nu uitați să faceți clic pe butonul Publicați pentru a aplica modificările pe care le-ați făcut.

Asta este. Pentru a vedea rezultatul, vă rugăm să reveniți la pagina dvs. și apoi să o previzualizați. Veți vedea că elementele dvs. de paginare sunt personalizate. Simțiți-vă liber să înlocuiți valorile proprietăților CSS pentru a obține aspectul care se potrivește cu designul dvs. general.

Nu uitați să vă salvați pagina sau să o publicați dacă doriți.

Ce a făcut codul CSS?

• Container principal de paginare: .wp-block-query-pagination
  • Utilizează Flexbox pentru a centra elementele de paginare și adaugă spațiere verticală (20px).
• Numere individuale de pagină: .wp-block-query-pagination .page-numbers
  • padding: 5px 8px; : creează spațiere în interiorul fiecărui număr de pagină. Se adaugă 5px de umplutură verticală (sus și jos) și 8px de umplutură orizontală (stânga și dreapta), mărind zona pe care se poate face clic.
  • background-color: #f0f0f0; : Setează culoarea de fundal a numerelor paginii la un gri deschis (#f0f0f0).
  • margin: 0 3px; : adaugă spațiu orizontal (3 px atât la stânga, cât și la dreapta) între elementele numărului paginii. Nu există o marjă verticală, așa că distanța afectează doar alinierea orizontală.
  • color: #000000; : Schimbă culoarea textului numerelor de pagină în negru, asigurându-se că contrastează bine cu fundalul deschis.
• Numărul paginii curente: .wp-block-query-pagination .page-numbers.current
  • background-color: #601599; : Schimbă culoarea de fundal a numărului paginii curente (active) într-un violet intens (#601599). Aceasta indică vizual ce pagină este selectată în prezent.
  • color: white; : Setează culoarea textului la alb, oferind un contrast ridicat față de fundalul violet, făcând vizibil numărul paginii active.
• Butoanele Anterior și Următorul: .wp-block-query-pagination-previous și . wp-block-query-pagination-next
  • Amenajat cu fundal verde închis, text alb, căptușeală și colțuri ușor rotunjite.
• Efecte de hover:
  • .wp-block-query-pagination .page-numbers:hover
    • Când utilizatorul trece cu mouse-ul peste orice număr individual de pagină, culoarea de fundal se schimbă într-un violet deschis (#be76f5) pentru un efect interactiv subtil.
    • Culoarea textului se schimbă în alb, sporind contrastul și îmbunătățind lizibilitatea în timpul trecerii cu mouse-ul. Efecte de trecere cu mouse-ul:
  • .wp-block-query-pagination-previous:hover și . wp-block-query-pagination-next:hover
    • Când utilizatorul trece cu mouse-ul peste butoanele „Înapoi” sau „Următorul”, fundalul se schimbă într-un galben-portocaliu vibrant (#ffb300), făcându-le să iasă în evidență.
    • Culoarea textului se schimbă în negru, oferind o lizibilitate clară pe fundalul luminos.

Concluzia

Acest articol arată cât de ușor puteți personaliza paginarea în WordPress Block Editor fără ajutorul vreunui plugin. Personalizarea paginației în Editorul de blocuri WordPress cu CSS personalizat permite un control mai mare asupra aspectului și funcționalității navigării site-ului dvs.

Folosind CSS, puteți personaliza paginarea pentru a se potrivi cu stilul mărcii dvs., puteți îmbunătăți experiența utilizatorului și puteți îmbunătăți designul general al site-ului dvs. WordPress. Indiferent dacă alegeți să ajustați culorile, dimensiunile sau aspectul elementelor de paginare, flexibilitatea CSS personalizat vă permite să creați o călătorie fără întreruperi și atractivă vizual pe site-ul dvs. web.

Cu toate acestea, dacă doriți opțiuni de design bogate fără a fi nevoie de CSS personalizat, vă recomandăm să utilizați un plugin WordPress, cum ar fi Divi sau Elementor, deoarece ambele oferă constructori vizuali intuitivi cu funcții extinse de personalizare, permițându-vă să creați machete uimitoare, complet receptive cu opțiuni avansate de paginare, conținut dinamic și stil direct în interfața generatorului de pagini.