Share
Vad du ska skapaTemat anpassaren är ett bra verktyg för att ge dina användare mer frihet att tweaka ett tema utan att behöva redigera koden. Men om du vill låta dina användare ändra färgerna på deras webbplats kan det bli komplicerat. Att lägga till en kontroll för varje enskilt element som de kan ändra kommer att göra saker besvärliga och användarna kan sluta med en webbplats som ser ut som en garish röra.
Istället för att lägga till många kontroller för alla element du vill att användarna ska kunna ändra kan du helt enkelt skapa ett färgschema, så att användare kan välja några färger och sedan tillämpa dem på en rad element i temat.
I den här handledningen tar jag dig igenom den första delen av denna process, som konfigurerar kontrollerna för temat anpassningsverktyg. I nästa del ska jag visa hur du länkar dessa kontroller till ditt tema så att när användare väljer färger flyttas de till temat.
Börja med att installera starttemat och aktivera det. Temat anpassaren kommer att se ut så här:
När du har slutfört handledningen kommer din anpassare att ha två extra avsnitt.
Det första steget är att skapa en fil i ditt tema för att hålla dina anpassningsfunktioner. Jag ska arbeta med ett grundläggande starttema, baserat på det tema som skapades under min serie om att skapa ett WordPress-tema från statisk HTML. Jag har gjort några ändringar på det så det kommer att fungera med färgschemaläggningsfunktionerna, så om du vill arbeta igenom den här handledningen rekommenderar jag att du laddar ner starttemat.
I ditt temas huvudmapp, skapa en mapp som heter inc och därmed skapa en fil som heter customizer.php.
Öppna din functions.php fil och lägg till följande, vilket inkluderar den nya filen du just skapat:
Accentsconagua
include_once ('inc / customizer.php');Nu i din customizer.php fil, lägg till den här funktionen:
funktion wptutsplus_customize_register ($ wp_customize) add_action ('customize_register', 'wptutsplus_customize_register');Det här skapar en funktion som innehåller alla dina inställningar och kontroller och hakar den till customize_register åtgärdskrok. Ditt tema är klart att gå!
Det första steget är att lägga till inställningarna och kontrollerna för ditt färgschema. Du lägger till kontroller för fyra färgplockare, huvudfärgen, sekundärfärgen och två länkfärger.
Inne i den funktion som du just skapat lägger du till följande:
/******************************************* Färgschema **** *************************************** / // lägg till avsnittet för att innehålla inställningarna $ wp_customize-> add_section ('textcolors', array ('title' => 'Färgschema',)));Detta skapar en tom sektion för dina färgschemanskontroller.
Omedelbart nedan, lägg till:
// huvudfärg (sidtitel, h1, h2, h4, h6, widgetrubriker, navlänkar, sidfot) $ txtcolors [] = array ('slug' => 'color_scheme_1', 'default' => '# 000' , 'label' => 'huvudfärg'); // sekundärfärg (sidbeskrivning, sidobarrubriker, h3, h5, nav länkar på svävar) $ txtcolors [] = array ('slug' => 'color_scheme_2', 'default' => '# 666', 'label' > 'Sekundär Färg'); // länkfärg $ txtcolors [] = array ('slug' => 'link_color', 'default' => '# 008AB7', 'label' => 'Link Color'); // länkfärg (svängare, aktiv) $ txtcolors [] = array ('slug' => 'hover_link_color', 'default' => '# 9e4059', 'label' => 'Länkfärg (på svävaren)');Detta lägger till en ny sektion till temat anpassningsanordningen kallad "Färgschema". Det ställer sedan upp argumenten för de fyra färgerna du ska arbeta med: en slug, standardvärde och etikett. Standardvärdet är den färg som används i temat, så du kanske vill ändra din till färgerna i ditt tema.
Därefter måste du skapa inställningar för dina färger med de argument du just definierat. Under det sista kodblocket skriver du:
// lägg till inställningarna och kontrollerna för varje färgforeach ($ txtcolors as $ txtcolor) // INSTÄLLNINGAR $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'typ' => 'alternativ', 'kapacitet' => 'edit_theme_options')); Detta använder a för varje uttalande att arbeta genom var och en av de färger du just definierat, skapa en inställning för var och en med de argument du definierade. Men du behöver fortfarande lägga till kontroller så att användare kan interagera med dessa inställningar med hjälp av temat anpassningsverktyget.
Inuti för varje hängslen och under add_setting () funktion som du just lagt till, lägg till följande:
// CONTROLS $ wp_customize-> add_control (ny WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors' => $ txtcolor ['slug']))));Detta lägger till en färgplockare för var och en av dina färger, med hjälp av WP_Customize_Color_Control () funktion, vilket skapar färgplockare för temat anpassaren.
Hela ditt hela för varje uttalandet kommer nu att se ut så här:
// lägg till inställningarna och kontrollerna för varje färgforeach ($ txtcolors as $ txtcolor) // INSTÄLLNINGAR $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'typ' => 'alternativ', 'kapacitet' => 'edit_theme_options')); // CONTROLS $ wp_customize-> add_control (ny WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors' => $ txtcolor ['slug'])))); Du kommer nu att kunna se din nya sektion när du öppnar temat anpassaren med ditt tema aktiverat:
Och när du utökar en av kontrollerna kan du se färgplockaren:
För tillfället kommer ingenting som du gör med färgväljaren att återspeglas i ditt tema, eftersom du inte har lagt till några CSS för att få det att fungera - vi kommer till det i del 2 i serien. För närvarande lägger vi till ett annat avsnitt för att ge användarna lite mer kontroll över deras färgschema.
Nästa avsnitt tillåter inte användare att välja färger, men istället ger dem möjlighet att lägga till en solid bakgrund till sidans sidhuvud och / eller sidfot. Om de väljer detta ändras bakgrunds- och textfärgerna för dessa element.
Nedanför koden du just lagt till, men fortfarande inne i din wptutsplus_customize_register () funktion, lägg till följande:
/ ************************************* Solid bakgrundsfärger ******** ******************************* / // lägg till avsnittet för att innehålla inställningarna $ wp_customize-> add_section ('background' , array ('title' => 'Solid Backgrounds',))); // lägg till inställningen för rubrikens bakgrund $ wp_customize-> add_setting ('header-background'); // lägg till kontrollen för rubrikens bakgrund $ wp_customize-> add_control ('header-background', array ('label' => 'Lägg till en solid bakgrund till rubriken?', 'section' => 'background', 'settings '=>' header-background ',' typ '=>' radio ',' choices '=> array (' header-background-off '=>' nej ',' header-background-on '=> ,))); // lägg till inställningen för footer-bakgrunden $ wp_customize-> add_setting ('footer-background'); // lägg till kontrollen för footer-bakgrunden $ wp_customize-> add_control ('footer-background', array ('label' => 'Lägg till en solid bakgrund till sidfoten?', 'section' => 'background', 'settings '=' 'footer-background', 'type' => 'radio', 'val' => array ('footer-background-off' => 'nej', 'footer-background-on' => 'ja' ,)));Detta lägger till en andra ny sektion som heter Solid Backgrounds och lägger sedan till två kontroller till den, båda är radiokartor. I varje fall finns det två val: ja och nej. I den andra delen av denna serie visar jag hur du definierar variabler baserat på dessa val och använder dem för att ändra CSS i temat.
Nu kan du se den nya sektionen i teman anpassningsverktyg:
Återigen kommer inget att hända om du väljer en av radiolådorna, eftersom du inte har länkat det här till temas CSS än, men det kommer att komma.
I den här första delen har du lagt till de inställningar och kontroller som behövs för att skapa temat anpassningsgränssnittet för ditt färgschema.
I nästa del visar jag hur du definierar variabler baserat på de val dina användare gör i temat anpassningsverktyget, och använd sedan dessa variabler för att ställa in CSS.
