Share
Was Sie erstellen werdenDas Designanpassungsprogramm ist ein hervorragendes Werkzeug, mit dem Benutzer mehr Gestaltungsmöglichkeiten haben, ohne den Code bearbeiten zu müssen. Wenn Sie jedoch möchten, dass Ihre Benutzer die Farben ihrer Website ändern, kann dies kompliziert werden. Durch das Hinzufügen eines Steuerelements für jedes einzelne Element, das sie ändern können, wird die Arbeit mühsam, und Benutzer erhalten möglicherweise eine Website, die wie ein schreckliches Durcheinander aussieht.
Anstatt viele Steuerelemente für alle Elemente hinzuzufügen, die Benutzer ändern können, können Sie einfach ein Farbschema erstellen, in dem Sie einige Farben auswählen und diese dann auf eine Reihe von Elementen im Design anwenden können.
In diesem Lernprogramm werde ich Sie durch den ersten Teil dieses Vorgangs führen, in dem Sie die Steuerelemente für die Anpassung des Designs einrichten. Im nächsten Teil zeige ich Ihnen, wie Sie diese Steuerelemente mit Ihrem Design verknüpfen, damit Benutzer, wenn Sie Farben auswählen, diese zum Design weiterleiten.
Installieren Sie zunächst das Startdesign und aktivieren Sie es. Der Design-Customizer sieht folgendermaßen aus:
Nach Abschluss des Lernprogramms verfügt Ihr Anpassungsprogramm über zwei zusätzliche Abschnitte.
Der erste Schritt ist das Erstellen einer Datei in Ihrem Design, die Ihre Anpassungsfunktionen enthält. Ich werde mit einem grundlegenden Startthema arbeiten, das auf dem Thema basiert, das in meiner Serie zum Erstellen eines WordPress-Themas aus statischem HTML erstellt wurde. Ich habe einige Änderungen daran vorgenommen, damit es mit den Farbschemafunktionen funktioniert. Wenn Sie dieses Tutorial durcharbeiten möchten, empfehle ich Ihnen, das Startdesign herunterzuladen.
Erstellen Sie im Hauptordner Ihres Themas einen Ordner namens inc und erstellen Sie eine Datei namens customizer.php.
Öffne dein Functions.php Datei und fügen Sie Folgendes hinzu, die die gerade erstellte neue Datei enthält:
Accentsconagua
include_once ('inc / customizer.php');Jetzt in deiner customizer.php Datei, füge diese Funktion hinzu:
Funktion wptutsplus_customize_register ($ wp_customize) add_action ('custom_register', 'wptutsplus_customize_register');Dadurch wird eine Funktion erstellt, die alle Ihre Einstellungen und Steuerelemente enthält und diese mit der anpassen_register Aktionshaken. Dein Thema ist bereit zu gehen!
Der erste Schritt besteht darin, die Einstellungen und Steuerelemente für Ihr Farbschema hinzuzufügen. Sie fügen Steuerelemente für vier Farbwähler, die Hauptfarbe, die Sekundärfarbe und zwei Verbindungsfarben hinzu.
Fügen Sie in der soeben erstellten Funktion Folgendes hinzu:
/******************************************* Farbschema **** **************************************** / // fügen Sie den Abschnitt hinzu, der die Einstellungen enthält $ wp_customize-> add_section ('textcolors', array ('title' => 'Color Scheme',));Dadurch wird ein leerer Abschnitt für die Farbschema-Steuerelemente erstellt.
Gleich unten hinzufügen:
// Hauptfarbe (Seitentitel, h1, h2, h4, h6, Widget-Überschriften, Navigationslinks, Fußzeilentitel) $ txtcolors [] = array ('slug' => 'color_scheme_1', 'default' => '# 000') , 'label' => 'Hauptfarbe'); // Sekundärfarbe (Site-Beschreibung, Kopfzeilen der Seitenleiste, h3, h5, Navigationslinks im Hover) $ txtcolors [] = array ('slug' => 'color_scheme_2', 'default' => '# 666', 'label' = > "Sekundärfarbe"); // Linkfarbe $ txtcolors [] = Array ('slug' => 'link_color', 'default' => '# 008AB7', 'label' => 'Link color'); // Linkfarbe (Schwebeflug, aktiv) $ txtcolors [] = array ('slug' => 'hover_link_color', 'default' => '# 9e4059', 'label' => 'Link color (im Schwebeflug)');Dies fügt dem Designanpassungsprogramm einen neuen Abschnitt mit dem Namen "Farbschema" hinzu. Anschließend werden die Argumente für die vier Farben festgelegt, mit denen Sie arbeiten: Slug, Standardwert und Beschriftung. Der Standardwert ist die Farbe, die im Design verwendet wird. Daher möchten Sie möglicherweise die Farbe des Designs ändern.
Als Nächstes müssen Sie mit den soeben definierten Argumenten Einstellungen für Ihre Farben erstellen. Geben Sie unter dem letzten Codeblock Folgendes ein:
// füge die Einstellungen und Steuerelemente für jede Farbe hinzu foreach ($ txtcolors als $ txtcolor) // EINSTELLUNGEN $ wp_customize-> add_setting ($ txtcolor ['slug']), array ('default' => $ txtcolor ['default']) , 'type' => 'option', 'fähigkeit' => 'edit_theme_options')); Dies verwendet a für jeden Mit dieser Anweisung können Sie jede der soeben definierten Farben durcharbeiten und mit den von Ihnen definierten Argumenten eine Einstellung erstellen. Sie müssen jedoch weiterhin Steuerelemente hinzufügen, damit Benutzer mit diesen Einstellungen mit dem Designanpassungsprogramm interagieren können.
In der für jeden Zahnspangen und unterhalb der add_setting () Funktion, die Sie gerade hinzugefügt haben, fügen Sie Folgendes ein:
// CONTROLS $ wp_customize-> add_control (neues WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug']), array ('label' => $ txtcolor ['label'], 'section' => 'textcolors', 'settings' => $ txtcolor ['slug'])));Dadurch wird für jede Ihrer Farben eine Farbauswahl hinzugefügt WP_Customize_Color_Control () Funktion, die Farbauswahl für das Designanpassungswerkzeug erstellt.
Ihr ganzes für jeden Die Anweisung sieht jetzt so aus:
// füge die Einstellungen und Steuerelemente für jede Farbe hinzu foreach ($ txtcolors als $ txtcolor) // EINSTELLUNGEN $ wp_customize-> add_setting ($ txtcolor ['slug']), array ('default' => $ txtcolor ['default']) , 'type' => 'option', 'fähigkeit' => 'edit_theme_options')); // CONTROLS $ wp_customize-> add_control (neues WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug']), array ('label' => $ txtcolor ['label'], 'section' => 'textcolors', 'settings' => $ txtcolor ['slug']))); Sie können jetzt Ihren neuen Abschnitt sehen, wenn Sie das Designanpassungsprogramm mit aktiviertem Design öffnen:
Wenn Sie eines der Steuerelemente erweitern, können Sie die Farbauswahl sehen:
Im Moment wird nichts, was Sie mit der Farbauswahl tun, tatsächlich in Ihrem Design reflektiert, da Sie kein CSS hinzugefügt haben, damit es funktioniert. Wir werden dazu in Teil 2 dieser Serie kommen. Im Moment fügen wir einen weiteren Abschnitt hinzu, um den Benutzern ein bisschen mehr Kontrolle über ihr Farbschema zu geben.
Im nächsten Abschnitt können Benutzer keine Farben auswählen. Stattdessen haben sie die Möglichkeit, der Kopf- und / oder Fußzeile ihrer Site einen durchgehenden Hintergrund hinzuzufügen. Wenn sie dies auswählen, ändern sich die Hintergrund- und Textfarben dieser Elemente.
Unter dem gerade hinzugefügten Code, aber immer noch in Ihrem wptutsplus_customize_register () Funktion, fügen Sie Folgendes hinzu:
/ ************************************** Hintergrundfarben ******** ****************************** / // füge den Abschnitt hinzu, der die Einstellungen enthält $ wp_customize-> add_section ('background' , array ('title' => 'Solid Backgrounds',))); // füge die Einstellung für den Header-Hintergrund hinzu $ wp_customize-> add_setting ('header-background'); // Steuerelement für den Header-Hintergrund hinzufügen $ wp_customize-> add_control ('header-background', array ('label' => 'Füge einen festen Hintergrund zum Header hinzu?', 'section' => 'background', 'Einstellungen '=>' header-background ',' type '=>' radio ',' Auswahlen '=> array (' header-background-off '=>' no ',' header-background-on '=>' yes ' ,))); // füge die Einstellung für den Fußzeilenhintergrund hinzu $ wp_customize-> add_setting ('footer-background'); // Steuerelement für den Hintergrund der Fußzeile hinzufügen $ wp_customize-> add_control ('footer-background', array ('label' => 'Füge einen festen Hintergrund zur Fußzeile hinzu?', 'section' => 'background', '- Einstellungen '=>' footer-background ',' type '=>' radio ',' choice '=> array (' footer-background-off '=>' no ',' footer-background-on '=>' yes ' ,)));Dies fügt einen zweiten neuen Abschnitt mit dem Namen 'Solid Backgrounds' hinzu und fügt dann zwei Steuerelemente hinzu, die beide Optionsfelder sind. Es gibt jeweils zwei Möglichkeiten: Ja und Nein. Im zweiten Teil dieser Serie zeige ich Ihnen, wie Sie anhand dieser Auswahl Variablen definieren und diese verwenden, um das CSS im Design zu ändern.
Sie können jetzt den neuen Abschnitt im Designanpassungsprogramm anzeigen:
Wieder wird nichts passieren, wenn Sie eines der Optionsfelder auswählen, da Sie dies noch nicht mit dem CSS des Themas verknüpft haben, aber das wird kommen.
In diesem ersten Teil haben Sie die Einstellungen und Steuerelemente hinzugefügt, die zum Erstellen der Designanpassungsoberfläche für Ihr Farbschema erforderlich sind.
Im nächsten Teil zeige ich Ihnen, wie Sie Variablen basierend auf den von den Benutzern im Designanpassungsprogramm getroffenen Entscheidungen definieren. Anschließend können Sie diese Variablen verwenden, um das CSS festzulegen.
