Aller au contenu

Comment créer l’interface d’administration d’un plugin d’une extension wordpress

On continue ensemble sur la création d’un plugin WordPress.

Aujourd’hui apprenez à créer l’interface d’administration du plugin WordPress.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]*

Comment créer l’interface d’administration d’un plugin d’une extension wordpress

 

Bonjour et bienvenu sur Développement Facile.

Ici Matthieu expert en développement applicatif, donc vous allez continuer cette série de cours dédiée à la création d’un plug-in WordPress, en l’occurrence ce plug-in WordPress qui affiche le nombre, qui interagit avec l’API AWeber pour afficher le nombre d’inscrits, il s’occupe de récupérer des fichiers JSON pour chaque liste et de cumuler le nombre d’inscrits pour afficher ce chiffre-là, donc dans ce cours vous allez tout simplement apprendre à créer l’interface d’administration avec le menu, la connexion à l’API AWeber pour ensuite effectuer un affichage tout simplement du nombre d’inscrits ici.

 

Alors comment ça se passe ?

Comme je vous l’ai dit déjà vous devez définir une arborescence, l’arborescence de votre projet, de votre plugin WordPress, comme vous avez appris à utiliser la méthode Développement Facile, il y a une partie qui est création d’arborescence, qui vous encourage à utiliser des modèles de conceptions quand c’est nécessaire, la programmation orientée objet, et la programmation événementielle. Là c’est très important, vous avez l’API AWeber qui est ici, que vous allez utiliser vos classes, donc les classes pour la partie client et les classes pour la partie administration, ensuite les vues, tout ce qui gère la partie administration, la partie client, donc l’affichage, des fonctions communes si c’est nécessaire et les langues pour l’internationalisation de votre plugin.

 

Tout part de ce fichier qui porte le nom de l’extension tout simplement. Alors comment créer la partie administration ?

Dans le cours précédent vous avez vu les constantes, le chargement de fichiers inclut, donc la partie administration, donc c’est assez l’initialisation du plug-in AWeber et si on doit charger l’administration donc si vous êtes administrateur votre site Word presse vous allez créer une nouvelle instance de la classe, gestion de l’administration tout simplement dans une globale ici vous ajoutez le menu, donc pour créer le menu ici donc toutes les options du plug-in très important, vous allez utiliser une fonctionnalité de Word presse où on peut enregistrer des paramètres tout simplement donc là il y a différents paramètres qui vont avec le plug-in et vous ajoutez le menu dans les réglages qui s’appel A W AWeber Dev Facile dans les réglages, vous avez ici dans les réglages, le menu AWeber Dev Facile tout simplement dans les réglages.

 

Après comment ça se passe ?

Une fois que vous avez fait ça, vous allez afficher votre page, donc vous ajoutez votre menu qui va appeler une fonction pour gérer l’affichage de votre page et là magie, enfin c’est pas de la magie, de la méthode développement facile, vous récupérez l’instance de votre classe, vous avez une méthode, connexion sur le compte AWeber et ça va construire toute cette interface, ici, plus important la partie connexion de compte AWeber.

 

Comment ça se passe ?

Vous avez l’identifiant de l’API en fait de votre application AWeber, des propriétés de la classe et vous initialisez tout ça, là c’est de l’affichage, un simple écho avec l’internationalisation, ça affichera en anglais sur les blogs en anglais, et en français sur les blogs en français, dans un prochain cours vous découvrirez comment internationaliser votre plugin.

 

Ca c’est pour ajouter en fait, vous allez créer un formulaire, ça c’est tout simplement un formulaire qui s’occupe de mettre à jour les options avec votre plug-in donc les options Word presse qui sont avec votre plugin, donc on va faire une mise à jour d’options et là, vous ajoutez vos champs donc votre formulaire tout simplement, vous récupérez les options de connexion AWeber ici que vous avez enregistré et la ça va vous permettre de créer les champs d’options, de les récupérer directement et en fonction, soit l’autorisation avec AWeber est enlevée, ou elle a été faite, ou l’utilisateur, l’administrateur a cliqué sur le bouton supprimer la connexion ici et donc vous allez mettre tout simplement à jour les différents éléments.

 

Et donc là, la connexion AWeber elle a été sauvegardée, donc vous êtes en phase de sauvegarde, avant vous avez le token à rajouter donc ça je vous ai montré dans le cours précédent, je vous remontre ici, cliquez ici pour obtenir votre code d’autorisation AWeber, vous avez votre token ici que vous collez ici, donc c’est tout simplement ce formulaire, la page va être chargée, ça a mis à jour toutes les options, et donc on arrive ici, et là on récupère ses différentes options la clé, la clé secrète, la clé d’accès, la clé secrète d’accès, et les stocks tout simplement dans les settings AWeber, donc là c’est si on les stocks, on les enregistre, on fait un update options donc si vous utilisez justement les paramètres de configuration de stockage WordPress, il suffit de faire un update option donc je répète ici, vous récupérer des options que vous avez enregistré dans WordPress, dans la base de données Word presse des options, pour les mettre à jour tout simplement, donc là au moment où vous créez votre formulaire ici, et ensuite pour les modifier donc là le formulaire est validé par l’utilisateur, il est rappelé, vous les récupérez avec liste get data on AWeber via votre clé d’authentification, et ensuite vous enregistrez, c’est un tableau tout simplement et vous mettez à jour toutes les options et donc vu que c’est un tableau vous avez accès key, consult key vous pouvez récupérer directement ici, ou vous faites alors un extract, et un extract que ça va vous donner dollars access key, dollar secret key donc très pratique extract, vous donnez votre option Word presse, vu que c’est un tableau il va vous sortir, créer des variables par champ de votre tableau, par clé de votre tableau. Vous avez toutes les variables qui sont créées, vous interrogez l’API WordPress d’AWeber, tout simplement, l’API AWeber pour l’affichage dans Word presse et en fonction des messages, soit il y a une erreur, vous vous êtes pas bien connecté à l’API AWeber, soit vous êtes bien connectés, vous êtes autorisé et vous affichez tout simplement les options que vous souhaitez.

 

