Erstellen einer benutzerdefinierten WordPress-Theme-Optionsseite

Ganz gleich, ob Sie WordPress-Themes für sich selbst, für einen Kunden oder zum kommerziellen Verkauf entwickeln: Die Möglichkeit, Aspekte Ihres Themes über das WordPress-Kontrollfeld anzupassen, macht Ihr Theme unendlich flexibel und um ein Vielfaches vielseitiger und ansprechender. Indem Backend-Benutzern Zugriff auf Optionen gewährt wird, für die sie sonst in die PHP-Vorlagendateien eintauchen müssten, um Layout, Logobild, Farben und eine Reihe anderer Optionen zu ändern. Durch einfache Ergänzungen zur Datei „functions.php“ Ihres Themes kann jedem Theme ein praktisches Optionsfeld hinzugefügt werden. Die hier besprochenen Methoden gelten nur für WordPress 2.8 oder höher. Wenn Sie eine ältere Version von WordPress verwenden, stehen Ihnen zahlreiche weitere Tutorials zur Verfügung

Was anpassbar gemacht werden soll

Bevor wir mit dem Programmieren beginnen, müssen wir entscheiden, welche Elemente des Themes wir anpassen möchten. Dies kann alles sein, von einer Liste auswählbarer Farbschemata bis hin zu einem völlig neuen Layout für Ihre Homepage. Für unser Beispiel werde ich es einfach halten, aber dieselbe Methode kann auf jeden gewünschten Grad an Anpassung skaliert werden. Es gibt drei Elemente, die wir mit diesem Thema anpassen können:

  1. Texteingabe für einen Einleitungsabsatz auf der Homepage.
  2. Die Facebook-Profil-URL des Benutzers
  3. Eine Option zum Ausblenden oder Anzeigen des Einleitungsabsatzes.

Den Code erstellen

Ab WordPress 2.8 wurden eine Reihe von Hooks hinzugefügt, um die Erstellung benutzerdefinierter Admin-Menüs zu erleichtern. Wir werden einige davon verwenden, um unser benutzerdefiniertes Theme-Einstellungsmenü für das WordPress-Backend zu erstellen. Unser erster Codeblock ruft die Funktionen auf, um unsere neuen Optionswerte in der Datenbank zu speichern, die Anzeige unseres HTML-Codes für unsere Optionsseite zu initiieren und den Menüpunkt „Themeoptionen“ im WordPress-Backend zu erstellen.

Hier zeigen wir ein Symbol und einen Titel für die Seite sowie einen Bestätigungscode an, mit dem der Benutzer bestätigen kann, dass seine Einstellungen beim Absenden des Formulars gespeichert wurden.
“. __( ‘Benutzerdefinierte Theme-Optionen’, ‘customtheme’ ) . “

“; ?>

Jetzt erstellen wir unser Formular für unsere Designoptionen, rufen die vorhandenen Werte für jede Option ab und geben den Namen der Einstellungsgruppe an.

Als nächstes fügen wir ein wenig Code hinzu, um eine Remote-Datei zu laden, die aktuelle Informationen für den Theme-Benutzer sowie Links zu Support-Foren, Hilfedokumenten oder anderen unterstützenden Dateien anzeigen kann. Dies ist eine praktische Möglichkeit für Theme-Entwickler, Ihre Theme-Kunden mit den neuesten Informationen auf dem Laufenden zu halten, einen Tracking-Code einzufügen, um zu sehen, wer Ihr Theme verwendet, um Theme-Piraterie zu bekämpfen, Anzeigen oder Sonderangebote anzuzeigen, Warnungen vor Theme-Fehlern auszugeben und vieles mehr Möglichkeiten.

Jetzt ist es an der Zeit, unsere verfügbaren Optionen anzuzeigen. Zuerst zeigen wir ein Kontrollkästchen an, um anzugeben, ob der Einleitungsabsatz zu unserem Thema angezeigt werden soll oder nicht.

Als nächstes zeigen wir eine Texteingabe für die Facebook-URL des Benutzers an.

Anschließend zeigen wir einen Textbereich für den Text unseres Einleitungsabsatzes an .

