ACF campi personalizzati all’interno di un articolo

3 Maggio 2020 in Wordpress by Pulashock

Obbiettivo del tutorial:

In questo tutorial prendiamo come esempio la recensione di un libro. Vogliamo aggiungere all’interno del normale articolo di WordPress 6 nuovi campi personalizzati:

Immagine di copertina
Data di uscita del libro
Autore
Breve descrizione
Pulsante acquista copertina flessibile
Pulsante acquista kindle

Il risultato finale potete vederlo nella recensione di Padre ricco Padre povero, dove ho utilizzato gli stessi campi descritti sopra.

Se ancora non avete un’idea di cosa sia Advanced Custom Fields (ACF) leggetevi l’articolo WordPress campi personalizzati con Advanced Custom Fields (ACF).

Installiamo ACF

Possiamo installare il plugin dalla normale procedura di WordPress, cercando Advanced Custom Fields oppure scaricandolo dalla pagina ufficiale di WordPress

Aggiungiamo un campo personalizzato

Una volta installato il plugin possiamo iniziare a creare i nostri campi personalizzati dalla voce Campi Personalizzati (Custom Fields se avete WordPress in inglese) della nostra amministrazione.

Procediamo con Aggiungi nuovo, ci troveremo la seguente schermata

Per prima cosa diamo un nome ai nostri campi personalizzati, nel nostro caso il titolo sarà Dettagli libro.

Il secondo passaggio è cliccare su Aggiungi Campo.

Aggiunta del campo immagine

Il nostro primo step sarà quello di aggiungere l’immagine di copertina del libro (chiamata Cover), prima di procedere però facciamo un breve riassunto delle opzioni che ACF ci mette a disposizione.

Di seguito alcuni fra i parametri più importanti:

Etichetta Campo: il nome del nostro custom field (in questo caso Cover)
Nome Campo: in genere viene compilato in automatico sulla base del titolo, gli spazi saranno sostituiti da underscore ( _ ). Questo nome ci servirà poi per mostrare il nostro contenuto lato frontend.
Tipo di Campo: esistono numerosi tipi di campo che andremo ad analizzare in seguito, in questo tutorial ci concentremo su: immagine, testo, data, link.
Istruzioni: testo libero (opzionale) apparirà vicino alla label nell’area amministrativa
Richiesto: obbigatorio o no
Formato di ritorno: se abbiamo selezionato immagine o data i formati di ritorno possono essere array, url o id.
Dimensione Anteprima: la thumb di anterpima dell’immagine inserita
Tipologie File permesse: possiamo inserire i formati accettati come per esempio jpg o png.
Condizione Logica: questa scelta se impostata su si potrà esservi utile in gruppi di campi più complessi, serve comunque a mostrare o nascondere un campo a seconda del valore impostato su altri input.

Tornando alla nostra immagine, diamo il nome al campo (Cover) e selezioniamo Array Immagine. Potete lasciare il resto delle opzioni come da default.

Aggiunta del selettore data

Dopo aver aggiunto la cover del libro passiamo all’inserimento della data, selezionando il tipo Selettore Data.

Fare attenzione ad alcuni parametri:

Formato di visualizzazione: come viene visualizzata la data lato amministrazione.
Formato di ritorno: come viene stampato il formato data lato frontend

Date il nome che preferite (nel mio caso publication) e passiamo allo step successivo.

Aggiunta nome autore e descrizione

Il campo testo è il formato più semplice, fra le scelte del tipo da utilizzare.

Vi sono alcune opzioni da poter utilizzare come l’aggiunta di un testo di default, o limitare il numero di caratteri.

Il nostro campo di testo avrà il nome di author, e sarà appunto il nome dell’autore del libro.

Replichiamo un nuovo inserimento per la breve descrizione, scegliamo il tipo Textarea e diamo il nome description.

Aggiungiamo il bottone acquista

Ci mancano adesso i pulsanti che rimanderanno all’acquisto del libro.
Per farlo selezioniamo il campo Link e nominiamolo Button 1.

Nel valore di ritorno selezioniamo Link array, in questo modo il nostro valore sarà composto da un array composto da url, title e target.

Replichiamo l’inserimento del link con uno nuovo chiamato Button 2.

Salviamo e scegliamo dove mostrare i nostri campi

Prima di salvare dobbiamo settare dove visualizzare i dettagli del libro che abbiamo impostato.

Nel nostro caso vogliamo mostrare i campi nei normali post di WordPress, quindi lasciamo selezionato Tipo di post – è uguale a – Articolo.

Con Advanced Custom Fields puoi scegliere dove visualizzare i custom fields creati, puoi selezionare pagina, template di pagina, post-type, é possibile altresi scegliere se visualizzare o meno i vostri input sono in alcune categorie (es libri).

Mostriamo i valori di ACF nel nostro tema

