Wordpress + ACF, come aggiungere campi personalizzati

How much recipes or maps can you create with Advanced Custom Fields plugin.

Blog

Wordpress + ACF, come aggiungere campi personalizzati

Di solito Wordpress (o in modo abbreviato WP) è comodo per scrivere articoli, dove oltre al titolo e al contenuto possiamo inserire:

  • Data e ora di pubblicazione
  • TAG e Categorie
  • Autore

Se però pensiamo a come inserire una ricetta, di un nostro piatto preferito, per farlo conoscere ai nostri follower, avremmo la necessità di inserire informazioni del tipo:

  • tempo di preparazione e di cottura
  • calorie per porzione
  • ingredienti

Queste informazioni è possibile inserirle nel contenuto, come una semplice descrizione, ma è possibile darle più risalto.
Immagine di sfondo: Torta semplice con pezzi di cioccolato e crema di arance caramellate al chiodo di garofano e cannella.
License: licenses/by/2.0

In questo esempio, appena descritto, notiamo che in fondo c'è un elenco puntato con le informazioni principali per fare una torta al cioccolato ...

Queste informazioni, anche per comodità, possono essere inserite in ogni articolo con dei campi personaizzati; ecco come si fa.

Advanced Custom Fields

advancedcustomfields.com
Tutti i WP hanno già la possibilità di inserire dei custom field ma personalmente li ho trovati sempre scomodi da utilizzare e tutto sommato sono dei semplici campi aggiuntivi dove si definisce il nome (key) e la descrizione (value).

Con questo plugin Advanced Custom Field (o semplicemente ACF) è possibile invece avere delle opzioni aggiuntive veramente comode, sia per la forma visiva, in cui si può mettere titolo, breve descrizione di come copilare il campo e selezione il tipo del value.

I tipi di value sono veramente tanti, come il radio button, il select, il check box ... forse questi sono termini per chi conosce l'html, quindi è più facile vederli nel video oppure leggere questo approfondimento:

Cosa si può fare con questo plug-in? Veramente un sacco di contenuti ad hoc.

alt="Edit Post ‹ Mappa Milano — WordPress" /> Mappa Milano — WordPress

Inserire i campi personalizzati nei post

A seguito del precedente tutorial in questo vediamo come aggiungere al lato pubblico questi campi.
L'esempio della torta qui è stato sostituito da una attività, perché vi mostro come aggiungere un campo fuori dal comune, la mappa, ovvero la posizione dell'attività (o generico post) in luogo ben preciso.

I dettagli del codice per l'uso di questo speciale campo personalizzato lo vediamo nel prossimo tutorial e per ora andiamo a vedere dove scrivere il codice.

La seguente procedura prevede la scrittura nel linguaggio PHP, ma quello che vi serve ora è solo Filezilla e un editor di testo come Sublime Text.

La documentazione di riferimento per utilizzare i custom fields è questa: advancedcustomfields.com/resources/get_field/
Con Filezilla dovrete andare nella seguente cartella:

/vostrosito/wp-content/themes/twentyseventeen/template-parts/post/

e andate ad editare il file content.php, poi localizzate dove finisce il contenitore  </div><!-- .entry-content -->  ed inserite il codice seguente:

See the Pen Inserire i campi personalizzati nei post

Come usare Google Map e LeafletJS con ACF

Riferimenti:

  • https://console.developers.google.com/
  • http://leafletjs.com/examples/quick-start/
  • http://leafletjs.com/examples/quick-start/example.html
  • view-source:http://leafletjs.com/examples/quick-start/example.html

Abilitare una mappa variabile in Wordpress con ACF

Abilitare una mappa variabile in Wordpress con ACF >> Vedere una mappa in fondo al proprio articolo, è molto utile, ma tra i vari plugin per Worpress, nessun plugin lavora così bene! Mettere mano al codice può spaventare, ma dopo 2 o 3 minuti di video, non sarà più così, parola di Pj. Per seguire la procedura ho creato un documento in parallelo e utilizzando Codeanywhere, sembra tutto più semplice.
Alucni link utili:

  • documento esercizio parallelo: https://goo.gl/R2VjyJ
  • LeafletJS tutorial: http://leafletjs.com/examples/quick-start/
  • Codeanywhere: https://codeanywhere.com/
  • Custom Post Type UI: https://it.wordpress.org/plugins/custom-post-type-ui/
  • Advanced Custom Fields: https://it.wordpress.org/plugins/advanced-custom-fields/