Créer une page d’options avec ACF

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 :

Documentation de la fonction d’options

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.