Comment créer un plugin WordPress pour votre application Web

Aujourd'hui, nous allons voir comment créer un plugin WordPress très simple pour toute application Web qui a besoin d'insérer un morceau de code sur votre site.

Pour suivre ce tutoriel, vous avez besoin de quelques connaissances sur ces bases:

  • PHP et POO
  • JavaScript (nous utiliserons jQuery et Ajax)
  • Développement WordPress (car la plupart des fonctions proviennent du cœur de WordPress).

Vous pouvez trouver un résultat fonctionnel de ce tutoriel sur ce référentiel Github.

Ces applications Web peuvent être n'importe quoi, comme CrazyEgg, Freshbook, Google Analytics, Facebook Pixel ou Feedier. Pourquoi? Ils ont tous besoin d'injecter du code HTML / JavaScript sur votre site à des fins diverses.

Ce «code» est toujours paramétré avec des variables, et est généralement pénible pour le propriétaire du site. En effet, vous devez modifier les modèles du thème. Alors, que diriez-vous de créer un plugin pour le faire pour nous? Ok, faisons-le!

Étape 1: recherchez votre application Web

Le but de ce tutoriel est de créer un plugin WordPress qui ajoute une page d'administration WordPress. De plus, nous ajouterons également des paramètres pour configurer le widget sur site de l'application et injecter automatiquement le code HTML / JS dans notre page Web. Rien d'extraordinaire, juste quelque chose qui fonctionne bien.

Remarque: nous avons besoin d'une application Web pour ce tutoriel. Nous utiliserons Feedier pour cet exemple. Toutefois, si vous avez une autre application Web que vous souhaitez utiliser dans ce didacticiel, veuillez le faire. Renommez simplement tout ce qui est nommé «feedier» avec le nom de votre application et adaptez les paramètres aux besoins de cette application. La plupart d'entre eux vous donneront un extrait de code à ajouter à votre site afin de le faire fonctionner.

Voici un bref briefing de Feedier si vous n'en avez jamais entendu parler:

  • C'est un outil de collecte de commentaires, utilisant des sondages pour comprendre vos utilisateurs
  • C'est très flexible
  • C'est gratuit!
  • A une bonne API (très important ici)
  • Dispose d'un widget sur site (très important ici)
  • Vous permet de récompenser vos clients
  • Permet de créer des questions conditionnelles
  • Dispose d'un tableau de bord de rapport analytique complet
  • Vous permet de gérer les commentaires individuellement

Voici le widget que nous voulons ajouter automatiquement:

Si vous vous êtes inscrit à Feedier, vous pouvez simplement trouver le code dans l'onglet Partager de votre enquête:

Étape 2: Configurer notre plugin et son architecture

Les plugins WordPress sont de par leur conception très simples. Notre plugin n'aura besoin que de deux fichiers.

  • feedier.php : fichier PHP du plugin principal.
  • assets / js / admin.js : script JavaScript pour enregistrer les options en utilisant Ajax.

Vous pouvez créer un nouveau répertoire «feedier» (ou le nom de votre application Web) dans votre dossier wp-content / plugins / .

Le fichier le plus important sera la classe feedier.php du plugin . Voici sa structure:

Nous faisons quelques choses ici:

  • Déclarer notre plugin en utilisant les commentaires d'en-tête
  • Définition de quelques constantes pratiques pour pouvoir trouver facilement l'URL et le PATH du plugin
  • Déclarer notre classe de plugin qui contiendra tout ce dont nous avons besoin dans ce plugin. Nous avons juste besoin d'une méthode constructeur pour le moment.

Vous devriez déjà voir le plugin dans votre page Plugins, même s'il ne fait encore rien:

Étape 3: Créez notre page d'administration

Pour cette partie, nous allons ajouter une nouvelle page d'administration Feedier à notre site WordPress et récupérer dynamiquement nos enquêtes depuis l'API de Feedier.

Dans le constructeur de notre classe, enregistrons trois nouvelles actions nécessaires pour ajouter une page d'administration sur WordPress:

  • addAdminMenu ajoutera une nouvelle page dans le menu de gauche de WordPress. Il y aura également un rappel vers une autre méthode contenant le contenu de la page.
  • storeAdminData sera appelé chaque fois que l'utilisateur cliquera sur le bouton «Enregistrer les paramètres».
  • addAdminScripts enregistrera un nouveau fichier JavaScript auprès de notre administrateur WordPress afin de sauvegarder les données du formulaire. Mais il échange également certaines variables entre le côté PHP et le côté JavaScript.

La première étape est très simple. Nous enregistrons simplement la page, comme ceci:

Comme vous pouvez le voir, nous utilisons les fonctions de localisation de WordPress pour toutes les chaînes. Notez que le

