Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Ajouter ses propres hooks dans Wordpress : Les actions

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Adding Custom Hooks in WordPress.
Adding Custom Hooks in WordPress: Custom Filters

French (Français) translation by François-Régis FERRY (you can also view the original English article)

L'une des notions fondamentales dans le dévelopement de solutions personnalisées pour Wordpress est d'avoir une bonne compréhension du systeme de hook. En eux-mêmes, ils ne sont pas si difficiles à comprendre; ce tutoriel est une première approche quant à leur fonctionnement.

De même que, si vous souhaitez développer avec Wordpress de manière plus approfondie, il est également judicieux de savoir comment implémenter ses propres hooks.

Dans cette série en deux parties, nous allons étudier le système de hook inhérent à Wordpress, la façon dont il est implémenté et nous verrons comment définir nos propres actions et filtres.

Pour commencer

Avant de poursuivre, ce tutoriel suppose que vous avez à disposition, un environnement de développement déjà configuré avec Wordpress installé. Au moment d'écrire ces lignes, Wordpress en est à sa version 4.5.2.

Si vous avez besoin d'aide pour paramétrer votre environnement de développement, merci de consulter ce tutoriel. Il vous fournira tout ce dont vous avez besoin pour paramétrer un serveur web, avec une version de PHP, une base de donnée et installer Wordpress.

Si vous êtes désireux d'en apprendre encore plus, alors cette série de tutoriels, dont celui-ci fait partie, vous fournira encore plus d'information pour installer Wordpress, apprendre à utiliser les thèmes et plugins et plus encore.

Pour revenir à ce qui nous intéresse ici, dans ce tutoriel nous nous focalisons sur les hooks et plus précisément les actions. Alors si vous êtes prêts, nous pouvons commencer.

Qu'est-ce qu'un hook ?

Avant de d'analyser précisément les hooks de Wordpress, il est important de comprendre le concept d'architecture orienté événement (de l'anglais event-driven architecture, ou EDA).

Si vous avez déjà travaillé avec des hooks Wordpress existants ou en développement front ou encore avec le langage Javascript dans toutes ses formes, il y a des chances que ce concept vous soit familier, même si vous ne connaissiez pas son nom officiel.

Indépendament, voici comment Wikipedia définit ce concept:

L'architecture orientée événements (de l'anglais event driven architecture, ou EDA) est une forme d'architecture de développement mettant en avant la production, la détection, l'utilisation et la réaction à des événements.

Si vous débutez tout juste avec les design patterns ou le développement en général, cela peut vous paraître compliqué, mais il est possible d'aborder les choses de la manière suivante :

  • L'applicatif, à certains endroits du code qui le compose, envoi des messages lorsqu'une action particulière se produit.
  • En ce qui nous concerne, en tant que développeurs, nous sommes en capacité d'écrire du code qui "écoute", surveille, l'envoi de ces messages pour y répondre avec du code personnalisé.

Il est intéressant de remarquer que la définition parle d'utilisation d'événements. Nous reparlerons de cela, quand nous en serons à definir nos propres hooks. Pour le moment, analysons ensemble, deux événement assez commun dans le monde du dévelopement web.

Avec Javascript

D'abord, imaginons que vous travaillez côté client. Vous avez un bouton avec un ID command-button, et lorsque l'utilisateur clique dessus, vous souhaitez afficher une alerte.

Avec jQuery, vous pouvez implémenter ce comportement de la façon suivante :

Les commentaires dans le code ci-dessus détaillent de façon précise ce qui se passe. En gros, le navigateur déclenche un événement dès que l'utilisateur clique sur le bouton. Quand cela se produit, notre code qui surveille cet événement répond à cette action en affichant une alerte "Vous avez cliqué sur le bouton".

Bien sur, d'autres bibliothèques ou frameworks ou même le Javascript natif peuvent exécuter la même tache. Je vous montre cet exemple avec jQuery car il s'agit d'une des bibliothèques Javascript les plus connues et parce que c'est celle qui est fournie avec Wordpress.

