Share
De Theme Customization API, toegevoegd in WordPress 3.4, stelt ontwikkelaars in staat om besturingselementen aan te passen en toe te voegen Uiterlijk> Aanpassen beheerdersscherm. Met Titan Framework kunt u een groot aantal velden / instellingen uitbreiden en gebruiken om een thema te bouwen op basis van Live Theme Customizer.
Titan Framework is een optiekader en helpt bij het creëren van meerdere soorten opties door slechts enkele regels code te schrijven. Laten we kijken hoe we de mogelijkheden van Theme Customizer kunnen benutten via Titan Framework.
Accentsconagua
titan-framework-checker.php bestand opgenomen in uw project De code die ik ga gebruiken, hoort bij mijn eigen aangepaste thema Neat. Neat bevat een bestand met de naam customizer-options-init.php die aanwezig is in assets / admin /titanframework/customizer-options-init.php. Dit is waar ik Titan Framework heb geïmplementeerd om alle instellingen, panelen en secties voor deze tutorial te registreren.
Hier is de code om een customizer-sectie toe te voegen aan uw WP-thema.
createThemeCustomizerSection (array (// Geef het optiemenu 'name' => 'My Section', // Naam van het deelvenster waar alle secties aanwezig zijn 'panel' => 'My Panel'));
Ik heb een paar nuttige links naar de documentatie van Titan Framework bovenaan dit bestand geplaatst. Ik raad aan dat je deze links doorneemt.
Volgende (regel # 14) is een add_action () functie die een draagt tf_create_options haak en een aa_customizer_options functie als zijn parameters. Deze haak helpt bij het maken van opties in het gedeelte Customizer.
aa_customizer_options is een aangepaste functie voor het registreren van instellingen, secties of panelen. Als je mijn vorige artikelen hebt gelezen, heb ik daar een regel besproken voor het werken met Titan Framework:
Bel de getInstance () functie wanneer u nodig hebt om te communiceren met Titan Framework.Net als op regel # 19 van de bovenstaande code. Dit betekent dat een instantie wordt genoemd die aan de variabele is gekoppeld $ titanen het neemt een unieke parameter aan, bij voorkeur je themanaam. ik gebruiknetjes, welke de naam van mijn thema is.
Nadat u een exemplaar hebt aangeroepen, voegt u een sectie toe binnen het aanpassingsprogramma met behulp van de createThemeCustomizerSection () functie. Lijnen # 26 tot en met # 34 maken een sectie in $ titan riep $ aa_section1. De createThemeCustomizerSection () neemt een reeks parameters op zoals naam, paneel, desc, enz.
Ik gebruik twee van deze parameters (zoals naam en paneel) om het themaaanpassingspaneel en vervolgens een sectie erin te maken. Een paneel is een groep secties, terwijl een sectie instellingen erin bevat.
Ik heb een paneel gemaakt met de naam 'Mijn panelen een sectie genaamd 'Mijn sectie ' menu binnen het paneel.
De bovenstaande schermafbeelding toont de nieuw aangepaste thema-aanpasser. Hier kunt u het nieuwe paneel vinden, d.w.z.. Mijn panel.
Binnen Mijn panel er is een sectie met de naam Mijn sectie.
In het vorige artikel heb ik besproken hoe je een aangepaste sectie kunt maken binnen een aangepast paneel van de thema-aanpasser met Titan Framework. Laten we een paar opties / instellingen maken binnen de sectie die we hebben gemaakt en ons thema aan de voorkant implementeren.
Plak de volgende regels rechts onder de code geschreven in het vorige artikel in de customizer-options-init.php het dossier. Dit bestand is opgenomen in de functions.php van ons thema via de admin-init.php het dossier.
createOption (array ('id' => 'aa_sec_body_bg_clr', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'kleur', // Type optie we maken 'naam' => 'Site Background Color', // Naam van de optie die wordt weergegeven in het admin paneel 'default' => '#fff' // Standaardwaarde van onze optie)); // Teksttekstkleur $ aa_section1-> createOption (array ('id' => 'aa_sec_body_txt_clr', // De ID die wordt gebruikt om de waarde van deze optie 'type' => 'kleur', // Type optie maken we 'naam' => 'Sitetekstkleur', // Naam van de optie die wordt weergegeven in het admin paneel 'default' => '# 000' // Standaardwaarde van onze optie)); Ik gebruik de createOption () functie van Titan Framework om opties te creëren. Omdat ik deze optie moet maken in de aangepaste sectie met de naam $ aa_section1, Ik heb de functie voor het maken van opties via de sectievariabele in regel # 8 aangeroepen.
Ik heb twee instellingen geregistreerd. Beide zijn kleurtype-opties waarbij de eerste optie helpt bij het configureren van de achtergrondkleur van het lichaam (regel # 10 tot # 13).
Ik heb verschillende parameters ingesteld voor deze kleurinstelling, ID kaart en naam de belangrijkste zijn. De ID kaart, die uniek zou moeten zijn, wordt gebruikt om de waarde van deze optie te krijgen, terwijl de naam is wat verschijnt in de customizer.
Vervolgens heb ik een andere optie voor de tekstkleur van het hoofdgedeelte gemaakt (regel # 18 tot # 25). Omdat het hetzelfde optietype is, is het vergelijkbaar met het vorige met verschillende waarden in de parameters. Laten we eens kijken wat er gebeurt in de customizer.
De achtergrondkleur van het hoofdgedeelte en de tekstkleur van het hoofdgedeelte worden weergegeven tegen de namen Achtergrondkleur van site en Tekstkleur site in onze sectie genaamd Mijn sectie.
Tot nu toe heb ik opties toegevoegd in de thema-aanpasser. Laat me je nu tonen hoe je hier waarden uit kunt halen.
Allereerst haal ik de opgeslagen waarden van beide opties op en bewaar ze in twee verschillende variabelen. Vervolgens gebruik ik deze twee variabelen in een CSS in een bestand om de waarden van kleuren in ons thema te wijzigen. Plak hiervoor de volgende coderegels boven aan de header.php het dossier.
getOption ('aa_sec_body_bg_clr'); // Body txt color $ aa_sec_body_txt_clr_val = $ titan-> getOption ('aa_sec_body_txt_clr'); ?>Met behulp van deze code krijg ik de waarden van de opties die zijn gemaakt in de customizer-options-init.php het dossier. Hiervoor zijn twee stappen nodig:
GetOption () functie.Regel # 17 is waar ik het exemplaar heb geregistreerd. Regel # 20 en # 23 hebben de waarden van deze opties opgehaald, wat de tweede stap was. De GetOption () functie in deze twee regels haalt de waarden uit aa_sec_body_bg_clr en aa_sec_body_txt_clr, welke de unieke ID's zijn voor de achtergrondkleur van de site en de opties voor de tekentaal.
De opgehaalde kleurwaarden worden opgeslagen in de variabelen $ aa_sec_body_bg_clr_val en $ aa_sec_body_txt_clr_val.
Laten we deze twee variabelen, die de door de gebruiker geselecteerde kleurwaarden bevatten, gebruiken aan de voorkant:
Plak deze code onder de wp-kop () functie zodat onze stijlen worden opgenomen na de originele stylesheet van ons thema. Kijk door regel # 7 en # 20 voor elk van deze tags - de echo opdracht wordt gebruikt om de uitvoer voor achtergrondkleur en tekstkleur af te drukken.
Merk op dat de CSS-eigenschappen zijn gemarkeerd als !belangrijk, die de CSS-prioriteit garandeert.
Volg deze stappen om een voorbeeld van de wijzigingen te bekijken.
Nadat u de kleuren hebt ingesteld, kunt u een live voorbeeld van deze wijzigingen op uw site bekijken.
ik kies # 000000 als mijn achtergrondachtergrondkleur en #bfbfbfals de tekstkleur van de site - u kunt de preview-schermafbeelding hierboven bekijken.
Als u klaar bent, klikt u op Opslaan en publiceren knop.
Dus dat is het zo'n beetje. Nu kunt u gemakkelijk binnen Theme Customizer met Titan Framework opties maken. Was het makkelijk? Aarzel niet om contact op te nemen via Twitter of een reactie hieronder als je vragen hebt.
Inmiddels weet u met Titan Framework elke soort container te maken. Ik kan niet genoeg benadrukken hoe belangrijk de laatste paar artikelen zijn. Als u niet weet hoe u deze containers moet maken, is het voor u moeilijk om een van de volgende artikelen te begrijpen. Dus, ga terug en herzie uw concepten over het maken van verschillende soorten containers met Titan Framework. Je zou moeten weten hoe je moet creëren:
Vanaf het volgende artikel zal ik elk mogelijk type optie bespreken dat met Titan Framework kan worden toegevoegd. Blijf dus op de hoogte!
