Hey, Hi und Hallo.

361° BLOGGT RICHTIG AB.

Einstieg in die WordPress Plugin-Entwicklung – Teil 4

Einstieg in die WordPress Plugin-Entwicklung – Teil 4

05.09.2014 / geschrieben von Richard
in Entwicklung

05.09.2014 / geschrieben von Richard / in Entwicklung

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

Previously on 361° Blog:
Einstieg in die WordPress Plugin-Entwicklung – Teil 1 – Planung
Einstieg in die WordPress Plugin-Entwicklung – Teil 2 – Backend Komponenten (Custom Post Type, Upload-Script)
Einstieg in die WordPress Plugin-Entwicklung – Teil 3 – Backend Komponenten (Custom Post Type, Upload-Script) und Shortcode

You’ve Come a Long Way, Baby

Vor fünfeinhalb Monaten begann ich eine Reise. Eine Reise, die mich tief in die Eingeweide der WordPress Plugin-Entwicklung geführt hat.
Drei Blogbeiträge und eine Menge Getränke (ClubMate), Friseur-Besuche und etlichen „warum funktioniert das nicht, sollte es nämlich eigentlich“ später, beende ich diese Reise. Bis wir aber das finale „Jop, feddich!“ rausschreien können, fehlt noch ein wenig Code.

Den letzten Teil haben wir mit der Erstellung des Shortcodes für die Einbettung des „Vorher-/Nachher-Sliders“ beendet. An dieser Stelle gehen wir wieder in den Code und machen dem Ganzen ein Ende.

Für diesen letzten Teil habe ich die Funktionsweise und das Markup noch ein klein wenig verändert, weshalb wir uns noch einmal den Code für die Shortcode-Erzeugung anschauen müssen:

Neu im Code finden sich ein Wrapper-Element, das eine auf das Bild angepasste Breite und eine eindeutige ID besitzt.
Eine Überschrift, die den Titel und ein in ein span eingeklemmtes „?“ enthält. (Zu der Bedeutung komme ich gleich noch.)
Und einen Bereich, der einen Beschreibungstext enthält.

20 Years After

Wer 20 mal 2 nimmt, erhält 2020. (… … … … Badummtss.)
Das passt natürlich mal wieder perfekt in diesen Beitrag, denn wir nutzen das twentytwenty Javascript-Plugin von Zurb.
Wir nutzen zwei Dateien aus dem Plugin. Zum einen die Plugin-JS Datei, die wir komplett unverändert lassen. Ich verlinke mal nur auf diese Datei, da diese im „unminified“-Zustand beinahe 700 Zeilen lang ist.

Und zum anderen nutzen wir die enthaltene CSS-Datei, diese haben wir aber ein wenig angepasst, damit sie mehr unseren Wünschen entspricht.

Unter anderem haben wir schwarze Ränder hinzugefügt, die Überschrift, das „?-span“ und die Beschreibung gestylt. Die Beschreibung blenden wir aber auch aus. Zusammen mit dem „?-span“ wird es vielleicht gleich Sinn ergeben.

Technologic

Nachdem wir HTML und CSS (und ja eine JavaScript-Datei, die aber nichts macht) haben, kommt nun noch eine weitere Javascript-Datei, die dem Ganzen leben einhaucht.

Als Erstes „initialisieren“ wir den jQuery.noConflict()-Modus. (Hintergrundwissen, warum man das macht, gibt es hier: Klick mich!)
Anschließend initialisieren wir, sobald die Website komplett geladen ist, das twentytwenty-Script.

$(".viewerBeforeAfterSlides").twentytwenty({}); wäre der Aufruf um das Plugin mit Standardwerten zu aktivieren.
Wir übermitteln jedoch noch zwei Werte an das Plugin:

  • default_offset_pct: 0.1 – Mit diesem Wert kann angegeben werden, wie viel man vom „Vorher“-Bild sehen möchte. Der Wert 0.1 entspricht dabei 10%
  • orientation: 'horizontal' – Die Richtung, in die der Slide-Effekt funktioniert. Es ist auch vertical als Wert möglich. Sieht dann so aus.

Ich habe fertig!

Das Ergebnis sieht dann wie folgt aus.

Richard Vorher / Nachher ?

Vorher-Grafik von Nachher-Grafik von

Unser Entwickler Richard hat sich binnen weniger Minuten von einem schnieken jungen Mann in ein haariges Etwas verwandelt.

Ich bedanke mich herzlichst beim Internet, das mir so tolle Ideen für Überschriften geliefert hat. (Ich selbst bin nicht gerade kreativ. 😉 )

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

Ü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