Page d’options ACF : Guide d’utilisation

Si vous cherchez à améliorer votre site web WordPress avec des champs personnalisés et des options, le plugin Advanced Custom Fields (ACF) est un outil fantastique à considérer. L'une de ses fonctionnalités les plus remarquables est la page d'options d'ACF. Cette fonction puissante vous permet de créer une page dédiée dans votre panneau d'administration WordPress pour gérer les paramètres globaux du site et d'autres champs connexes.

Imaginons que vous ayez un site web avec un thème personnalisable, et que vous souhaitiez fournir un emplacement centralisé où les administrateurs peuvent contrôler les paramètres de l'ensemble du site. La page d'options ACF peut être votre solution.

Vous pouvez attacher n'importe quel champ de son riche ensemble - du champ de texte simple ou du champ d'image (par exemple, un logo) au champ de répétition , ce qui vous permet de gérer facilement les options de l'ensemble du site. Les possibilités sont infinies !

Contrairement à la méthode codée en "dur", l'utilisation de la page d'options permet de rationaliser la gestion de ces paramètres. Il est ainsi plus pratique et plus efficace pour les administrateurs de maintenir l'aspect et la convivialité du site.

Remarque : la page d'options est une fonctionnalité Pro, et nécessite la version Pro du plugin Advanced Custom Fields.

Pour comprendre le fonctionnement de la page d'options d'ACF, il est essentiel de savoir comment ACF stocke les données. Alors qu'ACF stocke généralement les champs associés aux articles ou aux pages dans la table wp_postmeta de votre base de données WordPress, dans ce cas, le plugin traite les champs de la page d'options différemment. ACF stocke les champs de la page d'options dans la table wp_options. Cette séparation permet une meilleure organisation et une meilleure récupération des données.

En pratique, cela ne signifie pour nous qu'un seul changement concernant l'obtention de valeurs : vous devez définir la source "options" en tant que get_field() deuxième argument, au lieu d'un identifiant de message.

L'ajout d'une page d'options à votre panneau d'administration WordPress en utilisant ACF est un processus simple. Le processus se compose de deux parties :

1. Ajout d'une page d'options
2. Création d'un groupe de champs ACF et "rattachement" à la page d'options

Commençons par la première. Nous avons ici deux façons d'y parvenir : en utilisant la fonction intégrée ou en codant. Vous pouvez choisir ce que vous préférez.

Depuis la version 6.2, ACF Pro comprend une interface utilisateur intégrée pour la création de pages d'options. Auparavant, un addon était nécessaire pour cette solution d'interface utilisateur. Bien que l'utilisation de cet addon ne soit plus aussi pertinente qu'auparavant, il existe encore d'autres addons ACF très utiles.

Regardez la vidéo officielle ci-dessous pour voir comment ajouter une nouvelle page d'options en utilisant l'interface utilisateur du plugin.

Si vous préférez l'approche codée, ouvrez le fichier functions.php de votre thème et collez l'extrait de code ci-dessous. Nous utilisons la fonction acf_add_options_page() pour créer la page d'options :

add_action('acf/init', function () {
    acf_add_options_page([
        'page_title' => 'Global Site Settings',
        'menu_title' => 'Site Settings',
        'menu_slug' => 'site-settings',
        'capability' => 'manage_options',
        'position' => 30,
        'icon_url' => 'dashicons-admin-generic',
    ]);
});

Dans cet exemple, nous créons une page d'options intitulée "Paramètres globaux du site" avec un titre de menu "Paramètres du site". L'intitulé du menu définit l'URL de la page d'options. Nous définissons la capacité manage_options pour nous assurer que seuls les administrateurs peuvent y accéder. Le paramètre position détermine l'emplacement de la page d'options dans le menu d'administration de WordPress. Enfin, le paramètre icon_url spécifie l'icône à afficher à côté de la page d'options dans le menu. Vous pouvez utiliser n'importe lequel des dashicons disponibles en fournissant le nom de classe correspondant.

Enregistrez les modifications dans le fichier functions.php, et le tour est joué ! La page d'options apparaît maintenant dans le panneau d'administration de WordPress. Elle est prête pour que vous puissiez ajouter des champs personnalisés et gérer les paramètres globaux du site.

Il est maintenant temps d'attribuer des champs à notre page d'options.

Créez un nouveau groupe de champs dans ACF et ajoutez les champs nécessaires.

Ensuite, dans les paramètres "Emplacement" du groupe de champs, sélectionnez "Page d'options" comme règle d'affichage des champs sur la page d'options. C'est ce que montre la capture d'écran ci-dessous.

Enregistrez le groupe de champs et vous avez terminé ! Vous pouvez maintenant visiter votre page d'options et y voir les champs de votre groupe.

Nous avons ajouté la page d'options et attribué les champs. Maintenant, nous devons afficher ces champs, tous ou certains d'entre eux, sur la page d'accueil de notre site web. Ci-dessous, nous partagerons deux approches, l'approche shortcode (avec un plugin) et l'autre avec le codage. Choisissez la méthode que vous préférez.

Un autre addon ACF, appelé ACF Views va faire le travail pour nous. ACF Views est un addon gratuit et intelligent, qui nous permet d'afficher des champs ACF sélectionnés (ou même des Posts) n'importe où en utilisant des shortcodes, le balisage HTML est automatiquement créé par le plugin.

