Kako stvoriti WordPress dodatak za svoju web aplikaciju

Danas ćemo vidjeti kako stvoriti vrlo jednostavan dodatak za WordPress za bilo koju web aplikaciju koja treba umetnuti dio koda na vašu web lokaciju.

Da biste slijedili ovaj vodič, trebate neko znanje ovih osnova:

  • PHP i OOP
  • JavaScript (koristit ćemo jQuery i Ajax)
  • Razvoj WordPressa (jer je većina funkcija iz jezgre WordPressa).

Rezultat ovog vodiča možete pronaći na ovom Github-ovom spremištu.

Te web aplikacije mogu biti bilo što, poput CrazyEgg, Freshbook, Google Analytics, Facebook Pixel ili Feedier. Zašto? Svi oni trebaju ubrizgati neki HTML / JavaScript kôd na vaše web mjesto u razne svrhe.

Ovaj se "kod" uvijek parametrizira s varijablama i obično je muka za vlasnika web mjesta. To je zato što morate urediti predloške teme. Pa, kako bi bilo da stvorimo dodatak koji će to učiniti za nas? U redu, učinimo to!

1. korak: Pronađite svoju web aplikaciju

Cilj ovog vodiča je stvoriti WordPress dodatak koji dodaje WordPress stranicu administratora. Uz to ćemo dodati i neke postavke za konfiguriranje widgeta aplikacije na web mjestu i automatsko ubrizgavanje HTML / JS koda u našu web stranicu. Ništa otmjeno, samo nešto što dobro funkcionira.

Imajte na umu: potrebna nam je web aplikacija za ovaj vodič. Za ovaj ćemo primjer upotrijebiti Feedier. Međutim, ako imate drugu web aplikaciju koju biste željeli koristiti u ovom vodiču, učinite. Samo preimenujte sve što se zove "feedier" imenom aplikacije i prilagodite postavke onome što ta aplikacija treba. Većina njih dat će vam isječak koji ćete dodati na svoje web mjesto kako bi funkcionirao.

Evo kratkog brifinga o Feedieru ako nikada niste čuli za njega:

  • To je alat za prikupljanje povratnih informacija koji koristi ankete za razumijevanje vaših korisnika
  • Vrlo je fleksibilan
  • Slobodno je!
  • Ima dobar API (ovdje je vrlo važan)
  • Ima widget na web mjestu (ovdje je vrlo važan)
  • Omogućuje vam nagrađivanje kupaca
  • Omogućuje vam stvaranje uvjetnih pitanja
  • Ima kompletnu nadzornu ploču analitičkog izvješća
  • Omogućuje vam upravljanje povratnim informacijama pojedinačno

Evo widgeta koji želimo dodati automatski:

Ako ste se prijavili za Feedier, kôd možete jednostavno pronaći na kartici Dijeljenje svoje ankete:

Korak 2: Postavite naš dodatak i njegovu arhitekturu

WordPress dodaci su po dizajnu vrlo jednostavni. Naš će dodatak trebati samo dvije datoteke.

  • feedier.php : PHP datoteka glavnog dodatka.
  • assets / js / admin.js : JavaScript skripta za spremanje opcija pomoću Ajaxa.

Možete stvoriti novi direktorij "feedier" (ili naziv vaše web aplikacije) u mapi wp-content / plugins / .

Najvažnija datoteka bit će klasa feedier.php dodatka . Evo njegove strukture:

Ovdje radimo nekoliko stvari:

  • Izjava o našem dodatku pomoću komentara u zaglavlju
  • Definiranje nekoliko prikladnih konstanti za lakši pronalazak URL-a i PUTA dodatka
  • Izjava o našoj klasi dodatka koja će sadržavati sve što nam treba u ovom dodatku. Za sada nam treba samo metoda konstruktora.

Dodatak biste već trebali vidjeti na svojoj stranici Dodaci, iako još ne radi ništa:

Korak 3: Stvorite našu administratorsku stranicu

U ovom ćemo dijelu dodati novu stranicu za administriranje Feediera na našu WordPress stranicu i dinamički dohvatiti naše ankete iz Feedierovog API-ja.

