Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Plugins
Code

Die WordPress Color Picker API Richtig Verwenden

by
Length:MediumLanguages:

German (Deutsch) translation by Jonas Döbertin (you can also view the original English article)

Wann immer das WordPress-Team eine neue Version herausbringt stellen sie einige neue Features vor. Diese richten sich jedoch nicht immer nur an die Endbenutzer sondern oft auch an Entwickler. Denn WordPress enthält eine Menge Tools welche die Entwicklung von fantastischen Themes und Plugins erleichtern.

Eine der neusten APIs für WordPress-Entwickler ist der frisch vorgestellte Color Picker; dieses Feature erlaubt es, einfache Text-Eingabefelder durch ein hübsches und benutzerfreundliches Farbauswahl-Tool zu ersetzen.

In dieser Anleitung werde ich Euch zeigen, wie Ihr den Color Picker in eurem WordPress-Projekt einsetzen könnt. Los geht’s!

Warum den Color Picker verwenden?

Es gibt diverse Gründe weshalb WordPress-Entwickler den Color Picker zur Implementierung einer Farbauswahl verwenden sollten:

Für Benutzer

  • Er bietet einen schnellen und einfachen Weg eine Farbe auszuwählen.
  • Benutzer müssen sich keine Gedanken über das Format der Farbangabe (Hexadezimal, RGB, usw.) machen.
  • Einfach gesagt bietet er eine deutlich verbesserte User Experience.

Für Entwickler

  • Eure Dashboard-Seiten sind an das WordPress-Interface angepasst.
  • Er vereinfacht das Validieren des Inhaltes des Farb-Eingabefeldes.
  • Das Resultat ist ein professionelles Produkt welches native Eingabeelemente einsetzt.

Nachdem wir einige der Hauptaspekte des WordPress Color Pickers durchgegangen sind, werden wir uns ansehen, wie wir ihn in unseren Plugins oder Themes einsetzen können.

Den Color Picker einbinden

Bevor es losgeht, muss ich noch anmerken, das die Color Picker API mit WordPress 3.5 vorgestellt wurde. Um also diesem Tutorial folgen zu können, stellt bitte sicher das Ihr Version 3.5 oder höher verwendet.

Um den Color Picker einzusetzen, müsste Ihr nur eine jQuery-Datei und ein Stylesheet einbinden. Die folgenden Code-Zeilen zeigen Euch wie das geht.

Beachtet bitte, das wir für die custom-script.js-Datei die wp-color-picker-Abhängigkeit angegeben haben. In unserer jQuery-Datei können wir nun den Color Picker zu unseren Farb-Eingabefeldern hinzufügen.

Erstellen eines Plugins mit dem WordPress Color Picker

Jetzt ist es an der Zeit zu demonstrieren, wie der Color Picker in einem realen Plugin eingesetzt wird.

Folgendes werden wir uns ansehen:

  • Anlegen einer Einstellungsseite zur Simulation von Theme-Optionen.
  • Hinzufügen von Eingabefeldern welche den Color Picker verwenden.
  • Speichern und validieren der Benutzereingaben.

Schritt 1

Sobald Ihr Euer Plugin im wp-content/plugins-Ordner angelegt habt kann es richtig losgehen. Das folgende Bild zeigt Euch, wie ich das Plugin für diese Anleitung strukturiert habe.

Struktur des Plugins

Schritt 2

Fügt den Kommentar mit den Plugin-Infos innerhalb der color-picker-plugin.php-Datei ein und erstellt eine neue PHP-Klasse CPA_Theme_Options. Der untenstehende Code zeigt alle Klassenmethoden welche wir benötigen werden.

Schritt 3

Als erstes werden wir den Konstruktor der Klasse implementieren. Der folgende Code zeigt, was das Plugin tun wird sobald eine neue Instanz der Klasse erzeugt wird.

Es wird:

  • eine neue Einstellungsseite im Einstellungen-Abschnitt des WordPress Admin-Menüs einfügen,
  • innerhalb dieser Einstellungsseite ein neues Eingabefeld anlegen,
  • die CSS-Styles des Color Pickers einbinden,
  • die JavaScript-Datei, welche den Color Picker lädt, einfügen,
  • die bereits gespeicherten Einstellungen in das options-Attribut übernehmen.

Schritt 4

Dieser Schritt zeigt wie wir die Einstellungsseite registrieren und anzeigen.

Beachtet das wir, innerhalb der display_page()-Methode, ebenfalls schon den Code eingefügt haben, welcher dafür sorgt das die Formular-Tags, die Eingabefelder und der Speichern-Button angezeigt werden.

Schritt 5

In diesem Schritt werden wir die Methoden zum Registrieren und Anzeigen der zwei Eingabefelder Blog Titel und Hintergrundfarbe implementieren. Beide Eingabefelder platzieren wir in einem Theme-Optionen-Abschnitt.

Schritt 6

Dieser Schritt legt seinen Fokus auf das Validieren der beiden Eingabefelder, bevor die neuen Werte in der Datenbank gespeichert werden.

Falls der Benutzer versucht den Farbwert manuell falsch einzugeben, wird der Color Picker ihn darauf hinweisen, das die Eingabe ungültig ist; allerdings, obwohl die Eingabe unter Umständen keinen Farbwert darstellt, wird die Eingabe trotzdem in der Datenbank abgespeichert. Die check_color()-Funktion wird daher die Eingabe auf Gültigkeit überprüfen.

Schritt 7

Dies ist der letzte und finale Schritt. Wir werden unsere JavaScript-Datei, welche das normale Eingabefeld mit dem Color Picker ausstattet, einbinden.

Nachdem wir die jquery.custom.js-Datei eingebunden haben, müssen wir diese jetzt allerdings noch erstellen.

Wenn Ihr jetzt das Plugin aktiviert, solltet Ihr eine Einstellungsseite mit den Eingabefeldern wie in dem Bild unten zusehen bekommen.

Die fertige Einstellungsseite

That's It!

In dieser Anleitung habt Ihr gelernt, wie Ihr den neuen WordPress Color Picker verwenden könnt. In dem Demo-Plugin habe ich Euch gezeigt, wie Ihr diesen in ein echtes Plugin einbinden könnt. Ihr könnt die Color Picker API allerdings nahezu überall verwenden: in Meta-Boxen, Widget-Formularen, und so weiter.

Der Color Picker steht nur in WordPress 3.5+ zur Verfügung. Falls ein Benutzer eine ältere WordPress-Version verwendet, wird unser Code jedoch trotzdem funktionieren; nur ohne die Anzeige des neuen Color Pickers. Achtet auf jeden Fall darauf, jeden Farbwert mit der check_color()-Funktion, wie in Schritt 6 gezeigt, zu validieren.

Eure Plugins und Themes sind nun mächtiger und benutzerfreundlicher als vorher.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.