L'approche du plugin résout une série de problèmes à la fois, ce qui nous évite bien des tracas.

Installez donc le plugin ACF Views depuis le dépôt de WordPress.org, et activez-le.

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

La vidéo suivante donne un aperçu de la manière d'ajouter une nouvelle vue ACF à une page unique. Pendant que vous regardez, vous aurez une idée de la façon dont le plugin fonctionne. Cependant, veuillez noter que notre objectif spécifique est légèrement différent. Nous avons l'intention d'afficher les champs de la page d'options.

Pour afficher les champs de la page d'options, suivez les instructions ci-dessous :

1. Cliquez sur l'élément de menu "ACF Views" pour accéder à la page ACF Views.
2. Cliquez sur le bouton "Ajouter nouveau" pour créer une nouvelle vue.
3. Sur la nouvelle page, donnez à votre vue un nom descriptif. Par exemple, nommons-la "Paramètres du site".
4. Choisissez les champs que vous souhaitez afficher dans le menu déroulant.
5. Cliquez sur le bouton "Publier" pour générer le shortcode pour la vue.
6. Copiez le shortcode généré et modifiez-le, pour passer la chaîne 'options' au paramètre 'object-id' en tant qu'argument. Votre shortcode ressemblera donc à ceci : [acf_views view-id= "5" name="Site Settings" object-id= "options"]. Mais il est certain que les arguments view-id et name contiendront vos valeurs spécifiques.
7. Collez le shortcode à l'endroit approprié. Il peut s'agir de n'importe quelle page Gutenberg ou même d'un widget. N'oubliez pas d'utiliser l'élément correct, comme le bloc shortcode de l'éditeur Gutenberg.
8. Enregistrez et visitez la page, pour voir le résultat.
9. Félicitations ! Vous avez réussi à afficher les champs de la page d'options.

Contrairement à l'utilisation d'un code personnalisé, vous n'avez pas à vous préoccuper du nom, du type ou du format de retour du champ. Le plugin génère automatiquement les balises HTML pour vous.

En outre, vous pouvez appliquer des règles CSS pour styliser la sortie directement dans la vue. Le champ Code CSS se trouve sous l'onglet "Avancé".

Bien que le plugin ACF Views fournisse une excellente solution pour afficher les champs de la page d'options, certains développeurs peuvent préférer une approche de codage plus pratique. Dans ce cas, l'utilisation de code PHP pour récupérer et afficher les données est une option viable.

Cependant, il est important de noter que cette méthode nécessite un niveau plus élevé de connaissances en matière de codage et peut ne pas être aussi conviviale pour les débutants. Elle implique l'utilisation de fonctions telles que get_field() pour récupérer les valeurs des champs de la page d'options, puis de les mettre en écho ou de les manipuler manuellement dans vos fichiers de modèles PHP.

Voici un exemple simple de la manière dont vous pouvez afficher un champ de la page d'options à l'aide de code PHP :

// the code below expects the 'Image URL' Return Format 
$logoUrl = get_field('logo', 'options')?? '';
printf('<img src="%s" alt="logo">', $logoUrl);

Vous pouvez utiliser la même fonction get_field(), comme dans les autres cas, en passant simplement la chaîne 'options' comme second argument.

La complexité de cette approche réside dans le fait qu'ACF possède plus de 30 types de champs, et que la réponse de get_field dépend non seulement du type de champ, mais aussi du format de retour du champ. Consultez la liste des principaux types de champs pour obtenir des guides pratiques spécifiques.

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

Bien que cette approche offre plus de contrôle et de possibilités de personnalisation, elle nécessite une compréhension plus approfondie de PHP et du développement WordPress, ce qui la rend moins accessible à ceux qui préfèrent une solution plus intuitive.

Il s'agit d'une remarque essentielle pour les sites web multilingues, qui ont (ou auront) un contenu en plusieurs langues.

Comme nous l'avons mentionné dans le chapitre "Derrière les coulisses", ACF stocke les valeurs des champs des pages d'options dans la table wp_options. Cette différence signifie que vous ne pouvez pas les traduire de la même manière que les pages ou les articles ordinaires, en créant un "autre" article dans une langue spécifique.

Cela peut sembler effrayant, mais ne vous inquiétez pas, la plupart des plugins multilingues s'en sont déjà occupés.

Par exemple, si vous utilisez Polylang, il existe un addon qui s'en charge. Si vous utilisez WPML, la solution est intégrée, et il vous suffit de sélectionner la bonne option de traduction pour votre groupe ACF afin de rendre les champs traduisibles.

La page d'options ACF permet aux administrateurs de WordPress de gérer facilement les paramètres globaux du site et les champs associés.

En créant une page d'options dédiée, vous pouvez rationaliser le processus de personnalisation et améliorer l'expérience globale de l'utilisateur. Que vous choisissiez d'utiliser le plugin ACF Views ou d'opter pour une approche de codage PHP, la page d'options vous permet de centraliser et de contrôler des aspects essentiels de votre site WordPress.

Expérimentez la page des options et découvrez comment elle peut rendre la gestion de votre site Web plus efficace et plus agréable.