Paginazione di WordPress un primer

In questo articolo / tutorial vedremo le basi della paginazione di WordPress, l'impostazione di impaginazione predefinita e come può essere migliorata.


Lo schema di impaginazione predefinito

Userò il tema predefinito WordPress Twenty Eleven come riferimento. Anche se non lo stai utilizzando, lo troverai nella directory dei temi.

Messaggi per pagina

Non dimenticare che quando si tratta di impaginazione, WordPress deve sapere quanti oggetti elencare su ogni pagina. Questo valore è impostato nella pagina Admin -> Impostazioni -> Impostazioni di lettura.

Il valore "Le pagine del blog mostrano al massimo" sarà utilizzato da WordPress a meno che non lo si sovrascriva, ad esempio quando si utilizza una query personalizzata.

Il codice di paging predefinito

Un tipico esempio di mostrare un elenco di post è quando si visualizzano tutti i post in una categoria. La visualizzazione dei post delle categorie è gestita dal file template category.php. Per il tema Twenty Eleven, la pagina delle categorie passa la visualizzazione della paginazione ad una funzione denominata twentyeleven_content_nav, che si trova in functions.php.

 function twentyeleven_content_nav ($ nav_id) global $ wp_query; if ($ wp_query-> max_num_pages> 1):?>   

Il codice sopra potrebbe anche essere stato incluso direttamente in category.php ma i designer di Twenty Eleven hanno deciso di renderlo una funzione in modo che potesse essere chiamato da molti file di modello. La maggior parte del codice è per scopi di layout e internazionalizzazione, ma ecco cosa fa:

  • utilizzando il valore della variabile di query globale $ wp_query-> max_num_pages, controlliamo se abbiamo più di una pagina; questo evita di mostrare l'intero blocco di paging se c'è solo una pagina di post
  • la funzione WordPress next_posts_link visualizza un collegamento alla pagina successiva di post e accetta un argomento facoltativo per il testo del collegamento personalizzato
  • allo stesso modo, la funzione WordPress previous_posts_link visualizza un collegamento alla pagina precedente di post

E questo è come apparirà con un'impostazione di due post per pagina.

È piuttosto semplice ma funzionale. I problemi con questo display sono che non c'è modo di sapere su quale pagina si sta lavorando o quante pagine ci sono in totale.

Una cosa da ricordare sulle inserzioni di post predefinite di WordPress è che vengono eseguite in ordine inverso:

