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

Erstellen Sie eine Einstellungsseite für Ihr WordPress Theme

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Erstellen Sie Ihr eigenes Thema für WordPress ist eine gute Möglichkeit, um Ihren Blog oder andere WordPress powered Website eine originelle Note geben. Aber selbst das netteste Thema ist nicht so schön, wenn man sich unter die Haube machen und den HTML- oder PHP-Code des Themas bearbeiten muss, wenn es Zeit ist, einige Aspekte davon zu ändern. Vor allem, wenn Sie nicht ein zahlender Kunde sind, der Ihr Thema verwendet. Glücklicherweise ist das Erstellen einer Einstellungsseite für Ihr Thema in WordPress nicht sehr schwer, und nachdem Sie dieses Tutorial gelesen haben, können Sie es in kürzester Zeit erstellen!


Schritt 1 Entscheiden, welche Einstellungen benötigt werden

Alles beginnt mit der Notwendigkeit: Um eine klare und nützliche Einstellungsseite zu erstellen, müssen Sie herausfinden, welche Dinge geändert werden müssen und alles andere auslassen. Jede neue Einstellung, die Sie den Admin-Menüs hinzufügen, erhöht die Komplexität der Benutzeroberfläche und erhöht die Gefahr, dass das Thema schwieriger zu verwenden ist. Deshalb ist es besser, vorsichtig zu sein und die Optionen auszuwählen, die häufig geändert werden, und einmal Anpassungen auszulassen, die leicht vorgenommen werden können, wenn eine Datei innerhalb des Themas geändert wird.

Eine andere Frage, die Sie beachten sollten, ist: "Wer wird diese Einstellungen ändern?" Wenn der Benutzer mit PHP und WordPress vertraut ist, kann es vernünftig sein, zu erwarten, dass er seinen Google Analytics-Code in den Code selbst einbetten kann, aber Sie sollten dies nicht von einem Grafikdesigner verlangen, ganz zu schweigen von einem Autor, der das nicht tut muss nicht einmal etwas über HTML und CSS wissen.

Zu den allgemeinen Ideen für Dinge, die in Designeinstellungen definiert werden können, gehören:

  • Der Google Analytics-Tracking-Code der Website
  • Die Anzahl der Seitenleisten und ihre Positionierung (links, rechts, vielleicht sogar auf und ab)
  • Seitenbreite
  • Der Inhalt Ihrer Fußzeile
  • Optionen für themenspezifische Funktionen, z. B. benutzerdefinierte Teaser-Formate.

Nachdem Sie die Liste der Designfeatures, die Sie über eine Einstellungsseite steuern möchten, gesammelt haben, sind Sie fast bereit, mit der Implementierung zu beginnen. Bevor Sie fortfahren und Ihre Einstellungsseite erstellen, können Sie Zeit sparen, indem Sie sicherstellen, dass für die gewünschte Anpassung keine WordPress-Funktion verfügbar ist. Widgets, benutzerdefinierte Menüs, benutzerdefinierte Hintergründe und Header-Bilder sind nützliche Werkzeuge, um Ihr Thema anpassbar zu machen, mit viel weniger Arbeit, als für das Erstellen eigener Einstellungen erforderlich ist. Sie sind jedoch Themen für ein anderes Tutorial.

In diesem Lernprogramm erstellte Einstellungen

Für dieses Tutorial habe ich mir eine Titelseite ausgedacht, die aus einem Gitter mit einer variierenden Anzahl von vorgestellten Posts besteht, die vom Administrator auf einer Seite mit benutzerdefinierten Einstellungen ausgewählt, bearbeitet und neu geordnet werden können.

Im Editor werden die Elemente der ersten Seite als eine Liste von Elementen dargestellt, denen mit JavaScript und jQuery neue Elemente hinzugefügt werden können.

Ich möchte in der Lage sein, eine Vorschau der Admin-Seite im WordPress-Admin zu sehen, während ich den HTML-Code entwerfe. Daher fange ich normalerweise an, eine Einstellungsseite mit WordPress zu verknüpfen und gehe erst dann zum Design des Inhalts der Seite. Aus diesem Grund erstellen wir im nächsten Schritt eine Platzhalter-Einstellungsseite und hängen sie an WordPress an.


Schritt 2 Die Einstellungsseite mit WordPress verbinden

