MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
Creare una paginazione con WordPress e Bootstrap
Non tutti sanno che sviluppando temi per WordPress è possibile inserire una paginazione degli articoli/risultati di ricerca/quello che volete senza bisogno di installare plugin e con poche righe di codice!
In più possiamo utilizzare un "componente" CSS della mitica libreria Bootstrap per avere una buona formattazione della paginazione che possiamo poi eventualmente customizzare in base alle nostre esigenze.
[avviso]E' richiesta una conoscenza di base della struttura di un tema di WordPress per poter seguire questo tutorial![/avviso]
1. Scaricare Bootstrap
Per prima cosa scarichiamo Bootstrap, ma attenzione, specie se NON la state usando nel vostro progetto per altre cose (griglia, pulsanti, form) vi conviene scaricare solamente la parte relativa alla paginazione, così da avere un file css leggero, dalla schermata customize deselezionate tutte le voci tranne quella del componente "pagination".
2. Inserire il CSS nella maniera corretta per WordPress
In un tema di WordPress abbiamo due modi per inserire un file CSS: modificando un template del tema (in genere header.php) o iniettandolo dinamicamente da functions.php , ora opteremo per la seconda perché ci darà una maggiore flessibilità nella gestione dei vari file CSS. Quindi all'interno di functions.php aggiungiamo prima un'azione , stando alla documentazione ufficiale di WordPress la stessa azione per l'inserimento degli script va bene anche per i CSS:<?php
function caricaStiliPaginazione(){
}
add_action('wp_enqueue_scripts','caricaStiliPaginazione');
?>
ora all'interno della funzione caricaStiliPaginazione() useremo i comandi "wp_register_style" e "wp_enqueue_style" per definire e poi iniettare il nostro foglio di stile con il componente della paginazione.
wp_register_style(
"bs_pagination",
get_bloginfo("template_url") . "/css/bootstrap.min.css",
false,
"3.0.0",
"screen"
);
wp_enqueue_style("bs_pagination");
La funzione "wp_register_style" vuole sapere 5 cose:
- nome che diamo allo stile, deciso da noi e che verrà riutilizzato dopo per inserirlo nel tema
- posizione (url) del file nella cartella del tema o plugin
- eventuali dipendenze, in questo caso nessuna
- versione, ho messo quella in uso di Bootstrap
- media, qui ho settato solo per gli schermi
3. Il codice della paginazione
Il codice per creare una paginazione di post è presente proprio sulla documentazione ufficiale di WordPress , utilizzeremo quello stesso codice, inserendolo però all'interno di un div che utilizzi la classe di Bootstrap per creare il componente della paginazione:<div class="pagination">
<?php
global $wp_query;
$big = 999999999;
echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages
) );
?>
</div>
Questo codice andrà inserito all'interno del template dove volete vedere la paginazione (index.php, search.php, category.php, ecc..) e a questo punto è già tutto funzionante, vederete il componente di paginazione di Bootstrap ma i contenuti sono generati da WordPress, in base alle impostazioni di lettura che avete settato dell'admin.