Champ de liaison ACF : Guide d’utilisation et d’affichage

Le champ Lien ACF est l'un des nombreux types de champs ACF. Il permet de sélectionner et de stocker n'importe quelle URL dans une page. Les développeurs l'utilisent généralement pour divers types de liens et de boutons.

Le champ Lien utilise la fenêtre contextuelle de lien intégrée de WordPress. Outre le lien proprement dit, il fournit également un champ permettant de définir une étiquette de lien avec quelques paramètres qui contrôlent le lien. Par exemple, le paramètre qui contrôle si le lien doit être ouvert dans un nouvel onglet ou non.

Lorsque vous devez créer un lien vers un fichier interne, par exemple un .pdf téléchargé dans la médiathèque, vous devez utiliser le champ Fichier ACF au lieu du champ Lien.

Le champ "Lien" dispose d'un paramètre "Format de retour" avec deux options : "Link Array" et "Link URL". L'option choisie ici n'affectera pas l'aspect du champ pour les administrateurs ou les éditeurs. Les champs de la fenêtre contextuelle resteront identiques, car les paramètres du format de retour contrôlent le codage. Nous parlons ici de la réponse que vous recevez dans le code de la fonction get_field() lorsque vous demandez le champ.

Nous vous recommandons de toujours utiliser l'option "Link Array". La deuxième option "URL de lien" ne vous permettra pas d'obtenir l'étiquette ou d'avoir le paramètre "cible" (ouvrir dans un nouvel onglet). Cela signifie que vous devrez "coder en dur" ces arguments dans vos fichiers de modèle. De ce fait, vous ne pourrez pas les modifier ultérieurement via la fenêtre contextuelle.

