Créer des options pour vos slider jQuery

Advanced Custom Field est un plugin en tout point remarquable, surtout lorsque vous utilisez les deux modules optionnels payant qui permettent de décupler sa puissance. Nous allons voir ici le module Options Site, vendu 25$.

Avant de vous enfuir devant le montant, prenez donc le temps de lire ce qui suit, vous aurez matière à réviser votre jugement. Nous allons voir une des utilisations possibles d‘Advanced Custom Field, dont je vous ai déjà parlé, et qui s’avère être un vrai petit trésor d’extension.

L’usage des options d’ACF suppose que vous ayez quelques bonnes bases (PHP, Marqueurs WP, CSS, HTML). De fait, je ne vais pas rentrer dans le détails. Le but de cet article est plus de vous donner une piste, une idée. Libre à vous d’imaginer ensuite comment utiliser cette extension au sein de votre thème.

Créer des options pour un thème

Si vous avez déjà tenté de personnaliser un thème WordPress, vous devez sans doute savoir que la création d’options n’est pas un parcours tranquille. Le simple fait de se dire, tiens, sur le header, je voudrais pouvoir changer de couleur quand l’envie m’en prend, héb bien vous voilà face une jolie problématique.

ACF, avec son module options peut vous aider à regler ce genre de soucis, mais il peut faire bien plus. Prenons l’exemple d’un joli Slider jQuery que vous auriez trouvé sur la toile. En tout point, c’est LE slider qu’il vous faut. Mais pas de bol, il n’existe pas de version WordPress.

ACF, pour vous simplifier la tâche

Si vous êtes un peu doué en PHP avec de bonnes connaissances sur la gestion des boucles WordPress, vous devriez vous en sortir pour intégrer ce slider. Néanmoins, là où cela se corse, c’est si vous souhaitez afficher des articles précis dans votre slider. Bien entendu, vous pouvez éditer votre code source à chaque fois. Ouaip, pas très flexible. Vous pouvez aussi écrire un plugin qui va faire cela pour vous. Hum, les hook et autres filtres WordPress, ce n’est pas non plus votre tasse de thé.

Nous allons donc créer un groupe de champs pour la page Options, puis, dans ce groupe, un champ ID de l’article, avec le mode « Repeat », et si vous n’avez pas cette option, vous pouvez créer 5 champs (par exemple) ou chacun sera un ID d’article différent.

Creation d'un groupe de champ d'options

Modifier la boucle WordPress

Les options de notre futur slider sont prêtes ! Il faut désormais apporter quelques retouches sur la boucle WordPress.

Les modification sur the_loop

En premier lieu, nous allons récupérer nos ID avec les fonctions natives de ACF. Nous allons aussi créer un tableau ids qui sera passé à la boucle, car sans ce tableau, vos articles ne s’afficheront. En effet, pour ressortir des articles précis de WordPress, lorsque vous utilisez query_posts, la sélection d’id se fait par le biais d’un tableau.

Donc, nous avons notre tableau d’id, nous créons désormais un second tableau, args, qui contiendra les arguments à passer à query_posts pour modifier les comportement de la boucle par défaut.

En gros, on va lui dire : « Hey la boucle, tu me renvois les articles qui contiennent les id X, Y, Z et A ». Nous passons notre tableau args à la moulinette query_posts, et ensuite, nous revenons au sein de la boucle sur un traitement classique.

Voilà ! Le slider jQuery qui n’était pas vraiment taillé pour WordPress se retrouve désormais avec un belle page d’options. Ici, je me suis contenté de faire en sorte d’ajouter les id des articles à afficher, mais j’aurais pu aussi ajouter des champs pour le comportement même du slider : Transition, durée des effets, et ainsi de suite.

A vous de jouer !