Quello che dobbiamo andare a modificare adesso è il nostro single.php

Primo step, salviamo il valore all’interno di una variabile. Per salvare un campo all’interno di una variablile dobbiamo recuperare il valore con $myVariable = get_field(‘name’);

Se invece vogliamo stamparlo direttamente usiamo the_field(‘name’);

Noi salveremo il valore all’interno di una variablile, ricordo che dobbiamo recuperare i seguenti custom fields:

Immagine di copertina (cover)
Data di uscita del libro (publication)
Autore (author)
Descrizione (description)
Pulsante acquista (button_1)
Pulsante acquista (button_2)

<?php
//vars
$image = get_field('image');
$publication = get_field('publication');
$link1 = get_field('button_1');
$link2 = get_field('button_2');
?>

Mostriamo il campo immagine

Adesso non ci resta che mostrare le nostre variabili, vediamo come estrapolare tutti i valori dell’immagine.

<?php if (!empty($image)) : ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>

Con if (!empty($image)) stiamo scegliendo di mostrare il blocco all’interno dell’if se la variabile $image non è vuota.

Mostriamo il campo data

Possiamo mostrare il campo data come una semplice stringa, oppure mostrare la data in un formato diverso. Io non sapendo il mese di pubblicazione mostrerò solo l’anno.

<?php 
//formato standard
<p>Data: <?php the_field('publication'); ?></p>
<?php 
// Mostro la data in un diverso formato 
$date = new \DateTime($date_string);
?>
<p>Data: <?php echo $date->format('Y'); ?></p>

Mostriamo i nostri bottoni

Per mostrare i due bottoni (button_1, button_2) abbiamo creato due campi di tipo Link, abbiamo scelto l’ozione array, quindi il nostro valore ritornerà :

Url
Title
Target

<?php 
//primo pulsante
if( $link1 ): 
    $link_url = $link1['url'];
    $link_title = $link1['title'];
    $link_target = $link1['target'] ? $link1['target'] : '_self';
    ?>
    <a class="btn btn-readmore" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>
<?php endif; ?>

<?php 
//secondo pulsante
if( $link2 ): 
    $link_url = $link2['url'];
    $link_title = $link2['title'];
    $link_target = $link2['target'] ? $link2['target'] : '_self';
    ?>
    <a class="btn btn-readmore" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>
<?php endif; ?>

Codice completo

Ovviamente vogliamo dare al risultato una struttura logica e piacevole. In questo tema è installato Bootstrap, per comodità mostrerò il risultato all’interno delle colonne del famoso framework.

<?php
//vars
$image = get_field('cover');
$author = get_field('author');
$description = get_field('description');
$publication = get_field('publication');
$link1 = get_field('button_1');
$link2 = get_field('button_2'); ?>

<div class="row">
    <?php if (!empty($image)) : ?>

        <div class="col-sm-4">
            <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
        </div>
    <?php endif; ?>

    <div class="col-sm-8">
        <?php
        $date_string = get_field('publication');
        $date = new \DateTime($date_string);
        ?>
         <?php if($author || $publication) : ?>
          <p><?php echo __('<strong>Autore</strong>: ', 'start') . $author . __('<br> <strong>Anno di pubblicazione</strong>: ', 'start') . $date->format('Y'); ?></p>
          <?php endif; ?>
        <?php if ($description) : ?>
            <p><?php echo $description;  ?></p>
        <?php endif; ?>
        <div>
            <?php
            //primo pulsante
            if ($link1) :
                $link_url = $link1['url'];
                $link_title = $link1['title'];
                $link_target = $link1['target'] ? $link1['target'] : '_self';?>
                <a class="btn btn-readmore" href="<?php echo esc_url($link_url); ?>" target="<?php echo esc_attr($link_target); ?>"><?php echo esc_html($link_title); ?></a>
            <?php endif; ?>
            <?php
            //secondo pulsante
            if ($link2) :
                $link_url = $link2['url'];
                $link_title = $link2['title'];
                $link_target = $link2['target'] ? $link2['target'] : '_self';?>
                <a class="btn btn-readmore" href="<?php echo esc_url($link_url); ?>" target="<?php echo esc_attr($link_target); ?>"><?php echo esc_html($link_title); ?></a>
            <?php endif; ?>
        </div>
    </div>
</div>

Popoliamo i nostri dati

Per compltare il lavoro dobbiamo andare nel post che vogliamo pubblicare e compiliamo tutti i campi desiderati. Quello che vedrete lato backend sarà qualcosa di simile.

Vediamo il risultato

Il risultato del nostro lavoro potete vederlo nella recensione di Padre ricco Padre povero, dove l’immagine a sinistra è affiancata dalla data di pubblicazione, il nome dell’autore, la breve descrizione e i link che rimandano all’acquisto del libro.

Tags: ACF Advanced Custom Fields Plugin Worpress Wordpress