Hey, Hi und Hallo.

361° BLOGGT RICHTIG AB.

Einstieg in die WordPress Plugin-Entwicklung – Teil 3

Einstieg in die WordPress Plugin-Entwicklung – Teil 3

04.07.2014 / geschrieben von Richard
in Entwicklung

04.07.2014 / geschrieben von Richard / in Entwicklung

  • Kommentare deaktiviert für Einstieg in die WordPress Plugin-Entwicklung – Teil 3

Previously on 361° Blog:
Im ersten Teil der kleinen WordPress-Plugin-Entwicklungsreihe haben wir uns mit der Planung beschäftigt.
Als Nächstes folgte im zweiten Teil die Erstellung einer Komponenten im Backend. Unter anderem erstellten wir den Custom Post Type und die Boxen zum Upload der Grafiken.

An dieser Stelle werden wir auch direkt wieder einsteigen und uns wie versprochen mit dem genutzten JavaScript und CSS beschäftigen.

Sexy and I know it (LMFAO)

Zunächst hier unser CSS, schön im LESS-Format, mit der wir die Meta-Box schön sexy machen möchten.
Hier die dazugehörige Erklärung.
1) Am Anfang gibt es eine Clearfix-Klasse, ich liebe Clearklassen, sagte ich das schon Mal?
2) Anschließend kommt das CSS für unsere Bildauswahlfelder. Dabei spielen wir ein wenig mit der Eigenschaft box-shadow. Dazu kommt noch eine Art switch, der genutzt wird, um zu unterscheiden, ob ein Bild verwendet wurde oder nicht.

Oben Zustand ohne Bild unten mit Bild.

Oben Zustand ohne Bild unten mit Bild.

Nach dem CSS kommt das JavaScript, dass sich wie ein Würstchen im Schlafrock verhält: JavaScript umwickelt von einem leckeren jQuery-Mantel 😉

Zur kurzen Erläuterung des doch etwas undurchsichtigen Codes: Mindestens die Hälfte des Codes bezieht sich auf das WordPress interne Mediathek-Modal, das sich auch öffnet, wenn man auf den „Dateien hinzufügen“-Button drückt.
Wir definieren es am Anfang vor, anschließend fangen wir den Klick auf unsere Buttons ab, öffnen das Modal und ändern schließlich den Text im Button und die Klasse des Elternelements, damit wir den geänderten Style der jeweiligen Box erhalten.

Save The Population (Red Hot Chilli Peppers)

Manche (mich eingeschlossen) glauben, dass das Folgende eines magischen Ursprungs ist und nur von den größten Magiern des Landes genutzt werden darf. Manchmal ist mir das aber egal und ich schüttel es auch kurz aus dem Ärmel. Die Rede ist von der Funktion um die Bilder zu speichern.

Zunächst prüfen wir ob der von uns initiierte Sicherheits-Nonce (trägt den Namen createBeforeAfterBox_nonce und wurde in der Funktion createBeforeAfterBox initiiert) auch wirklich vorhanden ist und wir überprüfen seine Validität mit der schönen wp_verify_nonce.
Falls beides funktioniert hat, prüfen wir noch, ob es sich um eine Autospeicherung handelt, falls ja, möchten wir auch nichts machen. Hier soll Hardsave erstellt werden.

Wem das jetzt noch nicht genug Prüfungen waren, der wird hoffentlich jetzt vollends begeistert sein und ausflippen, wir prüfen, ob der Custom Post Type stimmt und noch ob der aktive Benutzer diese Seite überhaupt editieren oder erstellen darf.

Nachdem wir nun alle Faktoren zu unserer vollsten Zufriedenheit überprüft haben, kommen eigentlich nur noch wenige wichtige Sachen. Wir befüllen ein Array mithilfe der Funktion sanitize text field, die uns Text schön von allem Mist säubert.
In das Array werfen wir beide Bilder rein.

Und am Ende wird noch ein Meta-Feld erstellt oder erhält ein Update. Jetzt haben wir in der Datenbank die beiden Bilder in einem Meta-Feld und können dieses nun auslesen.

Shortcode Hero (Short Change Hero – The Heavy)

Wir nähern uns dem Ende des dritten Teils. Zum Schluss gibt es jetzt noch die Funktion, die uns beim Einbinden in eine Seite hilft.

Am Ende des Schnipsels findet sich die Funktion add_shortcode(), mit wollen wir anfangen. Als Parameter geben wir den Namen before_after und die Funktion an, die aufgerufen werden soll, wenn der Shortcode ausgeführt wird (shortCodeBeforeAfter()).

In dieser Funktion extrahieren wir zunächst angegebene Variablen. In unserem Fall ist es nur eine Einzige: id
Falls keine angegeben wurde, geben wir ihr einfach den Wert „x“.

Als Nächstes prüfen wir, ob der Wert in id ein numerischer Wert ist, wenn nicht, machen wir einfach nichts und returnen ein „false“.

Sollten wir die Hürde gemeistert haben, bereiten wir ein Array mit Anweisungen vor um den Entsprechen Before, After-Slider aus der Datenbank auszulesen. (Beim Schreiben dieses Artikels fällt mir gerade auf: Das hätten wir auch anders machen können, ich werde da dann mal für den letzten Teil eine alternative Schreibweise bringen. Wer den „Fehler“ findet, darf ihn gerne in den Kommentaren posten. 🙂 )

Sobald wir einen, der id entsprechenden Post, ausgelesen und verifiziert haben, binden wir 3 Dateien ein:

  • twentytwenty.css
  • jquery.twentytwenty.js
  • 361_before-after_frontend.js

Was genau diese drei Dateien für uns machen, zeige ich auch erst im letzten Teil.

Nach dem Einbinden der drei Dateien „besorgen“ wir uns ein Post-Meta-Feld mit dem Namen 361_before-after-box_content.
Wenn wir uns jetzt ein wenig zurückerinnern, könnte uns auffallen, dass es sich dabei um das Feld handelt, in das wir das Array mit den beiden Bild-URLs eingefügt haben.

Sollte eines der beiden Bilder nicht vorhanden sein, wird auch an dieser Stelle abgebrochen.
Wenn beide Bilder vorhanden sind, lesen wir mit der Funktion list() verschiedene Werte (u.a. Höhe und Breite des Bildes) aus.
Diese Funktion führen wir aber nur auf ein Bild aus, da wir nur die Werte eines Bildes brauchen und das zweite Bild daran anpassen werden.

Zum guten Schluss definieren wir das HTML-Markup, dass am Ende auch zurückgegeben wird, beim Aufruf des Shortcodes.

  • Kommentare deaktiviert für Einstieg in die WordPress Plugin-Entwicklung – Teil 3

Über den, der's geschrieben hat:

Macht Code. Träumt von Code. Würde, wenn möglich, sogar Code essen. Behauptet WordPress sei ein gutes CMS und das Internet habe keine Zukunft. Als Mediengestalter a.D. codet er sich fröhlich durch die Weltgeschichte. Wenn er nicht gerade versucht zu gestalten oder mit Code spielt, kocht er gerne (auch mal für die Kollegen). Mag übrigens Züge.

Comments are closed