Sådan oprettes et WordPress-plugin til din webapp

I dag skal vi se, hvordan man opretter et meget simpelt WordPress-plugin til enhver webapp, der skal indsætte et stykke kode på dit websted.

For at følge denne vejledning har du brug for noget kendskab til disse grundlæggende:

  • PHP og OOP
  • JavaScript (vi bruger jQuery og Ajax)
  • WordPress-udvikling (da de fleste funktioner er fra WordPress-kernen).

Du kan finde et fungerende resultat af denne vejledning på dette Github-arkiv.

Disse webapps kan være hvad som helst, som CrazyEgg, Freshbook, Google Analytics, Facebook Pixel eller Feedier. Hvorfor? De har alle brug for at indsprøjte nogle HTML / JavaScript-koder til dit websted til forskellige formål.

Denne "kode" parametriseres altid med variabler og er normalt en smerte for webstedsejeren. Dette skyldes, at du skal redigere temaets skabeloner. Så hvad med at vi opretter et plugin til at gøre det for os? Okay, lad os gøre det!

Trin 1: Find din webapp

Målet med denne vejledning er at oprette et WordPress-plugin, der tilføjer en WordPress-admin-side. Plus, vi tilføjer også nogle indstillinger for at konfigurere appens in-site-widget og indsprøjte HTML / JS-koden automatisk på vores webside. Intet fancy, bare noget, der fungerer fint.

Bemærk: vi har brug for en webapplikation til denne tutorial. Vi bruger Feedier til dette eksempel. Men hvis du har en anden webapplikation, som du gerne vil bruge i denne vejledning, skal du gøre det. Omdøb bare alt, hvad der hedder "feedier" med din apps navn, og tilpas indstillingerne til det, den app har brug for. De fleste af dem giver dig et uddrag, du kan tilføje til dit websted for at få det til at fungere.

Her er en hurtig briefing af Feedier, hvis du aldrig har hørt om det:

  • Det er et feedbackindsamlingsværktøj, der bruger undersøgelser til at forstå dine brugere
  • Det er meget fleksibelt
  • Det er gratis!
  • Har en god API (meget vigtigt her)
  • Har en widget på stedet (meget vigtigt her)
  • Giver dig mulighed for at belønne dine kunder
  • Giver dig mulighed for at oprette betingede spørgsmål
  • Har et komplet analytisk rapport dashboard
  • Giver dig mulighed for at administrere feedback individuelt

Her er den widget, vi automatisk vil tilføje:

Hvis du tilmeldte dig Feedier, kan du blot finde koden i fanen Del i din undersøgelse:

Trin 2: Opsæt vores plugin og dets arkitektur

WordPress-plugin er af design meget simpelt. Vores plugin har kun brug for to filer.

  • feedier.php : hovedplugins PHP-fil.
  • assets / js / admin.js : JavaScript-script for at gemme indstillingerne ved hjælp af Ajax.

Du kan oprette en ny "feedier" -mappe (eller navnet på din webapp) i dit wp-indhold / plugins / mappe.

Den vigtigste fil er plugins feedier.php- klasse. Her er dens struktur:

Vi laver et par ting her:

  • Erklærer vores plugin ved hjælp af headerkommentarer
  • Definition af et par praktiske konstanter for nemt at kunne finde plugins URL og PATH
  • Erklærer vores plugin-klasse, der indeholder alt, hvad vi har brug for i dette plugin. Vi har bare brug for en konstruktormetode indtil videre.

Du burde allerede se pluginet på din Plugins-side, selvom det endnu ikke gør noget:

Trin 3: Opret vores admin-side

For denne del vil vi tilføje en ny Feedier-admin-side til vores WordPress-websted og hente vores undersøgelser dynamisk fra Feediers API.

Lad os i vores klasses konstruktør registrere tre nye handlinger, der kræves for at tilføje en admin-side på WordPress:

  • addAdminMenu tilføjer en ny side i WordPress venstre menu. Der vil også være et tilbagekald til en anden metode, der indeholder sidens indhold.
  • storeAdminData kaldes, når brugeren klikker på knappen "Gem indstillinger".
  • addAdminScripts registrerer en ny JavaScript-fil til vores WordPress-administrator for at gemme formularens data. Men det udveksler også nogle variabler mellem PHP-siden og JavaScript-siden.

Det første trin er meget let. Vi registrerer bare siden sådan:

Som du kan se, bruger vi WordPress-lokaliseringsfunktioner til alle strenge. Bemærk, at

array($this, ‘adminLayout’)

er, hvor vi kalder en anden metode, der indeholder sidens indhold. Formularen skal tilpasses din webapp.

Her skal vi først hente de offentlige og private Feedier API-nøgler. Når vi er gemt, skal vi bruge den private nøgle til dynamisk at hente vores undersøgelser. Hver gang vi får undersøgelserne og ikke en API-fejl, viser vi nogle nye muligheder for at konfigurere widgeten.

I begyndelsen af ​​denne metode kan du se, at vi først får de gemte data med:

$data = $this->getData();

Og få undersøgelserne fra Feedier API:

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

Så lad os erklære den første:

Denne funktion læser bare vores plugins mulighed og giver os et array tilbage, så vi kan gemme flere værdier i den samme mulighed.

For at få den anden metode til at fungere har vi brug for den private Feedier-nøgle. Dette afhænger af den første, der får adgang til denne nøgle, der er gemt i indstillingen:

Feedier API er dokumenteret her, så du kan se, hvad du får i svaret.

I øjeblikket har vi en komplet ny administrator side. Men der sker ikke noget, når vi klikker på Gem-knappen, fordi der er ingen besparelse mekanisme - endnu .

God nok, lad os gemme vores data!

Som tidligere nævnt gemmer vi vores data ved hjælp af AJAX. Derfor er vi nødt til at registrere en ny JavaScript-fil og udveksle data ved hjælp af funktionen wp_localize_script ():

Vi skal også tilføje en ny fil /assets/js/admin.js . Det vil simpelthen foretage et Ajax-opkald, og WordPress dirigerer anmodningen automatisk korrekt til den rigtige metode (allerede gjort i konstruktøren). Du kan læse mere om, hvordan WordPress smart håndterer AJAX-anmodninger her.

I dette øjeblik kan vi klikke på knappen Gem, og ovenstående script vil sende en HTTP POST-anmodning til WordPress. Vi tilføjer også en handlingsparameter, der indeholder: store_admin_data (som vi i begyndelsen erklærede i denne del i konstruktøren):

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

Metoden storeAdminData modtager anmodningen POST og gemme de værdier, vi har brug for i vores WordPress mulighed.

Et par bemærkninger til ovenstående metode:

  • Vi bruger en “WordPress nonce” til at håndtere sikkerheden og sørge for, at dette kommer fra hjemmesiden og ikke en hacker, der falsker anmodningen.
  • Vi identificerer de felter, vi har brug for at gemme, ved hjælp af et "feedier_" -præfiks. Når de er modtaget, løber vi gennem alle $ _POST-dataene og gemmer kun disse felter. Vi fjerner også præfikset, inden vi gemmer hvert felt.

Det er det til spareprocessen. Når vi klikker på Gem, kan vi se en POST-anmodning, og vores data gemmes i databasen inden for wp_options- tabellen.

Perfekt, vi er færdige med admin-siden.

Trin 4: Indsæt automatisk den dynamiske kode på vores sider

Nu hvor vi har gemt vores muligheder, kan vi oprette en dynamisk widget, der afhænger af de indstillinger, der er indstillet af brugeren på vores admin-side. Vi ved allerede, hvad webappen forventer af os.

Noget som:


    

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 ?

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.