Didacticiel pas à pas • WPShout

Ce didacticiel de développement de plug-in WordPress décrit les étapes que j'ai suivies sur un projet réel, y compris les erreurs que j'ai commises et la façon dont je les ai déboguées.

L’article de cette semaine montre comment créer un plugin WordPress à partir de rien. Plutôt que de ne vous montrer que le code final, j’ai écrit un didacticiel pas à pas de développement du plugin WordPress, en capturant les étapes I réellement est passé par un vrai projet de plugin, incluant les erreurs que j'ai faites et comment je les ai déboguées.

Cet article est donc conçu pour vous donner un aperçu du processus réel d'un développeur WordPress dans la création d'un plugin WordPress à partir de zéro, en commençant seulement par un besoin en fonctionnalités. Les processus d’autres développeurs seraient différents des miens: bon nombre de ce que vous verrez ci-dessous sont mes propres approches du processus de développement de plug-in, que vous ne pouvez pas nécessairement voir dans le code final.

Poursuivez votre lecture pour découvrir un exemple concret de développement de plug-in détaillé, comprenant les erreurs, et consultez la section Conclusion pour en savoir plus sur le processus de développement du plug-in WordPress en général.

Développement de plugins WordPress: commencez par le besoin en fonctionnalités

Rappelez-vous que «écrire un plugin WordPress à partir de rien» signifie en réalité «ajouter le code que vous voulez dans WordPress». Vous devez donc apprendre un ensemble de les processus.

Il est important de se rappeler que «écrire un plugin WordPress à partir de rien» signifie en fait «ajouter absolument tout le code que vous voulez dans WordPress»: ce que vous écrivez dépend totalement, à 100%, des besoins en fonctionnalités.

En conséquence, il n’ya pas de réponse unique à "comment écrire un plugin WordPress", pas plus qu’il n’ya une réponse à "comment cuisiner un repas." (Pourquoi avez-vous faim?) Au lieu de cela, ce que vous pouvez apprendre, c’est le développement de plugins. les processus, en utilisant des plugins spécifiques comme exemples pour enseigner ces processus.

Décrire le besoin de fonctionnalités

Pour ce projet de développement de plug-in, j’ai choisi quelque chose qui sera réellement utile pour notre comptabilité interne sur WPShout. Voici le besoin de fonctionnalités:

«J'ai besoin d'un plugin qui me dira quels messages (quel que soit leur type) ont été publiés jusqu'à présent. ce mois calendrier sur WPShout, et qui étaient leurs auteurs. "

Un plug-in mono-site (non étendu)

Une remarque importante: j’ai écrit ce plugin comme étant destiné à un seul site. En d’autres termes, c’est le type de plug-in qu'un pigiste WordPress écrirait pour un seul client, et ne pas l’un pour les milliers d’utilisateurs potentiels sur le référentiel de plugins WordPress. Étant donné que ce plug-in est destiné à un seul utilisateur, je peux le coder beaucoup plus simplement – sans avoir besoin, par exemple, de le rendre extensible avec des hooks ou de créer un espacement de noms et une traduction élaborés.

Enfin, avant de commencer: le plugin ci-dessous (comme on pouvait s’y attendre) repose sur la connaissance de PHP en général et sur la base de code PHP de WordPress en particulier. Si vous souhaitez vous sentir plus à l'aise avec cela, notre cours de développement WordPress Opérationnel est la meilleure façon d'apprendre.

Avec cela, penchons-nous sur les étapes que j'ai suivies pour développer ce plugin!

Didacticiel de développement de plug-in WordPress étape par étape

Voici les étapes que j'ai suivies, avec le code complet pour chaque étape.

1. Il suffit de faire quelque chose

<? php
/ **
 * Nom du plugin: WPShout Afficher la paternité ce mois-ci
 * Description: Montre qui a écrit quoi ce mois-ci sur WPShout
 * Version: 1.0
 * Auteur: WPShout
 * URI de l'auteur: https://wpshout.com
* /

add_action ('init', 'wpshout_do_thing');
fonction wpshout_do_thing () 
si (! isset ($ _GET['wpsdt'] )):
revenir;
fin si;

var_dump ("ici");
mourir;

Notes sur l'étape 1

Cette étape consiste simplement à m'assurer que WordPress écoute mon plugin et que je peux le faire imprimer. Si vous souhaitez en savoir plus sur le plug-in WordPress du plug-in qui enregistre le plug-in, reportez-vous à notre Guide rapide sur le sujet.

Noter la si (! isset ($ _GET['wpsdt'] )): astuce j'ai utilisé ici. Il utilise PHP $ _GET variable superglobal pour exécuter le code du plugin si et seulement si l’URL a une chaîne de requête avec wpsdt en elle. J’utilise souvent cette astuce dans le développement de plug-in, car c’est un simple commutateur «on / off» pour le plug-in qui me permet de l’exécuter uniquement en modifiant manuellement les paramètres d’URL.

Notez que je suis également connecté à WordPress init crochet d'action. Pourquoi? Parce que je veux que mon plugin s’exécute avant tout le reste et je ne veux pas y penser. C’est aussi pourquoi j’ai nommé ma fonction accrochée wpshout_do_thing (): parce que je sais que cela ne causera pas de collision entre espaces de noms (le wpshout_ est très simple et assez bon en espacement de noms de fonction) et je ne veux pas y penser. Nous le ferons bien plus tard.

le var_dump (); mourir; Le motif que j'utilise ici fait également partie de mon travail dans le développement du plugin WordPress, car il me permet de voir exactement ce que le plugin est en train de générer, puis de supprimer tout autre processus PHP susceptible de s'exécuter ultérieurement. Évidemment, ne faites jamais cela d’une manière qui affecte les utilisateurs, sinon ils verront un site complètement endommagé.

Le résultat du code ci-dessus, quand je passe dans le wpsdt La chaîne de requête, est:

2. Interroger les articles récents de tous les types d’annonces

    5
'post_type' => 'any',
'post_status' => 'publier',
'orderby' => 'date',
'order' => 'DESC',
)

$ query = new WP_Query ($ args);

var_dump ($ query);
mourir;

Notes sur l'étape 2

Nous écrivons maintenant une coutume WP_Query, et var_dump ()le résultat pour s’assurer que cela fonctionne. La requête elle-même concerne «les cinq publications les plus récentes, quel que soit le type de publication, dont le statut est publié», ce qui correspond en partie à ce que nous souhaitons (tout type de publication, statut de publication publié) et en partie à ce que nous souhaitons (les cinq dernières ). Nous faisons d’abord la partie facile.

Cette étape mène à la sortie suivante. Ce qui est bien, c’est que le var_dump ()ed WP_Query objets des postes propriété est un tableau de cinq éléments. Si vous en savez assez sur comment WP_Querys travail, vous savez que le compte de la des postes tableau reflète le nombre de messages réellement récupérés dans cette requête. En d'autres termes, nous avons vraiment réussi à obtenir cinq postes.

3. Recherche comment interroger tous les articles publiés ce mois-ci

Nous en sommes maintenant à la partie que je ne sais pas faire. Je n’écrirai donc pas de code plug-in à cette étape. Ce que je ne sais pas faire, c’est: comment écrire un WP_Query qui va chercher seulement messages publiés ce mois-ci? (N'oubliez pas que cela signifierait «du 1er au 10 novembre» le 10 novembre, pas «les 30 derniers jours».)

Le temps pour Google, qui est une partie si importante du développement du plugin WordPress (et du développement de WordPress en général), que je le mette en gras: Temps à Google. Et lorsque vous utilisez Google, il est extrêmement important de connaître deux choses:

1. Comment écrire vos requêtes Google.
2. Comment choisir des résultats pertinents.

La recherche Google que j’ai exécutée portait sur «la date de publication de wpquery». Essayez la recherche vous-même! Qu'est-ce qui semble pertinent?

Je pensais que la meilleure solution était un article sur le débordement de pile intitulé Postes publiés dans une requête après une certaine date dans WordPress. Dans ses réponses, il est mentionné que vous pouvez passer un date_query élément de tableau dans WP_Query, et donne l'exemple de code suivant:

'date_query' => array (
'after' => array (
'année' => 2012,
'mois' => 3,
'jour' => 1,
),
),

C’est bien, mais nous ne voulons pas du «mois 3», nous voulons cette mois. Comment disons-nous cette mois en PHP?

La recherche sur Google que j’avais lancée portait sur «php ce mois-ci» et m’a menée ici: https://stackoverflow.com/questions/5347217/simplest-way-to-display-current-month-and-year-like-aug -2016-en-php

Cela m’a conduit au code suivant pour notre date_query:

'date_query' => array (
'after' => array (
'année' => date ('Y'),
'mois' => date ('M'),
'jour' => 1,
),
),

4. Combinez la requête de date avec la requête principale

    -1,
'post_type' => 'any',
'post_status' => 'publier',
'date_query' => array (
'after' => array (
'année' => date ('Y'),
'mois' => date ('M'),
),
'jour' => 1,
),
'orderby' => 'date',
'order' => 'DESC',
)

$ query = new WP_Query ($ args);

var_dump ($ query);
mourir;

Notes sur l'étape 4

Dans cette étape, j'ai essayé de plier le date_query paramètre de mon apprentissage de Google dans mon existant WP_Query. J'ai aussi changé posts_per_page à -1 pour que nous obtenions tout les messages qui nous intéressent.

L'exécution du code ci-dessus donne ce résultat:

Ce code est-il bon ou mauvais? C'est mauvais. Pourquoi? Parce que beaucoup de postdater éléments qui apparaissent dans notre var_dump () remontent à février ou janvier de l'année en cours. Notre requête ne va certainement pas chercher les articles qu’elle est supposée aller chercher. Il est temps de comprendre ce qui ne va pas.

5. Cela n’a pas fonctionné, Debug

    -1,
// 'post_type' => 'any',
// 'post_status' => 'publier',
// 'date_query' => array (
// 'after' => array (
// 'année' => date ('Y'),
// 'mois' => date ('M'),
//),
// 'jour' => 1,
//),
// 'orderby' => 'date',
// 'order' => 'DESC',
//);

// $ query = new WP_Query ($ args);

$ after = array (
'année' => date ('Y'),
'mois' => date ('M'),
)

var_dump ($ after);
mourir;

Notes sur l'étape 5

Dans cette étape, je fais deux choses:

1. Mettez en commentaire (mais ne supprimez pas!) Le code qui agit étrangement.
2. Essayez d’obtenir de la visibilité sur la partie de ce code au comportement étrange.

Ce qui agit bizarrement est le après élément de notre date_query. Pourquoi agit-il étrangement? Peut être date_query ne fonctionne pas vraiment ou quelque chose, mais il est beaucoup plus probable que j’ai écrit quelque chose de mal. Voyons donc si nous pouvons examiner ce que cette partie du tableau génère réellement, en faisant $ après une variable et var_dump ()cela.

Cela donne ce résultat:

Attendez, c’est faux: le mois est un mois chaîne, "Oct". date_query attend certainement quelque chose de numérique.

Pour m'assurer que c'était bien l'erreur que j'ai commise, j'ai cherché «date du php» dans Google et vérifié ce résultat: https://www.w3schools.com/php/func_date_date.asp. Et oui date ('M') imprime les trois premiers des lettres du nom de la date en anglais. Pas ce que nous voulons.

6. Réessayer

    -1,
'post_type' => 'any',
'post_status' => 'publier',
'date_query' => array (
'after' => array (
'année' => date ('Y'),
'mois' => date ('m'),
),
'jour' => 1,
),
'orderby' => 'date',
'order' => 'DESC',
)

$ query = new WP_Query ($ args);

// $ after = array (
// 'année' => date ('Y'),
// 'mois' => date ('M'),
//);

var_dump ($ query);
mourir;

Notes sur l'étape 6

Cette étape implique de commenter le code de test, de supprimer le code de requête lui-même et de changer 'M' à 'm' dans le date_query, puisque je viens de me rendre compte que 'm' est ce qui vous donne réellement un mois numérique une fois passé en Date().

L'exécution de ce code donne les informations suivantes:

Est-ce bon ou mauvais? C’est mauvais: le WP_Query‘S des postes La propriété est un tableau vide, ce qui signifie que nous n’avons récupéré aucun message.

7. Cela n’a pas fonctionné, Debug

    -1,
'post_type' => 'any',
'post_status' => 'publier',
'date_query' => array (
'after' => array (
'année' => date ('Y'),
'mois' => date ('m'),
'jour' => 1,
),
),
'orderby' => 'date',
'order' => 'DESC',
)

$ query = new WP_Query ($ args);

// $ after = array (
// 'année' => date ('Y'),
// 'mois' => date ('M'),
//);

var_dump ($ query);
mourir;

Notes sur l'étape 7

Dans cette étape, je devais relancer ma recherche Google pour «date de publication de wpquery» pour revenir à l'article Stack Overflow, aux posts de Query publiés après une certaine date dans WordPress, et vérifier si j'avais commis une erreur.

Oui, je l'ai fait: pour une raison étrange, j'ai mis journée comme son propre élément de tableau date_query plutôt que de suivre l'exemple de code en mettant journée à l'intérieur de après élément de date_query. Corriger cela et réexécuter le code donne les résultats suivants:

Est-ce bon ou mauvais? C’est bien: nous sommes allés chercher dix postes, qui ont tous dix postdater propriétés dans le mois en cours. Le progrès!

8. UI et Shortcode

    -1,
'post_type' => 'any',
'post_status' => 'publier',
'date_query' => array (
'after' => array (
'année' => date ('Y'),
'mois' => date ('m'),
'jour' => 1,
),
),
'orderby' => 'date',
'order' => 'DESC',
)

$ query = new WP_Query ($ args);

ob_start ();

while ($ query-> have_posts ()):
$ query-> the_post (); ?>

			

			
			
			
			Par  sur 

		<? php endwhile;

wp_reset_postdata ();

return ob_get_clean ();

Notes sur l'étape 8

Maintenant que le travail est terminé, il est temps de nommer notre fonction accrochée comme quelque chose de non ridicule, de choisir une interface utilisateur et de procéder à un nettoyage général.

