Questa sarà una pratica e veloce guida per chi vuole cimentarsi per la prima volta con i “Custom Filed” e i “Custom Post” di WordPress.
Lo scopo della guida è quello di realizzare una sezione dedicata alle schede libro  con campi personalizzati.

Cosa sono i Custom post e i custom field

guida-scheda-libroPer chi non ha idea di cosa siano è bene precisare che sono come due strumenti molto importanti per personalizzare i propri post. I custom post, come da nome, sono Post personalizzati: è come avere una seconda sezione Articoli  e darle un altro nome come ad esempio schede libro.
Il vantaggio di usare una sezione distinta per i nostri speciali post (che da ora in poi si chiameranno schede libro; ma potremo benissimo definirle sche de film, annunci, ecc), è la possibilità di personalizzare al meglio tutte le funzioni che girano attorno a loro e che non potremmo modificare senza sacrificare la sezione articoli; che in questo caso ci servirà ancora!

Mentre i custom field sono i “campi personalizzati”: invece di avere un box dove scrivere il testo hai tanti campi pre-formati dove scrivere le varie definizioni. Se pensate a una scheda libro è utile avere per ogni scheda un campo “titolo”, “autore,” “editore” eccc; immaginate di dover fare la grafica della scheda libro per ogni libro che inserite e sistemarla dal box grafico (puff da pazzi!). Ecco perchè i custom filed devono essere usati nel momento in cui si creano sezioni  con contenuti che contengono sempre le stesse informazioni simili.

 

Primo passo: creiamo il custom post  sul sito

Ci sono due vie per creare e usare i custom post su wordpress: tramite codice nel tema grafico, tramite plugin.
Se avete intenzione di programmare temi grafici o di usare lo stesso tema per tutta la vita, allora sarebbe bene usare il codice da incorporare; se invece non programmate voi stessi il tema grafico e avete troppa paura di sbagliare, allora potreste usare un plugin che compila il codice per conto vostro. Qualunque strada scegliete, ricordate che il vostro custom post avrà uno  nome identificativo che lo rappresenterà in tutto il sito e anche nel DB.  Quindi, nel caso voi abbiate usato il plugin, e poi lo disattivate; basta che inseriate lo stesso identificativo che usavate nel plugin e lo applicate nel codice del tema e vi apparirà di nuovo la sezione e tutti i post salvati all’interno (questa è la teoria…. la pratica potrebbe essere più incasinata).

A) La via del codice

guida-custom-post-generatoreChi ha scelto questa via è pronto per la sua esperienza di programmatore e si cimenterà sul magico mondo copia, incolla, e cerca di capire!

 

