Erstellen Sie Ihr eigenes WordPress-Theme-Optionsfeld mit dem Redux Framework

Das Redux-Framework ist eines der beliebtesten, fortschrittlichsten und frei verfügbaren Optionsfeld-Frameworks für WordPress-Designs und -Plugins. Seine Flexibilität gibt Ihnen die Freiheit, beliebige Optionen und Einstellungen für Ihr WordPress-Projekt zu erstellen.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie das Redux-Framework in Ihrem eigenen Design installieren, anpassen und verwenden können.

Wir gehen durch die folgenden Schritte:

Installation
Allgemeine Konfiguration
Optionsfeld erstellen
Verwenden von Optionen innerhalb eines Designs

Hinweis: Ich werde mich einfach auf Redux Framework beziehen Redux während dieses Tutorials. Dies ist nicht zu verwechseln mit Redux, dem "vorhersagbaren Statuscontainer für JavaScript-Apps"..

1. Installation

Es gibt drei Möglichkeiten, Redux in Ihr Projekt aufzunehmen:

Installieren Sie es als separates Plugin
Binden Sie es in Ihren Themenkern ein
Binden Sie es in ein themenabhängiges Plugin ein

Installieren Sie es als separates Plugin

Standardmäßig kann Redux als Plugin installiert werden. Wenn Sie die Redux Framework WordPress Plugin-Seite aufrufen, werden Sie feststellen, dass Sie es als reguläres Plugin herunterladen und in Ihrer WordPress-Site mit einem beliebigen Design installieren können. Dies schafft jedoch keine Optionen; Sie können nur den Demo-Modus mit den Beispieloptionen aktivieren.

Um ein Optionsfeld mit benutzerdefinierten Optionen für Ihr Design oder Plugin zu erhalten, müssen Sie eine separate config.php-Datei erstellen. Lesen Sie mehr darüber, wie das funktioniert:

Die Vor- und Nachteile dieses Ansatzes sind daher:

Cons	Pros
Separate Plugin-Installation, die entweder als ZIP-Datei auf Ihrem Server oder im Designordner gespeichert werden muss.	Sie reduzieren die Größe Ihres Designs, wenn das Optionsfeld nicht Teil des Themenkerns ist.
Das Gefühl, dass das Theme / Plugin von der Entwicklung und den Tools von Drittanbietern abhängt.	Sie vermeiden zahlreiche Warnungen und Fehler durch das Plugin Theme Check.

Binden Sie es in Ihren Themenkern ein

Es gibt nichts, was Sie daran hindern könnte, Redux in Ihr Design aufzunehmen, es sei denn, dies steht im Konflikt mit dem Plugin "Theme Check". Die Logik ist die gleiche wie zuvor, Sie benötigen immer noch eine config.php-Datei mit Ihren benutzerdefinierten Optionen, jetzt vermeiden Sie jedoch die Installation zusätzlicher Plugins.

Cons	Pros
Erhöht die Größe des Themenpakets.	Vermeiden Sie die Installation zusätzlicher Plugins.
Mögliche Konflikte und Probleme können durch das Plugin "Theme Check" entstehen.	Das Themen-Optionsfeld fühlt sich stärker an Ihr Thema an und ist mehr integriert.
Jedes Mal, wenn das Plugin aktualisiert wird, müssen Sie auch Ihr Design aktualisieren.

Fügen Sie es in ein Theme-Dependent Plugin ein

Meines Erachtens ist dieser Ansatz der beste Weg, um das Redux-Framework einzubeziehen. Der Prozess ist so einfach wie eine normale Plugin-Installation. Der einzige Unterschied besteht darin, dass er nun Teil des von Ihrem eigenen Add-On benötigten Plugins ist.

Moderne Premium-Themes enthalten in der Regel benutzerdefinierte Elemente - benutzerdefinierte Post-Typen usw., die alle zu einem Plugin gehören. Daher ist es logisch, ein Add-On-Plugin zu erstellen, das mit Ihrem Design verknüpft ist. In diesem Add-On-Plugin können Sie das Themenoptionen-Bedienfeld einschließen. Weitere Informationen zum Erstellen von themenabhängigen Plugins finden Sie in diesem Lernprogramm:

Cons	Pros
Nicht gefunden :)	Vermeiden Sie die Installation zusätzlicher Plugins.
	Das Themen-Optionsfeld fühlt sich mehr in Ihr Thema ein.

Der Konfigurationsprozess von Redux ist von der Installationsmethode nicht betroffen. Es liegt also an Ihnen, wie Sie Redux in Ihr Projekt aufnehmen möchten. Das heißt, ich bevorzuge immer noch die letzte Option, also werde ich die Konfiguration beschreiben.

2. Allgemeine Konfiguration

Wenn Sie den standardmäßigen Plugin-Ordner des Redux Framework untersuchen, werden Sie viele Dateien und Verzeichnisse finden, aber hier brauchen Sie nur den ReduxCore-Ordner.

Der ReduxCore-Ordner

