Share
Erstellen Sie Ihr eigenes Thema für WordPress ist eine großartige Möglichkeit, Ihrem Blog oder einer anderen WordPress-Website eine originelle Note zu verleihen. Aber selbst das schönste Thema ist nicht so schön, wenn Sie sich unter die Haube setzen und den HTML- oder PHP-Code des Themas bearbeiten müssen, wenn es an der Zeit ist, einige Aspekte zu ändern. Vor allem, wenn es nicht Sie sind, sondern ein zahlender Kunde, der Ihr Thema verwendet. Zum Glück eine Einstellungsseite Ihr Theme in WordPress ist nicht sehr schwer, und nachdem Sie dieses Tutorial gelesen haben, können Sie in kürzester Zeit eines erstellen!
Alles beginnt mit der Notwendigkeit: Um eine übersichtliche und nützliche Einstellungsseite zu erstellen, müssen Sie die Dinge herausfinden, die geändert werden müssen, und alles andere weglassen. Jede neue Einstellung, die Sie den Admin-Menüs hinzufügen, macht die Benutzeroberfläche komplexer und birgt die Gefahr, dass das Design schwieriger wird. Aus diesem Grund ist es besser, vorsichtig zu sein und die Optionen auszuwählen, die häufig geändert werden, und einmalige Anpassungen wegzulassen, die leicht durch Ändern einer Datei innerhalb des Designs vorgenommen werden können.
Eine andere Frage, die zu beachten ist, ist: "Wer wird diese Einstellungen ändern?" Wenn der Benutzer mit PHP und WordPress vertraut ist, kann es vernünftig sein zu erwarten, dass er den Code für Google Analytics selbst in den Code einbetten kann. Sie sollten dies jedoch nicht von einem Grafikdesigner verlangen, von einem Schriftsteller, der dies nicht tut Sie müssen nicht einmal etwas über HTML und CSS wissen.
Zu den allgemeinen Ideen, die in den Themeneinstellungen definiert werden können, gehören:
Nachdem Sie die Liste der Designfunktionen gesammelt haben, die Sie über eine Einstellungsseite steuern möchten, können Sie mit der Implementierung beginnen. Bevor Sie fortfahren und Ihre Einstellungsseite erstellen, können Sie Zeit sparen, indem Sie sicherstellen, dass für die von Ihnen gewünschte Anpassung noch keine WordPress-Funktion verfügbar ist. Widgets, benutzerdefinierte Menüs, benutzerdefinierte Hintergründe und Header-Bilder sind alles nützliche Werkzeuge, um das Design anpassbar zu machen, und das mit weniger Arbeitsaufwand als zum Erstellen eigener Einstellungen. Sie sind jedoch Themen für ein anderes Tutorial.
Für dieses Tutorial habe ich mir eine Theme-Titelseite ausgedacht, die aus einem Raster mit einer unterschiedlichen Anzahl von vorgestellten Posts besteht, die vom Administrator mithilfe einer Seite mit benutzerdefinierten Einstellungen ausgewählt, bearbeitet und neu angeordnet werden können.
Im Editor werden die Vorderseitenelemente als Liste von Elementen dargestellt, zu denen mithilfe von JavaScript und jQuery neue Elemente hinzugefügt werden können.
Ich mag es, in der Lage zu sein, eine Vorschau der Admin-Seite im WordPress-Admin anzuzeigen, während ich den HTML-Code entwerfe. Daher beginne ich normalerweise damit, eine Einstellungsseite mit WordPress zu verknüpfen und erst dann den Inhalt der Seite zu gestalten. Deshalb erstellen wir im nächsten Schritt eine Seite mit Platzhaltereinstellungen und verknüpfen sie mit WordPress.
Das Erstellen einer Einstellungsseite beginnt mit dem Erstellen einer Funktion, mit der das Menü eingerichtet und mit der WordPress-Aktion verknüpft wird admin_menu. Dadurch wird WordPress angewiesen, Ihre Funktion aufzurufen, wenn es Zeit ist, die Menüs zu erstellen, damit alles zum richtigen Zeitpunkt erledigt wird. Fügen Sie diesen Code Ihrem Thema hinzu Functions.php Datei:
Accentsconagua
function setup_theme_admin_menus () // Wir werden den Funktionsinhalt sehr bald schreiben. // Dadurch wird WordPress angewiesen, die Funktion "setup_theme_admin_menus" // aufzurufen, // wenn die Menüseiten erstellt werden sollen. add_action ("admin_menu", "setup_theme_admin_menus"); Wir werden nun den Code zum Erstellen der Einstellungsseiten in die gerade erstellte Funktion einfügen.
Bei der Erstellung Ihrer Einstellungsseite haben Sie die Wahl, die Seite entweder als Untermenü zu einer der vorhandenen Einstellungsgruppen hinzuzufügen oder ein eigenes Menü auf oberster Ebene zu erstellen.
Das Hinzufügen eines Untermenüs erfolgt mit der Funktion add_submenu_page:
$ parent_slug ist eine eindeutige Kennung für die oberste Menüseite, 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 $ Fähigkeit ist die minimale Fähigkeit, die ein Benutzer benötigt, um auf dieses Menü zugreifen zu können.$ menu_slug ist eine eindeutige Kennung für das zu erstellende Menü$ Funktion ist der Name einer Funktion, die aufgerufen wird, um diese Menüseite zu behandeln (und zu rendern)Wenn Sie die Menüseite als Untermenü zu einer der WordPress-Gruppen hinzufügen, können Sie die folgenden Werte als verwenden $ parent_slug Parameter:
index.php edit.php upload.php link-manager.php edit.php? post_type = Seite edit-comments.php themes.php plugins.php users.php tools.php options-general.php Die Appearance-Gruppe scheint ein guter Kandidat für das Platzieren unserer Einstellungsseite zu sein. Versuchen wir das mal und erstellen Sie unsere erste Einstellungsseite. Hier ist eine aktualisierte Version unserer Menüeinstellungsfunktion:
Funktion setup_theme_admin_menus () add_submenu_page ('themes.php', 'Front Page Elements', 'Startseite', 'manage_options', 'front-page-elements', 'theme_front_page_settings'); Wir müssen die Funktion noch erstellen theme_front_page_settings damit dies funktioniert. Hier ist es in seiner einfachsten Form:
function theme_front_page_settings () echo "Hallo, Welt!";
Und so sieht es in Aktion aus:
Wir müssen auch überprüfen, ob der Benutzer über die zum Bearbeiten der Einstellungsseite erforderlichen Rechte verfügt. Fügen Sie dazu den folgenden Code am Anfang der Einstellungsseitenfunktion hinzu:
// Überprüfen Sie, ob der Benutzer die Optionen aktualisieren darf, wenn (! Current_user_can ('manage_options')) wp_die ('Sie haben keine ausreichenden Berechtigungen, um auf diese Seite zuzugreifen.'); Wenn nun ein Benutzer, der keine Optionen verwalten darf, zur Einstellungsseite kommt, wird ihm nur die Meldung "Sie verfügen nicht über ausreichende Berechtigungen, um auf diese Seite zuzugreifen" angezeigt.
Wenn für Ihr Design mehrere Einstellungsseiten erforderlich sind, kann es für den Benutzer verwirrend sein, nach allen Seiten der Menüstruktur zu suchen. In diesem Fall erleichtert das Erstellen einer eigenen Einstellungsgruppe dem Designbenutzer das Auffinden aller Menüseiten für das Design.
Um eine eigene Einstellungsgruppe hinzuzufügen, müssen Sie eine Menüseite auf oberster Ebene erstellen und die Untermenüseiten damit verknüpfen. Hier ist eine neue Version unserer Menüeinstellungsfunktion. Das add_menu_page Die zum Erstellen des Menüs auf der obersten Ebene verwendete Funktion ähnelt der add_submenu_page außer, dass es das nicht braucht $ parent_slug Parameter.
Funktion setup_theme_admin_menus () add_menu_page ('Designeinstellungen', 'Beispieldesign', 'manage_options', 'tut_theme_settings', 'theme_settings_page'); add_submenu_page ('tut_theme_settings', 'Front Page Elements', 'Front Page', 'manage_options', 'front-page-elements', 'theme_front_page_settings'); // Wir müssen auch die Handler-Funktion für die Menüfunktion der obersten Ebene hinzufügen theme_settings_page () echo "Settings page"; Wenn Sie den Code testen und den WordPress-Administrator aktualisieren, wird Ihre neue Menügruppe am unteren Rand 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ü "Startseite", sondern zu einer Menüseite mit der Bezeichnung "Beispielthema". Dies stimmt nicht mit der Funktionsweise der anderen WordPress-Menüs überein. Lassen Sie uns noch eines tun: Ändern Sie das $ menu_slug Attribut in der add_submenu_page Wenn Sie den gleichen Wert wie im Menü auf der obersten Ebene aufrufen, können Sie die beiden Menüs so verknüpfen, dass durch Auswählen des Hauptmenüs das Menü der ersten Seite ausgewählt wird:
Funktion setup_theme_admin_menus () add_menu_page ('Designeinstellungen', 'Beispieldesign', 'manage_options', 'tut_theme_settings', 'theme_settings_page'); add_submenu_page ('tut_theme_settings', 'Front Page Elements', 'Startseite', 'manage_options', 'tut_theme_settings', 'theme_front_page_settings')); Funktion theme_settings_page () 
Sieht besser aus. Wenn Sie das Aussehen Ihrer Menügruppe noch verbessern möchten, gibt es zwei optionale Felder in der add_menu_page Funktion, 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 Menü der obersten Ebene an.$ position Bestimmt die Position Ihrer Menügruppe in der Menüliste. Je höher der Wert, desto niedriger ist die Position im Menü.Nachdem wir nun die Einstellungsseite erstellt haben und sie im Seitenmenü gut angezeigt wird, ist es Zeit, mit dem Hinzufügen von Inhalt zu beginnen. Gehen wir also zurück zu der Liste der Einstellungen, die wir uns vorgenommen haben, und entwerfen Sie eine Seite, um sie zu bearbeiten.
In diesem Lernprogramm benötigen wir ein Feld zum Definieren, wie viele Elemente in einer Zeile aufgelistet werden sollen, und eine Liste zum Definieren der tatsächlichen Elemente. Um einfacher zu beginnen, erstellen wir ein Textfeld für die Anzahl der Elemente in einer Zeile. Bearbeiten Sie die Funktion Ihrer Einstellungsseite:
Funktion theme_front_page_settings () ?>Wenn Sie Ihre Einstellungsseite neu laden, wird das erste Einstellungsfeld angezeigt:
Um die Einstellungsseite nahtlos in die WordPress-Umgebung einzufügen und Ihrem Plugin eine professionelle Note zu verleihen, 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.
Das Wichtigste ist, Ihre Einstellungsseite mit einem
divmit der Klasse"wickeln". Innerhalb diesesdivElement können Sie viele vordefinierte Stile wie Überschriften, Schaltflächen und Formularfelder verwenden. Beginnen wir mit dem Titel unserer Einstellungsseite:
h2 Überschrift für die Seite (Sie können die Überschriften-Tags von verwenden h2 zu h6 Überschriften mit unterschiedlichen Größen erstellen.)screen_icon Funktion. Die Funktion kann einen der folgenden Parameter annehmen: Index, bearbeiten, hochladen, Link-Manager, Seiten, Bemerkungen, themen, Plugins, Benutzer, Werkzeuge oder Optionen-Allgemein.)Eingang Element innerhalb eines Formulars und einer Tabelle mit der Klasse Formtabelle.Funktion theme_front_page_settings () ?>Titelseitenelemente
Als nächstes ist es Zeit, die Elemente hinzuzufügen.
Um dies zu tun, verwenden wir jQuery, da es wesentlich einfacher ist, JavaScript von Grund auf neu zu schreiben, und es ist im Lieferumfang von WordPress enthalten. Wenn Sie jQuery bereits verwendet haben, müssen Sie nur eines beachten: das
$Notationen, die Sie normalerweise mit jQuery verwenden würden, funktionieren in WordPress nicht - Sie müssen das ganze Wort eingeben,jQuerystattdessen.Zuerst erstellen wir das Element zum Bearbeiten der Einstellungen für einen Hauptseitenblock, um als Vorlage für die vom Benutzer hinzugefügten Elemente zu dienen. Fügen Sie diesen Code direkt zwischen dem schließenden Tabellen-Tag und dem schließenden Formular-Tag direkt danach ein.
Nun sieht es so aus:
Jetzt, da wir unsere Vorlage haben, ist es Zeit, sie auszublenden und das JavaScript zu erstellen, mit dem neue Beitragszeilen auf der Einstellungsseite erstellt werden können. Legen Sie den Stil für das fest li Element oben auf Anzeige: keine;
Anschließend erstellen wir eine Liste, in der die Vorderseitenelemente beim Hinzufügen gespeichert 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, wo die Änderungen liegen:
Titelseitenelemente
Löschen
In einem realen Thema empfiehlt es sich, Ihren JavaScript-Code in einer separaten Datei zu speichern. Damit Sie dieses Tutorial ein wenig leichter folgen können, füge ich jetzt JavaScript in derselben Funktion mit dem HTML-Code oben ein wickeln div:
Der obige JavaScript-Code erstellt eine Funktion, die aufgerufen wird, wenn der Benutzer mit ID auf den Link klickt add-feature-post. Diese Funktion kopiert das zuvor erstellte Vorlagenlistenelement 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 ausgeblendeten Feld gespeichert, sodass wir wissen, wie viele Elemente der ersten Seite beim Senden des Formulars zu erwarten sind.
Wenn Sie mehrmals auf den Link "Feature-Post hinzufügen" klicken, werden der Liste neue Elemente hinzugefügt:
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:
function removeElement (element) jQuery (element) .remove ();
Wir müssen auch die Funktion aufrufen. Fügen Sie den folgenden Code direkt vor dem Inkrementieren hinzu elementCounter.
var removeLink = jQuery ("a", elementRow) .click (function () removeElement (elementRow); return false;); Bevor Sie das Formular speichern, müssen Sie noch etwas tun. Wir verwenden das jQuery-Plugin ui.sortable, um die Elemente der Titelseite durch Ziehen auf die Seite sortierbar zu machen. Um die Sortierfunktion zu aktivieren, müssen Sie die entsprechende JavaScript-Datei (die ebenfalls mit WordPress mitgeliefert wird) hinzufügen. Dies kann durch Hinzufügen der folgenden Codezeile am Ende von erreicht werden Functions.php:
if (is_admin ()) wp_enqueue_script ('jquery-ui-sortable'); Dann fügen wir vor oder nach dem folgenden JavaScript hinzu jQuery ("# add-featured-post"). Klicken Sie auf oben definierte Funktion.
jQuery ("# featured-posts-list"). sortierbar (stop: function (event, ui) var i = 0; jQuery ("li", this) .each (function () setElementId (this, i) ; i ++;); elementCounter = i; jQuery ("input [name = element-max-id]"). val (elementCounter);); Dieses Snippet macht die Liste sortierbar und fügt ein Ereignis hinzu, das aufgerufen wird, wenn der Benutzer die Sortierung beendet. Der Event-Handler aktualisiert alle IDs in den Elementen, sodass die neue Reihenfolge auch beim Speichern des Formulars erhalten bleibt (dies wird klarer, sobald das Speichern implementiert wird). Beim Schreiben dieses Stop-Handlers bemerkte ich, dass der Code zum Festlegen der ID für den Inhalt der Vorlage an zwei Stellen dupliziert wurde, sodass ich ihn in eine eigene Funktion umgestaltet habe, die ich direkt vor der Zeile platziert habe jQuery (document) .ready ():
function setElementId (Element, ID) var newId = "Front-Page-Element-" + ID; jQuery (Element) .attr ("id", newId); var inputField = jQuery ("select", Element); inputField.attr ("name", "element-page-id-" + id); var labelField = jQuery ("label", Element); labelField.attr ("for", "element-page-id-" + id); Wenn Sie neue Elemente hinzufügen, sortieren und entfernen, ist es an der Zeit, die Daten zu speichern. Fügen Sie jedoch vor dem schließenden Tag des Formulars eine Senden-Schaltfläche hinzu.
Die Einstellungsseite sieht gut aus, aber es fehlt etwas: Sie tut noch nichts. Es ist Zeit, einige Daten zu speichern. WordPress bietet ein einfaches System zum Speichern von Design- und Plugin-Einstellungen als Schlüsselwertpaare in der Datenbank. Dabei werden zwei Funktionen verwendet: get_option und update_option. Die mit den Funktionen gespeicherten Daten können so einfach wie ein Zahlenwert oder so komplex sein wie ein Array, das mehrfach verschachtelt ist.
Die Handhabung des Formulars erfolgt in derselben Funktion wie das Formular. Um zu erfahren, ob ein Formular gesendet wurde oder nicht, fügen wir ein ausgeblendetes Feld hinzu, Update Einstellungen zu dem Formular und prüfen Sie dann, ob dieses Feld in der Bearbeitungsfunktion gesendet wurde oder nicht.
if (isset ($ _ POST ["update_settings"])) // Speichern ausführen
Das versteckte Feld, das in das Formular eingefügt wird, sieht folgendermaßen aus:
Beginnen wir mit dem Speichern der einfacheren Einstellung, num_elements. Das Attribut wird umgeschaltet, um sicherzustellen, dass der Benutzer keine schädlichen Inhalte in den from-Tags von HTML sendet, und es wird dann im Speicher der WordPress-Einstellungen gespeichert. Beim Benutzen update_option, wir müssen uns nicht darum kümmern, ob die Einstellung bereits gespeichert wurde oder nicht.
$ num_elements = esc_attr ($ _ POST ["num_elements"]); update_option ("theme_name_num_elements", $ num_elements); Bevor wir mit dem Speichern der Liste fortfahren, fügen wir den aktuellen Wert von hinzu num_elements Auf dem Einstellungsformular kann der Benutzer immer sehen, welchen Wert er eingegeben hat, bevor er den nächsten Wert festlegt. Dies hilft uns auch zu testen, ob der Wert tatsächlich gespeichert wurde.
In Fällen, in denen noch nichts gespeichert wurde, müssen wir den aktuellen Wert aus den Optionen laden. Fügen wir also diesen Code hinzu, der ausgeführt werden soll, wenn kein Formular übermittelt wird.
$ num_elements = get_option ("theme_name_num_elements"); Wenn ein Formular gespeichert wird, ist es wichtig, den Benutzer zu benachrichtigen, damit er sich nicht wundert, ob etwas passiert ist oder nicht. Lassen Sie uns also eine einfache Mitteilung machen "Einstellungen gespeichert." gleich nach dem update_option:
?>Einstellungen gespeichert
Dann speichern wir die Titelseitenelemente. Der höchste ID-Wert in den Vorderseitenelementen wird als übergeben
Element-Max-ID, So können wir diesen Wert verwenden und Elemente bis zu dieser ID durchlaufen, wobei ihre Daten in der richtigen Reihenfolge in einem Array gespeichert werden:$ front_page_elements = array (); $ max_id = esc_attr ($ _ POST ["element-max-id"]); für ($ i = 0; $ i < $max_id; $i ++) $field_name = "element-page-id-" . $i; if (isset($_POST[$field_name])) $front_page_elements[] = esc_attr($_POST[$field_name]); update_option("theme_name_front_page_elements", $front_page_elements);Dies speichert die Daten, aber wir müssen die Werte immer noch auf der Einstellungsseite anzeigen. Also machen wir das gleiche wie mit dem
num_elementsFeld und laden Sie die Standardoptionen am Anfang der Funktion:$ front_page_elements = get_option ("theme_name_front_page_elements");Rendern Sie dann die vorhandenen Elemente, wenn Sie das Formular ausführen:
Wir müssen auch den Anfangswert für festlegen elementCounter Variable, die in JavaScript verwendet wird, indem der Ausgangswert des verborgenen Feldes in PHP festgelegt und beim Initialisieren der JavaScript-Variablen eingelesen wird:
Und der JavaScript-Teil:
var elementCounter = jQuery ("input [name = element-max-id]"). val (); Das Speichern und Anzeigen von Einstellungswerten im Admin-Bereich ist großartig, aber was wirklich zählt, ist die Art und Weise, wie Sie Ihr Design anpassen. Jetzt sind wir an dem Punkt, an dem es Zeit ist, unsere Einstellungen zu übernehmen und etwas Cooles mit ihnen zu tun.
Ab hier gehen die Änderungen nach index.php anstatt Functions.php. Zuerst lesen wir die Optionen für Variablen:
Lass uns durch die $ elements liste, gruppiere sie in Zeilen mit $ num_elements Blöcke auf jedem.
Dann füllen wir mit den für jedes Element gespeicherten Daten den Elementrendering-Teil oben aus:
">post_title;?>
Mit ein paar Elementen sieht es so aus:
Immer noch ziemlich langweilig. Die Beiträge haben keine Miniaturbilder und es gibt kein Styling für sie. Um sie besser aussehen zu lassen, fügen wir zunächst Unterstützung für Post-Miniaturbilder hinzu. Dazu wird eine neue Funktion eingebunden, mit der die Theme-Funktionen gleich nach dem Laden des Themes aufgerufen werden
function setup_theme_features () if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); if (function_exists ("add_image_size")) add_image_size ('tutorial-thumb-size', 200, 200, true); add_action ('after_setup_theme', 'setup_theme_features'); Die Funktion, setup_theme_eigenschaften Aktiviert die Post-Miniaturen mit der WordPress-Funktion add_theme_support damit fügt WordPress diese Funktion zur Seite zum Speichern der Seite hinzu. Auf der Seite des Beitrags können Sie jetzt ein Bild als Miniaturbild hinzufügen, indem Sie auf klicken "Als gekennzeichnetes Bild verwenden" auf der Bild-Upload-Seite, nachdem Sie das Foto hochgeladen haben.
Die Funktion definiert auch einen neuen Bildgrößentyp, Tutorial-Daumengröße Dies wird verwendet, wenn das Postminiaturbild im Renderingcode abgerufen wird.
Speichern Sie die Änderungen, nachdem Sie das gekennzeichnete Bild ausgewählt haben, und laden Sie die Vorderseite erneut. Sieht schon interessanter aus:
Zum Schluss fügen wir ein paar Stile hinzu style.css, und los geht's, das Thema hat eine konfigurierbare Anzeige für hervorgehobene Beiträge:
.front-page-element-row overflow: auto; .front-page-element float: left; Marge: 10px 10px 10px 10px; Polsterung: 0px; Breite: 200px; Höhe: 200px; .thumbnail-image width: 200px; Höhe: 200px; Hintergrund: #eee; Position: relativ; .thumbnail-image .title position: absolut; unten: 20px; Bildschirmsperre; Hintergrund: # 000; Farbe: #fff; Polsterung: 10px; Schriftfamilie: Arial; Schriftgröße: 12pt; Textdekoration: keine;
Jetzt haben wir eine Einstellungsseite für ein benutzerdefiniertes Design erstellt. Das Thema ist noch lange nicht abgeschlossen, aber ich hoffe, Sie haben mit dieser Einführung begonnen, Einstellungen und anpassbare Elemente zu Ihrem nächsten WordPress-Theme hinzuzufügen.
