An diesem Punkt haben wir gelernt, warum die Einstellungen-API wichtig ist. Wir haben alles über Abschnitte, Felder und Einstellungen erfahren und sogar ein Sandbox-Design eingerichtet, mit dem wir beim Entwickeln der API Funktionalität entwickeln.
In diesem Artikel werden wir einen Blick darauf werfen, wie wir mit dem WordPress-Menüsystem interagieren können. Es ist wichtig anzumerken, dass dies nicht Teil der Einstellungs-API ist, aber es ist so eng miteinander verbunden, dass wir uns mit der Verwendung dieser Option vertraut machen sollten.
Da unsere Themes und / oder Plugins komplexer werden, müssen wir alle Möglichkeiten kennen, wie wir sie in das WordPress-Dashboard integrieren können. In diesem Artikel werfen wir einen Blick auf die verschiedenen Funktionen des WordPress-Menüs, wann sie verwendet werden, wann sie vermieden werden sollen, und die Situationen, für die sich jede Funktion am besten eignet.
WordPress bietet vier verschiedene Möglichkeiten, eigene Menüs einzubinden. Im Folgenden werden die einzelnen Menüs, die jeweils akzeptierten Parameter sowie Codebeispiele für ihre Verwendung in Projekten beschrieben. Wir möchten ein klares Verständnis dafür entwickeln, wie die API funktioniert, da sie eine Grundlage für unsere zukünftige Arbeit bilden kann.
Menüseiten beziehen sich auf die Menüelemente, die beim ersten Anmelden bei WordPress angezeigt werden. Das sind die verfügbaren Optionen im linken Menü, die eine Liste von Untermenüseiten enthalten können.
Um Ihre eigene Menüseite in das WordPress Dashboard einzuführen, verwenden Sie die Funktion add_menu_page.
Wir werden uns gleich ein praktisches Beispiel ansehen, aber zuerst wollen wir uns die Funktion ansehen - sie akzeptiert sieben Argumente (fünf erforderlich, zwei optional):
Schauen wir uns ein Beispiel an. Suchen Sie in der WordPress Settings Sandbox die Datei functions.php und fügen Sie die folgenden zwei Funktionen hinzu:
function sandbox_create_menu_page () add_action ('admin_menu', 'sandbox_create_menu_page'); Funktion sandbox_menu_page_display ()
Beachten Sie, dass wir den admin_menu-Hook verwenden, um unseren Menüpunkt zu registrieren. Diese spezielle Funktion wird ausgelöst, sobald das grundlegende Verwaltungsmenü eingerichtet ist. Sie möchten Ihr Menü hier registrieren, damit WordPress es darstellt, während die restlichen Menüs angezeigt werden.
Als Nächstes stellen wir den grundlegenden Menüpunkt ein. Im Einklang mit den Artikeln in dieser Serie planen wir Folgendes:
Einfach genug, richtig? Lassen Sie uns fortfahren und unser Menü hinzufügen. Kopieren Sie diesen Code nicht einfach erneut. Lesen Sie es, beachten Sie die Kommentare und stellen Sie sicher, dass Sie verstehen, was wir tun:
Funktion sandbox_create_menu_page () add_menu_page ('Sandbox-Optionen', // der auf der entsprechenden Seite für dieses Menü anzuzeigende 'Sandbox', // der Text, der für diesen Menüpunkt 'administrator' angezeigt werden soll, // welcher Typ Benutzer können dieses Menü 'Sandbox' sehen, // die eindeutige ID - das heißt, der Slug - für diesen Menüpunkt 'Sandbox_menu_page_display', // den Namen der Funktion, die beim Rendern des Menüs für diese Seite aufgerufen werden soll "); // end sandbox_create_menu_page add_action ('admin_menu', 'sandbox_create_menu_page');
Aktualisieren Sie nun Ihr WordPress-Verwaltungsmenü und Sie sollten einen neuen Menüpunkt sehen. Wenn Sie darauf klicken, sollte eine leere Seite angezeigt werden.
Das ist natürlich nicht sehr funktionell. Lassen Sie uns die zuvor definierte Rückruffunktion ausblenden, um sie anzuzeigen etwas auf dem Bildschirm:
function sandbox_menu_page_display () // Erstellen Sie einen Header im WordPress-Wrap-Container $ html =.'; $ html. = ''; // Sende das Markup an den Browser echo $ html; // end sandbox_menu_page_displaySandkasten
'; $ html. = '
Die endgültige Version Ihres Codes sollte ungefähr so aussehen:
/ ** * Fügt ein neues Menü auf oberster Ebene am unteren Rand des WordPress-Verwaltungsmenüs hinzu. * / function sandbox_create_menu_page () add_menu_page ('Sandbox-Optionen', // Der Titel, der auf der entsprechenden Seite für dieses Menü angezeigt werden soll 'Sandbox', // Der Text, der für diesen Menüpunkt 'administrator' angezeigt werden soll, // Welche Art von Benutzer kann dieses Menü sehen "Sandbox", // Die eindeutige ID - das heißt, der Slug - für diesen Menüpunkt "Sandbox_menu_page_display", // Der Name der Funktion, die beim Rendern des Menüs für diese Seite aufgerufen werden soll ") ; // end sandbox_create_menu_page add_action ('admin_menu', 'sandbox_create_menu_page'); / ** * Ruft die Grundanzeige der Menüseite für das Thema auf. * / function sandbox_menu_page_display () // Kopfzeile in der Standard-WordPress erstellen ' wrap 'container $ html =''; $ html. = ''; // Sende das Markup an den Browser echo $ html; // end sandbox_menu_page_displaySandkasten
'; $ html. = '
Abgesehen von der tatsächlichen Verwendung der Funktion add_menu_page besteht der vielleicht subtilste Weg darin, dass in WordPress jeder Menüeintrag eine entsprechende Menüseite hat. Wir werden uns dies in der ganzen Serie eingehender ansehen, aber es ist wichtig, dies jetzt zu beachten, wenn wir uns mit den verschiedenen Arten von Menüs beschäftigen.
Obwohl dies weitgehend unvollständig ist, werden wir den Rest dieses Artikels und den Rest des Tutorials ergänzen.
Ein Hinweis zur Positionierung: Viele Entwickler betrachten das Positionsargument als schlechte Etikette, da es die standardmäßige Benutzererfahrung mit WordPress vermischt. Wenn Sie eine Position definieren und ein anderes Thema, Plugin oder eine Funktion dieselbe Position verwenden, kann eines der Menüelemente überschrieben werden.
Untermenüs sind wie Menüs, mit der Ausnahme, dass sie zu einem anderen Menü gehören - sie haben ein übergeordnetes Menü. Natürlich können Sie kein Untermenü erstellen, ohne zuerst einen Menüpunkt zu erstellen. Wie wir im letzten Artikel gesehen haben, können Untermenüelemente natürlich in vorhandene Menüelemente eingefügt werden - nicht nur in benutzerdefinierten Menüelementen.
In diesem Artikel führen wir eine Untermenüseite in unseren eigenen benutzerdefinierten Menüpunkt ein. Aber bevor wir das tun, werfen wir einen Blick auf die add_submenu_page-Funktion und die Parameter, die sie akzeptiert:
Wenn Sie ein Menüelement zu einem der vorhandenen Menüs hinzufügen möchten, lesen Sie die Tabelle im vorherigen Artikel.
Beginnen wir mit der Registrierung eines Untermenüs für das vorhandene Menü oben. Wir möchten folgendes tun:
Schauen Sie sich den folgenden Code an - wir fügen diesen direkt unter unserem Aufruf an add_menu_page hinzu:
add_submenu_page ('sandbox', // Dieses Untermenü mit dem über 'Sandbox-Optionen' definierten Menü registrieren, // Der Text für die Anzeige im Browser, wenn dieser Menüpunkt aktiv ist 'Optionen', // Der Text für diesen Menüpunkt ' administrator ', // Welchen Benutzertyp kann dieses Menü' sandbox_options 'sehen, // Die eindeutige ID - der Slug - für diesen Menüpunkt' sandbox_options_display '// Die Funktion, mit der das Menü für diese Seite auf dem Bildschirm dargestellt wird);
Vergiss nicht, den Callback zu definieren, auch wenn er leer ist. Vergessen Sie nicht, diese Funktion zu Ihrer Datei hinzuzufügen (wir werden momentan noch weitere hinzufügen):
function sandbox_options_display () // end sandbox_options_display
Wenn Sie Ihren Browser aktualisieren, sollten Sie jetzt sehen zwei Untermenüpunkte direkt unter dem Menü "Sandbox". Beachten Sie, dass WordPress ein Untermenüelement eigenständig erstellt. Dies ist ein Untermenüelement, das dem Menüelement und der definierten Rückruffunktion entspricht. Die zweite ist die neue Untermenüoption, die wir gerade definiert haben, obwohl sie keinen Inhalt darstellt.
Um dies zu beheben, führen wir eine grundlegende Seite ein. Aktualisieren Sie die Callback-Funktion des Untermenüs so, dass sie wie folgt aussieht:
function sandbox_options_display () // Erstellen Sie einen Header im WordPress-Wrap-Container $ html =.'; $ html. = ''; // Sende das Markup an den Browser echo $ html; // end sandbox_options_displaySandbox-Optionen
'; $ html. = '
Aktualisieren Sie Ihren Browser noch einmal und Sie sollten einen grundlegenden Seitentitel sehen, wenn Sie den neuen auswählen Optionen Untermenüpunkt.
Obwohl dies nicht erforderlich ist, können Sie beachten, dass Sie den übergeordneten Menüpunkt und den Optionen Menüelement verweisen auf denselben Inhalt - aktualisieren Sie einfach den Rückruf in der Funktion ad_menu_page auf die sandbox_options_display
Funktion, die wir gerade definiert haben.
Wenn Sie ein WordPress-Plugin entwickeln, gibt es verschiedene Möglichkeiten, wie Ihr Produkt mit der Plattform kommunizieren kann.
Speziell dein Plugin…
Um Plugin-Entwicklern das Einfügen ihrer Optionen in vorhandene WordPress-Menüs zu erleichtern, bietet die WordPress-API die folgende Funktion: add_plugins_page.
Aber warte. Wenn Sie die obigen Beispiele mitverfolgt haben, haben Sie wahrscheinlich bemerkt, dass es keinen erkennbaren Unterschied zwischen add_plugins_page und add_submenu_page gibt. Du hast recht. add_plugins_page bietet die gleiche Funktionalität wie add_submenu_page, es gibt jedoch zwei Hauptunterschiede:
Obwohl Sie add_submenu_page sicherlich verwenden können, um dasselbe Ziel zu erreichen, bin ich immer ein Fan von Funktionen, die für einen bestimmten Anwendungsfall vorgesehen sind, auch wenn es eine andere API-Funktion gibt, die dasselbe tut. Wenn Sie dies tun, zeigen Sie, dass Sie die API verwenden, wie es die Entwickler beabsichtigten, und dass Sie Ihren Code etwas kohärenter gestalten, da Ihre Codebase enger an der Interaktion mit der Kernplattform ausgerichtet ist.
Die Plugin-Entwicklung liegt außerhalb des Umfangs dieser speziellen Serie, ist jedoch nicht völlig irrelevant. Obwohl an unserem Sandbox-Theme keine Änderungen vorgenommen werden, möchte ich ein einfaches Beispiel geben, das zeigt, wie diese bestimmte Funktion verwendet wird.
Sehen wir uns zunächst die Argumente an, die add_plugins_page akzeptiert:
Hier ist ein einfaches Beispiel, das genau zeigt, wie man es benutzt. Beachten Sie, dass Sie dies in Ihre Datei "functions.php" aufnehmen können, aber es ist nicht Teil des Sandbox-Designs, an dem wir arbeiten und stattdessen im Kontext eines Plugins verwendet werden sollten.
Richten Sie zunächst den Aufruf der API-Funktion ein. Beachten Sie, dass hierbei der admin_menu-Hook verwendet wird:
function sandbox_example_plugin_menu () add_plugins_page ('Sandbox Plugin', // Der Titel, der im Browserfenster für diese Seite angezeigt werden soll. 'Sandbox Plugin', // Der Text, der für diesen Menüpunkt 'administrator' angezeigt werden soll, // Welche Benutzer sehen diesen Menüeintrag 'sandbox_plugin_options'. // Die eindeutige ID - d. h. der Slug - für diesen Menüpunkt 'sandbox_plugin_display' // Name der Funktion, die beim Rendern der Seite für dieses Menü aufgerufen werden soll; // end sandbox_example_plugin_menu add_action ('admin_menu', 'sandbox_example_plugin_menu');
Richten Sie als Nächstes die Funktion ein, mit der die Anzeige des Plugins dargestellt wird:
function sandbox_plugin_display () // Erstellen Sie einen Header im WordPress-Wrap-Container $ html =.'; $ html. = ''; // Sende das Markup an den Browser echo $ html; // Ende der Sandbox-Plugin-AnzeigeSandbox-Plugin-Optionen
'; $ html. = 'Momentan gibt es keine Optionen. Dies ist nur zu Demonstrationszwecken.
'; $ html. = '
Aktualisieren Sie Ihr WordPress-Dashboard, bewegen Sie den Mauszeiger über das Symbol Plugins Menü und Sie sollten einen neuen Menüpunkt bemerken. Nicht schlecht, oder??
Die endgültige Version des Codes sollte folgendermaßen aussehen:
/ ** * Diese Funktion führt eine Menüoption mit einem einzigen Thema in das WordPress-Menü "Plugins" * ein. * / function sandbox_example_plugin_menu () add_plugins_page ('Sandbox Plugin', // Der Titel, der im Browserfenster für diese Seite angezeigt werden soll. 'Sandbox Plugin', // Der Text, der für diesen Menüpunkt 'administrator' angezeigt werden soll, / / Welcher Benutzertyp kann diesen Menüpunkt 'sandbox_plugin_options' sehen, // Die eindeutige ID - das heißt, der Slug - für diesen Menüpunkt 'sandbox_plugin_display' // Name der Funktion, die beim Rendern der Seite für dieses Menü aufgerufen werden soll ; // end sandbox_example_theme_menu add_action ('admin_menu', 'sandbox_example_plugin_menu'); / ** * Ruft eine einfache Seite für das oben definierte Themenmenü auf. * / function sandbox_plugin_display () // Erstellen Sie einen Header im WordPress-Wrap-Container $ html =.'; $ html. = ''; // Sende das Markup an den Browser echo $ html; // Ende der Sandbox-Plugin-AnzeigeSandbox-Plugin-Optionen
'; $ html. = 'Momentan gibt es keine Optionen. Dies ist nur zu Demonstrationszwecken.
'; $ html. = '
Auch diese Funktion wird nicht Teil unseres Sandbox-Themas sein, da sie eher auf die Plugin-Entwicklung ausgerichtet ist. Es lohnt sich jedoch, diejenigen zu berücksichtigen, die die Einstellungs-API bei der Plugin-Entwicklung einsetzen.
Genau wie bei Plugins bietet WordPress eine API-Funktion, um Menüs speziell für Themen einzuführen. Es ist der Plugin-Menüfunktion sehr ähnlich, da es eine weitere Möglichkeit bietet, ein Untermenü in vorhandene Menüs einzuführen. Der Hauptunterschied besteht darin, dass das Untermenü zum hinzugefügt wird Aussehen Speisekarte.
Wie beim Plugin-Beispiel oben in diesem Artikel werden wir uns ansehen, wie wir diese Funktion verwenden können, aber wir werden sie nicht in unser Sandbox-Design aufnehmen. Dies soll lediglich veranschaulichen, wie die Funktion verwendet wird, nur wenn Sie sich für diese persönliche Arbeit entscheiden.
Zuerst überprüfen wir die Argumente, die add_theme_page akzeptiert. Sie werden feststellen, dass sie genau wie die für das Plugin-Menü erforderlichen sind und den zuvor beschriebenen Untermenüfunktionen sehr ähnlich sind:
add_theme_page akzeptiert die folgenden Argumente:
Wie bei den anderen Funktionen erstellen wir einige Beispielfunktionen, die zeigen, wie dies in Ihr Projekt aufgenommen wird. Beachten Sie, dass der Aufruf von add_theme_page zu functions.php und im Gegensatz zu den Aufrufen von add_plugin_page hinzugefügt werden kann, sollte wohnen Sie hier, wenn Sie Ihr Thema entwickeln.
Zuerst den Aufruf zum Einrichten des Menüelements:
Funktion sandbox_example_theme_menu () add_theme_page ('Sandbox Theme', // Der Titel, der für diese Seite im Browserfenster angezeigt werden soll. 'Sandbox Theme', // Der Text, der für diesen Menüpunkt 'administrator' angezeigt werden soll, // Welche Benutzer sehen diesen Menüpunkt 'sandbox_theme_options', // die eindeutige ID - das heißt, der Slug - für diesen Menüpunkt 'sandbox_theme_display' // Name der Funktion, die beim Rendern der Seite für dieses Menü aufgerufen werden soll; // end sandbox_example_theme_menu add_action ('admin_menu', 'sandbox_example_theme_menu');
Als Nächstes richten wir eine Funktion zum Rendern der Optionsseite ein:
function sandbox_theme_display () // Erstellen Sie einen Header im WordPress-Wrap-Container $ html =.'; $ html. = ''; // Sende das Markup an den Browser echo $ html; // end sandbox_theme_displayOptionen der Sandbox-Themen
'; $ html. = 'Momentan gibt es keine Optionen. Dies ist nur zu Demonstrationszwecken.
'; $ html. = '
Aktualisieren Sie nun das WordPress-Dashboard, bewegen Sie den Mauszeiger über das Symbol Aussehen Menü und Sie sollten Ihren neuen Menüpunkt sehen. Einfach!
Die endgültige Version des Codes sollte folgendermaßen aussehen:
/ ** * Diese Funktion führt eine Menüoption für ein einzelnes Thema in das WordPress-Menü "Aussehen" * ein. * / function sandbox_example_theme_menu () add_theme_page ('Sandbox Theme', // Der Titel, der im Browserfenster für diese Seite angezeigt werden soll. 'Sandbox Theme', // Der Text, der für diesen Menüpunkt 'administrator' angezeigt werden soll, / / Welcher Benutzertyp kann diesen Menüpunkt 'sandbox_theme_options' sehen, // Die eindeutige ID - das heißt, der Slug - für diesen Menüpunkt 'sandbox_theme_display' // Name der Funktion, die beim Rendern der Seite für dieses Menü aufgerufen werden soll ; // end sandbox_example_theme_menu add_action ('admin_menu', 'sandbox_example_theme_menu'); / ** * Ruft eine einfache Seite für das oben definierte Themenmenü auf. * / function sandbox_theme_display () // Erstellen Sie einen Header im WordPress-Wrap-Container $ html =.'; $ html. = ''; // Sende das Markup an den Browser echo $ html; // end sandbox_theme_displayOptionen der Sandbox-Themen
'; $ html. = 'Momentan gibt es keine Optionen. Dies ist nur zu Demonstrationszwecken.
'; $ html. = '
Für diejenigen von Ihnen, die an einer fortgeschritteneren Themenentwicklung interessiert sind, haben Sie wahrscheinlich die verschiedenen Möglichkeiten zur Implementierung mehrerer Optionsseiten für Ihr Thema in Betracht gezogen.
Einerseits können wir einem Hauptmenü mehrere Untermenüs hinzufügen, aber dort ist eine alternative: tabbed navigation. Dies bietet sich an, wenn Sie Optionen für das Internet einführen möchten Aussehen Menü und fügen Sie dem WordPress Dashboard keinen weiteren Menüeintrag hinzu. Wir werden dies im nächsten Artikel ausführlicher besprechen.
Wir haben uns die vier wichtigsten Möglichkeiten angesehen, um unsere eigenen Optionsseiten in WordPress einzuführen. Obwohl diese Funktionen nicht speziell in der Einstellungs-API enthalten sind, ist es wichtig zu diskutieren, da sie so eng zusammenarbeiten.
Diese Funktionen zu kennen ist jedoch nur die Hälfte. Als Entwickler, der für die Integration und Organisation von Einstellungen verantwortlich ist, ist es wichtig zu wissen, wann die verschiedenen Funktionen in ihrem richtigen Kontext verwendet werden.
Es gibt zwar keine Antwort auf die Frage, wann die einzelnen Funktionen verwendet werden sollen. Im Folgenden finden Sie einige Richtlinien, die Sie bei der Bearbeitung Ihrer benutzerdefinierten Funktionen, Plugins und / oder Designs berücksichtigen sollten:
Ein Wort zu benutzerdefinierten Menüs: Obwohl wir mit WordPress die Möglichkeit haben, eigene Menüs auf oberster Ebene hinzuzufügen, ein beliebiges vorhandenes Menü hinzuzufügen und generell die Möglichkeit zu haben, mit der Standardkonfiguration das zu tun, was wir wollen, stößt ein Teil der Community darauf. Sie sind der Meinung, dass benutzerdefinierte Funktionen bestimmte Kernmenüs nicht beeinträchtigen sollten. Obwohl es letztlich an Ihnen liegt, Ihre Arbeit mit Einsicht zu implementieren - die Chancen stehen gut, wenige Dinge, die Sie tun, sind wichtiger als die Kernfunktionen von WordPress. Legen Sie Ihre Arbeit also nicht darüber hinaus.
Im nächsten Artikel werden wir ein wenig von dem anwenden, was wir über Menüs gelernt haben, und mit der Einführung von Optionsseiten für unser Sandbox-Design beginnen.
Neben dem Hinzufügen von Menüseiten betrachten wir auch die Registerkartennavigation und wie wir sie implementieren können, um in Verbindung mit unseren eigenen Menüseiten zu arbeiten.
Überprüfen Sie in der Zwischenzeit die vorherigen Artikel dieser Serie und vergessen Sie nicht, die aktuelle Version der WordPress Settings Sandbox auf GitHub zu checken.
Wir haben in diesem Artikel einige Ressourcen behandelt. Hier ist eine Zusammenfassung von allem, was wir verwendet haben: