Tempo di lettura: 7 minuti

Come creare una sezione Portfolio per il proprio tema custom su WordPress

Una delle cose più comode, potenti e usuali nella creazione di un tema personalizzato per il proprio sito WordPress è quella di implementare delle sezioni con una lista di contenuti omogenei: dei custom post type.

Possano essi essere prodotti oppure delle camere o anche i propri lavori per la creazione di un portfolio personalizzato nei minimi dettagli.

Seppure questa tipologia di archivio che andremo a creare durante questo articolo è abbastanza comune e semplice, tale procedura è generale e valida per qualsiasi tipo di contesto più disparato nel quale è necessario gestire una tipologia di contenuto diversa da pagine e articoli.

È quindi consigliabile, dove è necessario fare un lavoro personalizzato e fortemente controllato, non usare dei plugin che vi offrono (a detta loro) la soluzione bella e pronta per quella particolare esigenza. Ci sono comunque altri casi

La progettazione di una sezione Portfolio

Prima di passare al codice (e ai trucchi) facciamo un minimo di progettazione e capiamo cosa vogliamo e cosa dobbiamo andare a fare:

  • aggiungere una sezione Portfolio al tema
  • quindi poter inserire un nuovo lavoro dal backend del sito
  • aggiungere le informazioni del singolo lavoro: anno, immagine, titolo, descrizione, link e cliente
  • create un template con la lista dei lavori
  • creare un template per visualizzare il singolo lavoro
  • aggiungere la voce al menu del sito
  • tenere tutto integrato all’interno del tema sviluppato

E quindi come va sviluppato il tutto:

  • va creato un Custom Post Type nominato Portfolio
  • tale tipologia di post deve avere un archivio…
  • bisogna quindi aggiungere dei Custom Post Field alla tipologia creata per aggiungere le info supplementari
  • bisogna creare il file PHP nel tema con il template dell’archivio
  • e anche quello della singola pagina per visualizzare il singolo post

Non sembra difficile… no?!

Creare il Custom Post Type di tipo Portfolio

Ovviamente la prima cosa da fare è creare il “contenitore” per i nuovi articoli del sito.

Non usare i plugin

Il primo consiglio che vi do nel fare questa operazione è quello di non usare tutta una serie di plugin che offrono soluzioni preconfezionate per la specifica esigenza. Tantissime volte sono più soluzioni estetiche che realmente funzionali e non permettono di avere quel giusto grado di personalizzazione necessario per essere incluse in un tema custom.

Inoltre, per i programmatori duri e puri come me, risultano essere spesso delle accozzaglie di opzioni inutili per fare cose che era molto più semplice scriversi da soli.

Certo, ci sono delle eccezioni: la creazione di un ecommerce o di un sistema di booking possono essere assai più complesse da gestire e allora ci sono soluzioni terze sicuramente più solide che, col dovuto studio, possono essere assai personalizzate.

Per creare un Custom Post è necessario aggiungere un po’ di codice al file functions.php del vostro tema WordPress: attraverso la funzione register_post_type è possibile andare a definire tutte le caratteristiche del nuovo tipo di contenuto ed averlo immediatamente a disposizione nella Dashboard del sito.

Effettivamente però il codice da generare è veramente banale – e ripetitivo se vogliamo – quindi vi potrei consigliare di usare un tool come Generate WP che, tramite una semplice interfaccia, permette di avere tutto il codice che serve.

Ma, detto ciò…

Usa questi plugin

Ok, ok… sì, sì… Non sono matto! Avevo detto di non usare plugin e ora indico dei plugin.

Ma non sono plugin che offrono delle soluzioni preconfezionate ma degli strumenti che aiutano in uno sviluppo del codice più rapido ed efficiente e che permettono di gestire una serie di opzioni tramite pochi click. Il tutto poi potrebbe essere tranquillamente riportato in forma di codice nel tema.

In particolare vi consiglio l’uso di Custom Post Type UI che, anche lui, tramite una semplice interfaccia genera il nuovo tipo di contenuto direttamente nella vostra installazione di WordPress. All’occorrenza è quindi possibile esportare il codice ed incollarlo nel file functions.php ma il vantaggio sta nel poter realizzare il tutto e modificarlo e sistemarlo e fixarlo senza dover ogni volta mettere mano al codice.

Direi che non c’è molto altro da dire. Installato il plugin? creato il CPT?
Ok: fatto?

L’archivio dei lavori

Una cosa da decidere in questo momento è se usare una pagina di archivio per elencare i lavori o se creare un template a mano.

Io consiglio fortemente di creare una pagina archivio perché risulta più lineare rispetto alla gestione dei permalink e della struttura del sito, ma ci possono essere delle controindicazioni dovute alla gestione della paginazione o anche della personalizzazione del template stesso.

Quindi, se volete un archivio impostate il parametro has archive a true; se altrimenti volete creare un template di pagina apposito potete impostarlo a false.

Non vi so dire quale sia la scelta migliore ma vi invito a provare e testare le casistiche. Nel caso del portfolio magari true è la scelta più adeguata ma in tanti altri casi io ho preferito lavorare la pagina manualmente. Vi rimando comunque alla documentazione ufficiale.

Informazioni supplementari: i Custom Fields

Ovviamente, oltre alle classiche informazioni generali di ogni post (titolo, immagine, testo, …) sarà necessario inserire altre informazioni: anno, cliente, link, ecc.

Anche qui può valere lo stesso discorso fatto precedentemente: c’è una modalità “pura” di farlo, e quindi passare per il Codex di WordPress, che risulta meno user friendly e un modo più pratico e veloce.

Andiamo direttamente al dunque: il migliore modo di farlo secondo me è usare Advanced Custom Fields e vi consiglio fortemente di acquistare la versione Pro ma, per iniziare, la versione gratuita è sicuramente più che sufficiente e potente.

Una volta installato il plugin, tramite una semplice interfaccia dal pannello WordPress sarà possibile creare i campi aggiuntivi per il tipo di contenuto che ci interessa. Ovviamente anche oltre il nostro Portfolio.

Vi rimando quindi alla documentazione ufficiale per capire come usarli e come poi stamparli nelle pagine del vostro tema.

La pagina di archivio

La pagina di archivio di un CPT è il file del tema che, per la gerarchia dei temi di WordPress, il sistema andrà a pescare per impaginare le informazioni che ci si aspetta di avere a schermo.

Se creiamo un post type nominato portfolio allora la sua pagina di archivio sarà il file archive-portfolio.php in primis (e poi tutti i file della gerarchia a seguire se questo non viene trovato).

Il loop di WordPress automaticamente offrirà tutti i post del tipo portfolio che ci si aspetta di vedere in quella pagina. È quindi attraverso il loop standard che li mettiamo a schermo.

La pagina del singolo lavoro

Ci siamo! Andiamo a creare la pagina del singolo lavoro. Questa pagina verrà implementata tramite il file single-portfolio.php del nostro tema custom.

E una volta imbastito il layout possiamo inserire, tramite il loop di WordPress, tutte le classiche informazioni del lavoro ma anche i dati aggiuntivi creati e inseriti tramite i Custom Fields e nello stesso modo può essere fatto nell’archivio.

Allora? come è uscito il vostro portfolio? Voglio vederlo anche io: lasciami il link. O se hai qualche dubbio o informazione lascia un commento.

Credits: Foto di Teemu Paananen su Unsplash