Là on quand on est bien connecté à l’API AWeber, on affiche un bouton supprimer la connexion AWeber, le plug-in va avoir des options plus tard, donc ça vous allez le voir comment le développer donc vous faites, ça c’est les formulaires c’est la partie, c’est cette partie-là, lisez ceci avec le formulaire AWeber avec le formulaire d’enregistrement prénom, adresse e-mail, et le texte c’est aussi simple que ça, vous avez deux échos donc là c’est la connexion qui a réussie, le titre donc le titre c’est tout simplement lisez ceci, le texte en dessous, le texte donc c’est deux simples échos avec l’internationalisation du plugin, c’est hyper simple, et l’affichage du formulaire.

 

Voilà vous avez créé votre zone d’administration, là c’est pour désautoriser le compte tout simplement lorsque l’utilisateur clique ici pour supprimer la connexion, on enlève l’autorisation de connexion à l’api AWeber, tout simplement on appelle ce fichier, ce cette fonction pardon, qui est ici, on récupère les options d’administration, getOptionMain, on met tableau annule que les valeurs à zéro, on met à jour les options, on delete les autres options donc ça c’est pour supprimer des options de WordPress qui sont avec votre plugin et voilà c’est fini, donc vous avez tout simplement créé la partie administration donc une nouvelle zone d’administration dans Word presse, donc dans les réglages WordPress vous avez le plugin AWeber Dev facile qui s’affiche, c’est aussi simple ça que ça.

 

Donc comme dans le précédent cours, si vous voulez code source bien évidemment, pour vous en inspirer dans vos créations de plug-in WordPress, sous cette vidéo il y a tout simplement un lien qui redirige vers le répertoire officiel Word Presse et vous pouvez télécharger l’extension, l’installer sur votre blog WordPress et avoir accès à tout le code source pour à votre tour, vous en inspirer et créer vos propres extensions, donc sous ce cours vidéo vous avez le lien vers le plug-in WordPress pour pouvoir récupérer le code source, c’est aussi simple que ça.

 

Maintenant je vous invite directement sous ce cours vidéo, vous renseignez votre prénom, votre adresse mail, vous cliquez sur recevoir et vous allez rejoindre les plus de 5000 développeurs qui suivent les cours développement facile donc gratuitement vous allez recevoir des cours, donc il y a plus de 434 cours vidéo entièrement gratuits et vous allez en bénéficier pour apprendre à créer des applications performantes. Et si vous voulez aller beaucoup plus loin, beaucoup plus rapidement, accélérer votre apprentissage du développement facile, juste au-dessus de cours il y a une bannière, donc une image, vous cliquez dessus et vous serez redirigés vers la deuxième page, la deuxième vidéo ou vous allez découvrir la méthode développement facile de A à Z, donc comment créer deux à trois fois plus rapidement des applications performantes tout simplement, comment utiliser le même code source pour déployer votre application sur le Web, sur les Smartphones, iPhone, Android sur les tablettes iPad, Android, Windows Phone, donc tout ça à partir du même code source, vous allez à apprendre à utiliser les modèles de conceptions donc tout ça c’est dans la deuxième vidéo, cliquez simplement sur le lien juste au-dessus de cette vidéo, et bien évidemment les experts développement facile vous accompagnent personnellement, individuellement pour répondre à toutes vos questions.

Si vous avez des questions sur telle ou telle partie du cours, les experts en développement, développement facile donc vous répondent en corrigeant votre code source pour qu’il fonctionne avec votre projet, le projet sur lequel vous travaillez actuellement, et il vous vous explique tout dans le détail pour que vous puissiez assimiler ce nouveau concept et le mettre en œuvre dans votre développement très rapidement et en règle générale les experts développement facile vous apportent même des exemples de code supplémentaire, tout ça est dans la deuxième vidéo, la deuxième page cliquez simplement sur la bannière juste au-dessus de ce cours, je vous retrouve tout de suite dans la deuxième vidéo à tout de suite.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source du plug-in WordPress

Cliquez ici pour télécharger le Plugin AWeber Dev Facile

 

Quel sont les plugin WordPress que vous utilisez le plus ?

Utilisez la zone commentaire pour poser vos questions sur le cours vidéo

 

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>