Kopieren Sie den gesamten Inhalt dieses Ordners in Ihren Add-On-Plugin-Ordner. Erstellen Sie einen Ordner, rufen Sie ihn zum Beispiel beliebig an Optionsfeld, und füge den ReduxCore-Inhalt hinzu. Erstellen Sie als Nächstes eine leere Datei in diesem Ordner und rufen Sie sie an config.php. Als nächstes müssen wir verlangen reduxframework, Wenn wir das Add-On-Plugin in der WordPress-Umgebung installieren, stürzt die Site nicht ab.

Fügen Sie in Ihrer Add-On-Plugin-Hauptdatei den Code hinzu:

Das ist alles! Ihr Redux Framework ist jetzt integriert, es wird jedoch noch kein Optionsfeld angezeigt, da zunächst einige Optionen erstellt werden müssen. Dies wird alles in der von uns erstellten Datei config.php erledigt.

3. Erstellen eines Optionsfensters

Als Richtlinie und Ausgangspunkt können Sie die mit dem Redux-Plugin gelieferte Datei sample-config.php verwenden. Dieser enthält den gesamten Code, der zum Erstellen eigener benutzerdefinierter Optionen erforderlich ist. Lassen Sie uns zunächst den Hauptkonfigurationsprozess hervorheben.

Öffnen Sie Ihre config.php-Datei und fügen Sie am Anfang diesen Code (die Eröffnung) hinzu Tag wird nicht benötigt, wenn es bereits vorhanden ist):

 Durch diese Prüfung wird sichergestellt, dass das Redux Framework aktiviert ist. Andernfalls funktionieren alle von uns erstellten Optionen nicht und lösen möglicherweise eine Unmenge von PHP-Fehlern aus.
 Bevor wir mit der Erstellung unserer Optionen beginnen, benötigen wir zunächst eine zusätzliche Konfiguration. Erstellen Sie eine Variable, die alle Ihre Optionen speichert und in Ihren Designdateien verwendet werden kann:
$ opt_name = "Ihr_Variablenname";
 Machen Sie es eindeutig, indem Sie Präfixe verwenden, zum Beispiel: IhrMarkenname_IhrerMitername.
Danach den Code hinzufügen:
$ theme = wp_get_theme ();
Dies ist erforderlich, um alle Redux-Argumente zu konfigurieren, die Informationen über das installierte Design verwenden.
Argumente
 An dieser Stelle müssen wir die folgenden Argumente hinzufügen:
$ args = array ('opt_name' => $ opt_name, 'display_name' => $ theme-> get ('Name'), 'display_version' => $ them-> get ('Version'), 'menu_type' => 'submenu', 'allow_sub_menu' => true, 'menu_title' => esc_html __ ('Theme-Einstellungen', Ihre Textdomain '),' page_title '=> esc_html __ (' ThemeSettings ', Ihre Textdomain'), 'google_api_key' =>, ' google_update_weekly '=> false,' async_typography '=> true,' admin_bar '=> true,' admin_bar_icon '=> "",' admin_bar_priority '=> 50,' global_variable '=> $ opt_name,' dev_mode '=> false,' update_notice '=> false,' customizer '=> true,' page_priority '=> null,' page_parent '=>' themes.php ',' page_permissions '=>' manage_options ',' menu_icon '=> ",' last_tab ' => ", 'page_icon' => 'icon-themes', 'page_slug' => 'themeoptions', 'save_defaults' => true, 'default_show' => false, 'default_mark' =>", 'show_import_export' => wahr );
 Hier gibt es viele Argumente, aber keine Sorge, ich werde die wichtigsten hervorheben.
 menu_type
 Wenn Ihre Design-Optionsseite als separates Menüelement auf oberster Ebene angezeigt werden soll, sollten Sie diesen Wert auf einstellen Speisekarte, wenn Sie möchten, dass Ihre Designoptionen als Untermenü angezeigt werden (ich ziehe es vor, sie unter zu setzen) Aussehen) setze den Wert auf Untermenü.
 dev_mode
 Sie können dies während der Entwicklung aktivieren. Vergessen Sie jedoch nicht, es beim Veröffentlichen des Designs zu deaktivieren.
 update_notice
 Da Redux Teil Ihres Projekts ist, möchten Sie nicht, dass Ihre Benutzer Aktualisierungsbenachrichtigungen von Redux Framework erhalten. Setzen Sie dies also auf falsch.
 Customizer
 Wenn Sie Ihre benutzerdefinierten Einstellungen als Teil des WordPress-Anpassungsprogramms anzeigen möchten, setzen Sie dieses Argument einfach auf wahr.
 Das Arguments-Array enthält viele weitere Elemente. Wenn Sie Informationen zu jedem Element benötigen, finden Sie Details in der Datei sample-config.php. Für unsere Bedürfnisse haben wir die Argumente ausreichend angepasst. Nun setzen wir die Argumente.
Redux :: setArgs ($ opt_name, $ args);
 Abschnitte hinzufügen
