So erstellen Sie eine benutzerdefinierte Verwaltungsseite in WordPress Dashboard

Aktualisiert: 30. Juni 2013 / Artikel von: Jerry Low

Als WordPress vor einigen Jahren das frühere Standardthema Kubrick vorstellte, wurde auch eine aufregende neue Funktion vorgestellt. Diese Funktion war das benutzerdefinierte Themenverwaltungsfenster, das durch Definieren von Funktionen und Einstellungen in der themenspezifischen Datei „functions.php“ aktiviert wurde. In den folgenden Jahren wurde die Seite mit den Themenoptionen von vielen Designern leider nicht ausreichend genutzt, aber es ist eine großartige Möglichkeit, Benutzern die Kontrolle über das Erscheinungsbild ihrer Website zu geben, ohne sie zu zwingen, ein neues Thema zu installieren. Dinge wie das Hintergrundbild des Themas, die Anzahl der Spalten und sogar die Schriftfarben können über dieses benutzerdefinierte Verwaltungsfenster geändert werden.

Das Administrationsfenster selbst wird geändert, indem die Funktionsdatei des Themas mit einer Reihe von PHP-Arrays gefüllt wird, die benutzerdefinierte Werte definieren. Diese Werte werden dann in die Vorlage aufgenommen und in einem Verwaltungsbereich definiert, in dem Benutzer ihre Darstellungseinstellungen visuell definieren können. Der gesamte Prozess ist relativ einfach, sobald der Theme Designer erfährt, wie ein PHP funktioniert und wie er diesen Code nutzen kann, um eine benutzerdefinierte Präsentation in seinen Vorlagendateien zu ermöglichen.

Der mehrstufige Prozess beginnt mit dem Festlegen einiger standortübergreifender Variablen und dem Festlegen, was auf dieser neuen Verwaltungsseite angepasst werden muss.

Schritt 1: Erstellen und Bearbeiten der Seite mit den themenspezifischen Funktionen.php

Wenn Sie ein eigenes Thema entwickelt haben, ist die Wahrscheinlichkeit sehr gering, dass Sie eine Datei functions.php erstellt haben, die mit den vorhandenen Vorlagendateien gekoppelt werden kann. Dies ist eine relativ fortschrittliche Option, die die meisten Designer einfach überspringen. In diesem Fall ist es wichtig, den FTP-Client Ihrer Wahl zu öffnen und auf die folgende Server-URL zu verweisen, auf der sich die Dateien des Themas befinden:

/ public_html / wp-content / themes / IHR THEMA-ORDNER /

Überprüfen Sie in diesem Ordner, ob keine Datei "functions.php" vorhanden ist, und erstellen Sie dann mit Ihrem Textbearbeitungsprogramm eine neue Datei mit dem Namen "functions.php". Diese Datei kann dann gespeichert und per FTP auf den Server hochgeladen werden. Es kann direkt auf dem Server bearbeitet werden, sodass das Textbearbeitungsprogramm nicht mehr erforderlich ist.

Der erste Schritt, um ein gültiges Themenoptionsfenster in der Datei "functions.php" zu definieren, besteht darin, zwei Variablen oben im Dokument zu definieren. Diese Variablen werden verwendet, um den Namen des Themas über das Dashboard anzuzeigen sowie Formular- und Auswahlelemente auf dieser Verwaltungsseite zu identifizieren. Beachten Sie den folgenden Code, platzieren Sie ihn oben in Ihrem Dokument "functions.php" und passen Sie ihn an die Anforderungen Ihrer Site an.

$ longname = "Administration Panel Development Theme";
$ shortcode = "apdt";

Diese Variablen dienen unterschiedlichen Zwecken. Die Variable $ longname wird verwendet, um den Namen des Themas im Bereich mit den tatsächlichen Verwaltungsoptionen auszudrucken. Aus diesem Grund wird empfohlen, dass Entwickler dieser Variablen den genauen Namen des Themas zuweisen, um Verwirrung unter den Benutzern des Themas zu vermeiden. Die Variable $ shortcode sollte aus Kleinbuchstaben ohne Interpunktion bestehen, da dies zur Identifizierung von Formularelementen im Code selbst verwendet wird. In diesem Beispiel wurde ein einfaches Akronym verwendet, das auf dem vollständigen Namen des Themas basiert. Dies kann an den Geschmack des Benutzers angepasst werden.

Schritt 2: Definieren von anpassbaren Einstellungen mithilfe von PHP-Arrays

Zunächst ist es wichtig, dem Thema den Namen des Administrationsbereichs mitzuteilen. Dies wird über alle möglichen Einstellungen gedruckt und trägt dazu bei, den Anfängern Klarheit über den Zweck zu verschaffen. Dazu fügen Sie dem $ settings-Tag in der Datei "functions.php" das folgende Array hinzu:

$ settings = Array (
Array ("Name" => $ Longname. "Darstellungseinstellungen",
"Typ" => "Titel"),

Als nächstes müssen wir angeben, dass das Array voller Optionen "offen" ist oder durch Benutzereingaben geändert werden kann. Dies geschieht mit einem anderen einfachen Array, das direkt unter der Definition des Seitentitels angezeigt wird. Es sieht aus wie das:

Array ("Typ" => "Öffnen"),

Jetzt können wir mit der Definition der Optionen für das Erscheinungsbild von Themen beginnen, wobei jede einzelne als neues Array erstellt wird. In diesem Beispiel definieren wir den Text, der in der Fußzeile des Themas platziert wird. Standardmäßig enthält das Beispielthema einen Link zur Website des Theme-Entwicklers sowie Informationen zur Versionsversion. Dies ist für eine große Anzahl von WordPress-Benutzern nicht wünschenswert, die jedoch lieber ihre eigenen Informationen in die Fußzeile einfügen möchten. Wenn Sie dieses benutzerdefinierte Steuerelement aktivieren, sparen Sie sich die manuelle Bearbeitung der Datei "footer.php". Hier ist, wie es gemacht wird.

Array (
"Name" => "Benutzerdefinierter Themenfußzeilentext",
"Desc" => "Dies ist der Text, der ganz am Ende jeder in diesem Thema enthaltenen Seite angezeigt wird.",
"Id" => $ shortcode. "_ Custom_footer",
"Typ" => "Text",
"Std" => "Experimentelles Thema v1.0. Entwickelt von John Doe. Weitere Themen hier. ”),

Das obige Array ermöglicht es dem Benutzer, den Standard-Fußzeilentext des Themas zu bestimmen. Die Array-Tags müssen jedoch erklärt werden, um besser zu beschreiben, wie dieser Prozess funktioniert und was jeder Teil des Arrays definiert.

Name: Dies bezieht sich auf den Namen des eigentlichen Textfelds selbst und wird Benutzern nicht angezeigt, wenn sie die Verwaltungsoptionsseite für das Design aufrufen.

Beschr: Dies ist eine kurze Beschreibung der benutzerdefinierten Einstellung, die den Benutzern angezeigt wird.

ID: Hierbei wird der Funktionscode zusammen mit einer benutzerdefinierten Identifikation des Formularnamens verwendet, um das Textfeld sowohl darzustellen als auch zu gestalten.

Art: Dies definiert, ob das Formularelement eine Textzeile, ein Textfeld, ein Dropdown-Menü, ein Optionsfeld oder ein Kontrollkästchen ist.

STD: Dies bestimmt den Standardwert des ausgewählten Elements. Bei einem Textfeld wird hier der Standardtext festgelegt. Bei Kontrollkästchen, Optionsfeldern und Dropdown-Feldern wird festgelegt, welche Option standardmäßig ausgewählt ist.

Schritt 3: WordPress anweisen, den Zugriff auf die Seite "Neue Optionen" zu ermöglichen

Obwohl die Optionsseite mithilfe der Datei "functions.php" im Home-Ordner eines Themas einen Zweck erhalten hat, muss sie von WordPress noch erkannt oder in die vielen anderen Einstellungsseiten des WordPress-Dashboards aufgenommen werden. Dies liegt daran, dass die Optionsseite des Themas auf der Funktionsseite angegeben und angegeben werden muss, wohin sie gehen soll (entweder als unabhängiges Seitenleistenelement oder innerhalb der Gruppierung „Einstellungen“). Dies geschieht mit einer relativ einfachen Funktion, die der Datei "functions.php" unter den Arrays möglicher Anpassungen hinzugefügt wird:

Funktion experimental_theme_save_values ​​() {
globaler $ longname, $ shortcode, $ Einstellungen;
if ($ _GET ['page'] == Basisname (__ FILE__)) {
if ('save' == $ _REQUEST ['action']) {
foreach ($ einstellungen als $ wert) {
update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); }}
foreach ($ einstellungen als $ wert) {
if (isset ($ _REQUEST [$ value ['id']])) {update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); } else {delete_option ($ value ['id']); }}
Header ("Speicherort: theme.php? page = functions.php & saved = true");
sterben;
} else if ('reset' == $ _REQUEST ['action']) {
foreach ($ einstellungen als $ wert) {
delete_option ($ value ['id']); }}
Header ("Speicherort: theme.php? page = functions.php & reset = true");
sterben;
}
}
add_menu_page ($ longname. ”Darstellungseinstellungen”, “”. $ longname. ”Darstellungseinstellungen”, 'edit_themes', Basisname (__ FILE__), 'experimentelle_theme_save_values');