Avec Wordpress

L'implémentation de ce pattern n'est pas forcément identique d'un langage à un autre. Elle dépend souvent des APIs que le framework ou l'application fournie.

Avec Wordpress, lier un code personnalisé à un événement pouvant se déclencher est un peu différent. Par exemple, disons que vous travaillez avec les pages dans la zone d'administration de Wordpress et que vous souhaitez ajouter un nouveau sous-menu au menu Réglages. Nous l'appellerons Tuts+ Options

Pour y arriver, nous ajoutons le code suivant à notre fichier functions.php ou à notre plugin ou à n'importe quel type de projet sur lequel nous travaillons :

Je vous invite à visiter les pages du Codex correspondantes au hook admin_menu et à la fonction add_submenu_page.

Ce code n'ajoute pas de nouvelles fonctionnalités au menu mais sert à démontrer que Wordpress fournie un événement admin_menu, comme un navigateur peut avoir un événement lié au click de la souris. Nous pouvons donc injecter notre propre code en définissant une fonction qui s’exécutera quand l'événement sera déclenché.

Ce sont deux mises en pratique d'architecture orienté événement, à la fois implémentées et utilisées.

Comprendre les actions dans Wordpress

Maintenant que nous avons eu un rapide aperçu de ce qu'était le concept d'architecture orienté événements et vu deux exemples d'implémentation de ce pattern, intéressons nous aux actions de Wordpress. Nous allons passer en revue ce qui est disponible et comment nous pouvons l'implémenter par nous-même.

Mise en place de nos fichiers

Par simplicité nous allons travailler avec le thème par défaut fourni avec Wordpress, twentysixteen.

À la racine du répertoire du thème, créez un fichier que vous nommerez tutsplus-actions.php. Puis, dans functions.php, ajoutez cette ligne de code :

Le thème va ainsi charger ce que nous avons défini. Nous procédons de la sorte afin de laisser notre code en dehors du noyau du thème, et de ce fait pouvoir facilement retirer nos modifications en supprimant simplement l'instruction include_once ci dessus.

Une brève définition des actions

Dans Wordpress, il y a deux catégories de hooks : les actions et les filtres. Les actions sont des éléments clé dans le cycle d’exécution de Wordpress qui permettent d'ajouter, de retirer ou de modifier certaines fonctionnalités. En parallèle, les filtres, permettent, eux, d'ajouter, de retirer ou de modifier des données.

En résumé, les actions sont liées aux fonctionnalités, tandis que les filtres sont liés aux données. Nous nous pencherons davantage sur les filtres dans la deuxième partie de cette série.

À noter que si vous décidez d'approfondir vos recherches sur les actions et les filtres après avoir lu cette série, (ce que j'encourage), il est probable que d'autres tutoriels y fassent référence de manière générale en tant que hooks.

Bien que cela soit techniquement correct, il est plus pragmatique et plus clair de préciser le type de hook que vous utilisez que ce soit à l'écrit, lors d'une présentation oral ou d'une discution.

Parce que les actions sont là pour un type de fonctionnalité et les filtres pour un autre.

Travailler avec les Actions

Bien que nous ayons déjà vu ensemble un exemple spécifique d'action dans le code au dessus, prenons un autre exemple plus complet et plus concret.

De base, Wordpress propose deux types de posts: les articles (dans le cas d'articles de blog traditionnels) et les pages (pour le contenu statique qui n'est pas voué à changer souvent). Dans le cas d'un blog standard, ce type de contenu est relativement suffisant. Mais cela fait des années maintenant que Wordpress a murit et est devenu un CMS.

Et l'une des fonctionnalités qui contribue à rendre Wordpress extensible est la possibilité de créer vos propres types de post. Wordpress les appelle les custom post types, et ils sont parfaits pour créer des types de contenus qui ont besoin de leur propres types d'attribut et qui requirent une dénommination plus spécifique qu' "article" ou "page".

