WP-PageNavi responsive per i dispositivi mobili

WP-PageNavi del grande Lester Chan è uno dei plugin WordPress più conosciuti ed utilizzati, ha l’unico scopo di migliorare la navigazione all’interno del blog tramite una paging navigation nonchè un sistema di navigazione che suddivide in parti uguali i contenuti. Tanto scomodo da dire, quanto facile da capire e da riconoscere guardando la seguente immagine:

WP-PageNavi navigation
Paging navigation con il plugin WP-PageNavi di WordPress

Conoscendo WordPress sappiamo che di base, sia nella home page che nelle categorie ed in generale negli archivi, mostra gli ultimi 10 articoli per pagina, numero che possiamo modificare dalle impostazioni del pannello amministrativo.

WP-PageNavi fa decidere al tuo visitatore in quale pagina dell’archivio vuole andare, se desidera andare nella seconda pagina, saltare direttamente all’ottava pagina od andare direttamente all’ultima pagina.

Quando nel tuo blog sono stati pubblicati centinaia di articoli, la famosa barra della paginazione, come potrai intuire, può diventare chilometrica.

Paginazione WordPress
Esempio della navigazione delle pagine con centinaia di articoli

Quando hai una situazione simile all’immagine qui sopra, puoi scegliere di raggruppare le pagine in modo diverso. Dal pannello amministrativo > Impostazioni > PageNavi puoi modificare le Opzioni per la navigazione delle pagine e precisamente scegliere il “Numero di pagine da mostrare”, “Quanti numeri di pagina” e “Numero di pagine da mostrare”, “Quanti numeri di pagina raggruppati mostrare” e “Mostra i numeri raggruppati di pagina in multipli di”.

Opzioni WP-PageNavi

Puoi leggere tutte le informazioni dettagliate sul plugin WP-PageNavi ed effettuare il download qui.

CSS per rendere WP-PageNavi responsive

Sempre con lo stesso esempio di prima ti voglio far vedere cosa succede alla paginazione del plugin WP-PageNavi quando lo schermo si riduce (esempio di uno smartphone):

Navigation Wp-PageNavi no responsive

Un orrore! Quando la navigazione delle pagine è molto lunga (che va bene in un monitor da desktop) si rischia, come nell’esempio qui sopra, che i numerini delle pagine si sovrappongano e che addirittura spariscano alcune parti.

Per far sì che la paginazione sia responsive e che quindi si adegui in base alla piattaforma da cui viene visualizzata (desktop, smartphone e tablet di varie dimensioni) non dobbiamo cambiare plugin e nemmeno creare file o fare chissà che, dobbiamo soltanto inserire poche righe di codice nel file CSS (foglio di stile, generalmente style.css che puoi modificare anche dal pannello di WordPress: Aspetto > Editor > style.css).

Dunque per rendere il plugin WP-PageNavi responsive dobbiamo fare un copia-incolla di questo piccolo codice:

@media (max-width: 767px ) {
    .wp-pagenavi span.pages,
    .wp-pagenavi span.extend,
    .wp-pagenavi a.page,
    .wp-pagenavi a.first,
    .wp-pagenavi a.last {
        display: none!important;
    }
}

Così facendo abbiamo detto al browser in uso che quando il dispositivo utilizzato ha uno schermo avente una massima larghezza di 767 px (max-width: 767px) non deve mostrare alcune parti del paging navigation (display: none!important).

@media sta ad indicare Media Query, nonchè una tecnica di CSS introdotta nel CSS3. Le Media Queries servono proprio a creare delle regole specifiche ed a farle rispettare solamente quando si verificano delle condizioni. In questo caso ho “ordinato” di applicare alcune regole soltanto quando lo schermo fosses largo al massimo 767px, per cui queste regole saranno applicate in uno smartphone (con modalità landscape o portrait).

Impostando una massima larghezza di 767px ho pensato a rendere responsive solamente quei dispositivi con schermi piccoli ed in particolar modo mi sono concentrata sugli smartphone.
Nel mio caso non ho voluto impostare nessuna regola per i tablet, ma se lo avessi voluto, avrei potuto far sì che le stesse regole fossero applicabili anche agli schermi più grandi come quelli dei tablet (anche in questo caso sia in modalità landscape che portrait) impostando max-width: 991px oppure max-width: 1024px
In verità ci sono tablet con risoluzioni anche più grandi, ma in quel caso vedranno bene la paginazione che di default viene visualizzata in un desktop.

Risultato della paging navigation “responsive”

responsive wp-pagenavi
WP-PageNavi responsive

Il discorso è molto più ampio, il succo è che con max-width: 767px abbiamo reso il nostro plugin e quindi la nostra paginazione responsive, quindi adattabile a tutti gli schermi. In particolare ho fatto in modo che venissero mostrate le navigazioni “indietro di una pagina”, “pagina attuale” e “avanti di una pagina”, dunque il tuo utente può andare avanti ed indietro e vedere sempre il numero attuale della pagina.

Commenti

  • Mario Kempes

    Mi aspettavo un CSS per renderlo utilizabile anche su mobile, questo nasconde il problema.
    Si è più bello ma non è più funzionale. Torna ad essere la navigazione inutile di i theme default.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *