So erstellen Sie ein WordPress-Plugin für Ihre Web-App

Heute werden wir sehen, wie Sie ein sehr einfaches WordPress-Plugin für jede Web-App erstellen, die einen Code in Ihre Site einfügen muss.

Um diesem Tutorial folgen zu können, benötigen Sie einige Kenntnisse über diese Grundlagen:

  • PHP und OOP
  • JavaScript (wir verwenden jQuery und Ajax)
  • WordPress-Entwicklung (da die meisten Funktionen aus dem WordPress-Kern stammen).

Ein Arbeitsergebnis dieses Tutorials finden Sie in diesem Github-Repository.

Diese Web-Apps können alles sein, wie CrazyEgg, Freshbook, Google Analytics, Facebook Pixel oder Feedier. Warum? Sie alle müssen für verschiedene Zwecke HTML / JavaScript-Code in Ihre Site einfügen.

Dieser „Code“ wird immer mit Variablen parametrisiert und ist normalerweise ein Problem für den Websitebesitzer. Dies liegt daran, dass Sie die Vorlagen des Themas bearbeiten müssen. Wie wäre es, wenn wir ein Plugin erstellen, das das für uns erledigt? Okay, lass es uns tun!

Schritt 1: Finden Sie Ihre Web-App

Das Ziel dieses Tutorials ist es, ein WordPress-Plugin zu erstellen, das eine WordPress-Administrationsseite hinzufügt. Außerdem werden wir einige Einstellungen hinzufügen, um das In-Site-Widget der App zu konfigurieren und den HTML / JS-Code automatisch in unsere Webseite einzufügen. Nichts Besonderes, nur etwas, das gut funktioniert.

Bitte beachten Sie: Für dieses Tutorial benötigen wir eine Webanwendung. Wir werden Feedier für dieses Beispiel verwenden. Wenn Sie jedoch eine andere Webanwendung haben, die Sie in diesem Lernprogramm verwenden möchten, tun Sie dies bitte. Benennen Sie einfach alles mit dem Namen "Feedier" mit dem Namen Ihrer App um und passen Sie die Einstellungen an die Anforderungen dieser App an. Die meisten von ihnen geben Ihnen einen Ausschnitt, den Sie Ihrer Site hinzufügen können, damit sie funktioniert.

Hier ist eine kurze Einführung in Feedier, falls Sie noch nie davon gehört haben:

  • Es ist ein Feedback-Sammler-Tool, das Umfragen verwendet, um Ihre Benutzer zu verstehen
  • Es ist sehr flexibel
  • Es ist kostenlos!
  • Hat eine gute API (hier sehr wichtig)
  • Hat ein In-Site-Widget (hier sehr wichtig)
  • Damit können Sie Ihre Kunden belohnen
  • Hiermit können Sie bedingte Fragen erstellen
  • Verfügt über ein vollständiges Dashboard für Analyseberichte
  • Hiermit können Sie Feedback individuell verwalten

Hier ist das Widget, das wir automatisch hinzufügen möchten:

Wenn Sie sich für Feedier angemeldet haben, finden Sie den Code einfach auf der Registerkarte "Teilen" Ihrer Umfrage:

Schritt 2: Richten Sie unser Plugin und seine Architektur ein

WordPress Plugin sind von Natur aus sehr einfach. Unser Plugin benötigt nur zwei Dateien.

  • feedier.php : PHP-Datei des Haupt-Plugins.
  • Assets / js / admin.js : JavaScript-Skript zum Speichern der Optionen mit Ajax.

Sie können ein neues "Feedier" -Verzeichnis (oder den Namen Ihrer Web-App) in Ihrem Ordner " wp-content / plugins / " erstellen .

Die wichtigste Datei ist die feedier.php- Klasse des Plugins . Hier ist seine Struktur:

Wir machen hier ein paar Dinge:

  • Deklarieren Sie unser Plugin anhand der Header-Kommentare
  • Definieren Sie einige nützliche Konstanten, um die URL und den Pfad des Plugins leicht zu finden
  • Deklarieren Sie unsere Plugin-Klasse, die alles enthält, was wir in diesem Plugin benötigen. Wir brauchen vorerst nur eine Konstruktormethode.

Sie sollten das Plugin bereits auf Ihrer Plugins-Seite sehen, obwohl es noch nichts tut:

Schritt 3: Erstellen Sie unsere Admin-Seite

In diesem Teil fügen wir unserer WordPress-Site eine neue Feedier-Administrationsseite hinzu und rufen unsere Umfragen dynamisch von der Feedier-API ab.

Registrieren wir im Konstruktor unserer Klasse drei neue Aktionen, die zum Hinzufügen einer Administrationsseite in WordPress erforderlich sind:

  • addAdminMenu fügt eine neue Seite im linken WordPress-Menü hinzu. Es wird auch ein Rückruf zu einer anderen Methode erfolgen, die den Inhalt der Seite enthält.
  • storeAdminData wird immer dann aufgerufen, wenn der Benutzer auf die Schaltfläche "Einstellungen speichern" klickt.
  • addAdminScripts registriert eine neue JavaScript-Datei bei unserem WordPress-Administrator, um die Daten des Formulars zu speichern. Es werden jedoch auch einige Variablen zwischen der PHP-Seite und der JavaScript-Seite ausgetauscht.

Der erste Schritt ist sehr einfach. Wir registrieren die Seite einfach so:

Wie Sie sehen können, verwenden wir WordPress-Lokalisierungsfunktionen für alle Zeichenfolgen. Notiere dass der

array($this, ‘adminLayout’)

Hier rufen wir eine andere Methode auf, die den Inhalt der Seite enthält. Das Formular muss an Ihre Web-App angepasst werden.

Hier müssen wir zuerst die öffentlichen und privaten Feedier-API-Schlüssel abrufen. Nach dem Speichern verwenden wir den privaten Schlüssel, um unsere Umfragen dynamisch abzurufen. Immer wenn wir die Umfragen und keinen API-Fehler erhalten, zeigen wir einige neue Optionen zum Konfigurieren des Widgets an.

Zu Beginn dieser Methode können Sie sehen, dass wir zuerst die gespeicherten Daten erhalten mit:

$data = $this->getData();

Und die Umfragen von der Feedier-API erhalten:

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

Erklären wir also den ersten:

Diese Funktion liest nur die Option unseres Plugins und gibt uns ein Array zurück, damit wir mehrere Werte in derselben Option speichern können.

Damit die zweite Methode funktioniert, benötigen wir den privaten Feedier-Schlüssel. Dies hängt davon ab, wer als erster auf diesen in der Option gespeicherten Schlüssel zugreift:

Die Feedier-API ist hier dokumentiert, sodass Sie sehen können, was Sie in der Antwort erhalten.

In diesem Moment haben wir eine komplett neue Admin-Seite. Aber passiert nichts , wenn wir Schaltfläche Speichern auf der klicken, weil es keine Sparmechanismus ist - noch .

Gut genug, speichern wir unsere Daten!

Wie bereits erwähnt, speichern wir unsere Daten mit AJAX. Daher müssen wir eine neue JavaScript-Datei registrieren und Daten mit der Funktion wp_localize_script () austauschen:

Wir müssen auch eine neue Datei /assets/js/admin.js hinzufügen . Dadurch wird einfach ein Ajax-Aufruf ausgeführt, und WordPress leitet die Anforderung automatisch korrekt an die richtige Methode weiter (bereits im Konstruktor ausgeführt). Lesen Sie hier mehr darüber, wie WordPress AJAX-Anfragen intelligent verarbeitet.

In diesem Moment können wir auf die Schaltfläche Speichern klicken und das obige Skript sendet eine HTTP-POST-Anfrage an WordPress. Wir fügen auch einen Aktionsparameter hinzu, der Folgendes enthält: store_admin_data (den wir zu Beginn an dieser Stelle im Konstruktor deklariert haben):

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

Die Methode storeAdminData empfängt die POST-Anfrage und speichert die benötigten Werte in unserer WordPress-Option.

Einige Anmerkungen zur obigen Methode:

  • Wir verwenden eine "WordPress-Nonce", um die Sicherheit zu gewährleisten und sicherzustellen, dass diese von der Website stammt und nicht von einem Hacker, der die Anfrage vortäuscht.
  • Wir identifizieren die Felder, die wir speichern müssen, mit einem Präfix "feedier_". Nach dem Empfang durchlaufen wir alle $ _POST-Daten und speichern nur diese Felder. Wir entfernen auch das Präfix, bevor wir jedes Feld speichern.

Das war's für den Speichervorgang. Wenn wir auf Speichern klicken, sehen wir eine POST-Anforderung und unsere Daten werden in der Datenbank in der Tabelle wp_options gespeichert .

Perfekt, wir sind mit der Admin-Seite fertig.

Schritt 4: Fügen Sie den dynamischen Code automatisch in unsere Seiten ein

Nachdem wir unsere Optionen gespeichert haben, können wir ein dynamisches Widget erstellen, das von den vom Benutzer über unsere Administrationsseite festgelegten Optionen abhängt. Wir wissen bereits, was die Web-App von uns erwartet.

Etwas wie:

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.