Avec ACF il est possible d’utiliser les groupes de champs pour créer des pages d’options, afin de créer des paramètres globaux qui ne sont pas rattachés à une page en particulier. C’est au final beaucoup plus simple que de créer des options WordPresss natives.
Sommaire du cours
Utilité des pages options
Il est tout à fait possible de créer des pages d’options grâce à WordPress, notamment grâce à la Settings API. C’est ce que font la plupart des développeurs de plugins d’ailleurs. Mais dans votre thème, autant ne pas vous embêter et utiliser les champs ACF !
La version pro permet de créer très rapidement des pages d’options avec vos champs préférés et toutes les prouesses ergonomiques qu’ils apportent. Et ce serait dommage de s’en passer !
Vous pouvez créer des champs pour ajouter des données comme par exemple le numéro de téléphone qui apparaîtrait en haut de toutes les pages, créer un bandeau d’alerte qui serait affiché en haut du site, mais aussi proposer de personnaliser certaines couleurs globales.
Les connaisseurs me diront qu’il faudrait en théorie passer par l’outil de personnalisation du thème, dans Apparence > Personnaliser. Car, là aussi, WordPress fournit des outils pour ajouter des réglages à votre thème via le Theme Customization API.
Mais là encore, on peut préférer ACF pour aller encore plus vite. La seule différence c’est qu’on n’aura pas l’aperçu en temps réel de nos modifications contrairement à l’outil de personnalisation. Mais ce n’est pas très grave.
L’avantage d’avoir une page d’options dédiée, c’est qu’on évite toutes les options par défaut proposées par WordPress, qui risquent de noyer nos champs, et rendre l’ergonomie plus compliquée pour un client.
On va donc maintenant voir comment déclarer des pages d’options et comment afficher ensuite les valeurs dans notre template.
Déclarer les pages d’options
Afin de déclarer une ou plusieurs pages d’options, il va falloir ajouter un peu de PHP et vous l’aurez déviné, ça va là encore se passer dans notre fichier functions.php.
Pas de hook ici, on place simplement le code où l’on veut dans le fichier. Par contre il y a un test sur l’existence de la fonction acf_add_options_page().
Si un jour vous désactivez ACF, la fonction n’existera plus et donc ce code sera ignoré. Si on ne faisait pas le test, cela résulterait en une erreur fatale PHP, ce qui rendrait le thème inutilisable.
Bien sûr, on ne veut pas désactiver ACF puisque notre site dépend grandement de lui, mais gardons tout de même cette précaution.
Dans cet exemple j’ai créé 2 pages d’options. La première est la page parente, qui ajoutera une nouvelle entrée dans le menu principal de l’administration de WordPress, et la seconde ajoutera un sous-menu.
La première page servira pour des données, et la seconde pour définir les couleurs. On aurait pu tout réunir dans la même page, vu le peu de champs qu’on va manipuler, mais c’était surtout pour vous montrer.
D’autant plus qu’on va voir juste après qu’on va pouvoir ajouter des onglets pour regrouper nos champs, grâce aux outils de disposition d’ACF.
Pour connaitre tous les paramètres disponibles dans cette fonction, consultez sa documentation :
Vous retrouverez également les bases de la création de pages options ici.
Créer le groupe de champs
Si vous tentez d’afficher vos pages d’options, un message vous indiquera qu’aucun groupe de champ n’a été trouvé. On va donc aller les créer, et les assigner à ces pages.
Je crée simplement 2 champs, un pour le numéro de téléphone, avec le slug tel, qui apparaitra dans l’en-tête du site, et l’autre pour une bannière facultative qui permettrait d’afficher un message d’information, portant le slug banner.
Je crée un deuxième groupe avec cette fois un champ couleur, pour définir la couleur de fond de l’en-tête du site. Le slug est header_color.
Maintenant, si vous retournez dans vos pages d’options, vous devriez voir vos champs apparaître !
Il ne nous reste plus qu’à afficher nos données dans notre site.
Afficher les champs dans le template
Dernière étape : afficher les données. Et c’est très facile puisqu’on va utiliser notre fonction the_field() habituelle, avec une petite subtilité toutefois :
Comme cette fonction recherche par défaut la donnée dans la page en cours, on va devoir ajouter un second paramètre 'option' pour indiquer à ACF qu’il faut chercher dans les options, et non la publication.
D’ailleurs, d’un point de vue purement technique, la donnée de ces champs est enregistrée dans la table wp_options de la base de données de WordPress, et non pas wp_postmeta comme habituellement.
Vous pouvez revoir la structure des données de WordPress dans ce cours.
Ce n’est pas le slug de la page option qu’on indique dans ce second paramètre, mais simplement 'option' à chaque fois.
Cela a donc une implication forte : le slug d’un champ n’est pas rattaché à une page d’options en particulier. Ce qui implique que si vous utilisez 2 fois le même slug dans 2 pages d’options différentes, leur valeur sera partagée et cela pourrait créer des effets indésirables.
Optez alors pour des noms plus spécifiques, qui décrivent précisément leur utilité et leur emplacement, comme header_color plutôt que simplement color.
Voici donc à quoi ressemble mon header.php avec tous les champs d’option :
On peut tester la présence d’un texte dans la bannière et ne l’afficher que si celui-ci n’est pas vide grâce à get_field().
La couleur du fond du header est désormais définie dynamiquement dans le HTML. Vous pourriez donc supprimer la couleur définie en dur dans le CSS.
Voici le résultat :
Bien sûr, vous allez pouvoir afficher ces valeurs partout, pas seulement dans header.php.
Vous savez maintenant utiliser les pages d’options dans ACF et vous allez voir qu’elles vous seront vraiment pratiques dans tous vos projets !
On finira la formation par une étude de cas où j’utilise justement une page d’options pour simplifier la saisie de données sur un site client et vous verrez que c’est bien plus pratique pour lui de modifier des champs ACF plutôt que manipuler un page builder.
Les pages d’options sont vraiment pratiques dès lors que vous souhaitez enregistrer des données globales qui ne sont pas forcément rattachées à une page du site en particulier.
C’est un bon substitut au panneau de personnalisation de WordPress, et c’est bien plus simple à mettre en place !
À vous maintenant d’organiser les champs et les pages selon vos besoins. Dans le prochain cours on va justement voir comment améliorer la mise en forme des champs ACF.
wp lover
Le 9 juin 2023
Salut, est-ce le tuto de cette page fonctionne aussi avec la version gratuite de ACF ?
Maxime BJ
Le 10 juin 2023
La page d’option est une fonctionnalité premium malheureusement ! Elle n’est donc pas disponible dans la version gratuite. https://www.advancedcustomfields.com/pro/
Kambro
Le 17 juin 2023
Merci pour cette excellente suite de tuto. L’ensemble de cette formation est remarquable (sans parler du design du site).
Certes, la page d’option est premium, mais dans la version free, n’y a-t-il pas moyen de placer quelque part dans le backoffice les champs administrables, notamment pour le texte de la barre de notification ?
Maxime BJ
Le 19 juin 2023
Merci pour les compliments ! Dans la version gratuite tous les champs sont forcément rattachés à une ressource (page ou article). Tu pourrais très bien mettre ces champs sur la page d’accueil. Et tu pourrais les récupérer depuis toutes les pages grâce au second paramètre de get_field( ‘champ’, ‘post_id’ );
Et pour obtenir l’id de la page d’accueil, utilise la fonction get_option(‘page_on_front’) (que tu mets donc en second paramètre de get_field).
wp lover
Le 11 juin 2023
Tu fais comment avec le client quand tu as ACF pro ou Elementor payant ? Tu fais un abonnement payant au client qui paye directement ACF ou Elementor ? Ou alors, tu prends par exemple ACF agency (249$ / an, illimité en terme de site) et le client te paye ?
Maxime BJ
Le 11 juin 2023
En tant que freelance/agence dans l’idéal tu prends les grosses licences illimitées pour diminuer les coûts, et le plus simple c’est de faire payer une maintenance mensuelle du site à ton client qui comprendrait : le coût des licences, de l’hébergement et du nom de domaine, la mise à jour du site et les sauvegardes, un audit SEO (par exemple un export mensuel du traffic du site)… De cette manière le client paie un abonnement tous les mois (ou trimestre ou annuel). Cela te permet de faire des bénéfices dessus et des recurrences.