Share
Wat je gaat creërenDe thema-aanpasser is een geweldig hulpmiddel om uw gebruikers meer vrijheid te geven om een thema te bewerken zonder de code te hoeven bewerken. Maar als u uw gebruikers de kleuren van hun site wilt laten veranderen, kan het ingewikkeld worden. Door een besturingselement toe te voegen voor elk afzonderlijk element dat ze kunnen wijzigen, wordt het lastig en gebruikers kunnen eindigen met een site die eruit ziet als een bonte puinhoop.
In plaats van heel veel besturingselementen toe te voegen voor alle elementen die gebruikers kunnen wijzigen, kunt u eenvoudig een kleurenschema maken, zodat gebruikers een paar kleuren kunnen selecteren en die vervolgens toepassen op een reeks elementen in het thema.
In deze zelfstudie doorloop ik het eerste deel van dit proces, dat is het instellen van de thema-aanpasserbedieningen. In het volgende deel laat ik u zien hoe u deze bedieningselementen aan uw thema kunt koppelen, zodat gebruikers die kleuren selecteren doorgaan naar het thema.
Begin met het installeren van het startthema en activeer het. De thema-aanpasser ziet er als volgt uit:
Na het voltooien van de zelfstudie heeft uw aanpasser twee extra secties.
De eerste stap is het maken van een bestand in uw thema om uw aanpassingsfuncties te behouden. Ik ga werken met een basisstartthema, gebaseerd op het thema dat is gemaakt tijdens mijn serie over het maken van een WordPress-thema uit statische HTML. Ik heb er een paar wijzigingen in aangebracht zodat deze met de functies van het kleurenschema kunnen werken, dus als u deze zelfstudie wilt doornemen, raad ik u aan het startthema te downloaden.
Maak een map met de hoofdmap van uw thema inc en maak in dat geval een bestand met de naam customizer.php.
Open je functions.php bestand en voeg het volgende toe, waaronder het nieuwe bestand dat u zojuist hebt gemaakt:
Accentsconagua
include_once ('inc / customizer.php');Nu in jouw customizer.php bestand, voeg deze functie toe:
functie wptutsplus_customize_register ($ wp_customize) add_action ('customize_register', 'wptutsplus_customize_register');Hiermee wordt een functie gemaakt die al uw instellingen en bedieningselementen bevat en die aan de customize_register actie haak. Je thema is klaar voor gebruik!
De eerste stap bestaat uit het toevoegen van de instellingen en bedieningselementen voor uw kleurenschema. U voegt besturingselementen toe voor vier kleurkiezers, de hoofdkleur, de secundaire kleur en twee verbindingskleuren.
Binnen de functie die u zojuist hebt gemaakt, voegt u het volgende toe:
/******************************************* Kleurenschema **** ******************************** / // voeg het gedeelte toe met de instellingen $ wp_customize-> add_section ('textcolors', array ('title' => 'Color Scheme',));Hiermee wordt een leeg gedeelte gemaakt voor de besturingselementen voor uw kleurenschema.
Voeg onmiddellijk hieronder toe:
// hoofdkleur (sitetitel, h1, h2, h4. h6, widget-koppen, nav-links, footer-koppen) $ txtcolors [] = array ('slug' => 'color_scheme_1', 'default' => '# 000' , 'label' => 'Hoofdkleur'); // secundaire kleur (sitebeschrijving, zijkanten van de zijkanten, h3, h5, nav-links bij zweven) $ txtcolors [] = array ('slug' => 'color_scheme_2', 'default' => '# 666', 'label' = > 'Secundaire kleur'); // link color $ txtcolors [] = array ('slug' => 'link_color', 'default' => '# 008AB7', 'label' => 'Kleur koppelen'); // link color (hover, active) $ txtcolors [] = array ('slug' => 'hover_link_color', 'default' => '# 9e4059', 'label' => 'Kleur koppelen (bij zweven)');Hiermee wordt een nieuwe sectie toegevoegd aan de thema-aanpasser met de naam 'Kleurenschema'. Vervolgens worden de argumenten ingesteld voor de vier kleuren waarmee u werkt: een slak, standaardwaarde en label. De standaardwaarde is de kleur die in het thema wordt gebruikt, dus u kunt uw eigen kleuren aanpassen aan uw thema.
Vervolgens moet u instellingen voor uw kleuren maken met behulp van de argumenten die u zojuist hebt gedefinieerd. Onder het laatste codeblok typt u:
// voeg de instellingen en bedieningselementen voor elke kleur toe aaneach ($ txtcolors als $ txtcolor) // SETTINGS $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'type' => 'option', 'capability' => 'edit_theme_options')); Dit gebruikt een foreach om door alle kleuren te gaan die u zojuist hebt gedefinieerd, waarbij u een instelling maakt voor elk gebruik van de argumenten die u hebt gedefinieerd. Maar u moet nog steeds besturingselementen toevoegen, zodat gebruikers met deze instellingen kunnen werken via de thema-aanpasser.
Binnen in de foreach beugels en onder de add_setting () functie die u zojuist hebt toegevoegd, voegt u het volgende in:
// CONTROLS $ wp_customize-> add_control (nieuw WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors', 'settings' => $ txtcolor ['slug'])));Hiermee voegt u een kleurenkiezer toe voor elk van uw kleuren, met behulp van de WP_Customize_Color_Control () functie, die kleurkiezers maakt voor de thema-aanpasser.
Jouw hele foreach verklaring ziet er nu als volgt uit:
// voeg de instellingen en bedieningselementen voor elke kleur toe aaneach ($ txtcolors als $ txtcolor) // SETTINGS $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'type' => 'option', 'capability' => 'edit_theme_options')); // CONTROLS $ wp_customize-> add_control (nieuw WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors', 'settings' => $ txtcolor ['slug']))); Je zult nu je nieuwe sectie kunnen zien wanneer je de thema-aanpasser opent met je thema geactiveerd:
En wanneer u een van de besturingselementen uitvouwt, ziet u de kleurenkiezer:
Op dit moment zal niets dat je met de kleurenkiezer doet, daadwerkelijk in je thema worden weergegeven, omdat je geen CSS hebt toegevoegd om het te laten werken - we komen daar in deel 2 van deze serie naar toe. Voor nu voegen we een ander gedeelte toe om gebruikers meer controle te geven over hun kleurenschema.
In de volgende sectie kunnen gebruikers geen kleuren kiezen, maar in plaats daarvan krijgen ze de optie om een stevige achtergrond toe te voegen aan de koptekst en / of voettekst van hun site. Als ze dit selecteren, veranderen de achtergrond- en tekstkleuren van die elementen.
Onder de code die je zojuist hebt toegevoegd, maar nog steeds in je wptutsplus_customize_register () functie, voeg het volgende toe:
/ ********************************** Effen achtergrondkleuren ******** *************************** / // voeg de sectie toe met de instellingen $ wp_customize-> add_section ('background' , array ('title' => 'Solid Backgrounds',)); // voeg de instelling toe voor de header-achtergrond $ wp_customize-> add_setting ('header-achtergrond'); // voeg de controle toe voor de header-achtergrond $ wp_customize-> add_control ('header-achtergrond', array ('label' => 'Voeg een effen achtergrond toe aan de header?', 'section' => 'background', 'settings '=>' header-achtergrond ',' type '=>' radio ',' keuzes '=> array (' header-background-off '=>' nee ',' header-background-on '=>' yes ' ,))); // voeg de instelling toe voor de footer-achtergrond $ wp_customize-> add_setting ('footer-achtergrond'); // voeg het besturingselement toe voor de footer-achtergrond $ wp_customize-> add_control ('footer-achtergrond', array ('label' => 'Voeg een effen achtergrond toe aan het voettekst?', 'gedeelte' => 'achtergrond', 'instellingen '=>' footer-achtergrond ',' type '=>' radio ',' keuzes '=> array (' footer-background-off '=>' nee ',' footer-background-on '=>' yes ' ,)));Dit voegt een tweede nieuwe sectie toe met de naam 'Solid Backgrounds' en voegt er vervolgens twee besturingselementen aan toe, die beide radiokaders zijn. In beide gevallen zijn er twee keuzes: ja en nee. In het tweede deel van deze serie laat ik zien hoe je variabelen definieert op basis van die keuzes en deze gebruikt om de CSS in het thema te veranderen.
Je kunt de nieuwe sectie nu bekijken in de thema-aanpasser:
Nogmaals, er gebeurt niets als je een van de radio's selecteert, omdat je dit nog niet hebt gekoppeld aan de CSS van het thema, maar dat komt.
In dit eerste deel hebt u de instellingen en bedieningselementen toegevoegd die nodig zijn om de thema-aanpasserinterface voor uw kleurenschema te maken.
In het volgende deel laat ik je zien hoe je variabelen definieert op basis van de keuzes die je gebruikers maken in de thema-aanpasser en vervolgens die variabelen gebruikt om de CSS in te stellen.