Afin de créer nos propres custom post types, nous aurons besoins de deux choses:

  1. définir une fonction qui se déclenche via le hook init de Wordpress
  2. enregistrer notre post type grâce à l'une des fonction API fournis

Enregistrer notre action

Pour enregistrer notre action, nous utiliserons la fonction add_action fourni par l'API Wordpress. Cela sert à dire à Wordpress que nous avons besoin de déclencher la fonction identifiée par le nom fourni en paramètre.

Notre code doit ressembler à ça:

Dans le code ci-dessus, nous enregistrons une fonction via le hook "init" nativement présent dans Wordpress. Ce hook se déclenche tôt dans le cycle d’exécution de Wordpress, c'est un moment opportun pour enregistrer un custom post type.

Ensuite, nous devons créer notre fonction.

Comprendre le nommage de cette fonction est simple : Nous l'avons nommé tutsplus_register_post_type car c'est le nom que nous avons utilisé en second argument de notre appel à la fonction add_action.

Cela ordonne littéralement à Wordpress de faire la chose suivante: Durant init, fait appel à la fonction tutsplus_register_post_type.

Jusqu'ici tout va bien. Nous n'avons pas vraiment fait quelque chose de compliqué, et si vous actualisez votre pas d'administration Wordpress, vous pouvez constater, bien qu'il n'y ait rien de nouveau, que tout fonctionne normalement.

Changeons cela.

Création d'un custom post type

Maintenant que nous avons le squelette de notre code pour ajouter notre propre action, faisons en sorte que quelque chose se passe. Nous allons créer un custom post type que nous nommerons time_traveler qui inclus un titre, un éditeur de texte, un extrait et rien d'autre.

Pour ce faire, jetons un œil à la fonction register_post_type dans le Codex. Cette documentation offre une explication concrète de tous les types d'argument que cette fonction peut accepter, mais nous n'en utiliserons qu'un échantillon pour notre custom post type.

Précisément, nous allons utiliser les arguments suivants :

  • label
  • labels
  • description
  • public
  • show_ui
  • supports

Pour le reste des fonctionnalités, nous garderons les valeurs par défaut fournies par Wordpress. Les arguments ressemblerons à ça :

Et la version complete du code permettant d'enregistrer le post type ressemblera à ça :

Lorsque vous actualisez la zone d'administration de votre installation de Wordpress, il doit maintenant y avoir un nouveau menu directement sous les Commentaires où l'on peut lire Time Travelers.

Quand vous cliquez sur Add New vous devriez voir un champs titre (pour le nom du voyageur), l'éditeur de texte (pour les informations relatives au voyageur) et un extrait (peut-être pour quelques notre au sujet du voyageur). Vous devriez également voir une seule meta box, pour publier les informations.

Adding a Time Traveler custom post type

Bien sur, le code ci-dessus, nous montre comment tirer profit des actions existantes pour définir un custom post type. Mais qu'en est-il de la création de nos propres actions?

Définir des actions personnalisées

Quand il s'agit de créer nos propres actions, il y a trois choses que nous devons faire. D'un point de vue fondamental nous devons procéder comme suit :

  1. définir le hook
  2. donner une fonctionnalité au hook
  3. permettre aux développeurs d'accéder à ce hook

L'exemple le plus simple que je puisse donner pour cela est le code suivant :

N'hésitez pas à ajouter cet exemple à votre fichier tutsplus-actions.php de sorte que vous puissiez continuer d'expériementer et d'explorer le code après ce tutoriel.

Après ça, nous pourrons appeler notre fonction tutsplus_action n'importe où dans le code. Disons, par exemple que nous voulons l'afficher en haut de la zone d'administration. Si tel est le cas, nous pouvons ajouter le code suivant :

Si vous actualisez votre zone d'administration, vous pourrez voir "This is a custom action hook" affiché en haut.

