Come usare l'elemento Repeater su Oxygen

Nella realizzazione di un sito web bisogna tenere conto del peso delle pagine web, in modo da evitare tempi troppo lunghi di caricamento. Lo strumento Repeater ci aiuta ad "alleggerire" il peso della pagina grazie alla creazione di un loop visivo.

Scopriamo bene insieme di cosa si tratta.

Cos'è l'elemento Repeater di Oxygen

L'elemento Repeater ci permette di configurare il design grafico di un elemento che verrà poi ripetuto in modo dinamico un dato numero di volte.

Quando si utilizza questo strumento? Risulta essere molto comodo quando dobbiamo creare una pagina contenente, ad esempio, l'archivio dei nostri articoli. In questo caso, infatti, noi andremo a configurare il design di una singola anteprima utilizzando i dati dinamici, sarà poi lo strumento Repeater a ripetere questo elemento.

Come creare un Repeater

Partiamo dall'inizio. Per creare un Repeater ti basterà andare nella barra laterale di Oxygen e selezionare l'elemento Repeater.

+Add > Helpers > Repeater

Questo strumento creerà un div all'interno della tua pagina web. A questo punto non ti resterà che inserire al suo interno gli elementi di tuo interesse.

Come configurare l'elemento Repeater

Ora che hai creato il tuo div da ripetere, dovrai configurare le impostazioni del Repeater.

Selezionando l'elemento Repeater su Oxygen, nella barre laterale di sinistra ti compariranno le tre principali impostazioni da definire, ovvero la query, il layout e l'impaginazione dei tuoi elementi.

Vediamole nel dettaglio.

La query

Questa funzione determina quali post verranno selezionati del Repeater. Puoi scegliere tra tre modalità:

• Default: la query predefinita viene generata da WordPress in modo automatico sulla base degli URL che visiti;
• Custom: la query personalizzata, invece, ti permette di scegliere il tipo di post che desideri restituire ma non solo! Potrai infatti applicare, se necessario, un filtro in modo da escludere alcuni post in base a categorie, tag o tassonomie specifiche, oppure decidere l'ordine di visualizzazione dei post. Infine potrai specificare il numero di post da mostrare nella tua pagina web.
• Manual: la query manuale, infine, ti permetterà di avere un completo controllo sui post, specificando manualmente tutti i parametri.

Layout

Attraverso questa impostazione potrai personalizzare la disposizione dei tuoi post all'interno del Repeater.

In particolare potrai decidere se disporre i div in modo orizzontale all'interno della pagina web oppure verticalmente. Oltre a questo potrai decidere l'allineamento degli elementi all'interno del tuo div, sia orizzontale che vericale.

Pagination

In questa sezione potrai personalizzare lo stile grafico degli elementi presenti nel Repeater. Ad esempio, potrai decidere dimensione del font, colore, colore dei link, colore dello stato hover dei link e altre caratteristiche.

Come richiamare i dati per il Repeater in modo dinamico

Ipotizziamo per esempio di voler creare un elenco di articoli. All'interno del div quindi potremmo inserire un titolo, un testo per il nome dell'autore, un'immagine per richiamare la foto di anteprima e un pulsante per creare il collegamento all'articolo.

Dopo aver inserito gli elementi di tuo interesse, puoi richiamare dinamicamente i dati da inserire all'interno dei rispettivi campi tramite la funzione "data" di Oxygen.

Per i testi ti basterà fare doppio clic per modificare il testo, e cliccare in alto su "data", poi seleziona il tipo di dato da richiamare (es: post title per richiamare il nome dell'articolo).

Per quanto riguarda invece le immagini e gli URL dei pulsanti, cliccando sull'elemento troverai a sinistra, nel campo URL, il tasto "data", che ti permetterà di richiamare ad esempio l'URL dell'articolo.

Conclusioni

Ora che sai cos'è e come funziona lo strumento Repeater all'interno di Oxygen potrai creare contenuti dinamici in modo facile e veloce. Se hai qualche dubbio commenta questo articolo nel form qui sotto.

Grazie per essere arrivato fino alla fine di questo articolo, a presto 🙂