So erstellen Sie eine benutzerdefinierte Verwaltungsseite in WordPress Dashboard

Artikel geschrieben von:
  • Featured Articles
  • Aktualisiert: Juni 30, 2013

Als WordPress vor einigen Jahren Kubrick enthüllte, was früher sein Standardthema war, gab es auch eine aufregende neue Funktion. Bei dieser Funktion handelte es sich um die benutzerdefinierte Themenverwaltung, die 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, den 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 in diesem benutzerdefinierten Verwaltungsbereich 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 die Datei "functions.php" vorhanden ist, und erstellen Sie mit Ihrem Textbearbeitungsprogramm eine neue Datei mit dem Namen "functions.php". Diese Datei kann dann gespeichert und über auf den Server hochgeladen werden FTP. Sie kann direkt auf dem Server bearbeitet werden, sodass kein Textbearbeitungsprogramm erforderlich ist.

Der erste Schritt, um ein gültiges Bedienfeld für Designoptionen in der Datei "functions.php" zu definieren, besteht darin, oben im Dokument zwei Variablen zu definieren. Diese Variablen werden verwendet, um den Namen des Themas über das Dashboard anzuzeigen und um Formular- und Auswahlelemente auf dieser Verwaltungsseite zu identifizieren. Beachten Sie den folgenden Code, platzieren Sie ihn oben in Ihrem „functions.php“ -Dokument 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 vor allem über die möglichen Einstellungen gedruckt und hilft dabei, den unerfahrenen Benutzern die Zweckmäßigkeit zu verdeutlichen. 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 ("type" => "open"),

Jetzt können wir die Optionen für das Erscheinungsbild von Themen definieren, wobei jede Option 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 Beispieldesign einen Link zur Website des Designentwicklers sowie Informationen zur Versionsverwaltung. Dies ist für eine große Anzahl von WordPress-Benutzern nicht wünschenswert, die ihre eigenen Informationen in der Fußzeile ablegen möchten. Wenn Sie diese benutzerdefinierte Steuerung aktivieren, können Sie die Datei "footer.php" nicht manuell bearbeiten. Hier ist, wie es gemacht wird.

Array (
"Name" => "Text für benutzerdefinierte Fußzeile",
"Desc" => "Dies ist der Text, der am Ende jeder Seite dieses Themes angezeigt wird.",
"Id" => $ shortcode. "_ Custom_footer",
"Typ" => "Text",
“Std” => “Experimentelles Design 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 Ausgangsordner eines Themas einen Zweck erhalten hat, muss sie noch von WordPress erkannt oder in die vielen anderen Einstellungsseiten des WordPress-Dashboards aufgenommen werden. Dies liegt daran, dass die Optionsseite des Themas auf der Funktionsseite identifiziert und angegeben werden muss, wohin sie gehen soll (entweder als unabhängiges Seitenleistenelement oder in der Gruppierung "Einstellungen"). Dies geschieht mit einer relativ einfachen Funktion, die der Datei "functions.php" unterhalb der Arrays möglicher Anpassungen hinzugefügt wird:

Funktion experimental_theme_save_values ​​() {
globaler $ longname, $ shortcode, $ Einstellungen;
if ($ _GET ['page'] == basename (__ 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: themes.php? page = functions.php & saved = true");
sterben;
} else if ('reset' == $ _REQUEST ['action']) {
foreach ($ einstellungen als $ wert) {
delete_option ($ value ['id']); }
Header ("Speicherort: themes.php? page = functions.php & reset = true");
sterben;
}
}
add_menu_page ($ longname. ”Darstellungseinstellungen”, “”. $ longname. ”Darstellungseinstellungen”, 'edit_themes', basename (__ FILE__), 'experimental_theme_save_values');

Dieser Code macht zwei Dinge. Erstens können die Einstellungen des Themas über das Administrations-Optionsfeld 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 Themenoptionenbedienfeld wechseln kann. Es ist wie die eigentliche Seite mit "Darstellungseinstellungen" beschriftet. Konsistenz ist der Schlüssel, um Verwirrung zu vermeiden und Benutzer auf die Seite zu leiten, ohne sie ausdrücklich anzuweisen, zum Optionsfeld zu gelangen, 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.' Darstellungsanpassungen wurden erfolgreich gespeichert.
';
if ($ _REQUEST ['reset']) echo '
'. $ themename.' Darstellungsanpassungen wurden erfolgreich zurückgesetzt.
';

Unter diesen beiden Codezeilen kann der PHP-Abschnitt der Datei functions.php mit dem Endetag?> Geschlossen werden. Darunter wird XHTML-Code eingefügt, um die Elemente mit dem Standard-Stylesheet von WordPress Dashboard 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; case '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> <small> <? php echo $ value ['desc']; ? > </ small> </ td>
</ tr> <tr> <td colspan = "2"> </ td>
</ tr>

<? php break;}? >

<input type = ”submit” value = ”<? php _e ('Save Theme Settings')? > ”/>

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

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:

echo $ apdt_custom_footer; ? >

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

In der Kopfzeile muss das Design angewiesen werden, nach 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 der Inhalt gedruckt werden kann auf die Website. Dies geschieht, indem Sie die folgende PHP-Variable in den Header der Website einfügen (normalerweise die Datei "header.php"):

<? php globale $ Einstellungen;
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

Keine WordPress-Entwicklungsarbeit 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, und stellen Sie sicher, dass Sie in der Seitenleiste zur Kategorie „Darstellung“ navigieren und das entsprechende Thema aktivieren, wenn das Thema, an dem Sie gearbeitet haben, derzeit nicht ausgewählt ist.

Von dort aus ein paar Dinge prüfen:

  1. Stellen Sie sicher, dass der Link zu den Einstellungen des Themas als eigenständige Entität in der Seitenleiste unter der Kategorieüberschrift „Einstellungen“ 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.