Notez que je ne recommande pas de "hooker" via admin_notices sauf si vous prévoyez de notifier les utilisateurs d'un message de succès, d'avertissement ou d'erreur. Je l'utilise ici comme moyen de démonstration de notre hook personnalisé.

Revisiter notre post type

Supposons que nous voulons créer une fonction custom post type qui nous permette de gérer les noms singuliers et pluriels de notre post type.

Comment pourrions-nous opérer? En utilisant ce que nous avons vu plus haut, nous savons que la première chose à faire est de créer une fonction qui va appeler une action. Alors allons-y :

Ensuite, nous avons besoin de quelque chose qui pourra vous paraître un peu contre-intuitif. Puisque nous voulons que notre fonctionnalité personnalisée se déclenche dans le contexte du hook "init", nous devons nous assurer que notre hook se déclenche, lui aussi, durant l'action "init".

Pour cela, nous associons notre hook personnalisé au hook "init".

Notez que dans le code ci-dessus nous spécifions deux paramètres additionnels pour do_action. Le premier est 10, qui indique la priorité avec laquelle le hook se déclenche.

Cela peut être n'importe quel nombre, en sachant que plus le nombre est élevé, plus la priorité est basse. Le deuxième paramètre est le nombre d'arguments que le hook personalisé peut accepter. Dans notre cas, il y en a un pour la version singulier du post type et un autre pour sa version plurielle.

Après ça, nous pouvons donner une fonctionnalité à ce hook. Ici, nous allons re-factoriser notre code en charge de l’enregistrement du post type de sorte qu'il accepte deux arguments qui seront utilisés dans le tableau passé à la fonction register_post_type de Wordpress.

Remarquez qu'ici nous avons aussi retiré l'association de cette fonction à un hook spécifique. À la place, nous allons l'appeler depuis l'intérieur d'une fonction qui est liée à notre action personnalisée.

Dans le code ci dessus, nous pouvons faire appel à la fonction responsable de l'enregistrement du custom post type, tout en lui passant nos propres arguments afin de pouvoir ajouter quelques fonctionnalités supplémentaire à notre code.

Conclusion

Définir ses propres hooks n'est pas compliqué et cela nous apporte beaucoup en tant que développeurs, en terme de flexibilité et d'aisance. On peut peut-être dire que la chose la plus déroutante au sujet du code abordé plus haut est la façon dont nous définissons un hook dans le contexte d'un autre (tutsplus_register_custom_post_type dans init).

J'ai choisi de m'en servir comme exemple final parce qu'il y a des fois où l'on souhaite définir un hook personnalisé et que ce dernier a besoin de se déclencher avant qu'un autre ait fini de s’exécuter.

Définir un hook qui se suffit à lui même est chose simple: Vous n'avez qu'à ne pas le lier à un hook pré-existant et vous ne faites pas d'appel à la fonction comme nous avons vu dans le code lié à admin_notices.

Dans le prochain article de cette série, nous aborderons les filtres et ce qu'ils peuvent faire pour nous en terme de modification de données. Nous verrons aussi comment définir nos propres filtres de sorte que nous puissions intégrer des fonctionnalités personalisées comme nous l'avons vu dans ce tutoriel.

En attendant le prochain article, si vous voulez des utilitaires pour agrémenter votre panel d'outils Wordpress ou du code à étudier pour devenir plus compétent, vous pouvez aller voir ce qu'il ya de disponible sur l'Envato Marketplace.

N'oubliez pas, vous pouvez avoir accès à tous mes cours via mon profile, et que vous pouvez me suivre sur mon blog et/ou sur Twitter @tommcfarlin où je parle de diverse pratiques de développement et comment les employer avec Wordpress.

N'hésitez pas à laisser vos questions ou commentaires en dessous et j'essaierai de répondre à chacun d'eux.

Ressources en relation avec ce cours

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.