WPLake > Blog > Campo di collegamento ACF: Guida all’uso e alla visualizzazione
  • English
  • Deutsch
  • Español
  • Français

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

Tempo di lettura: 7 minuti

-

Aggiornato 25.08.23

-

ACF Plugin Tutorial
Scoprite come funziona e si comporta il campo Link. Visualizzate il valore del campo utilizzando la codifica o uno shortcode, con generazione automatica di markup.

Indice dei Contenuti

Informazioni sul campo Link

#link copiato

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.

Aggiungere il campo Collegamento a qualsiasi gruppo ACF facendo clic sul pulsante "Aggiungi campo" e selezionando "Collegamento" nel menu a tendina "Tipo di campo".

Formati di ritorno

#link copiato

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.

Quando si aggiunge un campo Link alla pagina di destinazione, gli amministratori e gli editor possono selezionare un URL che verrà memorizzato nella pagina.
Il popup di collegamento integrato in WordPress consente di definire un'etichetta di collegamento e l'impostazione "apri il collegamento in una nuova scheda"
Dopo aver impostato un URL, è possibile modificarne i dettagli in qualsiasi momento. Fare clic sull'icona "Matita" per modificare i campi del link o fare clic sull'icona "X" per rimuoverli.

Dietro le quinte dell'ACF

#link copiato

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.

Visualizzare il campo Link con uno shortcode

#link copiato

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.

Passo 1. Creare una vista

#link copiato

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".

La pagina Viste ACF contiene un elenco di Viste, sicuramente all'inizio non ci saranno Viste.

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".

I campi ACF di destinazione possono essere scelti facilmente dall'elenco dei campi

Assegnazione dei campi

#link copiato

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.

Passo 2. Incollare il codice breve al suo posto

#link copiato

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.

Blocco Gutenberg con uno shortcode ACF Views.

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.

Campo ACF Link visualizzato in una pagina.

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.

Visualizzazione del campo Link con codice PHP

#link copiato

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.

ACF Link field with code, video cover

Riflessioni finali

#link copiato

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.

Sull'autore
Maxim Akimov

Certified WordPress expert from Ukraine with over 7 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

Got it