Poiché le interrogazioni dei post sono ordinariamente ordinate in ordine cronologico inverso, next_posts_link () di solito punta alle voci più vecchie (verso la fine del set) e prev_posts_link () di solito punta alle voci più recenti (verso l'inizio del set).

Questo comportamento può essere modificato se si sta creando una query personalizzata. Nota nell'esempio precedente, sono stati utilizzati due blocchi di paging: uno prima del ciclo post avviato e uno dopo. È sempre un bel tocco avere l'impaginazione sia in alto che in basso in modo che l'utente non debba scorrere troppo.

Esempi:

Per visualizzare "Vai alla pagina successiva ..." mentre colleghi il testo:

 next_posts_link ('Vai alla pagina successiva ...');

Per visualizzare un'immagine al posto del testo:

 $ previous_posts_image = ''; previous_posts_link ($ previous_posts_image);

Alternativa

C'è un'alternativa all'utilizzo delle funzioni separate next_posts_link e previous_posts_link, e questa è la funzione posts_nav_link. Fondamentalmente, questa funzione emette sia il link precedente che quello successivo in un colpo solo, con argomenti di link e separatore di link opzionali.

L'output predefinito:

 posts_nav_link ();

E con testo link personalizzato e separatore:

 posts_nav_link (':::', '<< Newer Posts', 'Older Posts >> ');

Suggerisco di utilizzare le funzioni separate next_posts_link e previous_posts_link in quanto offrono maggiore controllo sul posizionamento dei collegamenti e rendono il codice più comprensibile.


Paging singoli post

Quando si visualizzano singoli post, è bello visualizzare un collegamento ai post precedenti e successivi nella sequenza. Il file template single.php gestisce quello con il seguente codice:

 

Questo ti darà questo:

Sono le funzioni next_post_link e previous_post_link che producono i collegamenti di paging in alto a destra. Queste funzioni accettano un paio di parametri che ci permettono di personalizzare il loro output abbastanza bene. I parametri sono:

next_post_link (formato, link, in_same_cat, excluded_categories);

I parametri di formato e collegamento funzionano insieme. Il formato è il modo in cui si desidera visualizzare il collegamento: il link% nel formato viene utilizzato come segnaposto per il contenuto del parametro di collegamento, che è il testo effettivo che si desidera utilizzare per il collegamento. Così questo:

 previous_post_link ('% link', '<< Next Newest Post' ); next_post_link( '%link', 'Next Oldest Post >> ');

Ci darebbe questo:

Se volessimo visualizzare il titolo attuale del post successivo o precedente, utilizzeremo il valore speciale% title nel parametro link. Così questo:

 previous_post_link ('% link', '<< Previous Post: %title' ); next_post_link( '%link', 'Next Post: %title >> ');

Ci darebbe questo:

I parametri rimanenti ti consentono di assicurarti che il prossimo post collegato sia nella stessa categoria e di escludere determinate categorie. Consulta la documentazione come sopra collegata.

È possibile visualizzare un'immagine per il collegamento come:

 $ previous_post_link_image = ''; previous_post_link ('% link', $ previous_post_link_image);

Una soluzione migliore

Facile come i metodi precedenti, sono anche limitati. Fortunatamente, WordPress ci fornisce la funzione paginate_links. Questo ci permette di creare un vero insieme di link di paginazione, come questo:

Di seguito è riportato il codice che restituisce l'impaginazione di cui sopra. Diamo un'occhiata a quello che fa.

 globale $ wp_query; $ total_pages = $ wp_query-> max_num_pages; if ($ total_pages> 1) $ current_page = max (1, get_query_var ('paged')); echo paginate_links (array ('base' => get_pagenum_link (1). '% _%', 'format' => '/ page /% #%', 'current' => $ current_page, 'total' => $ total_pages ,)); 
  • globalizzare l'oggetto wp_query in modo che possiamo recuperare il valore max_num_pages: questo è il numero totale di pagine restituite dalla query
  • trova la pagina corrente recuperando la variabile 'paginata' con get_query_var: usiamo la funzione max per fare in modo che la pagina corrente diventi predefinita 1
  • la funzione paginate_links accetta una serie di parametri: i quattro più importanti sono mostrati
  • recuperare l'URL di base per la pagina con la funzione get_pagenum_link e aggiungere il modello% _% ad esso che sarà sostituito dal parametro format, next
  • nel nostro caso, specifica un modello di formato conforme al modo in cui i permalink graziosi (impostati con% postname% in Admin -> Impostazioni -> Permalink) appaiono: il% _% nel parametro base verrà sostituito da questo
  • imposta le pagine attuali e totali come recuperate in precedenza

L'URL dei risultati pagati utilizzando i permalink piuttosto sarà simile a questo:

http://2011.rosselliot.co.nz/category/honda/page/2/

La chiamata get_pagenum_link (1) recupererà questa parte dell'URL:

http://2011.rosselliot.co.nz/category/honda/

Quindi forniamo un parametro di formato per il resto dell'URL che è:

pagina 2

La parte% #% del formato contiene il nostro numero di pagina corrente

Sulla base di questo insieme di parametri, paginate_links genererà un insieme di collegamenti di paginazione. Puoi inserire il codice direttamente in un file modello che gestisce il paging (come category.php) o salvarlo come una funzione nel tuo functions.php e quindi chiamarlo da qualsiasi modello che ti piace.

paginate_links ha altri parametri che ti permettono di personalizzare l'output, come appaiono i numeri e cosa dicono le etichette. Consulta la documentazione. Con un po 'di stile è facile trovare un display di impaginazione impressionante. Con questo codice modificato e uno stile aggiunto:

 globale $ wp_query; $ total_pages = $ wp_query-> max_num_pages; if ($ total_pages> 1) $ current_page = max (1, get_query_var ('paged')); eco '
'; echo paginate_links (array ('base' => get_pagenum_link (1). '% _%', 'format' => '/ page /% #%', 'current' => $ current_page, 'total' => $ total_pages , 'prev_text' => 'Prev', 'next_text' => 'Successivo')); eco '
';
 .page_nav .page-numbers padding: 4px 8px; margine: 0px 4px; bordo: 1px grigio fisso; color: # FFB134;  .page_nav .current border: 1px solid # FFB134; background-color: #FBEFDB;  .page_nav .prev, .page_nav .next border: none; colore blu; 

È stato facile produrre questo:

Spero che ti sia piaciuto questo innesco sulla paginazione. Avete ulteriori suggerimenti sulla paginazione con WordPress? Fateci sapere nei commenti qui sotto.