Ghid pentru stilizarea pluginului WordPress WP-PageNavi

Dacă nu sunteți familiarizat cu pluginul WordPress WP-PageNavi, acesta vă permite să înlocuiți navigarea obișnuită anterioară/următoare cu o navigare mai avansată, cu paginare numerotată.

În acest tutorial, vom aborda cum să:

• Instalați WP-PageNavi și să-l integrați corect în tema dvs.
• Două metode pentru a dezactiva și/sau suprascrie stilurile implicite ale pluginului.
• O prezentare generală a marcajului HTML generat de WP-PageNavi
• În final, cum să modificați aspectul navigației paginilor dvs. prin CSS

Instalați pluginul

Aveți două opțiuni atunci când vine vorba de instalarea pluginului WP-PageNavi.

• Descărcați-l de pe WordPress.org, încărcați-l în directorul dvs. /wp-content/plugins/ și activați-l (adică, metoda clasică).
• În funcție de gazda dvs., puteți, de asemenea, să instalați automat pluginuri căutându-le pe pagina „Adăugare nou” din secțiunea Pluginuri din panoul de administrare WordPress. Doar căutați „pagenavi” și ar trebui să-l găsiți.

Bun, asta ar fi trebuit să fie destul de ușor. Acum este timpul să vă murdăriți puțin mâinile în cod pentru partea de integrare.

Integrarea temei

În integrarea temei noastre, nu dorim niciodată ca erorile să fie afișate dacă WP-PageNavi nu este activ. În schimb, ne vom asigura că revine la vechea navigare de tip anterior/următor. Pentru a face acest lucru, vom folosi o verificare condițională function_exists.

Să spunem că acesta este codul dvs. obișnuit de navigare anterioară/următoare WordPress:

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>

Îl vom schimba în următorul:

<?php if (function_exists('wp-pagenavi')) { wp_pagenavi(); } else { ?><div class="navigation">
	<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div><?php } ?>

Aceasta verifică practic dacă WP-PageNavi este activ și, dacă este, afișează noul cod de navigare a paginii. Dacă nu, revine grațios la navigarea obișnuită anterioară/următoare.

Vă rugăm să rețineți: În funcție de modul în care este codat CSS-ul dvs., s-ar putea să doriți să plasați partea wp_pagenavi(); în interiorul div-ului „navigation” (sau echivalent). Rețineți că WP-PageNavi generează o nouă clasă numită „wp-pagenavi”, pe care o putem folosi pentru a stiliza separat.

Suprascrieți stilurile pluginului

Implicit, WP-PageNavi inserează automat un fișier CSS numit pagenavi-css.css din directorul pluginului în antetul site-ului dvs. Nu dorim ca aceste stiluri implicite să interfereze cu propriile noastre stiluri personalizate, așa că le vom elimina complet și există două moduri simple de a face exact acest lucru.

• Adăugați un fișier CSS în directorul temei dvs. – Aceasta este probabil cea mai ușoară modalitate de a suprascrie stilurile implicite WP-PageNavi. Dacă aveți un fișier numit pagenavi-css.css în directorul temei dvs., WP-PageNavi îl va folosi în locul celui implicit din directorul pluginului.
• Adăugați un fragment de cod în fișierul dvs. functions.php – Următorul fragment de cod pe care l-am preluat de la WP Recipes va dezactiva complet comportamentul de mai sus și nu va include nicio foaie de stil din plugin (nici cea implicită, nici una suprascrisă în directorul temei dvs.).

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

Pur și simplu plasați acel cod în fișierul functions.php al temei dvs. și adăugați stilurile CSS la foaia de stil obișnuită a temei dvs. (de obicei style.css).

Notă: Asigurați-vă că codul este încadrat de paranteze precum <?php ... ?> dacă fișierul dvs. de funcții este gol în prezent.

Marcaj HTML și Selectoare CSS WP-PageNavi

Iată cum arată marcajul WP-PageNavi. În exemplul următor, există patru pagini, în prezent pe pagina a doua.

<div class="wp-pagenavi">
	<a href="http://example.com/" >Previous</a><a href="http://example.com/" class="page" title="1">1</a>
	<span class="current">2</span>
	<a href="http://example.com/?paged=3" class="page" title="3">3</a>
	<a href="http://example.com/?paged=3" >Next</a></div>
	<span class="extend">...</span>
	<a href="http://example.com/?paged=4" class="last" title="Last »">Last »</a>
</div>

Putem folosi următoarele selectoare CSS pentru a viza marcajul HTML de mai sus:

• .wp-pagenavi – Se aplică întregului div, util pentru ștergeri CSS, padding/margin, dimensiuni de font și stiluri (aldin, italic etc.)
• .wp-pagenavi a – Vizează toate linkurile din interiorul navigației paginii, inclusiv numerele paginilor și cele anterioare/următoare.
• .wp-pagenavi a.page – Vizează specific numerele paginilor
• .wp-pagenavi a.first – Vizează specific linkul „first” (nu este listat mai sus)
• .wp-pagenavi a.last – Vizează specific linkul „last”
• .wp-pagenavi span – Vizează numărul paginii curente împreună cu partea de extindere (lucrul cu trei puncte)
• .wp-pagenavi span.current – Vizează specific numărul paginii curente
• .wp-pagenavi span.extend – Vizează specific extinderea (lucrul cu trei puncte)
• .wp-pagenavi span.pages – Vizează specific afișajul numărului paginii (adică Pagina 1 din 4)

