Campo di collegamento ACF: Guida all’uso e alla visualizzazione

Il campo Link ACF è uno dei tanti tipi di campo ACF e consente di selezionare e memorizzare qualsiasi URL Web all'interno di una pagina. Gli sviluppatori lo usano comunemente per vari tipi di collegamenti e pulsanti.

Il campo Link utilizza il popup integrato di WordPress. Oltre al link vero e proprio, fornisce anche un campo per definire un'etichetta di collegamento con alcune impostazioni che controllano il link. Come l'impostazione che controlla se deve essere aperto in una nuova scheda o meno.

Quando è necessario creare un collegamento a un file interno, ad esempio un .pdf caricato nella Libreria multimediale, è necessario utilizzare il campo File ACF invece del campo Collegamento.

Il campo Link ha un'impostazione del formato di ritorno con due opzioni: "Array di link" e "URL di link". La scelta di questa opzione non influisce sull'aspetto del campo per gli amministratori o gli editor. I campi del popup saranno sempre gli stessi, perché le impostazioni del Formato di ritorno controllano il lato della codifica. Qui si intende la risposta che si riceve nel codice dalla funzione get_field() quando si richiede il campo.

Si consiglia di utilizzare sempre l'opzione "Link Array". La seconda opzione "Link URL" non consente di ottenere l'etichetta o di avere l'impostazione "target" (apri in una nuova scheda). Ciò significa che dovrete "codificare" questi argomenti nei vostri file di template. A causa di ciò, non sarà possibile modificarli in seguito tramite il popup.

Dietro le quinte, il campo Link ACF memorizza la vostra scelta nel Meta post della pagina (o del post) corrente. Nel database, il meta-campo memorizza i dati come un array (indipendentemente dal formato di ritorno). Questo serve a mantenere disponibili tutti i campi del link, ossia URL, testo del link e opzione "apri in una nuova scheda". Per questo motivo abbiamo suggerito di usare il formato di ritorno "Link Array". Poiché si adatta al formato del database e fornisce tutte le informazioni disponibili sul link.

Il metodo del codice è abbastanza flessibile, ma presenta una serie di svantaggi.

1. Richiede tempo
2. Devi conoscere il tipo di ritorno
3. È necessario ricordare i nomi delle chiavi specifiche nell'array di risposte
4. Dovete trovare manualmente il modello di pagina giusto nel vostro tema e modificarlo

Esiste però un altro modo, che consente di visualizzare il campo Link ACF (o qualsiasi altro tipo di campo) senza codificarlo. Tutto questo è possibile grazie al plugin gratuito ACF Views, che rende tutto molto semplice e fa risparmiare molto tempo.

Il plugin si occupa del markup HTML. Dobbiamo solo scegliere i campi ACF da visualizzare, quindi copiare lo shortcode autogenerato e incollarlo in qualsiasi punto della nostra pagina. Non è necessario fare nulla di più da parte nostra. Leggete come visualizzare i campi ACF senza codificare per conoscere tutti i vantaggi dell'approccio shortcode.

Di seguito abbiamo allegato un video tutorial che mostra come visualizzare i campi ACF in una singola pagina utilizzando il metodo degli shortcode. Il video è comune a tutti i tipi di campi ACF. Altri video tutorial sono disponibili sul canale ufficiale di YouTube .

Ma non esitate a saltare il video perché qui di seguito vi forniamo una guida completa passo-passo proprio per il campo ACF Link.

Entriamo nel vivo.

Nel caso in cui vogliate seguirci, dovrete installare il plugin ACF Views sul vostro sito WordPress e attivarlo. Tenete presente che il plugin è un componente aggiuntivo del plugin ACF. Assicuratevi quindi che anche il plugin ACF sia installato e attivo. La buona notizia è che entrambi i plugin sono gratuiti da scaricare e utilizzare.

Ora siete pronti, continuiamo.

Quando si attiva il plugin ACF Views, nel menu di amministrazione compare una nuova voce, denominata "ACF Views". La voce ha diverse sottovoci, ma nel nostro caso lavoreremo solo con quella denominata "ACF Views".

Fare clic su questa voce di menu per aprire la pagina delle viste e quindi fare clic sul pulsante 'Aggiungi nuovo' per creare una vista .

Nota: il termine "View" è il nome dato al tipo di post speciale fornito dal plugin. Ogni Vista è un elenco di campi ACF da visualizzare, quindi si possono avere molte Viste diverse per visualizzare campi diversi (o insiemi di campi) per diversi post/pagine.

Nella nuova pagina dare alla vista un nome. Può essere qualsiasi cosa che descriva la vista ; questo nome verrà visualizzato solo nell'elenco delle viste dell'amministratore, rendendola più facile da trovare. Ho chiamato la mia vista "Collegamento alla pagina".

