WordPress: un layout a griglia per i post

Cambiamo l'impostazione della nostra home page WordPress utilizzando un layout a griglia e senza la necessità di conoscere linguaggi di programmazione

 

La classica impostazione del CMS prevede come home page una pagina personalizzata nella quale gli ultimi post sono mostrati in ordine cronologico e si estendono verticalmente nella pagina. Nel caso in cui si voglia tuttavia mostrare un elevato numero di post un’impostazione orizzontale ed a griglia (layout grid) risulta preferibile.

Vediamo insieme come implementarla in WordPress senza ricorrere a complessi linguaggi di programmazione – che andrebbero normalmente impiegati per tale operazione (php, html, css etc.).

Installazione e setup plugin

Per prima cosa cerchiamo ed installiamo il plugin Post Grid da bacheca (Plugin > Aggiungi nuovo). Dopo l’attivazione noteremo la comparsa della voce Post Grid dal menu a sinistra, selezioniamo New Post Grid per avere arrivarea alla schermata qui di seguito:

WordPress post grid

 

La prima “tab” da controllare è “Query Post”. Qui possiamo definire la tipologia ed il numero di post che saranno mostrati nella griglia in home page. Di defaut il plugin mostrerà unicamente gli ultimi 10 “Articoli pubblicati” ma possiamo variare i settaggi in base alle nostre esigenze.

WordPress post grid

Da “Layout” possiamo definire nel dettaglio lo stile da utilizzare per la nostra griglia e gli elementi visualizzati al suo interno. Le skin messe a disposizione da post grid sono cinque, ognuna con le proprie peculiarità (ad esempio effetti dissolvenza). Se volete andare sul sicuro basta lasciare selezionata la skin “flat”, l’opzione classica senza animazioni speciali o quant’altro. Da “Layout settings” è possibile aggiustare le dimensioni della griglia nel caso in cui non si adatti perfettamente alla vostra pagina.

WordPress post grid

L’ultima sezione da visitare è “Navigations” nella quale potrete agire direttamente sulle linguette che segnalano il numero di pagina visualizzata e le scritte per spostarsi da una all’altra (di default “Previous” e “Next”). Volendo potete lasciare i valori predefiniti e tradurre unicamente le parole inglesi in italiano. Una volta ultimate le modifiche ricordatevi di salvarle cliccando su “Aggiorna” in alto a destra. Per testare la griglia non resta che incollare lo shortcode (lo trovate nell’omonima sezione) in una pagina o articolo WordPress e visualizzarne l’anteprima.

WordPress post grid

In questa pagina test sono presenti 2 articoli con la stessa immagine di anteprima. Nell’articolo di destra, una volta che il mouse viene posizionato su di esso, l’immagine lascia spazio al titolo ed alle prime righe del contenuto