Share
Een van de coolste functies van Titan Framework is dat het automatisch CSS voor alle optietypen kan genereren. Er bestaat ook een Sass-compiler die niet alleen de CSS compileert maar ook minimaliseert. Er zijn twee verschillende manieren gedefinieerd voor het genereren van CSS. Laten we automatisch CSS genereren voor uw opties.
Er zijn in principe twee manieren waarop u automatisch CSS kunt genereren met TF (Titan Framework):
Accentsconagua
css parametercreateCSS functieGedurende de reeks bent u de css parameter voor het definiëren van CSS-regels in de meeste opties. In de documentatie staat dat wanneer u een optie in een beheerderspagina en / of themaaanpassingsgedeelte maakt, de css parameter genereert automatisch CSS (alleen als u die parameter gebruikt). Laten we een lijst maken van alle opties die deze parameter ondersteunen:
Laten we leren hoe het css parameter genereert CSS-eigenschappen via een voorbeeld.
Hier maak ik een kleur typ optie in een admin paneel. Gebruik de volgende code:
createAdminPanel (array (// Geef het optiemenu 'name' => 'Neat Options')); / ** * * Maak de kleurtype-opties in een beheerdersdisplay * * / $ aa_panel-> createOption (array ('id' => 'aa_bg_color', // De ID die wordt gebruikt om de waarde van deze optie te krijgen ' type '=>' kleur ', // Type optie we maken' naam '=>' Achtergrondkleur instellen ', // Naam van de optie die in het admin paneel wordt getoond' desc '=>' Dit is onze optie ', // Beschrijving van de optie die wordt weergegeven in het admin paneel' css '=>' .aa_bg_class background-color: value; ')); Ik heb een gemaakt kleur typ optie op regel # 19 die de kleurwaarde instelt. Ik heb de css parameter op regel # 25. Ik heb een klasse gedefinieerd en daarbinnen heb ik de CSS-eigenschap gedefinieerd waar ik wil dat de kleurwaarde wordt afgedrukt. Dus ik heb een klas toegevoegd aa_bg_class, en daarbinnen heb ik een CSS-eigenschap toegevoegd achtergrondkleur: waarde;. Hier het sleutelwoord waarde worden geruild met de uitvoer van deze optie, d.w.z. de kleur die de gebruiker selecteert, wordt vervangen door de kleur.
Titan genereert automatisch een CSS-bestand dat al uw CSS-regels voor u bevat. Het maakt het bestand in WordPress's uploads map in het formaat: titan-framework-. In mijn geval is dat zo titan-framework-nette-css.css.
Laten we deze optie gebruiken om automatisch CSS te genereren.
Ik heb een div-tag met klasse toegevoegd aa_bg_class en wat dummy tekst op mijn pagina.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultrences mi vitae est. Mauris placerat eleifend leo. Quisque zit op amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Laten we een demokleur selecteren van de beheerder.
Kijk, de achtergrondkleur is automagisch toegepast.
Er is een andere manier om CSS te genereren met TF. Dit is via de createCSS functie, die al uw CSS-stijlen declareert.
Laten we uitleggen hoe het werkt met een voorbeeld.
Ik gebruik hetzelfde kleur type optie die eerder werd uitgelegd.
createAdminPanel (array (// Geef het optiemenu 'name' => 'Neat Options')); / ** * * Maak de optie voor het kleurtype in $ aa_panel * * / $ aa_panel-> createOption (array ('id' => 'aa_color_opt', // De ID die wordt gebruikt om de waarde van deze optie 'type' te krijgen '=>' kleur ', // Type optie we maken' naam '=>' Kies kleurinstellingen ', // Naam van de optie die wordt weergegeven in het admin paneel' desc '=>' Dit is onze optie '// Beschrijving van de optie die wordt weergegeven in het admin-paneel)); / ** * * Gebruik createCSS-functie om CSS * * / $ titan-> createCSS te genereren ('h1 color: $ aa_color_opt;'); Hier heb ik een beheerderspaneel gemaakt met de naam Nette opties op regel # 7. Toen voegde ik er een toe kleur typ optie op regel # 18. Vervolgens heb ik de createCSS functie op regel # 33 die de variabele opneemt $ aa_color_opt. Dit is eigenlijk de ID van hetzelfde kleur typ de optie die ik zojuist heb gedefinieerd en deze variabele heeft de waarde van de kleur die de eindgebruiker heeft geselecteerd in het beheerdersdashboard.
Merk nogmaals op dat dit een Sass (Syntactically Awesome Style Sheets) variabele is die overeenkomt met de ID van de optie waarvan u de waarde wilt krijgen. Dus verwissel het niet met een normale PHP-variabele.
Ik heb enkele aanhalingstekens toegevoegd om te voorkomen dat ik ontsnap aan het $ -teken van de variabele. Binnen CSS richt ik me op h1-kopjes. Ik heb de waarde van de kleuroptie ingesteld op de kleureigenschap van CSS op regel # 34.
Als u in dit stadium een voorbeeld van de front-end bekijkt, wordt kop 1 weergegeven in de standaardkleur.
Laten we een demo-kleur kiezen en opslaan. Stel dat ik kies # ed3325.
De kleur van de kop verandert nu in deze nieuwe waarde. Hier is de screenshot:
U kunt meer lezen over de createCSS-functie.
Veel plezier met het genereren van CSS met Titan Framework. Zorg ervoor dat u de nieuwste Titan Framework-release gebruikt.
Naar mijn mening, de createCSS De functie werkt heel goed wanneer u meerdere CSS-waarden dynamisch moet toevoegen, op een meer gecontroleerde en modulaire manier.
Als je vragen hebt, reageer hier dan of neem contact met mij op via Twitter.