Prima di tutto dovete aver accesso al vostro tema grafico attivo (ricordate che se cambiate tema dovete spostare il codice da un tema all’altro.
Per raggiungere le cartelle del tema dovete andare nel FTP del vostro sito wp tramite l’apposito programma, e nelle cartelle “ftp.vostrosito.tk/wp-content/themes/nome-tema” troverete tutti i file necessari per creare un tema e usarlo.

Per aprire i file potete usare diversi programmi (lettore txt, Notepad++, dreamweaver (adobe a pag.), e se non siete esperti provate a usare Aptana Studio che vi mette anche i colori per comprendere meglio).
Quindi, troverete sempre il file “functions.php” e potrete copiare il codice che realizzerete proprio qui dentro (se volete creare più custom field vi consiglio di creare un altro file es function-custom-post.php e richimarlo nel file functions.php (così il tema rimane più ordinato nel codice).

Trovati i file che dovrete modificare passerete alla creazione del codice tramite programmini molto utili per un programmatore: Generatewp.com -> post-type. Questo sito ha anche altri generatori che potrete usare in altre occasioni.

Il primo codice che trovate aprendo la pagina è un codice standard di un custom post, solo inserendo i dati nei vostri campi, allora lo personalizzerete al meglio.  Alcuni campi sicuramente non li capirete se siete alle prime armi, per questo usate i  valori predefiniti e  starete tranquilli.

Per farla in breve vi spiegherò i campi essenziali:

  • In General impostate solo “Function Name ” che è solo il nome funzione (non possono stare funzioni con stessi nomi quindi dovete personalizzare).
  • In Post Type c’è importante “Post Type Key” che è l’id del custom filed, il nome che lo identifica.
    Il resto sono nomi scritti e se visualizzare le categorie e i tag.
  • Labels è tutto quello che appare come nome nel menu del admin wordpress e lo stesso dentro le schede, costituite post con scheda libro e avete risolto.
  • Le Option sono importanti: per i non esperti consiglio di spuntare tutti i campi “support”, immagino che capiate da soli cosa rappresentano questi campi che devono apparire assolutamente (almeno i principali);
    Lasciate Search no perchè volete che si possa cercare dentro e Exsport e Archive son dettagli che rimarranno yes.
  • In visibility lasciate tutto uguale
  • Query lasciate di nuovo tutto uguale
  • Permalinks non toccate nulla
  • Capabilities non toccate nulla, se non dovete impostare un determinato gruppo di utenti che abbiano accesso alla scheda (in quel caso lo vedremo in un altra puntata).

 

Ecco impostato la nostra sezione! Aggiorniamo il codice e famo copia incolla nel file FUNCTIONS.PHP

Qui un esempio pratico:

 

Se caricate il file functions.php modificato online, dovrebbe apparirvi la nuova sezione!
Se manca, c’è qualcosa che non va! ricontrollate il testo.

 

B) La via del plugin

Per quelli di poca fede, potete usare un plugin che genera per voi il codice sopra riportato e  lo incorporea. Anche se cambiate tema, non perderete il vostro custom post.
C’è ne sono di diversi tipi, ma consiglio di usare solo quelli che non hanno integrati i custom field (perché così usiamo per quelli uno dei migliori plugin in circolazione.).

Sinceramente non ne ho provati, ma questo sembra andar bene (infatti ci sono tutti i campi che trovereste nel generatore qui sopra riportato: https://wordpress.org/plugins/custom-post-type-ui
Quindi semplicemente installate e compilate i campi.

 

Secondo Passo: creiamo i nostri custom field

Adesso passiamo a una fase divertente: installate il plugin Advanced Custom Fields.
Questo plugin possiede una schermata dove creare gruppi di “custom field”; nel  nostro caso, visto che abbiamo solo la scheda libro, possiamo creare un solo gruppo di custom field.  Se volessimo ad esempio mettere sotto ogni scheda libro un box informativo sull’autore, potremmo creare un secondo gruppo con i campi specifici per questo box, ma per ora noi stiamo sul semplice.

Bene! Creando un nuovo gruppo  avrete un primo Box per i “Campi” e un secondo box per le impostazioni.

I campi sono di diversa natura e potete scegliere come e cosa metterci a vostro piacimento. La mia unica raccomandazione è che il “Nome del Campo” sia una scritta ordinata e ben definita perché la dovrete usare nel codice del tema grafico e sarebbe il caso di essere ordinati!
Adesso prendetevi una pausa per provare tutti i tipi di campi disponibili. Create una scheda di prova e pacioccateli, quando salverete appariranno in automatico nei post articoli.

guida-custom-post-locazionepost

Ma noi vogliamo che appaiono solo nelle schede libro, quindi dovremo impostare il gruppo nel box apposito: nulla di più facile, in Location dobbiamo selezionare il nostro custom post dalla tendina (immagine allegata).

Adesso il gruppo di field apparirà solo nelle schede libro.

Quindi, nella sezione campi create i campi designati dalla vostra scheda (noi avremo ovviamente titolo, autore, ecc). E quando sarete soddisfatti di come appariranno il lato Admin del sito, passeremo al lato front.
Infatti a questo punto, se salvate la vostra scheda di prova,  e provate a visualizzarla, vedrete un bel niente! Infatti i campi sono stati aggiunti a wp e anche al DB, ma il vostro tema grafico non sa come visualizzarli (non li conosce). Ogni tema ha come forma base il richiamo del contenuto del box classico degli articoli, gli altri campi non sono rappresentati nei temi perché troppo personalizzati!
E qui passiamo alla fase più difficile…. siete pronti?

 guida-custom-post-latoadmin guida-custom-post-latofront

Passaggio finale: far apparire i custom field nel tema

A questo passaggio non si scampa in nessun modo! 

Bene, vi ricordate i file del tema che avete trovato nel FTP? dovrete rimetterci le mani e cercare un file chiamato  “single.php”. Per ora non dovete modificarlo ma solo copiarlo e rinominarlo “single-schede_libro.php”. Come avrete già capito, la pagina single.php è la grafica dei post singoli, e in questo caso noi creiamo una pagina apposita per i nostri custom post. Per maggiori dettagli guardate la  guida WP Post_Type_Templates .

Creata la pagina apriamola e arriviamo al punto del codice che ha questa riga: ” the_content();”. Questo codice richiama esattamente il contenuto del nostro classico box dei post, ma a noi non ci serve toccarlo ma trovare solo il punto in cui appare il contenuto in modo da inserire il nostro codice appena sotto questo. In questo modo sarete sicuri di rientrare nello spazio di richiamo del singolo post e delle sue variabili. Nello specifico il vostro codice dovrà apparire per forza dentro queste righe di codice:

 Se sta fuori non richiamerà i dati giusti perché non saprà in che post pescare dal DB.

Trovato il punto, scriviamo il codice.
Prima di tutto il codice è scritto principalmente in PHP, quindi se avete una situazione con il php chiuso  (con questo comando ?>), dovrete aprirlo e richiuderlo se invece il php è già aperto non dovete aprirlo voi. Esempio pratico: se avete il contenuto () tra i simboli di apri e chiudi php voi dovrete per tutto il vostro codice   aprire ().

Per i codici da usare, il sito dei custom field hanno una documentazione ampia e con un po’ di impegno potrete svelare tutte grandi possibilità che offrono, intanto per vi faccio un esempio classico di cosa dovreste scrivere:

 

Lezione fast per i principianti su html e php:

  • tutto quello preceduto da $ sono variabili, le variabili servono a usare pezzi di codice e metterli in più punti senza dover riscrivere il pezzo lungo.
  • get_field è una funzione che possiede un campo da cambiare ad ogni richiamo che troviamo appunto tra parentesi. Per l’appunto questa funzione richiamata è definita dallo stesso plugin dei custom filed. disattivato quello, perde valore e non la puoi più richiamare. Se notate dentro c’è un testo  “sl_titolo_libro” questo testo è sempre il “nome del campo” di cui vi ho parlato prima. Infatti dovrete risciverlo esatto copiandolo dal campo del gruppo cutom field.
  • if  è una condizione del php if (se) succede qualcosa tra parentesi, allora fai quello che trovi tra {}. La forma può essere più complessa con appena di seguito alle graffe  “else” (se non funziona if fai quest altro)  seguito da altre graffe per la sua condizione. In questo caso la condizione è che la nostra funzione di richiamo del custom field deve esistere, altrimenti fa un bel niente.
  • echo  è una specie di stampa sulla pagina, o visualizza il codice.
  • div sono i contenitore che combinati tra loro tengono i vari elementi del contenuto in ordine e associano lo stile tramite class.
  • inline-block è una regola css che fa papparire il testo che sbucherà dalla variabile titolo appena dopo il label Titolo: e non sotto.

 

Lezione Fast di principi di html e css:

guida-custom-post-codice-paginaSe aprite l’immagine qui a fianco potrete avere un idea di cosa vuole dire la struttura del contenuto in div e le relative classi. I rettangoli nella pagina sono tutti div o codici simili e sotto potete avere un pezzo del codice html che rappresenta il sito. In questo caso la linea di codice in blu selezionata rappresenta il testo Logo delle categorie che è dentro a un link che è dentro a un div che contiene 3 link. A destra potete vedere invece il box dello stile scritto in CSS. Alla classe cont-categoria vedete che sono indicate delle regole dello stile.

 

Quindi, per ogni field dovrete richiamare get_field con il nome identificativo del vostro campo, mettere una variabile che lo rappresenti (sempre unica per ogni get_field) e poi riportare lo schemino sopra indicato. Ricordate che voi magari nel lato admin scrivete il titolo del campo  come input che esca prima di quello che si scrive, ma nel tema dovete scrivere voi il testo che deve comparire prima del field: infatti io ho inserito il testo Titolo: prima del campo.

Attenzione agli elementi con più selezioni (esempio i Select). Qui i select hanno un aggiunta in più di codice perchè se abbiamo  un campo con seleziona le tue lettere preferite ABCDEFG e tu spunti BDG, dal get_field usciranno tutte assieme i campi in codice php e quindi non appariranno se non le scomponi in modo corretto. Per farro devi usare il comando php Foreach.  Per ogniuna di (e metti la variabile) che diventa (as) variabile pallino ($pallino) allora fai questo ({}).

 Come vedete nel esempio del codice io ho un field che sputa 3 tipi di posto letto (una piazza,mezza piazza,matrimoniale), se mettiamo il caso che ho selezionato tutte e 3 i campi, con questo codice verrà visualizzato nella pagina:

 Esempio pratico:

Ora dovreste aver iniziato ad aver dimestichezza con questi codici ed essere pronti a metterli in atto con ogni vostro field creato.
Potete così provare a inserirli nella pagina che stavate modificando (single-schede_libro.php) , salvare e caricare la pagina visualizzate ta in front.

Se tutto va bene dovreste vedere i valori scritti, ma non messi stilisticamente a posto. Va bene lo stesso, perchè almeno le cose funzionano. Se invece appaiono errori, solitamente c’è la riga esatta della pagina che crea errori, voi andate a controllare se avete scritto giusto il testo e valutate un po’ come risolvere.

 Per il CSS:

Ancora un altro piccolo passetto per arrivare alla conclusione….

Per applicare lo stile ai vostri campi, dovete mettere nei div delle classi identificative: infatti se notate nel mio codice “linea-valore” contiene sia il label che il contenuto, poi dentro c’è il label con il testo descrizione (titolo:) che ha la sua classe “label-elemento” e il field che ha la classe “elemento”.

Questo è comodo perchè potete usare la stessa classe e impostare una volta sola lo stile. Se siete esperti potete impostare il codice css nel file style.css, ma per i novellini consiglio di usare il codice prima del loro blocco di custom field.
Prima di dove avete inserito il vostro codice, fuori dal php (quindi o lo mettete fuori dal ).
potete scrivere:

Ecco un idea molto semplice di come impostare le vostre regole css:  come vedete tra i tag <style> potete mettere le regole css ed è esattamente come metterle nel file style.css (vengono solo richiamate in quel punto del codice e non assieme all’altro codice css).
ogni classe viene messa con il nome e un “.” davanti, e poi le graffe hanno tutte le regole css impostate. Potete anche scegliere di mettere  regole nuove o inserire div più articolati. L’abilità stà solo nelle vostre conoscenze di css.

 

Vorrei dunque mostrarvi un esempio di una scheda custom personalizzata compilata e vista in front. Come vedete si possono strutturare molti elementi e creare strutture complesse usando sempre gli stessi codici.

guida-custom-post-rfinale-front guida-custom-post-rfinale-admin

 

Spero che questa guida abbia aiutato almeno un po’ chi voleva crearsi da solo una sezione personalizzata in wordpress, purtroppo non posso insegnarvi tutto in un colpo solo, ma se avete già qualche infarinatura di codici questa guida vi dovrebbe portare sulla giusta strada.

 

 

Domande :

1) Se invece di creare una sola sezione, in questo caso libri, volessi creare tanti tipi di scheda: scheda libro, scheda fumetto, scheda film, come faccio?
Molto semplice, il concetto di base è che puoi realizzare infiniti custom post e quindi infiniti template associati nel tema e infiniti custom field per ogni custom post. Ma come fare materialmente? Basta o copiare il codice del primo custom post e modificare i campi o creare un nuovo custom post con il sito generatore.
Cosa è fondamentale cambiare, 2 cose essenzialmente: il nome della funzione (es “fun_schede_libro()”  si trasforma in  “fun_schede_fumetto()” ) e lo slug identificativo del custom post (es  “schede_libro” in  “schede_fumetto”); ovviamente cambiare i nomi in tutte le parti del codice in cui vengono scritti. Il resto teoricamente potrebbe rimanere uguale ma avreste problemi a distinguere le sezioni, per questo motivo sarà il caso di rinominare tutte le scritte visualizzate sotto la variabile $labels; le capability potrebbero anche rimanere uguali o essere invece settate come automatiche per i post nel caso non abbiate differenti livelli di utenza che modificano i custom post.

Inserito il nuovo codice sempre nel file function.php o un suo richiamo, vi apparirà la nuova sezione creata. Da li potrete creare dei custom field dedicati ad essa e un nuovo template (es single-schede_fumetto.php)