Hogyan készítsünk WordPress beépülő modult a webalkalmazáshoz

Ma meg fogjuk tudni, hogyan hozhatunk létre egy nagyon egyszerű WordPress plugint minden olyan webalkalmazáshoz, amelynek be kell illesztenie egy darab kódot a webhelyére.

Az oktatóanyag követéséhez ismernie kell ezeket az alapokat:

  • PHP és OOP
  • JavaScript (a jQuery-t és az Ajax-ot fogjuk használni)
  • WordPress fejlesztés (mivel a legtöbb funkció a WordPress magjából származik).

Ezen oktatóanyag működési eredményeit ezen a Github-táron találja meg.

Ezek a webalkalmazások bármi lehetnek, például CrazyEgg, Freshbook, Google Analytics, Facebook Pixel vagy Feedier. Miért? Mindegyiknek HTML / JavaScript kódot kell beadnia a webhelyére különféle célokból.

Ez a „kód” mindig változókkal van paraméterezve, és általában a webhely tulajdonosának okoz fájdalmat. Ennek oka az, hogy szerkesztenie kell a téma sablonjait. Szóval, mi lenne, ha létrehoznánk egy plugint, amely ezt megteszi helyettünk? Oké, csináljuk!

1. lépés: Keresse meg webalkalmazását

A bemutató célja egy WordPress beépülő modul létrehozása, amely hozzáad egy WordPress adminisztrációs oldalt. Ezenkívül néhány beállítást hozzáadunk az alkalmazás belső widgetjének konfigurálásához, és automatikusan beírjuk a HTML / JS kódot a weboldalunkba. Semmi divatos, csak valami jól működik.

Kérjük, vegye figyelembe: ehhez az oktatóanyaghoz webes alkalmazásra van szükségünk. Ebben a példában a Feedier-t fogjuk használni. Ha azonban van egy másik webalkalmazása, amelyet használni szeretne ebben az oktatóanyagban, kérjük, tegye meg. Csak nevezzen át bármit „feedier” néven az alkalmazás nevével, és igazítsa a beállításokat az alkalmazás igényeinek megfelelően. Legtöbbjük ad egy részletet, amelyet hozzáadhat a webhelyéhez annak működése érdekében.

Itt van egy rövid tájékoztató a Feedierről, ha még soha nem hallott róla:

  • Ez egy visszajelzés-gyűjtő eszköz, amely felmérések segítségével érti meg felhasználóit
  • Nagyon rugalmas
  • Ez ingyenes!
  • Jó API-val rendelkezik (itt nagyon fontos)
  • Van helyszíni widgetje (itt nagyon fontos)
  • Jutalmazhatja meg ügyfeleit
  • Feltételes kérdéseket hozhat létre
  • Teljes analitikai jelentés-irányítópulttal rendelkezik
  • Lehetővé teszi a visszajelzések egyedi kezelését

Itt van az a widget, amelyet automatikusan hozzá akarunk adni:

Ha feliratkozott a Feedier szolgáltatásra, egyszerűen megtalálja a kódot a felmérés Megosztás lapján:

2. lépés: Állítsa be bővítményünket és architektúráját

A WordPress beépülő modul nagyon egyszerű. A beépülő modulunknak csak két fájlra lesz szüksége.

  • feedier.php : a fő plugin PHP fájlja.
  • asset / js / admin.js : JavaScript szkript az opciók mentéséhez az Ajax használatával.

Létrehozhat egy új „feedier” könyvtárat (vagy a webalkalmazás nevét) a wp-content / plugins / mappában.

A legfontosabb fájl a plugin feedier.php osztálya lesz. Itt van a felépítése:

Néhány dolgot csinálunk itt:

  • Bővítményünk deklarálása a fejléc megjegyzései segítségével
  • Néhány praktikus konstans meghatározása a plugin URL-jének és PATH-jának egyszerű megtalálásához
  • Kijelentjük a plugin osztályunkat, amely mindent tartalmaz, amire szükségünk van ebben a bővítményben. Csak egy konstruktor módszerre van szükségünk.

Már látnia kell a beépülő modult a Bővítmények oldalon, annak ellenére, hogy még nem csinál semmit:

3. lépés: Hozza létre az admin oldalunkat

Ehhez a részhez hozzáadunk egy új Feedier adminisztrációs oldalt a WordPress webhelyhez, és dinamikusan lekérjük felméréseinket a Feedier API-jából.

Osztályunk konstruktorában regisztráljunk három új műveletet, amelyek szükségesek egy adminisztrációs oldal hozzáadásához a WordPress-be:

  • Az addAdminMenu új oldalt ad hozzá a WordPress bal oldali menüjéhez. Visszahívást kapunk egy másik módszerre is, amely tartalmazza az oldal tartalmát.
  • A storeAdminData minden alkalommal meghívásra kerül, amikor a felhasználó a „Beállítások mentése” gombra kattint.
  • Az addAdminScripts új JavaScript fájlt regisztrál a WordPress adminisztrátorunkhoz az űrlap adatainak mentése érdekében. De cserél néhány változót a PHP és a JavaScript oldal között is.

Az első lépés nagyon egyszerű. Csak regisztráljuk az oldalt, így:

Mint látható, a WordPress lokalizációs függvényeket használjuk az összes karakterlánchoz. Vegye figyelembe, hogy a

array($this, ‘adminLayout’)

itt nevezzük az oldal tartalmát tartalmazó másik módszert. Az űrlapot hozzá kell igazítani a webalkalmazáshoz.

Itt először meg kell szereznünk a nyilvános és a privát Feedier API kulcsokat. A mentés után a privát kulcsot használjuk felméréseink dinamikus lekéréséhez. Amikor felméréseket kapunk, és nem API hibát kapunk, megjelenítünk néhány új lehetőséget a modul konfigurálására.

A módszer elején láthatja, hogy a mentett adatokat először a következőkkel kapjuk meg:

$data = $this->getData();

És a felmérések beszerzése a Feedier API-tól:

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

Nyilatkozjuk tehát az elsőt:

Ez a függvény csak elolvassa a bővítmény opcióját, és visszaad egy tömböt, így több értéket is menthetünk ugyanabban az opcióban.

A második módszer működéséhez szükségünk van a Feedier privát kulcsra. Ez attól függ, hogy az első hozzáférhet-e ehhez a lehetőséghez mentett kulcshoz:

A Feedier API itt van dokumentálva, így láthatja, mit fog kapni a válaszban.

Ebben a pillanatban egy teljesen új Rendszergazda oldalunk van. De semmi sem történik, amikor kattintson a Mentés gombra, mert nincs megtakarítás mechanizmus - még .

Elég jó, mentsük az adatainkat!

Mint korábban említettük, adatainkat az AJAX használatával mentjük. Ezért regisztrálnunk kell egy új JavaScript fájlt, és adatokat kell cserélnünk a wp_localize_script () függvény segítségével:

Hozzá kell adnunk egy új fájlt /assets/js/admin.js . Ez egyszerűen Ajax hívást indít, és a WordPress automatikusan átirányítja a kérést a megfelelő módszerre (a konstruktorban már megtörtént). Itt többet olvashat arról, hogy a WordPress okosan kezeli az AJAX kéréseket.

Ebben a pillanatban rákattinthatunk a Mentés gombra, és a fenti szkript HTTP POST kérést küld a WordPress számára. Csatolunk egy műveleti paramétert is, amely a következőt tartalmazza: store_admin_data (amelyet a konstruktor ezen részének elején deklaráltunk):

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

A storeAdminData metódus megkapja a POST kérést és elmenti a szükséges értékeket a WordPress opciónkba .

Néhány megjegyzés a fenti módszerről:

  • A biztonság kezeléséhez egy „WordPress nonce” -t használunk, és ellenőrizzük, hogy ez a webhelyről származik-e, és nem egy hacker hamisítja a kérést.
  • A mentéshez szükséges mezőket „feedier_” előtaggal azonosítjuk. Miután megkapta, végignézzük az összes $ _POST adatot, és csak ezeket a mezőket mentjük el. Minden mező mentése előtt eltávolítjuk az előtagot is.

Ennyi a megtakarítási folyamat. Amikor a Mentés gombra kattintunk, láthatjuk, hogy a POST kérés és az adataink az adatbázisban vannak mentve a wp_options táblázatban.

Tökéletes, elkészültünk az admin oldallal.

4. lépés: Helyezze be automatikusan a dinamikus kódot az oldalunkba

Most, hogy mentettük az opcióinkat, létrehozhatunk egy dinamikus modult, amely a felhasználó által az admin oldalunkon keresztül beállított lehetőségektől függ. Már tudjuk, mit vár tőlünk a webalkalmazás.

Valami hasonló:


    

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.