de Feedier de Alkalab

Cum să creați un plugin WordPress pentru aplicația dvs. web

Astăzi, vom vedea cum să creăm un plugin WordPress foarte simplu pentru orice aplicație web care trebuie să introducă o bucată de cod pe site-ul dvs.

Pentru a urma acest tutorial, aveți nevoie de cunoștințe despre aceste elemente de bază:

• PHP și OOP
• JavaScript (vom folosi jQuery și Ajax)
• Dezvoltare WordPress (deoarece majoritatea funcțiilor provin din nucleul WordPress).

Puteți găsi un rezultat funcțional al acestui tutorial pe acest depozit Github.

Aceste aplicații web ar putea fi orice, de exemplu CrazyEgg, Cartea proaspătă, Google Analytics, Facebook Pixel, sau Feedier. De ce? Toți trebuie să injecteze un anumit cod HTML / JavaScript pe site-ul dvs. în diverse scopuri.

Acest „cod” este întotdeauna parametrizat cu variabile și este de obicei o problemă pentru proprietarul site-ului. Acest lucru se datorează faptului că trebuie să editați șabloanele temei. Deci, ce zici să creăm un plugin pentru a face asta pentru noi? Bine, hai să o facem!

Pasul 1: găsiți aplicația dvs. web

Scopul acestui tutorial este de a crea un plugin WordPress care adaugă o pagină de administrare WordPress. În plus, vom adăuga, de asemenea, câteva setări pentru a configura widgetul aplicației în site și pentru a injecta automat codul HTML / JS în pagina noastră web. Nimic extraordinar, doar ceva care funcționează bine.

Vă rugăm să rețineți: avem nevoie de o aplicație web pentru acest tutorial. Noi vom folosi Feedier pentru acest exemplu. Cu toate acestea, dacă aveți o altă aplicație web pe care doriți să o utilizați în acest tutorial, vă rugăm să o faceți. Redenumiți doar orice denumit „feedier” cu numele aplicației dvs. și adaptați setările la ceea ce are nevoie aplicația respectivă. Cele mai multe dintre ele vă vor oferi un fragment pentru a-l adăuga pe site-ul dvs. pentru a-l face să funcționeze.

Iată un briefing rapid despre Feedier dacă nu ai auzit niciodată de asta:

• Este un instrument de colectare a feedback-ului, care utilizează sondaje pentru a vă înțelege utilizatorii
• Este foarte flexibil
• Este gratis!
• Are un API bun (foarte important aici)
• Are un widget pe site (foarte important aici)
• Vă permite să vă răsplătiți clienții
• Vă permite să creați întrebări condiționate
• Are un tablou de bord al raportului analitic complet
• Vă permite să gestionați feedback-ul individual

Iată widgetul pe care dorim să îl adăugăm automat:

Dacă v-ați înscris la Feedier, puteți găsi codul în fila Partajare a sondajului:

Pasul 2: Configurați pluginul și arhitectura acestuia

Plugin-ul WordPress este foarte simplu prin design. Pluginul nostru va avea nevoie doar de două fișiere.

• feedier.php: fișierul PHP al pluginului principal.
• assets / js / admin.js: Script JavaScript pentru a salva opțiunile folosind Ajax.

Puteți crea un nou director „feedier” (sau numele aplicației dvs. web) în wp-content / plugins / pliant.

Cel mai important fișier va fi al pluginului feedier.php clasă. Iată structura sa:

Aici facem câteva lucruri:

• Declararea pluginului nostru folosind comentariile din antet
• Definirea câtorva constante la îndemână pentru a putea găsi cu ușurință adresa URL și PATH-ul pluginului
• Declarând clasa noastră de plugin care va conține tot ce avem nevoie în acest plugin. Avem nevoie doar de o metodă constructivă pentru moment.

Ar trebui să vedeți deja pluginul în pagina dvs. de pluginuri, chiar dacă încă nu face nimic:

Pasul 3: creați pagina noastră de administrator

Pentru această parte, vom adăuga o nouă pagină de administrator Feedier pe site-ul nostru WordPress și vom prelua dinamic sondajele noastre din API-ul Feedier.

În constructorul clasei noastre, să înregistrăm trei acțiuni noi care sunt necesare pentru a adăuga o pagină de administrator pe WordPress:

• addAdminMenu va adăuga o pagină nouă în meniul din stânga WordPress. Va exista, de asemenea, un apel invers către o altă metodă care conține conținutul paginii.
• storeAdminData va fi apelat ori de câte ori utilizatorul face clic pe butonul „Salvare setări”.
• addAdminScripts va înregistra un nou fișier JavaScript la administratorul nostru WordPress pentru a salva datele formularului. Dar schimbă, de asemenea, unele variabile între partea PHP și partea JavaScript.

Primul pas este foarte ușor. Doar înregistrăm pagina, astfel:

După cum puteți vedea, folosim Funcții de localizare WordPress pentru toate siruri de caractere. Rețineți că

array($this, ‘adminLayout’)

este locul în care numim o altă metodă care conține conținutul paginii. Formularul trebuie să fie adaptat aplicației dvs. web.

Aici, trebuie mai întâi să obținem cheile API publice și private Feedier. Odată salvate, vom folosi cheia privată pentru a recupera dinamic sondajele noastre. Ori de câte ori primim sondaje și nu o eroare API, afișăm câteva opțiuni noi pentru a configura widgetul.

La începutul acestei metode, puteți vedea că primim mai întâi datele salvate cu:

$data = $this->getData();

Și obținerea sondajelor din API-ul Feedier:

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

Deci, să declarăm primul:

Această funcție citește opțiunea pluginului și ne oferă o matrice înapoi, astfel încât să putem salva mai multe valori în aceeași opțiune.

Pentru ca cea de-a doua metodă să funcționeze, avem nevoie de cheia privată Feedier. Acest lucru depinde de prima care accesează această cheie salvată în opțiune:

API-ul Feedier este documentat aici, astfel încât să puteți vedea ce veți obține în răspuns.

În acest moment, avem o nouă pagină de administrare completă. Dar nu se întâmplă nimic atunci când facem clic pe butonul de salvare, deoarece nu există un mecanism de salvare – inca.

Destul de bine, să ne salvăm datele!

După cum am menționat anterior, vom salva datele noastre folosind AJAX. Prin urmare, trebuie să înregistrăm un nou fișier JavaScript și să schimbăm date folosind wp_localize_script () funcţie:

De asemenea, trebuie să adăugăm un fișier nou /assets/js/admin.js. Acest lucru va efectua pur și simplu un apel Ajax, iar WordPress va redirecționa automat solicitarea corect către metoda corectă (deja realizată în constructor). Puteți citi mai multe despre modul în care WordPress gestionează inteligent cererile AJAX aici.

În acest moment, putem face clic pe butonul de salvare, iar scriptul de mai sus va face o cerere HTTP POST către WordPress. Adăugăm și un parametru de acțiune care conține: store_admin_data (pe care l-am declarat la început la această parte în constructor):

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

Metoda storeAdminData vom primi cererea POST și vom salva valorile de care avem nevoie în opțiunea noastră WordPress.

Câteva note cu privire la metoda de mai sus:

• Folosim un „WordPress nonce” pentru a ne asigura de securitate și pentru a ne asigura că acest lucru provine de pe site și nu un hacker care falsifică cererea.
• Identificăm câmpurile pe care trebuie să le salvăm folosind un prefix „feedier_”. Odată primite, parcurgem toate datele $ _POST și salvăm doar acele câmpuri. De asemenea, eliminăm prefixul înainte de a salva fiecare câmp.

Gata pentru procesul de salvare. Când facem clic pe Salvare, putem vedea o solicitare POST și datele noastre sunt salvate în baza de date din cadrul wp_options masa.

Perfect, am terminat cu pagina de administrator.

Pasul 4: introduceți codul dinamic automat în paginile noastre

Acum că avem opțiunile salvate, putem crea un widget dinamic care va depinde de opțiunile setate de utilizator prin pagina noastră de administrator. Știm deja la ce se așteaptă aplicația web de la noi.

Ceva asemănător cu:

<div class=”feedier-widget” data-type=”engager” data-position=”right” data-carrier-id=”x” data-key=”xxxxxxxxxxxxxxxxx”></div>

<! — Include this line only one time, also if you have multiple widgets on the current page →

<script src=”https://feedier.com/js/widgets/widgets.min.js" type=”text/javascript” async></script>

Astfel, primul lucru pe care vrem să-l facem este să creăm o nouă metodă pentru pluginul nostru care va imprima acest cod în funcție de variabilele setate de utilizator. Deci, folosind arhitectura pe care am configurat-o deja în ultima parte:

Acum, trebuie doar să apelăm această funcție la fiecare încărcare a paginii pentru a o adăuga în partea de jos a paginii. Pentru a face acest lucru, vom conecta metoda noastră la wp_footer acțiune. Înregistrând o nouă acțiune în constructorul clasei noastre:

Asta e!

Aveți întrebări, feedback sau idei? Anunță-mă în comentarii!

Puteți găsi o versiune de lucru a acestui tutorial pe acest depozit Github.

2Fwebd / feedier-wordpress-plugin
Contribuiți la dezvoltarea feedier-wordpress-plugin prin crearea unui cont pe GitHub.pxlme.me

Rețineți că aceasta este prima versiune a pluginului și multe lucruri pot fi îmbunătățite. Sunt deschis la sugestii și îmbunătățiri. ?

Construim Feedier. Devine neînțeles să colectezi feedback și să construiești relații cu clienții tăi!

Feedier – Feedback de generația următoare
Faceți cunoștință cu Feedier, următoarea generație de software de feedback pentru clienți care vă permite să colectați feedback valoros. Recompensează, angajează …feedier.com

Convins? Înregistrează-te pentru gratuit la feedier.com ?

Nu uitați să batem din palme articolul nostru și Abonati-va pentru a obține articole mai uimitoare dacă ți-a plăcut ?. Ne puteți găsi și pe Twitter.

Acest articol a fost publicat inițial pe site-ul nostru blog aici.