array($this, ‘adminLayout’)

est l'endroit où nous appelons une autre méthode contenant le contenu de la page. Le formulaire doit être adapté à votre application Web.

Ici, nous devons d'abord obtenir les clés API Feedier publiques et privées. Une fois sauvegardés, nous allons utiliser la clé privée pour récupérer dynamiquement nos enquêtes. Chaque fois que nous obtenons les sondages et non une erreur d'API, nous affichons de nouvelles options pour configurer le widget.

Au début de cette méthode, vous pouvez voir que nous obtenons d'abord les données enregistrées avec:

$data = $this->getData();

Et obtenir les enquêtes de l'API Feedier:

$surveys = $this->getSurveys($data[‘private_key’]);

Alors déclarons le premier:

Cette fonction lit simplement l'option de notre plugin et nous renvoie un tableau afin que nous puissions enregistrer plusieurs valeurs dans la même option.

Pour que la deuxième méthode fonctionne, nous avons besoin de la clé privée Feedier. Cela dépend du premier à accéder à cette clé enregistrée dans l'option:

L'API Feedier est documentée ici, vous pouvez donc voir ce que vous obtiendrez dans la réponse.

En ce moment, nous avons une nouvelle page d'administration complète. Mais rien ne se passe lorsque nous cliquons sur le bouton Enregistrer, car il n'y a pas encore de mécanisme de sauvegarde .

Assez bien, sauvegardons nos données!

Comme mentionné précédemment, nous enregistrerons nos données en utilisant AJAX. Par conséquent, nous devons enregistrer un nouveau fichier JavaScript et échanger des données à l'aide de la fonction wp_localize_script ():

Nous devons également ajouter un nouveau fichier /assets/js/admin.js . Cela fera simplement un appel Ajax, et WordPress acheminera automatiquement la requête correctement vers la bonne méthode (déjà effectuée dans le constructeur). Vous pouvez en savoir plus sur la façon dont WordPress gère intelligemment les demandes AJAX ici.

À ce moment précis, nous pouvons cliquer sur le bouton Enregistrer et le script ci-dessus fera une requête HTTP POST à ​​WordPress. Nous ajoutons également un paramètre d'action contenant: store_admin_data (que nous avons déclaré au début à cette partie dans le constructeur):

add_action( ‘wp_ajax_store_admin_data’, array( $this, ‘storeAdminData’ ) );

La méthode storeAdminData recevra la requête POST et enregistrera les valeurs dont nous avons besoin dans notre option WordPress.

Quelques notes sur la méthode ci-dessus:

  • Nous utilisons un «nonce WordPress» pour gérer la sécurité et nous assurer que cela provient du site Web et non d'un pirate informatique simulant la demande.
  • Nous identifions les champs que nous devons sauvegarder en utilisant un préfixe «feedier_». Une fois reçus, nous parcourons toutes les données $ _POST et ne sauvegardons que ces champs. Nous supprimons également le préfixe avant d'enregistrer chaque champ.

C'est tout pour le processus de sauvegarde. Lorsque nous cliquons sur Enregistrer, nous pouvons voir une requête POST et nos données en cours d'enregistrement dans la base de données dans la table wp_options .

Parfait, nous en avons terminé avec la page d'administration.

Étape 4: Insérez automatiquement le code dynamique dans nos pages

Maintenant que nos options sont enregistrées, nous pouvons créer un widget dynamique qui dépendra des options définies par l'utilisateur via notre page d'administration. Nous savons déjà ce que l'application Web attend de nous.

Quelque chose comme:

Thus, the first thing we want to do is to create a new method to our plugin that will print this code depending on the variables set by the user. So, using the architecture we already set up in the last part:

Now, we just need to call this function on every page load to add it at the bottom of the page. To do this, we’ll hook our method to the wp_footer action. By registering a new action into our class’ constructor:

That’s it!

Any questions, feedback, or ideas? Let me know in the comments!

You can find a working version of this tutorial on this Github repository.

2Fwebd/feedier-wordpress-plugin

Contribute to feedier-wordpress-plugin development by creating an account on GitHub.pxlme.me

Note that this is first version of the plugin, and many things can be improved. I’m open to suggestions and improvements. ?

We are building Feedier. It becomes a no-brainer to collect feedback and build relationships with your customers!

Feedier - Next generation feedback

Meet Feedier, the next generation customer feedback software that lets you collect valuable feedback. Reward, engage…feedier.com

Convinced? Sign up for free at feedier.com ?

Original text


Don’t forget to clap our article and subscribe to get more amazing articles if you liked it?. You can also find us on Twitter.

This article was initially published on our blog here.