U konstruktoru naše klase registrirajmo tri nove radnje potrebne za dodavanje administratorske stranice na WordPressu:

  • addAdminMenu će dodati novu stranicu u lijevom izborniku WordPressa. Bit će također i povratni poziv drugoj metodi koja sadrži sadržaj stranice.
  • storeAdminData pozvat će se kad god korisnik klikne na gumb "Spremi postavke".
  • addAdminScripts registrirat će novu JavaScript datoteku našem WordPress administratoru kako bi spremili podatke obrasca. Ali također razmjenjuje neke varijable između PHP i JavaScript strane.

Prvi korak je vrlo jednostavan. Samo registriramo stranicu, ovako:

Kao što vidite, koristimo funkcije lokalizacije WordPressa za sve nizove. Imajte na umu da

array($this, ‘adminLayout’)

je mjesto gdje nazivamo drugu metodu koja sadrži sadržaj stranice. Obrazac treba prilagoditi vašoj web aplikaciji.

Ovdje prvo trebamo dobiti javni i privatni Feedier API ključevi. Jednom spremljeni, koristit ćemo privatni ključ za dinamičko dohvaćanje naših anketa. Kad god dobijemo ankete, a ne API pogrešku, prikazujemo neke nove mogućnosti za konfiguriranje widgeta.

Na početku ove metode možete vidjeti da prvo dobivamo spremljene podatke pomoću:

$data = $this->getData();

I dobivanje anketa iz Feedier API-ja:

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

Dakle, proglasimo prvu:

Ova funkcija samo čita opciju našeg dodatka i vraća nam niz tako da možemo spremiti više vrijednosti u istu opciju.

Da bi druga metoda uspjela, potreban nam je privatni ključ Feedier. To ovisi o prvom koji će pristupiti ovom ključu spremljenom u opciji:

Ovdje je dokumentiran Feedier API, tako da možete vidjeti što ćete dobiti u odgovoru.

Trenutno imamo potpuno novu Admin stranicu. No, ništa se ne događa kad smo kliknite na gumb Spremi, jer ne postoji mehanizam štednja - još .

Dovoljno dobro, spremimo naše podatke!

Kao što je već spomenuto, svoje ćemo podatke spremati pomoću AJAX-a. Stoga moramo registrirati novu JavaScript datoteku i razmjenjivati ​​podatke pomoću funkcije wp_localize_script ():

Također trebamo dodati novu datoteku /assets/js/admin.js . To će jednostavno uputiti Ajaxov poziv, a WordPress će automatski automatski usmjeriti zahtjev na pravu metodu (što je već učinjeno u konstruktoru). Više o tome kako WordPress pametno obrađuje AJAX zahtjeve možete pročitati ovdje.

U ovom trenutku možemo kliknuti gumb Spremi i gornja skripta će uputiti HTTP POST zahtjev na WordPress. Također dodajemo parametar radnje koji sadrži: store_admin_data (što smo deklarirali na početku u ovom dijelu u konstruktoru):

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

Metoda storeAdminData primit će POST zahtjev i spremiti vrijednosti koje su nam potrebne u našoj WordPress opciji.

Nekoliko napomena o gornjoj metodi:

  • Koristimo "WordPress nonce" da bismo se pobrinuli za sigurnost i osigurali da ovo dolazi s web mjesta, a ne da haker lažira zahtjev.
  • Identificiramo polja koja trebamo spremiti pomoću prefiksa "feedier_". Jednom primljeni, petljamo kroz sve podatke $ _POST i spremamo samo ta polja. Također uklanjamo prefiks prije spremanja svakog polja.

To je to za postupak spremanja. Kada kliknemo na spremi, možemo vidjeti POST zahtjev i naše podatke koji se spremaju u bazu podataka u tablici wp_options .

Savršeno, gotovi smo s administratorskom stranicom.

Korak 4: Automatski umetnite dinamički kôd na naše stranice

Sad kad imamo spremljene opcije, možemo stvoriti dinamički widget koji će ovisiti o opcijama koje je korisnik postavio putem naše administratorske stranice. Već znamo što web aplikacija očekuje od nas.

Nešto kao:


    

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.