Das Erstellen einer Einstellungsseite beginnt mit dem Erstellen einer Funktion, mit der das Menü eingerichtet und an die WordPress-Aktion admin_menu angehängt wird. Dies weist WordPress an, Ihre Funktion aufzurufen, wenn es an der Zeit ist, die Menüs so zu erstellen, dass alles zur richtigen Zeit ausgeführt wird. Fügen Sie diesen Code der Datei functions.php Ihres Themes hinzu:

Wir werden nun den Code zum Erstellen der Einstellungsseiten in die soeben erstellte Funktion einfügen.

Beim Erstellen Ihrer Einstellungsseite haben Sie die Wahl, entweder die Seite als Untermenü zu einer der vorhandenen Einstellungsgruppen hinzuzufügen oder ein eigenes Top-Level-Menü zu erstellen.

Das Hinzufügen eines Untermenüs erfolgt über die Funktion add_submenu_page:

  • $parent_slug ist eine eindeutige Kennung für die oberste Menüseite, zu der dieses Untermenü als untergeordnetes Element hinzugefügt wird.
  • $page_title ist der Titel der Seite, die hinzugefügt werden soll
  • $menu_title ist der Titel im Menü (oft eine kürzere Version von $page_title)
  • Die $capability ist die minimale Fähigkeit, die von einem Benutzer benötigt wird, um Zugang zu diesem Menü zu haben.
  • $menu_slug ist eine eindeutige Kennung für das zu erstellende Menü
  • $function ist der Name einer Funktion, die aufgerufen wird, um diese Menüseite zu bearbeiten (und zu rendern)

Wenn Sie die Menüseite als Untermenü zu einer der WordPress-Gruppen hinzufügen, können Sie die folgenden Werte als $parent_slug Parameter verwenden:

  • Dashboard: index.php
  • Beiträge: edit.php
  • Medien: upload.php
  • Links: link-manager.php
  • Seiten: edit.php?post_type=page
  • Kommentare: edit-comments.php
  • Aussehen: themes.php
  • Plugins: plugins.php
  • Benutzer: users.php
  • Werkzeuge: tools.php
  • Einstellungen: options-general.php

Die Gruppe Aussehen sieht wie ein guter Kandidat zum Platzieren Ihrer Einstellungsseite aus. Lass es uns versuchen und erstelle unsere erste Einstellungsseite. Hier ist eine aktualisierte Version unserer Menü-Setup-Funktion:

Wir müssen noch die Funktion theme_front_page_settings erstellen, damit dies funktioniert. Hier ist es in seiner einfachsten Form:

Und so sieht es in Aktion aus:

Wir müssen auch überprüfen, ob der Benutzer die Rechte hat, die zum Bearbeiten der Einstellungsseite erforderlich sind. Fügen Sie dazu am Anfang der Funktion der Einstellungsseite den folgenden Code hinzu:

Wenn nun ein Benutzer, der keine Optionen verwalten darf, auf die Einstellungsseite gelangt, sieht er nur die Meldung "Sie haben keine ausreichenden Berechtigungen, um auf diese Seite zuzugreifen".

Wenn Ihr Design mehrere Einstellungsseiten benötigt, kann es für den Benutzer verwirrend sein, nach ihnen zu suchen, die über die gesamte Menüstruktur verstreut sind. In diesem Fall erleichtert es das Erstellen einer eigenen Einstellungsgruppe dem Benutzer, alle Menüseiten für das Thema zu finden.

Um eine eigene Einstellungsgruppe hinzuzufügen, müssen Sie eine Top-Level-Menüseite erstellen und die Untermenü-Seiten damit verknüpfen. Hier ist eine neue Version unserer Menü-Setup-Funktion. Die Funktion add_menu_page, die zum Erstellen des Top-Level-Menüs verwendet wird, ähnelt der Seite add_submenu_page, außer dass der Parameter $parent_slug nicht verwendet wird.

Wenn Sie den Code testen und den WordPress-Administrator aktualisieren, wird Ihre neue Menügruppe am Ende der Menüliste angezeigt:

Aber etwas sieht noch nicht ganz richtig aus. Wenn Sie auf das oberste Menüelement klicken, gelangen Sie nicht zum Menü "Front Page", sondern zur Menüseite "Beispieldesign". Dies ist nicht konsistent mit der Funktionsweise der anderen WordPress-Menüs. Lassen Sie uns also noch etwas tun: Indem wir das Attribut $menu_slug im Aufruf add_submenu_page auf denselben Wert wie im Menü der obersten Ebene ändern, können wir die beiden Menüs verknüpfen Das Hauptmenü wählt das Menü der Startseite aus:

Sieht besser aus. Wenn Sie das Aussehen Ihrer Menügruppe noch verbessern möchten, gibt es in der Funktion add_menu_page zwei optionale Felder, die Sie nützlich finden. Fügen Sie einfach die Werte nach dem Funktionsnamen im Methodenaufruf hinzu:

  • $icon_url gibt die URL eines Symbols für das oberste Menü an.
  • $position gibt die Position Ihrer Menügruppe in der Menüliste an. Je höher der Wert, desto niedriger die Position im Menü.

Schritt 3 Erstellen des HTML-Formulars für die Einstellungsseiten

Jetzt, da wir die Einstellungsseite erstellt haben und sie im Seitenmenü angezeigt wird, ist es an der Zeit, Inhalte hinzuzufügen. Lassen Sie uns also zu der Liste der Einstellungen zurückkehren, die wir im Auge hatten, und eine Seite für die Bearbeitung erstellen.

In diesem Tutorial benötigen wir ein Feld, um festzulegen, wie viele Elemente in einer Zeile aufgelistet werden sollen, und eine Liste, um die tatsächlichen Elemente zu definieren. Um von dem einfacheren zu beginnen, erstellen wir ein Textfeld für die Anzahl der Elemente in einer Zeile. Bearbeiten Sie Ihre Einstellungen Seite Funktion:

Wenn Sie Ihre Einstellungsseite neu laden, wird das erste Einstellungsfeld angezeigt:

Damit die Einstellungsseite nahtlos in das WordPress-Erlebnis passt und Ihrem Plugin eine professionelle Note verleiht, sollten Sie die CSS-Klassen und -Stile verwenden, die WordPress auf seinen eigenen Einstellungsseiten verwendet. Eine gute Möglichkeit, die Tricks zu lernen, besteht darin, einfach den WordPress-Quellcode zu analysieren.

Die wichtigste Sache ist, Ihre Einstellungsseite mit einem div mit der Klasse "wrap" zu umhüllen. Innerhalb dieses div Elements können Sie viele vordefinierte Stile wie Überschriften, Schaltflächen und Formularfelder verwenden. Beginnen wir damit, den Titel unserer Einstellungsseite zu gestalten:

  • Wir erstellen eine h2 Überschrift für die Seite (Sie können die Überschriften-Tags von h2 bis h6 verwenden, um Überschriften mit unterschiedlichen Größen zu erstellen.)
  • Wir zeigen das Seitensymbol für die Motiveinstellungen vor der Überschrift. (Sie können die vordefinierten WordPress-Symbole mit der Funktion screen_icon verwenden. Die Funktion kann einen der folgenden Parameter verwenden: indexedituploadlink-managerpagescommentsthemespluginsuserstools oder options-general.)
  • Wir werden das input element in ein Formular und eine Tabelle mit der Klassen form-table einfügen.

Als nächstes ist es Zeit, mit dem Hinzufügen der Elemente zu beginnen.

Um dies zu erreichen, verwenden wir jQuery, da es die Arbeit wesentlich einfacher macht als das Schreiben von JavaScript von Grund auf neu und mit WordPress ausgeliefert wird. Wenn Sie jQuery schon einmal verwendet haben, sollten Sie nur eines beachten: Die $ notation, die Sie normalerweise mit jQuery verwenden würden, funktioniert in WordPress nicht - Sie müssen stattdessen das ganze Wort jQuery eingeben.

Zuerst erstellen wir das Element zum Bearbeiten der Einstellungen für einen Hauptseitenblock, der als Vorlage für die Elemente dienen soll, die vom Benutzer hinzugefügt werden. Fügen Sie diesen Code direkt zwischen dem Tag der schließenden Tabelle und dem Tag des schließenden Formulars hinzu.

Jetzt sieht es so aus:

Jetzt, wo wir unsere Vorlage haben, ist es an der Zeit, sie auszublenden und das JavaScript zu erstellen, um damit neue Feature Post-Zeilen auf der Einstellungsseite zu erstellen. Legen Sie den Stil für das oben angezeigte li element display:none;

Anschließend erstellen wir eine Liste, in der die Elemente der ersten Seite so gespeichert werden, wie sie hinzugefügt werden, und einen Link, auf den der Benutzer klickt, um die neuen Elemente hinzuzufügen. Ich wiederhole den gesamten HTML-Code, damit Sie deutlich sehen können, wohin die Änderungen gehen:

In einem realen Thema ist es eine gute Übung, Ihren JavaScript-Code in eine separate Datei zu stellen, aber um dieses Tutorial ein wenig einfacher zu machen, füge ich jetzt das JavaScript in derselben Funktion mit dem obigen HTML direkt vor dem wrap hinzu div:

Der obige JavaScript-Code erstellt eine Funktion, die aufgerufen wird, wenn der Benutzer auf den Link mit der ID add-featured-post klickt. Diese Funktion klont das Template-Listenelement, das wir zuvor erstellt haben, und aktualisiert seine Felder, um eindeutige IDs und Namen zu erhalten. Auf diese Weise werden alle ordnungsgemäß mit dem Formular gesendet, wenn der Benutzer auf Senden klickt. Die Variable elementCounter enthält die nächste hinzuzufügende ID. Es wird auch in einem versteckten Feld gespeichert, so dass wir wissen, wie viele Elemente auf der Vorderseite erwartet werden, wenn das Formular gesendet wird.

Wenn Sie mehrmals auf den Link "Vorgestellten Beitrag hinzufügen" klicken, sehen Sie, wie neue Elemente zur Liste hinzugefügt werden:

Wenn Sie jedoch auf den Link zum Entfernen klicken, werden Sie feststellen, dass nichts passiert. Fügen wir eine Funktion zum Entfernen von Elementen aus der Liste hinzu:

Wir müssen auch die Funktion aufrufen. Fügen Sie den folgenden Code hinzu, bevor Sie elementCounter inkrementieren.

Bevor Sie das Formular speichern, müssen Sie noch etwas tun. Wir verwenden das ui.sortable jQuery-Plugin, um die Titelseitenelemente sortierbar zu machen, indem Sie sie auf die Seite ziehen. Um die Sortierfunktion zu aktivieren, müssen wir die richtige JavaScript-Datei (die ebenfalls mit WordPress ausgeliefert wird) einbinden. Dies kann durch Hinzufügen der folgenden Codezeile am Ende von functions.php erfolgen:

Anschließend fügen wir das folgende JavaScript direkt vor (oder nach) jQuery("# add-featured-post").click: Klicken Sie auf die oben definierte Funktion.

Dieser Ausschnitt macht die Liste sortierbar und fügt ein Ereignis hinzu, das immer dann aufgerufen wird, wenn der Benutzer die Sortierung beendet hat. Der Event-Handler aktualisiert alle IDs in den Elementen, so dass die neue Reihenfolge auch beim Speichern des Formulars erhalten bleibt (dies wird deutlicher, sobald wir das Speichern implementieren). Als ich diesen Stop-Handler geschrieben habe, ist mir aufgefallen, dass der Code zum Setzen der ID für den Inhalt der Vorlage an zwei Stellen dupliziert wurde, also habe ich ihn in eine eigene Funktion umgestaltet, die ich direkt vor der Zeile mit jQuery(document).ready() platziert habe:

Wenn Sie neue Elemente hinzufügen, sortieren und entfernen, ist es an der Zeit, die Daten zu speichern. Aber zuvor fügen Sie direkt vor dem schließenden Tag des Formulars eine Senden-Schaltfläche hinzu.


Schritt 4 Speichern Sie das Formular

Die Einstellungsseite sieht gut aus, aber es fehlt etwas: Es tut noch nichts. Es ist Zeit, einige Daten zu speichern. WordPress bietet ein einfaches System zum Speichern von Themen- und Plugin-Einstellungen als Schlüsselwertpaare zur Datenbank mit zwei Funktionen: get_option und update_option. Die mit den Funktionen gespeicherten Daten können so einfach wie ein Zahlenwert oder so komplex wie ein mehrfach verschachteltes Array sein.

Die Handhabung des Formulars erfolgt in der gleichen Funktion, die das Formular rendert. Um zu wissen, ob ein Formular übergeben wurde oder nicht, fügen wir dem Formular ein verstecktes Feld update_settings hinzu und prüfen dann, ob dieses Feld in der Handling-Funktion gesendet wurde oder nicht.

Das verborgene Feld, das in das Formular hineingeht, sieht folgendermaßen aus:

Beginnen wir damit, die einfachere Einstellung num_elements zu speichern. Wir werden dem Attribut entkommen, um sicherzustellen, dass der Benutzer keine schädlichen Inhalte in den HTML-Tags sendet und speichert sie dann im WordPress-Einstellungsspeicher. Bei Verwendung von update_option müssen wir uns keine Gedanken darüber machen, ob die Einstellung bereits gespeichert wurde oder nicht.

Bevor wir zum Speichern der Liste übergehen, fügen wir dem Einstellungsformular den aktuellen Wert von num_elements hinzu, damit der Benutzer immer sehen kann, welchen Wert er eingegeben hat, bevor er den nächsten Wert festlegt. Dies hilft uns auch zu testen, dass der Wert tatsächlich gespeichert wurde.

Und in Fällen, in denen wir noch nichts gespeichert haben, müssen wir den aktuellen Wert aus den Optionen laden. Fügen wir also dieses Codeelement hinzu, das ausgeführt werden soll, wenn kein Formular gesendet wird.

Wenn ein Formular gespeichert wird, ist es wichtig, den Benutzer zu benachrichtigen, damit sie sich nicht fragt, ob etwas passiert ist oder nicht. Also, lassen Sie uns einen einfachen Hinweis mit den Worten "Einstellungen gespeichert" rendern. gleich nach der update_option:

Dann speichern wir die Elemente der ersten Seite. Der höchste ID-Wert in den Front Page-Elementen wird als element-max-id übergeben, sodass wir diesen Wert übernehmen und Elemente bis zu dieser ID durchlaufen können, um ihre Daten in der richtigen Reihenfolge in einem Array zu speichern:

Dies speichert die Daten, aber wir müssen die Werte weiterhin auf der Einstellungsseite anzeigen. Also, machen wir dasselbe wie mit dem Feld num_elements und laden Sie die Standardoptionen am Anfang der Funktion:

Und dann rendern Sie die vorhandenen Elemente beim Ausführen des Formulars:

Außerdem müssen wir den Anfangswert für die in JavaScript verwendete Variable elementCounter festlegen, indem Sie den Anfangswert des ausgeblendeten Felds in PHP festlegen und ihn beim Initialisieren der JavaScript-Variablen einlesen:

Und der JavaScript-Teil:


Schritt 5 Verwenden der Einstellungen innerhalb des Designs

Das Speichern und Anzeigen von Einstellungswerten im Admin-Bereich ist großartig, aber was wirklich zählt, ist, wie du sie verwendest, um dein Theme anzupassen. Jetzt sind wir also an dem Punkt angelangt, an dem es an der Zeit ist, unsere Einstellungen zu übernehmen.

Ab hier gehen Änderungen in index.php statt in functions.php. Zuerst lesen wir die Optionen zu Variablen:

Lassen Sie uns die $elements-Liste durchlaufen und sie in Zeilen mit $num_elements-Blöcken gruppieren.

Und dann, unter Verwendung der für jedes Element gespeicherten Daten, füllen wir den obigen Element-Rendering-Teil aus:

Mit ein paar Elementen sieht es so aus:

Immer noch ziemlich langweilig. Die Beiträge haben keine Vorschaubilder und es gibt kein Styling für sie. Um sie besser aussehen zu lassen, fügen wir zuerst Unterstützung für Post-Thumbnail-Bilder hinzu. Dies geschieht, indem eine neue Funktion angehängt wird, die direkt nach dem Laden des Themes aufgerufene Themenfunktionen einrichtet

Die Funktion setup_theme_features schaltet die Post-Thumbnails mit der WordPress-Funktion add_theme_support ein, so dass WordPress diese Funktionalität der Post-Speichern-Seite hinzufügt. Auf der Post-Seite können wir jetzt ein Bild als Thumbnail hinzufügen, indem Sie nach dem Hochladen des Fotos auf der Bild-Upload-Seite auf "Als ausgewähltes Bild verwenden" klicken.

Die Funktion definiert auch einen neuen Bildgrößentyp, tutorial-thumb-size, der verwendet wird, wenn das Post-Thumbnail im Rendering-Code abgerufen wird.

Nachdem Sie das vorgestellte Bild ausgewählt haben, speichern Sie die Änderungen und laden Sie die Startseite erneut. Sieht schon interessanter aus:

Schließlich werden wir style.css ein paar Stile hinzufügen, und das Thema hat eine konfigurierbare Anzeige von Posts:


Fazit

Jetzt haben wir eine Einstellungsseite für ein benutzerdefiniertes Design erstellt. Das Thema ist noch lange nicht abgeschlossen, aber ich hoffe, dass Sie mit dieser Einführung begonnen haben, Ihrem nächsten WordPress-Theme Einstellungen und anpassbare Elemente hinzuzufügen.

Advertisement
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.