Un ghid pentru începători în Cadrul Titan generați automat CSS pentru opțiunile dvs.

Una dintre cele mai bune caracteristici ale programului Titan Framework este că poate genera automat CSS pentru toate tipurile de opțiuni. Există, de asemenea, un compilator Sass care nu doar compilează, ci și miniește CSS. Două moduri diferite sunt definite pentru generarea CSS. Să generăm automat CSS pentru opțiunile dvs..

Modalități de generare a CSS cu TF

Există în principiu două moduri prin care puteți genera automat CSS cu TF (Titan Framework):

Prin css parametru
Prin createCSS funcţie

1. Generarea CSS prin parametrul CSS

De-a lungul seriei, ai întâlnit-o css parametru pentru definirea regulilor CSS în majoritatea opțiunilor. Se precizează în documentație că ori de câte ori creați vreo opțiune într - o pagină de administrare și / sau în secțiunea personalizator temă, css parametrul generează automat CSS (numai dacă utilizați acest parametru). Să enumerăm toate opțiunile care acceptă acest parametru:

Text
textarea
Culoare
Încărcați
Număr
Editor
Caseta de bifat
Font
Radio
Radio Paletă
Imagine radio
Selectați

Să învățăm cum css parametrul generează proprietăți CSS printr-un exemplu.

Exemplu de declarație

Aici o voi crea culoare tastați opțiunea dintr-un panou de administrare. Utilizați următorul cod:

createAdminPanel (array (// Nume meniul opțiuni 'name' => 'Neat Options')); / ** * * Crearea opțiunilor de tip de culoare într-un panou de administrare * * / $ aa_panel-> createOption (array ('id' => 'aa_bg_color', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni ' tip '=>' culoare ', // Tipul opțiunii pe care o creați' name '=>' Set Background Color ', // Numele opțiunii care va fi afișată în panoul admin' desc '=>' This is our opțiune ', // Descrierea opțiunii care va fi afișată în panoul de administrare' css '=>' .aa_bg_class background-color: value; '));

Am creat o culoare tip opțiune de la linia # 19 care stabilește valoarea culorii. Am definit css parametru la linia # 25. Am definit o clasă și apoi în interiorul acesteia am definit proprietatea CSS unde vreau să tipăresc valoarea de culoare. Așa că am adăugat o clasă aa_bg_class, iar înăuntru am adăugat o proprietate CSS fundal-culoare: valoare;. Aici cuvântul cheie valoare vor fi schimbate cu ieșirea acestei opțiuni, adică oricare culoare alege utilizatorul va schimba.

Titan generează automat un fișier CSS care conține toate regulile dvs. CSS pentru dvs. Creează fișierul în WordPress încărcări folder în formatul: titan-cadru--css.css. În cazul meu este titan-cadru curat-css.css.

Să folosim această opțiune pentru a genera automat CSS.

Exemplu de utilizare

Am adăugat o etichetă div cu clasa aa_bg_class și un text fals pe pagina mea.

  Pellentesque habitat morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricii eget, temporal sit amet, ante. Donec eu libero stai amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque stau amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentul sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Nu te opri în turp pulvinar facilisis. Ut felis. Cuvinte cheie: cursuri, cursuri, cursuri, cursuri, cursuri, evenimente Aș dori să mă eliberez. Nam dui mi, tincidunt quis, cumsan porttitor, facilisis luctus, metus

Afișarea rezultatului la frontal

Să selectăm o culoare demo de la admin.

Uită-te, culoarea de fundal a fost aplicată automat.

2. Generarea CSS prin intermediul funcției CreateCSS

Există un alt mod de a genera CSS cu TF. Aceasta este prin createCSS care declară toate stilurile dvs. CSS.

Să explicăm cum funcționează cu un exemplu.

Exemplu de declarație

Folosesc același lucru culoare tip opțiune care a fost explicată anterior.

createAdminPanel (array (// Nume meniul opțiuni 'name' => 'Neat Options')); / ** * * Crearea opțiunii de tip culoare în $ aa_panel * * / $ aa_panel-> createOption (array ('id' => 'aa_color_opt', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni '=>' culoare ', // Tipul opțiunii pe care o creați' name '=>' Choose Color Settings ', // Numele opțiunii care va fi afișată în panoul admin' desc '=>' Aceasta este opțiunea noastră '// Descrierea opțiunii care va fi afișată în panoul de administrare)); / ** * * Utilizați funcția createCSS pentru a genera CSS * * / $ titan-> createCSS ('h1 color: $ aa_color_opt;');

Aici am creat un panou de admin numit Neat Opțiuni la linia # 7. Apoi am adăugat a culoare introduceți opțiunea de la linia # 18. Înainte am definit createCSS funcționează la linia # 33 care ocupă variabila $ aa_color_opt. Aceasta este, în principiu, identitatea aceluiași culoare tastați opțiunea pe care tocmai am definit-o mai sus, iar această variabilă are valoarea culorii pe care utilizatorul final la selectat în panoul de administrare.

Rețineți din nou că aceasta este o variabilă Sass (Foaie de stil sintactic minunat) care corespunde cu ID-ul opțiunii la care doriți să obțineți valoarea. Deci, nu amestecați-o cu o variabilă normală PHP.

Am adăugat citate simple pentru a evita scăparea semnului $ a variabilei. În interiorul CSS vizez rubricile h1. Am setat valoarea opțiunii de culoare față de proprietatea de culoare a CSS la linia # 34.

Exemplu de utilizare

În acest stadiu, dacă previzualizați front-end-ul, acesta afișează rubrica 1 în culoarea sa implicită.

Să alegem orice culoare demo și să o salvăm. Să presupunem că am selectat # ed3325.

Culoarea titlului se schimbă acum la această nouă valoare. Iată captura de ecran:

Puteți citi mai multe despre funcția createCSS.

Concluzie

Distreaza-te de generarea de CSS cu Titan Framework. Asigurați-vă că utilizați cea mai recentă versiune Titan Framework.

În opinia mea, createCSS funcționează foarte bine când trebuie să adăugați dinamic mai multe valori CSS într-un mod mai controlat și modular.

Dacă aveți întrebări, comentați aici sau contactați-mă pe Twitter.

Cod