Notă: Linkurile anterioare și următoare, implicit, nu au nicio clasă CSS pe ele. Dacă doriți să le diferențiați complet de numerele paginilor și de linkurile first/last, va trebui să resetați orice stiluri adăugate selectorului .wp-pagenavi a. Dacă acest lucru nu a avut sens, aruncați o privire la următorul exemplu (foarte simplificat).

De exemplu: Să presupunem că doriți ca linkurile anterioare și următoare să fie aldine, dar orice alt link să aibă o greutate normală. Ar trebui să faceți următoarele:

.wp-pagenavi a { font-weight: bold; } /* Previous and Next links only */
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last { font-weight: normal; } /* Other links */

Am combinat linkurile numerelor paginilor, linkul first și linkul last într-o singură regulă în scopuri de exemplu. Desigur, le puteți separa și adăuga stiluri mai specifice fiecăruia.

Ar fi mult mai ușor dacă ar exista o clasă adăugată implicit linkurilor anterioare/următoare, dar nu există. Nu este un mare inconvenient, deoarece le puteți reseta oricum.

Puteți folosi .wp-pagenavi a.previouspostslink și .wp-pagenavi a.nextpostslink pentru a selecta, respectiv, linkurile anterioare și următoare.

Deci, practic, tot ce este mai sus, până la lista neordonată de selectoare, nu mai este relevant, dar o vom păstra doar pentru că ar putea fi o lecție utilă în suprascrierea CSS în alte situații. Exemplul CSS de mai jos se va aplica în continuare, deoarece oricum nu am folosit acei selectoare.

Un exemplu CSS

Iată un exemplu de stilizare PageNavi pe care am creat-o:

Iată codul pe care l-am folosit pentru a obține acest aspect, CSS-ul pe mai multe linii-unic este opțional:

.wp-pagenavi a, .wp-pagenavi span {
	padding: 5px; margin-right: 10px;
	font-size: 15px; color: #03719c; text-decoration: none;
	border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background: #03719c;
	color: #fff;
	border: 3px solid #AFAFAF;
	}
.wp-pagenavi span.current { font-weight: bold; }

Și iată ce înseamnă totul:

Prima Regulă
.wp-pagenavi a, .wp-pagenavi span selectează toate elementele ancore și span (aproape totul) din interiorul div-ului .wp-pagenavi.

• Prima linie a regulii setează un spațiu de 5px, astfel încât să nu fie înghesuită lângă marginea gri deschis (definită mai jos). De asemenea, setează o margine consistentă de 10px în dreapta fiecărui element, astfel încât să existe spațiu egal între ele.
• A doua linie setează o dimensiune a fontului de 15px, face culoarea textului albastră și se asigură că linkurile nu au subliniere.
• A treia linie setează o margine gri solidă de 3px pe tot. Codul border-radius face colțurile rotunjite.

A Doua Regulă
.wp-pagenavi a:hover, .wp-pagenavi span.current selectează efectul de hover al linkului, respectiv numărul paginii curente.

• Prima linie setează o culoare de fundal albastru închis.
• A doua linie face textul alb.
• A treia linie oferă o margine puțin mai închisă.

A Treia Regulă
Aceasta selectează (din nou) numărul paginii curente, fără a afecta efectul de hover al linkului (ca a doua regulă). Aceasta face doar ca numărul paginii curente să aibă o greutate a fontului aldine.

Motivul pentru care nu l-am inclus cu efectul de hover al linkului este că are un efect inegal, trecând de la greutatea fontului normal la aldine.

Notă: În funcție de cum este codat CSS-ul dvs., este posibil să fie necesar să utilizați selectoare mai specifice. De exemplu, dacă există stiluri pentru #content a și WP-PageNavi este în interiorul div-ului de conținut, este posibil să fie necesar să rescrieți CSS-ul PageNavi ca #content .wp-pagenavi a și să suprascrieți orice alte stiluri mai puțin specifice.

Concluzie

Știm că acesta a fost un exemplu relativ simplu, ați putea avea reguli CSS mult mai avansate pentru a diferenția și mai mult diferitele linkuri și alte elemente. Sperăm că ați învățat câteva sfaturi CSS pe parcurs.

Integrarea opțională WP-PageNavi este o caracteristică destul de cool pe care dezvoltatorii de teme o pot integra în temele lor. Cu metoda de integrare pe care am schițat-o mai sus, utilizatorii ar putea alege cu ușurință dacă să o folosească sau nu, și ar putea fi o opțiune bună pentru multe bloguri.

S-ar putea să doriți să consultați ghidurile și tutorialele noastre:

• Cele mai bune pluginuri pentru meniuri drop-down WordPress (comparate)
• Cum să creezi un meniu de navigare folosind Bootstrap
• Cum să adăugați navigare personalizată în BuddyPress

Aceste postări vă vor ajuta să găsiți mai multe soluții pe care le căutați.