Guida allo Stile del Plugin WordPress WP-PageNavi

Se non hai familiarità con il plugin WordPress WP-PageNavi, ti permette di sostituire la normale navigazione precedente/successiva con una navigazione a pagine numerate più avanzata.

In questo tutorial, vedremo come:

• Installare WP-PageNavi e integrarlo correttamente nel tuo tema.
• Due metodi per disabilitare e/o sovrascrivere gli stili predefiniti del plugin.
• Una panoramica del markup HTML generato da WP-PageNavi
• Infine, come modificare l'aspetto della navigazione delle pagine tramite CSS

Installa il Plugin

Hai due opzioni quando si tratta di installare il plugin WP-PageNavi.

• Scaricalo da WordPress.org, caricalo nella tua directory /wp-content/plugins/ e attivalo (ovvero, il vecchio metodo).
• A seconda del tuo host, puoi anche installare automaticamente i plugin cercandoli nella pagina "Aggiungi Nuovo" sotto Plugin nel tuo pannello di amministrazione di WordPress. Basta cercare "pagenavi" e dovresti trovarlo.

Ok, questo dovrebbe essere stato abbastanza facile. Ora è il momento di sporcarsi un po' le mani con il codice per la parte di integrazione.

Integrazione nel Tema

Nella nostra integrazione nel tema, non vogliamo mai che vengano visualizzati errori se WP-PageNavi non è attivo. Invece, ci assicureremo che ripieghi sulla vecchia navigazione di tipo precedente/successivo. Per fare ciò, useremo un controllo condizionale function_exists.

Supponiamo che questo sia il tuo normale codice di navigazione precedente/successivo di 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>

Lo cambieremo in quanto segue:

<?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 } ?>

Questo fondamentalmente controlla se WP-PageNavi è attivo e, in tal caso, visualizza il nuovo codice di navigazione della pagina. In caso contrario, ripiega con grazia sulla normale navigazione precedente/successiva.

Nota: A seconda di come è codificato il tuo CSS, potresti voler inserire la parte wp_pagenavi(); all'interno del div "navigation" (o equivalente). Tieni presente che WP-PageNavi genera una nuova classe chiamata "wp-pagenavi" che possiamo usare per stilizzare separatamente.

Sovrascrivi gli Stili del Plugin

Per impostazione predefinita, WP-PageNavi inserisce automaticamente un file CSS chiamato pagenavi-css.css dalla sua directory plugin nell'header del tuo sito. Non vogliamo che questi stili predefiniti interferiscano con i nostri fantastici stili personalizzati, quindi li elimineremo completamente, e ci sono due semplici modi per farlo.

• Aggiungi un file CSS alla directory del tuo tema – Questo è probabilmente il modo più semplice per sovrascrivere gli stili predefiniti di WP-PageNavi. Se hai un file chiamato pagenavi-css.css nella directory del tuo tema, WP-PageNavi userà questo invece di quello predefinito nella directory del plugin.
• Aggiungi uno snippet al tuo file functions.php – Il seguente snippet di codice che abbiamo preso da WP Recipes disabiliterà completamente il comportamento sopra descritto e non includerà alcun foglio di stile dal plugin (né quello predefinito né uno sovrascritto nella tua directory tema).

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

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

Inserisci semplicemente quel codice nel file functions.php del tuo tema e aggiungi gli stili CSS al foglio di stile regolare del tuo tema (di solito style.css).

Nota: Assicurati che il codice sia racchiuso tra parentesi come <?php ... ?> se il tuo file functions è attualmente vuoto.

Markup HTML e selettori CSS di WP-PageNavi

Ecco come appare il markup di WP-PageNavi. Nell'esempio seguente, ci sono quattro pagine, attualmente alla pagina due.

<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>

Possiamo usare i seguenti selettori CSS per indirizzare il markup HTML sopra:

• .wp-pagenavi – Si applica all'intero div, utile per pulizie CSS, padding/margini, dimensioni dei font e stili (grassetto, corsivo, ecc.)
• .wp-pagenavi a – Indirizza tutti i link all'interno della navigazione della pagina, inclusi i numeri di pagina e precedente/successivo.
• .wp-pagenavi a.page – Indirizza specificamente i numeri di pagina
• .wp-pagenavi a.first – Indirizza specificamente il link "primo" (non elencato sopra)
• .wp-pagenavi a.last – Indirizza specificamente il link "ultimo"
• .wp-pagenavi span – Indirizza il numero della pagina corrente insieme alla parte di estensione (quella con tre puntini)
• .wp-pagenavi span.current – Indirizza specificamente il numero della pagina corrente
• .wp-pagenavi span.extend – Indirizza specificamente l'estensione (la cosa con tre puntini)
• .wp-pagenavi span.pages – Indirizza specificamente la visualizzazione del numero di pagina (es. Pagina 1 di 4)