Dieser Code macht zwei Dinge. Erstens können die Einstellungen des Themas über das Administrationsoptionsfenster gespeichert werden. Zweitens wird eine unabhängige Schaltfläche in der Seitenleiste des WordPress-Dashboards platziert, mit der ein Benutzer darauf klicken und direkt zum Bedienfeld für Themenoptionen wechseln kann. Es ist genau wie die eigentliche Seite mit "Darstellungseinstellungen" gekennzeichnet. Konsistenz ist der Schlüssel, um Verwirrung zu vermeiden und Benutzer auf die Seite zu leiten, ohne sie ausdrücklich anzuweisen, sich zum Optionsfeld zu begeben, um das Erscheinungsbild des Themas anzupassen.

Schritt 4: Hinzufügen von Fehlermeldungen und Schließen der PHP-Datei

Der letzte Schritt zum Ausfüllen aller Elemente des Bedienfelds mit den Designoptionen ist das Definieren von Fehlermeldungen, die einem Benutzer möglicherweise auftauchen, und anschließend sicherstellen, dass die Formularelemente im standardmäßigen WordPress-Stil auf der Optionsseite angezeigt werden können. Das Hinzufügen der Fehlermeldungen erfolgt durch Einfügen dieses Codes in die PHP-Funktionsdatei:

Funktion experimental_theme_save_values ​​() {
globaler $ longname, $ shortcode, $ Einstellungen;
if ($ _REQUEST ['saved']) echo '
'. $ themename.' Erscheinungsanpassungen wurden erfolgreich gespeichert.
‚;
if ($ _REQUEST ['reset']) echo '
'. $ themename.' Erscheinungsanpassungen wurden erfolgreich zurückgesetzt.
‚;

Unter diesen beiden Codezeilen kann der PHP-Abschnitt der Datei functions.php mit dem Endetag?> Endet geschlossen werden. Darunter wird XHTML-Code platziert, um die Elemente mithilfe des Standard-WordPress-Dashboard-Stylesheets zu formatieren.

Schritt 5: Geben Sie der Optionsseite einen Stil

Derzeit können WordPress Dashboard-Benutzer die neue Fehlerseite sehen, aber nicht viel damit anfangen. Das liegt daran, dass die Formularelemente und das Stylesheet noch nicht zur Verwendung in der Administrationsoberfläche in der Datei functions.php abgelegt wurden. Das wird sich nun ändern, da wir das Stylesheet und die Standardformularelemente für das neue Bedienfeld hinzufügen:

<div class = ”wrap”>
<h2> <? php echo $ longname; ? > Einstellungen </ h2>

<form method = ”post” action = ”options.php”>

<? php break; Fall 'Text' :? >

<tr>
<td width = ”20%” rowspan = ”2 ″ valign =” middle ”> <strong>> <? php echo $ value ['name']; ? > </ strong> </ td>
<td width = ”80%”> <input style = ”width: 100%;” name = ”<? php echo $ value ['id']; ? > ”Id =” <? Php echo $ value ['id']; ? > ”Type =” <? Php echo $ value ['type']; ? > ”Value =” <? Php if (get_settings ($ value ['id'])! = “”) {Echo get_settings ($ value ['id']); } else {echo $ value ['std']; }? > ”/> </ Td>
</ tr>

<tr>
<td> <klein> <? php echo $ value ['desc']; ? > </ small> </ td>
</ tr> <tr> <td colspan = ”2 ″> </ td>
</ tr>

<? php break;}? >

<input type = ”submit” value = ”<? php _e ('Themeneinstellungen speichern')? > ”/>