Jetzt ist Ihr Themenbereich fertig. Sie können Abschnitte mit Optionen hinzufügen. Stellen Sie sich Abschnitte als Gruppen vor. Wenn Sie (z. B.) Header-Optionen hinzufügen möchten, erstellen Sie einen Header-Abschnitt und fügen ihm Optionen hinzu. Um einen Abschnitt zu erstellen, benötigen Sie folgende Struktur:
Redux :: setSection ($ opt_name, array ('title' => esc_html __ ('Abschnittstitel', 'yourtextdomain'), 'id' => esc_html __ ('section-unique-id'), 'yourtextdomain', 'icon' => 'icon-name', 'fields' => array ()));
 Hier möchte ich das hervorheben Ich würde Attribut-stellen Sie sicher, dass es eindeutig ist. Sie können benutzerdefinierte Symbole verwenden, das Standard-Icon-Pack ist jedoch nicht verwendbar.
 Ihr Abschnitt wurde erstellt, sodass Sie dem Feldfeld jetzt Optionen hinzufügen können. Eine Liste der verfügbaren Optionstypen sowie die Codestruktur mit Erläuterungen und Hervorhebungen finden Sie hier. 
Wenn Sie den Abschnitt a machen möchten Unterabschnitt Fügen Sie aus dem zuvor hinzugefügten Abschnitt einfach ein neues Argument hinzu 'subsection' => true. 
Die Option selbst ist nichts anderes als ein Array mit Argumenten, zum Beispiel:
array ('id' => 'opt-checkbox', 'type' => 'checkbox', 'title' => esc_html __ ('Checkbox', 'yourtextdomain'), 'Untertitel' => esc_html __ ('Keine Validierung möglich erledigt für diesen Feldtyp ',' Ihre Textdomäne '),' desc '=> esc_html __ (' Dies ist das Beschreibungsfeld, das auch für zusätzliche Informationen geeignet ist ',' Ihre Textdomäne '),' default '=>' 1 '// 1 = ein | 0 = aus), 
 Mit diesem Code haben wir ein Kontrollkästchen in unseren Bereich aufgenommen. Die wichtigsten Dinge sind hier die ID (sie sollte eindeutig sein) und der Typ (es sollte korrekt sein und der genauen Bezeichnung des Feldtyps folgen, den Redux bereitstellt). Weitere Details zu Feldern finden Sie in der Datei sample-config.php.
 Im Allgemeinen ist dies alles, was Sie wissen müssen, um ein Optionsfeld zu erstellen. Als Nächstes werden wir sehen, wie Sie diese Optionen nutzen können.
 4. Verwenden von Optionen innerhalb eines Designs
 Redux speichert alle Optionen in einer globalen Variablen. Erinnere dich an die $ opt_name Variable, die wir in der Datei config.php erstellt haben? Dies ist die Variable, in der alle Optionen gespeichert sind, und Sie können auf folgende Weise darauf zugreifen.
 Zuerst müssen Sie die globale Variable deklarieren. Und dies stellt das erste mögliche Problem dar: Es wird nicht empfohlen, eine globale Variable außerhalb einer Funktion oder Aktion zu deklarieren. Die Lösung ist, diese kleine Funktion zu Ihrer functions.php-Datei hinzuzufügen:
function yourprefix_theme_options_global_variable () global $ yourglobalvariable; 
Führen Sie dann auf jeder Seite, auf der Sie Ihre Optionen verwenden möchten, die Funktion zuerst folgendermaßen aus:
yourprefix_theme_options_global_variable ();
 Wenn Sie die globale Variable in einer anderen Funktion oder Aktion benötigen, können Sie sie ohne diese Funktion deklarieren.
Optionen verwenden
 Wenn Sie Optionen verwenden, ohne vorher zu prüfen, dass die Option vorhanden ist, erhalten Sie eine PHP-Benachrichtigung, in der Sie etwas darüber erfahren undefinierte Variable / Index. Warum ist das wichtig? Wenn der Benutzer Ihr Design aktiviert, das Add-On-Plugin jedoch nicht aktiviert, das Ihr Optionsfeld enthält, wird ihm eine Sammlung von PHP-Warnhinweisen für nicht definierte Variablen angezeigt. Nicht ideal.
Es gibt ein gutes Muster, um diese Situation zu vermeiden - es sieht so aus:
$ your_option_name = (isset ($ GLOBALS ['Ihre globaleVariable'] ['Ihre Option']))? $ GLOBALS ['yourglobalvariable'] ['youroption']: "yourdefaultvalue für diese Option";
 Mit diesem kleinen Check stellen Sie sicher, dass Sie keine undefinierten Variablen- / Indexbenachrichtigungen erhalten. Wenn Sie keine Standardwerte zuweisen oder eine Variable erstellen möchten, können Sie stattdessen dieses Muster verwenden: 
If (isset ($ GLOBALS ['yourglobalvariable'] ['youroption']) // erledige das Zeug…
Fazit
Vielen Dank fürs Lesen. Ich hoffe, dass Sie damit beginnen, Redux für Ihre Themenoptionen zu verwenden! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar.
Nützliche Links
 reduxframework.com
  ReduxFramework auf Facebook
  @ReduxFramework auf Twitter
 



		
			
	   
	




Web-Design