Ora è necessario assegnare un nuovo campo alla vista . Fare clic sul pulsante 'Aggiungi campo' e selezionare il 'Gruppo' dal menu a tendina. Nel mio caso, il gruppo ha il nome "Campi pagina".

Quindi continuare a selezionare il campo di destinazione dall'elenco. Nel mio caso, il campo si chiama "Leggi tutto".

Nota: il tipo di campo è indicato tra parentesi per facilitare l'identificazione.

In questo caso, si dovrebbe vedere che il tipo è un "link". È possibile definire un'"etichetta di collegamento", se necessario, oppure lasciarla vuota, se si vuole che il plugin la prenda dinamicamente dai dati del collegamento.

In generale, ogni vistapuò avere un numero illimitato di campi ACF, ma nel nostro caso ne useremo solo uno.

Fare clic su "Pubblica" per salvare e pubblicare la vista . Una volta pubblicata, si vedrà che gli shortcode sono stati generati in un blocco sul lato destro della schermata di modifica della vista. Ogni Vista ha il suo shortcode con un ID unico (la struttura dello shortcode è la stessa per tutte le Viste, ma gli argomenti sono unici).

[acf_views view-id="xxxx" name="x"]

Ora copiate lo shortcode e fate clic sul pulsante "Copia negli appunti" del primo shortcode.

Tutto è pronto per visualizzare il campo Link ACF. Visitare la pagina di destinazione (con il campo Link) e assicurarsi che il campo abbia un URL selezionato. Incollare quindi lo shortcode in qualsiasi punto del contenuto della pagina.

Se si utilizza l'editor Gutenberg, fare clic sul pulsante più nella barra superiore e scegliere il blocco "Shortcode" dall'elenco. Quindi incollate il vostro shortcode nel blocco e premete il pulsante "Aggiorna" per salvare il vostro post/pagina.

Quindi visitate la vostra pagina per vedere il risultato. Se si è fatto tutto correttamente, si dovrebbe vedere il link con l'etichetta definita. O con l'etichetta prelevata dal campo, se lo si è lasciato vuoto.

Se non si vede il link, tornare indietro e modificare la pagina. Assicuratevi di aver selezionato un URL nel campo del collegamento ACF e salvate la pagina, perché se il campo è vuoto non verrà visualizzato nulla.

Per visualizzare il campo Link è necessario creare un markup HTML per il link e inserire i dati del campo. Il codice sarà diverso a seconda del tipo di ritorno selezionato. Di seguito sono riportati alcuni esempi.

1. Codice PHP per visualizzare il campo Link con il formato "Array" Return Format:

<?php

// don't forget to replace 'link' with your field name
$linkData = get_field('link');

if ($linkData) {
    // if the 'target' is presented, it's a bool. We've to convert it into the HTML format  
    $target = isset($linkData['target']) && $linkData['target'] ?
        '_blank' :
        '_self';
    // displays the link. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' target='%s'>%s</a>",
        esc_url($linkData['url']),
        esc_html($target),
        esc_attr($linkData['title']));
}

2. Codice PHP per visualizzare il campo Link con "URL" Formato di ritorno:

<?php

// don't forget to replace 'link' with your field name
$linkUrl = get_field('link');

if ($linkUrl) {
    // displays the link. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' target='_blank'>Read more</a>",
        esc_url($linkUrl));
}

Con il formato di ritorno "URL", dobbiamo codificare l'etichetta del nostro link. Ciò significa che non sarà possibile cambiarla senza modificare il codice. Ecco perché è meglio scegliere sempre il formato di ritorno "Array".

Per ulteriori informazioni, guardate il video qui sotto e leggete l'articolo ufficiale dell'ACF.

Abbiamo mostrato come utilizzare il campo Link ACF, le sue opzioni e due modi per visualizzarlo. Ora è possibile utilizzare facilmente il campo ovunque.

Non dimenticate che una vista del plugin ACF Views supporta campi multipli, il che significa che potete aggiungere altri campi alla vostra vista in qualsiasi momento. Il plugin supporta inoltre tutti i tipi di campo disponibili.

In realtà, è possibile stilizzare l'output dei campi senza modificare il tema: utilizzare il campo del codice CSS (vedere la scheda Avanzate della vista). Il CSS aggiunto in questo campo verrà stampato solo nelle pagine in cui si utilizza lo shortcode. Non sarà quindi più necessario cercare un posto dove incollare il codice CSS.

Per ottenere maggiori informazioni sul plugin, visitate il sito ufficiale di ACF Views. Lì troverete i link al canale YouTube del plugin (con video tutorial) e alla documentazione del plugin. Queste risorse sono utili per chiunque sia alle prime armi con il plugin.