Ceci est un plugin par et pour un seul développeur WordPress, et le choix naturel de l'interface semble donc être un shortcode. je change add_action () à add_shortcode (), et nommez la fonction shortcode quelque chose de précis, wpshout_show_this_months_posts_by_author (). J'utilise un outil favori pour le développement de plug-in basé sur un shortcode, la mise en mémoire tampon de la sortie PHP, pour contrôler le balisage renvoyé par le shortcode sans avoir à créer un géant. $ retour variable.

Dans cette zone de sortie, j'utilise librement les balises de modèle WordPress telles que l'auteur() et la date(), puisque nous sommes dans la boucle d’une requête personnalisée.

Je me suis aussi rappelé qu’il était bon d’appeler wp_reset_postdata () après avoir exécuté une requête personnalisée, mais ne me souviens plus si cela ou wp_reset_query () était la bonne fonction à utiliser. J'ai cherché «wp_reset_postdata ou wp_reset_query» dans Google et trouvé cet article: https://wordpress.stackexchange.com/questions/144343/wp-reset-postdata-or-wp-reset-query-after-a-custom-loop, ce qui a je conclus wp_reset_postdata () fonctionnera très bien.

Exécuter le plugin sur une page avec le wpshout_show_this_months_posts_by_author Le shortcode en place donne les informations suivantes:

C'est jolie bien, mais quelle est la date manquante dans l’article premier en partant du bas?

8. Alors la date() est totalement bizarre?

    -1,
'post_type' => 'any',
'post_status' => 'publier',
'date_query' => array (
'after' => array (
'année' => date ('Y'),
'mois' => date ('m'),
'jour' => 1,
),
),
'orderby' => 'date',
'order' => 'DESC',
)

$ query = new WP_Query ($ args);

ob_start ();

while ($ query-> have_posts ()):
$ query-> the_post (); ?>

			

			
			
			
			Par  sur 

		<? php endwhile;

wp_reset_postdata ();

return ob_get_clean ();

Notes sur l'étape 9

Je soupçonne que notre appel à la date() ne fonctionne pas comme je le souhaite, alors je lance une recherche Google sur «wordpress the_date». Je commence par la page officielle: https://developer.wordpress.org/reference/functions/the_date/ Cela ne fonctionne pas. dis moi beaucoup. Je vois aussi https://wordpress.stackexchange.com/questions/52489/the-date-not-working, et je me penche sur la question.

Il se trouve que la date() montrera seulement un post par date. S'il y a deux publications avec la même date de publication, cela cesse de fonctionner. Et il s'avère également que get_the_date () n’a pas ce problème, alors je change cette ligne de code de la date(); à echo get_the_date ();.

Est-ce un problème étrange à avoir? Extrêmement. Je ne sais pas pourquoi la date() serait codé de cette manière à moitié cassée, ou pourquoi get_the_date () ne partagerait pas le problème. Mais exécuter le nouveau code nous donne ceci:

Et c’est exactement ce que nous recherchons.

Réflexions générales sur le développement de plugins WordPress

Le travail ci-dessus m'a pris environ deux heures. Est-ce beaucoup ou un peu? Il serait long de taper le code de plug-in de travail une fois que vous savez l'écrire, mais c'est exactement ce qui convient pour le développement de plug-in WordPress, à savoir l'apprentissage, l'expérimentation, la recherche et les essais et erreurs.

Au cours de ces deux heures, j'ai fait énormément des choses suivantes:

• S'appuyant sur une connaissance approfondie des principales fonctionnalités de PHP et des principales API WordPress.
• Googler des choses que j'ai oubliées ou que je ne savais pas faire.
• Faire des erreurs.
• Erreurs de débogage.

Et dans ces deux heures, j'ai fait aucun des choses suivantes:

• Écrire un code qui repose sur le fait que le codeur est vraiment intelligent plutôt que sur des connaissances approfondies.
• S'appuyant sur des outils, des langages ou des «hacks» super obscurs que seuls les enfants cools connaissent.

C’est ainsi que le développement du plugin WordPress est …surtout pour des plugins relativement simples comme celui-ci qu'un pigiste écrirait pour un seul client. Il s’agit d’exploiter vos connaissances existantes pour réaliser des tâches simples et savoir comment acquérir et combiner de nouvelles connaissances pour réaliser des tâches difficiles, tout en testant et en corrigeant en permanence les erreurs qui surviennent, à la fois celles que vous causez et celles PHP et WordPress cause (le meilleur exemple ci-dessus est notre la date() problème) en étant parfois des systèmes logiciels étranges.

Merci d'avoir lu! Nous aimerions entendre vos pensées et vos questions ci-dessous ou dans notre groupe Facebook.

Excellent contenu d'apprentissage WordPress