Dieser Code wird unter dem schließenden Tag der PHP-Funktionsdatei eingefügt und kann für jeden Formulartyp angepasst werden, den ein Themenoptionsfenster möglicherweise enthält. Die Variable "case" kann von "text" in Textfeld, Kontrollkästchen, Auswahl und Titel geändert werden. Diese Formulare müssen nur eingefügt, definiert und gestaltet werden, wenn sie vom Thema verwendet werden. Andernfalls ist ihre Aufnahme nicht erforderlich, und das Auslassen der Funktionsdatei des Themas fördert die Effizienz und den sauberen Code.

Schritt 9: Aktivieren der benutzerdefinierten Option im tatsächlichen Design

Es sind zwei Schritte auszuführen, um sicherzustellen, dass alle Änderungen in den öffentlichen Vorlagen eines Themas sichtbar sind. Die erste besteht darin, eine Variable in die Fußzeile des Themas einzufügen, die den benutzerdefinierten Copyright- und Versionierungstext anzeigt, den wir in den vorherigen Schritten dieses Tutorials aktiviert haben. Geben Sie dazu den folgenden Code in den Copyright-Bereich der Fußzeile ein:

<? php echo $ apdt_custom_footer; ? >

Dieser Text ruft das benutzerdefinierte Array für den zuvor definierten Fußzeilentext auf und druckt diesen Text gemäß der Anweisung „Echo“ in der Fußzeile. Dieses Tag kann in allen XHTML-Tags enthalten sein, die ein Benutzer für richtig hält. Es wird jedoch nicht angezeigt, ohne dass dem Header der Site ein Code hinzugefügt wird.

In der Kopfzeile muss das Thema angewiesen werden, nach den benutzerdefinierten Optionen zu suchen, die im WordPress-Dashboard festgelegt sind, und es muss die Variablen kennen, die in der benutzerdefinierten Datei "functions.php" definiert sind, damit es ihren Inhalt drucken kann auf die Website. Dazu wird die folgende PHP-Variable in den Header der Website eingefügt (normalerweise die Datei "header.php"):

<? php global $ settings;
foreach ($ einstellungen als $ wert) {
if (get_settings ($ value ['id']) === FALSE) {$$ value ['id'] = $ value ['std']; } else {$$ value ['id'] = get_settings ($ value ['id']); }}
}
? >

Das ist alles dazu. Jetzt kann jede in der Datei custom functions.php definierte Option im Erscheinungsbild der Seite widergespiegelt werden, indem einfach eine benutzerdefinierte PHP-Variable eingefügt wird, in der die festgelegten Anpassungen und Inhalte wirksam werden sollen.

Schritt 10: Testen Sie die neuen Einstellungen und die Optionsseite

Kein Entwicklungsaufwand für WordPress ist vollständig abgeschlossen, bis der PHP-Code in der Datei "functions.php" gründlich auf Fehler, Fehler und versehentliche Fehler getestet wurde. Das heißt, es ist Zeit zu testen! Melden Sie sich beim WordPress-Dashboard an. Wenn das Thema, an dem Sie gearbeitet haben, derzeit nicht ausgewählt ist, navigieren Sie in der Seitenleiste zur Kategorie "Darstellung" und aktivieren Sie das entsprechende Thema.

Von dort aus ein paar Dinge prüfen:

  1. Stellen Sie sicher, dass der Einstellungslink des Themas als eigenständige Entität in der Seitenleiste unter der Überschriftenkategorie "Einstellungen" der Seitenleiste angezeigt wird.
  2. Stellen Sie sicher, dass auf die angegebene Textanpassungsoption für die Fußzeile im Steuerfeld für benutzerdefinierte Optionen zugegriffen werden kann. Ändern Sie den Standardinhalt der Fußzeile und speichern Sie die Einstellung. Stellen Sie sicher, dass es ohne Fehler speichert.
  3. Besuchen Sie Ihre aktuelle, öffentliche Website, und stellen Sie sicher, dass die im Dashboard vorgenommenen Änderungen bezüglich des Inhalts der Fußzeile angezeigt werden.
  4. Wenn alles einwandfrei funktioniert, atmen Sie erleichtert auf und genießen Sie Ihre erste Kontrollfeldseite für WordPress-Designoptionen.

Über Jerry Low

Gründer von WebHostingSecretRevealed.net (WHSR) - eine Hosting-Bewertung, die von 100,000-Benutzern als vertrauenswürdig und nützlich erachtet wird. Mehr als 15 Jahre Erfahrung in den Bereichen Webhosting, Affiliate-Marketing und SEO. Mitwirkender bei ProBlogger.net, Business.com, SocialMediaToday.com und anderen.