Dans les coulisses, le champ Lien ACF enregistre votre choix dans le méta de la page (ou de l'article) en cours. Dans la base de données, le champ méta stocke les données sous forme de tableau (quel que soit le format de retour). Cela permet de conserver tous les champs de lien, c'est-à-dire l'URL, le texte du lien et l'option "ouvrir dans un nouvel onglet", disponibles à l'utilisation. C'est pourquoi nous avons suggéré d'utiliser le format de retour "tableau de liens". Il correspond au format de la base de données et fournit toutes les informations disponibles sur le lien.

La méthode du code est assez flexible mais présente une série d'inconvénients.

1. Cela prend du temps
2. Vous devez connaître le type de retour
3. Vous devez vous souvenir des noms de clés spécifiques dans le tableau de réponse
4. Vous devez trouver manuellement le bon modèle de page dans votre thème et le modifier

Il existe cependant un autre moyen, qui vous permet d'afficher le champ Lien ACF (ou tout autre type de champ en fait) sans le coder. C'est possible grâce au plugin gratuit ACF Views qui rend les choses super faciles et vous fait gagner beaucoup de temps.

Le plugin s'occupe du balisage HTML. Il suffit de choisir les champs ACF à afficher, puis de copier le shortcode auto-généré et de le coller à n'importe quel endroit de notre page. Il n'y a rien de plus à faire de notre côté. Lisez comment afficher les champs ACF sans codage pour connaître tous les avantages de l'approche par shortcode.

Nous avons joint ci-dessous un tutoriel vidéo qui montre comment afficher les champs ACF sur une seule page en utilisant la méthode des shortcodes. La vidéo est commune à tous les types de champs ACF. Plus de tutoriels vidéo sur la chaîne YouTube officielle .

Mais n'hésitez pas à sauter la vidéo car nous fournissons ci-dessous un guide complet étape par étape exactement pour le champ ACF Link.

Entrons dans le vif du sujet.

Si vous souhaitez suivre le processus, vous devez installer le plugin ACF Views sur votre site WordPress et l'activer. Gardez à l'esprit que ce plugin est un complément du plugin ACF. Assurez-vous donc que le plugin ACF est également installé et actif. La bonne nouvelle est que les deux plugins sont gratuits à télécharger et à utiliser.

Maintenant que vous êtes prêt, continuons.

Lorsque vous activez le plugin ACF Views, un nouvel élément apparaît dans le menu d'administration, appelé "ACF Views". Cet élément a plusieurs sous-éléments, mais dans notre cas, nous ne travaillerons qu'avec celui qui s'appelle "ACF Views".

Cliquez sur cet élément de menu pour ouvrir la page Vues, puis cliquez sur le bouton "Ajouter nouveau" pour créer une vue .

Note : Le terme "View" est le nom donné au type de message spécial fourni par le plugin. Chaque Vue est une liste de champs ACF à afficher, de sorte que vous pouvez avoir plusieurs vues différentes pour afficher différents champs (ou ensembles de champs) pour différents articles/pages.

Sur la nouvelle page, donnez un nom à votre Vue. Il peut s'agir de n'importe quel nom décrivant la vue . Ce nom ne sera affiché que dans la liste des vues de l'administrateur, ce qui permettra de la trouver plus facilement. J'ai appelé ma vue "Lien de page".

Vous devez maintenant attribuer un nouveau champ à votre vue . Cliquez sur le bouton "Ajouter un champ" et sélectionnez votre "Groupe" dans la liste déroulante. Dans mon cas, le groupe porte le nom "Page fields".

Continuez ensuite à sélectionner le champ cible dans la liste. Dans mon cas, le champ s'appelle "Lire la suite".

Note : Le type de champ est indiqué entre parenthèses pour faciliter l'identification.

Dans ce cas, vous devriez voir que le type est un "lien". Vous pouvez définir une "étiquette de lien" si nécessaire ou la laisser vide si vous voulez que le plugin la récupère dynamiquement à partir des données du lien.

En général, chaque Vue peut avoir un nombre illimité de champs ACF, dans notre cas, nous n'en utiliserons qu'un seul.

Cliquez sur "Publier" pour enregistrer et publier votre Vue. Une fois la vue publiée, vous constaterez que des codes courts ont été générés dans un bloc situé à droite de l'écran d'édition de la vue. Chaque vue a son propre shortcode avec un ID unique (la structure du shortcode est la même pour toutes les vues, mais les arguments sont uniques).

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

Copiez maintenant le shortcode, et cliquez sur le bouton 'Copier dans le presse-papiers' du premier shortcode.

Tout est prêt pour afficher le champ Lien ACF. Visitez votre page cible (avec le champ Lien), et assurez-vous que le champ a une URL sélectionnée. Collez ensuite le shortcode à l'endroit de votre choix dans le contenu de la page.

Dans le cas où vous utilisez l'éditeur Gutenberg : cliquez sur le bouton plus dans la barre supérieure et choisissez le bloc "Shortcode" dans la liste. Collez ensuite votre shortcode dans le bloc et appuyez sur le bouton "Mettre à jour" pour enregistrer votre post/page.

Visitez ensuite votre page pour voir le résultat. Si vous avez tout fait correctement, vous devriez voir le lien avec l'étiquette que vous avez définie. Ou avec l'étiquette récupérée dans le champ si vous l'avez laissé vide.

Si vous ne voyez pas votre lien, revenez en arrière et modifiez la page. Assurez-vous d'avoir sélectionné une URL dans le champ du lien ACF et enregistrez la page, car si le champ est vide, rien ne s'affichera.

Pour afficher le champ Lien, vous devez créer une balise HTML pour le lien et insérer les données de votre champ. Le code sera différent selon le type de retour sélectionné. Des exemples sont donnés ci-dessous.

1. Code PHP pour afficher le champ Lien avec le format de retour "Array" :

<?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) Code PHP pour afficher le champ "Lien" avec l' "URL" Format de retour :

<?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));
}

Avec le format de retour "URL", nous devons coder en dur le libellé de notre lien. Cela signifie que vous ne pourrez pas le changer sans modifier le code. C'est pourquoi il est préférable de toujours choisir le format de retour "Array".

Pour plus d'informations, regardez la vidéo ci-dessous et lisez l'article officiel d'ACF.

Nous vous avons montré comment utiliser le champ Lien ACF, ses options et deux façons de l'afficher. Vous pouvez maintenant utiliser ce champ n'importe où.

N'oubliez pas qu'une vue dans le plugin ACF Views prend en charge plusieurs champs, ce qui signifie que vous pouvez ajouter des champs supplémentaires à votre vue à tout moment. Le plugin prend également en charge tous les types de champs disponibles.

En fait, vous pouvez styliser la sortie des champs sans modifier votre thème : utilisez le champ de code CSS (voir l'onglet Avancé de l'affichage). Le CSS ajouté dans ce champ ne sera imprimé que sur les pages où vous utilisez le shortcode. Vous n'aurez donc plus besoin de chercher un endroit où coller votre code CSS.

Pour obtenir plus d'informations sur le plugin, visitez le site officiel d'ACF Views. Vous y trouverez des liens vers la chaîne YouTube du plugin (avec des tutoriels vidéo) et la documentation du plugin. Ces ressources sont utiles pour tous ceux qui découvrent le plugin.