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

Wie man ein besseres WordPress-Optionsfeld erstellen kann

by
Length:LongLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Heute werden wir den gesamten Prozess der Erstellung eines Admin-Optionsfelds für ein WordPress-Theme am Beispiel des hervorragenden WooFrameworks durchlaufen. Dann gehen wir noch einen Schritt weiter und implementieren jQuery, um einige Funktionen zu verbessern.

Tutorial Details

  • Programm: WordPress
  • Version: 2.7, 2.8, 2.9 ab
  • Schwierigkeit: Mittelstufe
  • Geschätzte Fertigstellungszeit: 1,5 Stunden
Final Product

WordPress ist eines der beliebtesten CMS-Systeme (Content Management Software). Ob für ein Kundenprojekt oder für den Verkauf von Themen auf ThemeForest - WordPress entwickelt sich für viele Webentwickler schnell zu einem CMS der Wahl. Es ist relativ einfach zu bedienen, kann aber noch einfacher gestaltet werden, wenn Sie ein Administrationsfenster für Benutzer hinzufügen. Anstatt die PHP-Vorlagendateien öffnen und mit dem Code herumspielen zu müssen, können Benutzer das Optionsfeld direkt verwenden, um mit Ihrem WordPress-Thema zu interagieren.

Beispiel: Wenn Ihr Thema rote, blaue und grüne Farbschemata hat und jedes eine entsprechende CSS-Datei hat, ist es für einen Benutzer viel einfacher, seine bevorzugte Farbe aus einer Dropdown-Liste auszuwählen. Lassen Sie sich heute durch den gesamten Prozess der Erstellung und Verbesserung einer von Woo inspirierten WordPress-Admin-Panel-Seite führen.

Schritt 1

Bevor wir mit der Erstellung des Admin-Panels beginnen, müssen wir ein Thema haben, oder? Laden Sie also die im Tutorial enthaltenen Quelldateien herunter. Ich habe das klassische WordPress-Theme leicht modifiziert. Platzieren Sie den Ordner "nettuts" (ich habe das Thema "Nettuts" genannt) in Ihrem Ordner "wp-content/theme". Sie sollten die folgenden Dateien sehen:

  • functions.php (leer)
  • index.php
  • comments.php
  • footer.php
  • header.php
  • rtl.php
  • sidebar.php
  • style.css
  • screenshot.png
  • Ein Bilderordner mit zwei Dateien

Der größte Teil unserer Arbeit wird in der Datei functions.php erledigt.

Ein Thema kann optional eine Funktionsdatei verwenden, die sich im Unterverzeichnis des Themas befindet und den Namen functions.php trägt. Diese Datei verhält sich im Grunde genommen wie ein Plugin. Wenn sie in dem von Ihnen verwendeten Thema vorhanden ist, wird sie während der WordPress-Initialisierung automatisch geladen (sowohl für Administrationsseiten als auch für externe Seiten).

Vorgeschlagene Verwendung für diese Datei:

  • Definieren Sie Funktionen, die in mehreren Vorlagendateien Ihres Themas verwendet werden
  • Richten Sie einen Administrationsbildschirm ein, auf dem Benutzer Optionen für Farben, Stile und andere Aspekte Ihres Themas finden

(Aus dem WP Codex)

Schritt 2

Nachdem wir unser WordPress-Theme eingerichtet haben, gehen Sie zu Aussehen > Themes und aktivieren Sie das Nettuts-Theme.

Hat aktiviert? Ok, großartig. Jetzt müssen wir uns ein Layout für unsere Admin-Panel-Seite überlegen. Hier ist die Struktur, für die ich mich entschieden habe:

Lassen Sie mich Ihnen das alles erklären. Der Optionssatz wird in ein Div mit dem Namen "rm_wrap" und dann "rm_opts" für die Optionen eingeschlossen. Dann starten wir ein Formular mit allen darin enthaltenen Eingaben. Jeder Abschnitt mit Optionen (allgemeine Einstellungen, Homepage-Einstellungen, Blog-Einstellungen usw.) verfügt über ein separates Div mit der Klasse "rm_section". Dieses Div enthält einen Titel (für den Namen) sowie mehrere Eingabedivs. Durch die Verwendung von Klassen wie <div class="rm_input rm_select"> können Dropdown-Listen, Texteingaben und Textbereiche unterschiedlich gestaltet werden.

Das Wichtigste ist nun, dass die Codierung nicht manuell erfolgen sollte - wir sollten die Flexibilität von PHP so weit wie möglich nutzen. Das bedeutet Effizienz: Codieren Sie nicht manuell, wenn Sie Schleifen für Sie haben!

Schritt 3

Öffnen Sie zuerst functions.php in Ihrem bevorzugten Code-Editor (ich verwende Notepad++). Geben Sie den folgenden Code ein:

Die beiden PHP-Variablen enthalten den Namen Ihres Themas (in unserem Fall Nettuts) und einen von Ihnen definierten Kurznamen (in unserem Fall nt). Der Kurzname wird verwendet, um allen Namen unserer Themenoptionen ein Präfix voranzustellen, und ist normalerweise für ein bestimmtes Thema eindeutig. Im weiteren Verlauf schreiben wir Code, um automatisch eine Liste der WordPress-Kategorien zu erstellen, anstatt dass Benutzer ID-Nummern eingeben. Geben Sie den folgenden Code unter dem bereits eingegebenen Code ein:

Dieses Snippet verwendet die in WordPress integrierte Funktion get_categories, um alle Kategorien abzurufen, und verwendet dann eine foreach-Schleife, um sie in der Variablen $wp_cats zu speichern. Die Optionen "Kategorie auswählen" werden dann oben im Array hinzugefügt

Schritt 4

Jetzt geben wir eine Liste mit Optionen für das Thema ein. Siehe unten und fügen Sie es in Ihre Datei functions.php ein:

Das war ein großer Teil des Codes, der sicherlich eine Erklärung verdient. Auf geht's:

  • Die PHP-Variable $options speichert die gesamte Liste der Optionen für das Thema.
  • Es besteht aus einer Reihe von Arrays, die jeweils mit einem "Typ"-Schlüssel versehen sind, um anzugeben, wie es angezeigt wird und was es tut.
  • Wir beginnen mit einem "type" => "title"-Array - dieses wird verwendet, um den Themennamen und einen Titel oben auf der Seite anzuzeigen
  • Jeder Abschnitt (Allgemein, Homepage und Fußzeile) verfügt über eine separate Liste von Optionen.
  • We start a new section by closing any previous sections, declaring a new section using array( "name" => "Footer "type" => "section") und öffne einen neuen Abschnitt.
  • Für jede Option können die folgenden Optionen angegeben werden:
    name: Der Name des Eingabefeldes.
    desc: Eine kurze Beschreibung, die dem Benutzer erklärt, was es ist.
    id: Die ID des Feldes, dem der Kurzname vorangestellt ist. Es wird verwendet, um die Optionen zu speichern und darauf zuzugreifen.
    type: Der Eingabetyp - Auswahl, Text oder Textbereich
    options: Wird verwendet, um ein Array von Optionen für eine Eingabe vom Typ Select zu deklarieren.
    std: Der Standardeingabewert, der verwendet wird, wenn keine andere Eingabe erfolgt.

Schritt 5

Versuchen Sie, zu WordPress zu navigieren. Sie werden sehen, dass es nirgendwo eine Option gibt, um die Admin-Panel-Seite tatsächlich anzuzeigen. Wie können wir es sehen? Fügen Sie der Datei functions.php die folgenden Codeteile hinzu:

Diese Funktion dient zum Aktualisieren von Optionen sowie zum Hinzufügen einer Menüseite. Wenn die Optionen gespeichert werden (angezeigt durch das Speichern einer versteckten Variablen), werden alle Optionen mit ihren neuen Werten aktualisiert. Wenn die Optionen zurückgesetzt werden (angezeigt durch eine andere versteckte Variable mit einem Wert-Reset), werden alle Optionen gelöscht. In der letzten Zeile wird eine Menüseite hinzugefügt. Die Parameter sind Name und Titel, die zum Anzeigen der Seite erforderliche Benutzerberechtigungsstufe, die Speicherseite und die zum Anzeigen/Speichern verwendete Funktion (in unserem Fall mytheme_admin genannt). Sehen Sie die mytheme_add_init, eine blanbk-Funktion? Lassen Sie das sein, wir werden später darauf zurückkommen.

Schritt 6

Immer noch keine Seite mit Themenoptionen, oder? Erinnern Sie sich an die Funktion mytheme_admim, über die wir vor einigen Zeilen gesprochen hatten? Wir haben diese Funktion noch nicht geschrieben. Verwenden Sie also den Code aus den Schritten 6, 7 und 8, um diese Funktion zu schreiben. Start:

Ziemlich einfach, oder? Wenn die Optionen gespeichert wurden, schreiben Sie eine entsprechende Nachricht. Ebenso für Resets. Sie werden eine class="updated fade" bemerken - WordPress wird dies in einigen Abschnitten automatisch ausblenden. Schlau, richtig? Weiter geht es mit dem Div "rm_wrap".

Schritt 7

Von oben fortfahren, folgenden Code einfügen:

Das ist ein großer Code! Erläuterung - Unter Verwendung einer PHP-Foreach-Schleife wird jeder Optionstyp von Fall zu Fall bewertet. Wir verwenden hierfür eine Switch-Case-Technik. Die Schaltvariable sind die Optionen - die Fälle werden abgeglichen und ausgewertet. Beachten Sie die 'break'-Anweisung nach jedem Fall? Dies soll verhindern, dass etwas als "Fall-Through" -Eigenschaft bekannt ist. Wenn ein Fall abgeglichen wird, werden auch alle aufeinander folgenden Fälle ausgeführt. Dies bedeutet, dass, wenn wir mit Fall 3 übereinstimmen, auch Fälle 4,5 usw. ausgeführt werden. Das wollen wir doch nicht, oder? Verwenden Sie also eine Pause, um das Schaltgehäuse anzuhalten.

Wenn es eine Option vom Typ "offen" gibt, wird nichts unternommen. Wenn es Optionen vom Typ "Schließen" gibt, werden zwei Divs geschlossen. Die Option "Titel" wird nur einmal verwendet - es handelt sich um eine Einführung in die Themenoptionen. Für jeden der Typen "text" (input type="text"), "select" (dropdowns), "checkbox" und "textarea" (es ist offensichtlich, was diese bedeuten) wird die entsprechende Eingabe angezeigt. Beachten Sie das <div class="clearfix"> - es wird zum Löschen von Floats verwendet, was wir später tun werden.

Schritt 8

Wir kommen zum Ende dieser ziemlich massiven Funktion. Fügen Sie den folgenden Code ein:

Für eine Option vom Typ "Abschnitt" habe ich eine Zählervariable $i verwendet. Dadurch wird die Abschnittsnummer verfolgt und mit dem Namen der Senden-Schaltfläche verknüpft, um eindeutige Senden-Schaltflächen zu erhalten. Am Ende befindet sich auch ein letztes Formular zum Zurücksetzen aller Optionen. Das verwendete Bild wird ein transparentes Bild sein, das in unserer jQuery-Fication verwendet wird. Verwenden Sie diesen allerletzten Code, um unsere Funktionen ins Spiel zu bringen:

Das weist WordPress an, das Admin-Menü hinzuzufügen.

Schritt 9

Und voila! Wir haben unsere eigene fantastische Admin-Panel-Seite mit einer separaten Menüposition für sich. Probieren wir es aus - klicken Sie auf den Link. Und igitt. Das muss die hässlichste Admin-Panel-Seite aller Zeiten sein. Rufen wir also unseren guten Freund CSS an! Erstellen Sie einen neuen Ordner im Verzeichnis nettuts/und nennen Sie ihn "functions". Erstellen Sie dort eine neue CSS-Datei - functions.css. Fügen Sie den folgenden Code ein:

Ich werde hier nichts erklären; Es ist ziemlich klar, was jede CSS-Deklaration bewirkt, und Sie können das Layout an Ihr eigenes Thema anpassen.

Schritt 10

Jetzt haben wir also eine schöne CSS-Datei. Aber wie fügen wir es der Seite hinzu? Schließlich haben wir keinen direkten Zugriff auf den <head> des Dokuments. Erinnern Sie sich an die leere Funktion mytheme_add_init(), die wir in Schritt 4 geschrieben haben? Das wird nützlich sein. Ändern Sie es in dieses:

Dadurch wird die Datei functions.css zum Kopf hinzugefügt. Der Speicherort der Datei wird durch das Vorlagenverzeichnis bestimmt.

Schritt 11

Schauen Sie sich jetzt die Seite an. Ziemlich gut aussehend, nicht wahr? Aber dann, fragen Sie, wofür ist das '+' Symbol? Hier kommt jQuery ins Spiel!. Erstellen Sie eine neue Datei rm_script.js im Ordner nettuts/functions/. Fügen Sie den folgenden Code ein:

Dies bedeutet: Sobald das DOM geladen ist, werden alle rm_options nach oben verschoben. Wenn Sie auf das Symbol '+' klicken, wird die inaktive Klasse aus dem Bild entfernt und die aktive Klasse hinzugefügt, wodurch sie zu einem '-' Symbol wird. Der umgekehrte Vorgang erfolgt, wenn auf das Symbol '-' geklickt wird. Die rm_options werden dann mithilfe der Funktion slideToggle nach oben oder unten verschoben (bestimmt durch den aktuellen CSS-Status) - ziemlich einfach. Um dieses Skript hinzuzufügen, wird dieselbe Funktion mytheme_add_init() verwendet. Ändern Sie es in:

Das jQuery-Skript ist jetzt aktiv. Gp check es aus. Persönlich finde ich es schön!

Schritt 12

Nachdem wir unsere Seite mit den Themenoptionen eingerichtet hatten, arbeitete ich Sie nur mit den Optionen durch. Der Code zur Verwendung der Optionen ist so:

Dadurch werden die Optionen nt_color_scheme abgerufen. Siehe die folgenden Beispiele:

Die Verwendungsvielfalt ist nur durch Ihre Vorstellungskraft begrenzt.

Abschluss

Ich hoffe, Sie haben in diesem Tutorial etwas gelernt. Dies ist nicht Ihr Standard-Optionsfeld. Dieser verwendet keine Tabellen, ist jQuery-erweitert, verwendet fantastisches CSS und ist extrem einfach zu bedienen. In diesem Lernprogramm geht es darum zu lernen, dass Sie zusammenklappbare Bedienfelder jederzeit durch Registerkarten oder sogar etwas Fortgeschritteneres ersetzen können. Nutzen Sie Ihre Kreativität! Fühlen Sie sich frei, in den Kommentaren zu diskutieren oder Fragen zu stellen!

WooThemes hat seitdem Version zwei seines Frameworks veröffentlicht. Sie können die Details hier überprüfen.

  • Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um die besten Webentwicklungs-Tutorials im Web zu erhalten.
Advertisement
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.