Nota: I link precedente e successivo per impostazione predefinita non hanno alcuna classe CSS. Se desideri differenziarli completamente dai numeri di pagina e dai link primo/ultimo, dovrai reimpostare eventuali stili aggiunti al selettore .wp-pagenavi a. Se ciò non ha avuto senso, dai un'occhiata al seguente esempio (molto semplificato).

Ad esempio: Supponiamo che tu voglia che i link precedente e successivo siano in grassetto, ma ogni altro link abbia un peso normale. Dovresti fare quanto segue:

.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 */

Ho combinato i link dei numeri di pagina, il link primo e il link ultimo in un'unica regola a scopo di esempio. Naturalmente, puoi separarli e aggiungere stili più specifici a ciascuno.

Sarebbe molto più facile se ci fosse una classe aggiunta ai link precedente/successivo per impostazione predefinita, ma non c'è. Non è un grosso problema poiché puoi semplicemente reimpostarli comunque.

Puoi usare .wp-pagenavi a.previouspostslink e .wp-pagenavi a.nextpostslink per selezionare rispettivamente i link precedente e successivo.

Quindi, praticamente tutto ciò che precede l'elenco puntato dei selettori non è più rilevante, ma lo manterremo solo perché potrebbe essere una lezione utile sulla sovrascrittura del CSS in altre situazioni. L'esempio CSS seguente si applicherà comunque poiché non abbiamo utilizzato quei selettori.

Un esempio CSS

Ecco un esempio di stile PageNavi che abbiamo creato:

Ecco il codice che abbiamo usato per ottenere questo aspetto, il CSS multi-riga singola è opzionale:

.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; }

Ed ecco cosa significa tutto:

Prima Regola
Il .wp-pagenavi a, .wp-pagenavi span seleziona tutti gli elementi anchor e span (praticamente tutto) all'interno del div .wp-pagenavi.

• La prima riga della regola imposta un padding di 5px in modo che non sia schiacciata contro il bordo grigio chiaro (definito di seguito). Imposta anche un margine costante di 10px a destra di ogni elemento in modo che ci sia uno spazio uguale tra ciascuno.
• La seconda riga imposta una dimensione del carattere di 15px, rende il colore del testo blu e si assicura che i link non abbiano sottolineature.
• La terza riga imposta un bordo grigio solido di 3px su tutto. Il codice border-radius rende gli angoli arrotondati.

Seconda Regola
Il .wp-pagenavi a:hover, .wp-pagenavi span.current seleziona rispettivamente l'effetto hover del link e il numero della pagina corrente.

• La prima riga imposta un colore di sfondo blu scuro.
• La seconda riga rende il testo bianco.
• La terza riga fornisce un bordo leggermente più scuro.

Terza Regola
Questo seleziona (di nuovo) il numero della pagina corrente senza influenzare anche l'effetto hover del link (come la seconda regola). Questo rende solo il numero della pagina corrente in grassetto.

Il motivo per cui non l'abbiamo incluso con l'effetto hover del link è che ha un effetto non uniforme passando da un font normale a uno in grassetto.

Nota: A seconda di come è codificato il tuo CSS, potresti dover utilizzare selettori più specifici. Ad esempio, se ci sono stili per #content a e il tuo WP-PageNavi si trova all'interno della div di contenuto, potresti dover riscrivere il tuo CSS di PageNavi come #content .wp-pagenavi a e sovrascrivere altri stili meno specifici.

Conclusione

Sappiamo che questo è stato un esempio relativamente semplice, potresti avere regole CSS molto più avanzate per differenziare ulteriormente i vari link e altri elementi. Speriamo che tu abbia imparato qualche consiglio CSS lungo la strada.

L'integrazione opzionale di WP-PageNavi è una funzionalità piuttosto interessante che gli sviluppatori di temi potrebbero integrare nei loro temi. Con il metodo di integrazione che abbiamo delineato sopra, gli utenti potrebbero facilmente scegliere se usarlo o meno, e potrebbe essere una bella opzione per molti blog.

Potresti voler consultare le nostre guide e tutorial:

• I migliori plugin per menu a discesa di WordPress (a confronto)
• Come creare un menu di navigazione utilizzando Bootstrap
• Come aggiungere navigazione personalizzata in BuddyPress

Questi post ti aiuteranno a trovare altre soluzioni che potresti cercare.