Theme Admin-Panel mit dem Options-Framework erstellen

0

Vor einiger Zeit habe ich einen Artikel über das neue Admin-Panel des LB-Projects Theme geschrieben. Die Bedienung war jedoch teilweise etwas umständlich, da es zum Beispiel keine Möglichkeit gab, Bilder automatisch hochzuladen. Stattdessen musste ein Bild zuerst manuell auf den Server hochgeladen werden und wurde anschließend im Admin-Panel verlinkt. Auch auf Funktionen wie Mehrfach-Checkboxen, Radio-Boxen, Typographie- und Hintergrund-Optionen musste man verzichten. Bei der Suche nach Verbesserungsmöglichkeiten bin ich im Internet auf dieses Framework gestoßen, mit dessen Hilfe man verhältnismäßig einfach ein Admin-Panel, das die oben genannten Funktionen bietet, für das eigene Theme erstellen kann. Im Folgenden möchte ich Ihnen zeigen, wie Sie das Framework verwenden und in ein WordPress-Theme einbauen können.

1) Download des Frameworks und Demo-Theme

Zuallererst müssen Sie das Framework beispielsweise von GitHub herunterladen. Entpacken Sie anschließend das Verzeichnis und laden es in das Theme-Verzeichnis Ihrer WordPress-Installation hoch. Nun steht innerhalb des Admin-Panels ein Theme mit dem Namen “Options Framework Theme” zur Aktivierung bereit. dieses Theme ist lediglich eine Demonstration der Möglichkeiten, die das Framework bietet. Über “Design” -> “Theme Options” gelangen Sie zum Theme-Options Panel, in dem bereits alle verfügbaren Einstellungsmöglichkeiten wie Checkboxes, Upload, Colorpicker, etc. demonstriert werden.

2) Einbau des Frameworks in ein Theme

Im zweiten Schritt soll das Framework nun in ein bestehendes Theme integriert werden, sodass man ein eigenes Admin-Panel für das jeweilige Theme erstellen kann. Dazu öffnen sie das Verzeichnis des entsprechenden Themes und kopieren das Verzeichnis inc und die Datei options.php in das Stammverzeichnsi des Themes.

Benötigt werden sowohl das Verzeichnis inc als auch die Datei options.php

Anschließend müssen Sie folgenden Code zur functions.php des Themes hinzufügen, damit das Framework vollständig eingebunden und initialisert wird.

//Theme-Options-Panel includieren
if( !function_exists('optionsframework_init') ) {
	define('OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/admin/');
	require_once(get_template_directory() . '/admin/options-framework.php');
}

Wenn alles funktioniert hat, sollte nun im Admin-Bereich innerhalb der Sidebar unter “Design” der Menüpunkt “Theme Options” erscheinen. Hierüber gelangen Sie zum Theme-Options Panel des Themes, das zu Beginn wie auf den folgenden Bildern aussehen sollte.

Das Demo-Panel direkt nach der Implementierung

Das Panel verfügt über eine Tab-Navigation

Auch Colorpicker und Typographie-Optionen werden vom Framework unterstützt

3) Eigene Optionen erstellen

Die bisherigen Arbeitsschritte sollten schnell und ohne große Probleme erledigt sein. Die Eigenleistung besteht nun darin, eigene Optionen für das Theme festzulegen und diese mit entsprechenden Aktionen im Frontend zu verknüpfen. Zunächst gehe ich auf die Anpassung der Optonen ein. Dies geschieht in der Datei options.php, die zuvor aus dem Demo-Theme kopiert wurde. Hier wird innerhalb eines Arrays genau festgelegt, welche Formulare im Admin-Panel angezeigt werden sollen. eine einzelne Option besteht dabei wiederum aus einem einzelnen Array und enthält einen Namen, eine Beschreibung, eine eindeutige ID, die zur Auswahl stehenden Optionen, Standardwerte für diese Optionen und die Festlegung des Typs, also ob es sich bei der Option um ein Textfeld, einen Colorpicker oder ein Upload-Formular handelt.

Der unten stehende Code erzeugt beispielsweise ein Eingabefeld für einfachen Text. Die Option bekommt den Titel “Input Text”, die Beschreibung “A text input field”, die ID “example_text” und den Standardwert “Default Value”. Über den letzten Wert wird festgelegt, dass es sich bei der Option um ein Textfeld handelt.

$options[] = array(
	'name' => 'Input Text',
	'desc' => 'A text input field',
	'id' => 'example_text',
	'std' => 'Default Value',
	'type' => 'text');

Überlegen Sie nun, welche Optionen Sie für Ihr Theme benötigen und stellen Sie diese zusammen. Da im Code bereits die Demo-Optionen enthalten sind, steht für jeden möglichen Options-Typ bereits ein fertiges Array zur Verfügung, das Sie nur noch anpassen müssen. Im Großen und Ganzen ist das Erstellen der Optionen nur eine Frage der Geduld und nicht des Könnens.

4) Optionen im Frontend verwenden

Haben Sie das Optionen-Panel fertiggestellt, können Sie zwar die Einstellungen im Admin-Panel ändern und speichern, im Frontend passiert jedoch noch gar nichts. Deshalb werden die Optionen im letzten Arbeitsschritt in die Seite integriert, sodass beispielsweise bei Änderung der Schriftfarbe ein Style-Tag generiert wird, in dem die neue Schriftfarbe festgelegt wird.

Im folgenden Beispiel soll der Text, der im oben erstellten Textfeld eingegeben wird, innerhalb des Footers im Frontend ausgegeben werden. Eine mögliche Anwendung hierfür könnte beispielsweise der Text für Copyright-Hinweise sein, der üblicherweise im Footer der Seite zu finden ist.

Öffnen Sie hierzu zunächst die footer.php Ihres Themes und fügen Sie unten stehenden Code an der gewünschten Stelle ein.

<?php echo of_get_option('example_text'); ?>

Nun wird der in der Option "example_text" gespeicherte Wert - ein Textstring - an der Stelle ausgegeben, an der Sie den obigen Code eingefügt haben.
Auf ähnliche Weise können Sie natürlich auch mit Check-, Radio- und Selektor-Boxen verfahren. Auch die anderen Optionen wie Colorpicker, Hintergrund-Optionen und Upload werden auf die gleiche Weise zum Frontend hinzugefügt.
Ähnlich wie bei der options.php finden Sie auch für die Ausgabe zu jedem einzelnen Options-Typ die entsprechende Verarbeitungsmethode im Frontend innerhalb der index.php des zu Anfang heruntergeladenen Demo-Themes.

5) Fazit

Im Vergleich zum manuellen Erstellen eines Admin-Panels für ein WordPress-Theme stellt das Options-Framework von WP Theming eine sehr gute und einfach zu implementierende Möglichkeit zur Programmierung eines Theme-Option-Panels dar. Als Entwickler können Sie sich dadurch voll und ganz auf die Entwicklung des Frontends konzentrieren, ohne unnötig viel Zeit in das Admin-Panel zu stecken. Weiterhin passt sich das Admin-Panel vom Design her genau in die übrige Gestaltung des WordPress-Backends ein und sorgt somit für ein aufgeräumtes und einfach zu bedienendes Backend.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Zu diesem Artikel sind bisher keine freigegebenen Kommentare vorhanden.