Schließlich zeigen wir die Schaltfläche „Senden“ für unser Formular an.

Jetzt können wir herausfinden, wo wir einen Link zu unserem Facebook-Profil anzeigen möchten, und die Daten auf ähnliche Weise anzeigen. Diesmal prüfen wir zunächst, ob ein Wert eingegeben wurde. Wenn ein Wert eingegeben wurde, zeigen wir das Facebook-Symbolbild an.

Dies sind sehr einfache Beispiele für die Ausführung benutzerdefinierter Optionen, aber alles an Ihrem Thema kann auf diese Weise geändert werden, sodass die Möglichkeiten endlos sind. Ein gut gestaltetes Optionsfeld kann als Verkaufsargument für Ihr Theme dienen und ein sehr gut gestaltetes Theme noch attraktiver und vielseitiger machen.

Beispiele für das Optionsfeld

Weitere Ideen finden Sie in den Optionsfeldern einiger beliebter Theme-Entwickler.

Templatisch

Templatisch Themen haben eine sehr klare und prägnante Optionsseite.

WooThemes

Ein Hersteller hervorragender WordPress-Themes, WooThemesDas Optionsfeld bietet Zugriff auf eine Reihe von Anpassungen, die in Unterabschnitte mit eigenem benutzerdefiniertem Layout unterteilt sind.


FlexiThemes

Das FlexiPanel-Optionsfeld von FlexiThemes ist ein einfaches, aber benutzerfreundliches Panel.

Thema Krieger

Klare Links zur Themendokumentation decken eine Benutzeroberfläche mit Registerkarten ab Thema Krieger Optionsschnittstelle.

ThemeShift

Ein weiteres aufgeräumtes, gut gestaltetes Optionsseite das einige sehr nette jQuery-Optionen für die Farbauswahl des Themes verwendet.

Kreative Themen

Kreative Themen ist einer der wenigen Premium-Theme-Entwickler, der tatsächlich Screenshots des benutzerdefinierten Optionsfelds zeigt, um für seine Themes zu werben. Ihr Optionsfeld ist sauber, gut gestaltet und enthält Links zur Dokumentation, Support-Foren und dem Änderungsprotokoll für das aktuelle Thema.

Benutzerdefinierte Layouts, Ajax, jQuery und mehr

Viele Premium-Theme-Entwickler verbringen viel Zeit damit, benutzerdefinierte Stillayouts für ihre Optionsseite zu erstellen. Während sie sich dadurch möglicherweise von der Masse abheben, wenn sie sich eine Seite mit Screenshots ansehen, habe ich das Gefühl, dass es die WordPress-UX beeinträchtigt. Denken Sie daran, dass der Benutzer des Themes möglicherweise nicht sehr versiert ist und Sie nicht möchten, dass jemand, der durch das WordPress-Backend surrt, plötzlich innehält und sich fragt, warum die Benutzeroberfläche plötzlich so drastisch anders ist. Meiner Meinung nach ist es die beste Option, Ihr Design im Einklang mit dem standardmäßigen WordPress-Admin-Layout zu halten. Sie können Ihr Optionsfeld durch die Integration von Ajax und jQuery weiter erweitern, sodass Ihre Optionen aktualisiert werden können, ohne dass die Seite aktualisiert werden muss. Auch wenn es sich hierbei um eine kleine Änderung handelt, lässt sie die Seite viel eleganter und raffinierter erscheinen, ohne Ihren Benutzer möglicherweise zu verwirren. Letztendlich möchten Sie Ihre Benutzer durch Benutzerfreundlichkeit begeistern. Ihr Ziel sollte es sein, dass Ihr Thema zum Ausgangspunkt für die Website Ihrer Benutzer wird. Je anpassbarer das Thema ist, desto mehr wird Ihr Benutzer das Gefühl haben, es gehöre ihm.

Was ist Ihrer Meinung nach ein häufiges Problem bei kommerziellen Theme-Optionsfeldern? Hat ein benutzerdefiniertes Optionsfeld jemals Ihre Entscheidung beim Kauf eines WordPress-Themes beeinflusst?

Aktuelle Artikel:

Empfohlen