, skabe en mini - css preprocesser for tema farve muligheder,,,,, 60,,,,,,,, 26,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, wordpress giver tema udviklere med et stærkt system for at skabe brugervenlige systemer via tema customizer tema mulighed.mens customizer giver en fremragende tidstro forpremiere system og en stor generelle brugeroplevelse, at produktionen af muligheder, der er fastsat i customizer kan blive noget rod.  , i denne forelæsning, vil jeg vise dig, hvordan at forenkle at farve muligheder, der er fastsat i customizer til css i forenden.dette enkle system kan tilpasses til brug med andre css egenskaber samt.det betyder, at du kan bruge disse teknikker til at arbejde med muligheder via andre metoder end temaet customizer.,,, hvad det er, vi prøver at undgå, alt for ofte, at farver og andre muligheder, der er fastsat i tema customizer indebærer rodet kode blanding af folkesundhedsprogrammet og ccs.  , f.eks.:  ,, add_action ('wp_head "," slug_theme_customizer_css); funktion slug_theme_customizer_css() {?> < stil type = "tekst /css" > h1.site-title en (farve: <?php echo get_theme_mod ('site_title_color ","&#ff0000)?>} h3.site-description (farve: <?php echo get_theme_mod ('site_description_color ","�).>} < /stil > <?php}, problemet med denne kodeks er ikke rent æstetisk, eller at den er svær at læse.det er for nemt at lave en fejl.for eksempel, at folkesundhedsprogrammet hundetegn, efterfulgt af afsluttende css erklæring fører til dette:,?>,, som ser forkert ud, men teknisk set er korrekt.,,, mens du kunne starte denne funktion ved at få alle de farver, værdier, du har brug for til variabler, ville du stadig nødt til at åbne php tags til at tilslutte mig deres værdier i ccs.det er stadig en god start.evnen til at sætte css farve værdier til variabler, er naturligvis et af de mange gode ting om ved hjælp af en css preprocessor.,, mens tilføjelsen af et komplet sass eller mindre forarbejdningsvirksomhed til temaet er mulig, og der er plugins til at gøre det, det er for meget for en simpel opgave at omdanne et par variabler hexadecimale værdi.i stedet, vil jeg vise dig, hvordan at skabe en enkel preprocessor i temaet med blot et par linjer kode, bedre css avance, den første ting du skal gøre, er at skabe en fil med temaet ", customizer. css,.denne sag kunne virkelig have en udvidelse, men at give den et, css, udvidelse betyder, at din kode redaktør eller ide vil behandle det som en css fil at gøre det lettere at arbejde med.,,, customizer.css, du må reformatere det grimme kode fra det foregående eksempel på dette:,, h1.site-title en (farve: site_title_color]} h3.site-description (farve: [site_description_color]), som du kan se, du er nu i stand til at skrive css, som hvis det var ccs.du blot erstatter de værdier, der er fastsat i customizer med navnet på den, theme_mod i parentes.disse betingelser vil blive erstattet af vores preprocesser med deres værdi i databasen.det vigtigste er, at du bruger dit navn tema mods som erstatningsværdi i uforarbejdede css.,,, at bygge din preprocessor,, preprocesser selv er faktisk ret enkelt, som det tager indholdet af din, customizer.css,   og anvender høreværn, str_replace(), funktion at erstatte værdierne i parentes med værdier fra customizer.,, hele systemet omfatter en enkelt klasse med tre metoder og en funktion uden for den klasse, koblet til, wp_head, til produktionen, forarbejdede og optimeret ccs.husk på, at denne kode forudsætter, alle de oplysninger, vi har brug for, er oplagret i tema mods, som er den standard for temaet customizer.du kan få brug for at erstatte, get_theme_mod() med, get_option() i din kode, afhængigt af deres nøjagtige behov. denne klasse bruger en, for hvert, loop i hver metode.hvis du ikke er bekendt med, hvordan, for hvert, løkker, anbefaler jeg, at kigge på min artikel om arbejde med løkker og arrays.også, hvis du ikke er bekendt med folkesundhedsprogrammet klasser eller samt folkesundhedsprogrammet (ups) i almindelighed, bør du se tom mcfarlin indledende serie om oop.,,, til at begynde med i din, functions.php, eller i en fil, der indgår i det, skabe en tom hedder, slug_theme_customizer_output, der erstatter "kugle" temaet er enestående kugle.det skal se sådan ud:,, klasse slug_theme_customizer_output {}, den første metode i klasse vil være, hvor du sat temaet mods, at du vil bruge samt standardværdier for hvert tema forsvarsministeriet.du sætter alle i en vifte i form af, theme_mod = > misligholdelse.holder sig til de samme to indstillinger, som før, ville det sådan:,, funktion theme_mods() {tilbage system ('site_title_color = >&#ff0000 "," site_description_color = >�)), vil det næste skridt være at få den aktuelle værdi af hver, theme_mod og læg det i et system, som vi kan bruge i de faktiske preprocessor.denne metode kun får hver værdi fra, theme_mods(), metode og passerer nøglen som det første argument, som er theme_mods navn, get_theme_mods(), samtidig med at den standardværdi for det andet argument, som vil blive sendt tilbage, hvis der er noget, der er fastsat i dette emne er.det vil se ud, som om dette:,, funktion prepare_values() {$farver = array(); //få vores tema mods og standardværdier.$theme_mods = $- > theme_mods(); //for hvert tema, forsvarsministeriet, output værdien af temaet mod eller standardværdi.for hvert ($theme_mods som $theme_mod = > $default) ($farver [$theme_mod] = get_theme_mod ($theme_mod $misligholdelse)} tilbage $farver.}, nu har vi et system i form af,'theme_mod_name = > værdi til at erstatte, og vores klar at behandle css i tredje og sidste metode i denne klasse, i, for hvert, loop i denne metode, vi udnytter den mulighed, at folkesundhedsprogrammet giver os til at behandle den mængde og værdi, som er afgørende forskellige variabler.det er en meget stærk element af folkesundhedsprogrammet, for hvert, løkker, som kræver en lille planlægning i, hvordan hver enkelt system er struktureret og gør livet meget lettere.,,, det første skridt vil være at anvende, file_get_contents(), at omstille, customizer.css, sag i en snor og opbevarer det i en variabel.da denne funktion vil medføre en fatal fejl, hvis det ikke kan finde den fil, vi er nødt til at pakke alle kode i denne metode i en prøve, hvis sagen overhovedet eksisterer.  , bemærke, at denne kode forudsætter, at customizer.css, er i det samme register som klasse, kan det være nødvendigt at justere deres tema er filstrukturen.her er, hvordan vi skal indlede denne metode:,, funktion process() {$css = "; //ændre denne filnavn og /eller sted for at opfylde deres behov.$theme_customizer_file = trailingslashit (dirname (__file__)).theme_customizer. css; //- filen eksisterer.hvis (file_exists ($theme_customizer_file)) (//- indholdet i fil.$css = file_get_contents ($theme_customizer_file)), som jeg sagde før, hele denne metode er pakket ind i en kontrol af, om den sag.det betyder, at det vil vende tilbage, falske, hvis sagen ikke belastning.holde det i tankerne, som vi bliver nødt til at tage højde for den mulighed, senere, nu, hvor vi har css som en snor, vi bliver nødt til at få vores systemer for substitution værdier fra, prepare_values() metode.igen, vi vil bruge nettet vigtige og variable som separate variabler i, for hvert, loop.for hver, theme_mod, er vi nødt til at indføre parentes omkring den, så vi kan bruge det til at erstatte substitution snor i landestøttestrategien med, str_replace(), som denne: //få vores farver.$farver = $- > prepare_values(); //i stedet for hver farve.for hvert ($farver som $theme_mod = > $farve) ($søger = "[".theme_mod dollars. "] « $css = str_replace ($søgning, $farve, $css)}, dette loop vil give os fuldstændig gyldige css med alle vores grupperet tema er navne erstattes med den korrekte hex koder for farver.det eneste, der er tilbage, er at de forarbejdede css i passende stil hundetegn, før de vendte tilbage det: //add stil hundetegn.$css = < stil type = "tekst /css" >. "\\ n ".$css. "\\ n ".< /stil > « tilbage $css,,, det er hele preprocessor.den eneste skridt tilbage til produktionen vores css selv.for at gøre det, kan vi bruge en funktion, uden for den klasse, der initializes klasse og output i hovedet af temaet.  , denne funktion ser sådan ud:,, add_action ('wp_head "," slug_theme_customizer_output); funktion slug_theme_customizer_output() (//sørge for, at vores gruppe eksisterer.hvis (class_exists ('slug_theme_customizer_output')) (//nulstille klasse og få forarbejdede ccs.$klasse = nye slug_theme_customizer_output(). $css = $klasse - > process(); //for at være sikker, sørg for, er processen er metode ikke tilbage falske eller noget andet end en snor.hvis ($css & & is_string ($css)) (echo $css.}), hvis du kan huske fra før, den metode, process(), kan vende tilbage, hvis de falske css fil ikke kunne være ladt.for at tage højde for denne mulighed, som værdien af, process(), metode, er det vigtigt at sikre, at det hverken vender forkert, eller vender tilbage til noget, der ikke er en snor.,, ekstra bonus, optimering, mens vi kan stoppe der, vil jeg gerne gøre tingene lidt mere effektivt.dette system fungerer fint, men det er også en del af gentagen behandling, komplet med, hvad der kunne være   flere database forespørgsler på hver side belastning.personligt ville jeg hellere springe op hele klassen og i stedet få en tråd fra databasen, for at opnå dette, vi kan arbejde på output - funktion til cache css i forbigående.den vej, hvor vi kan springe hele preprocessor klasse, hvis forbigående har en værdi, hvis den ikke, så kan vi køre hele processen og lager.her er modificeret produktion funktion:,, add_action ('wp_head "," slug_theme_customizer_output); funktion slug_theme_customizer_output() (//enten fastsætte css til forbigående eller genopbygge.hvis (falsk = = = ($css = get_transient ('slug_theme_customizer_css')) (//sørge for, at vores gruppe eksisterer.hvis (class_exists ('slug_theme_customizer_output')) (//nulstille klasse og få forarbejdede ccs.$klasse = nye slug_theme_customizer_output(). $css = $klasse - > process(); //cache css til næste gang.set_transient ('slug_theme_customizer_css, $css)) //for at være sikker, sørg for, er processen er metode ikke tilbage falske eller noget andet end en snor.hvis ($css & & is_string ($css)) (echo $css;),, hvis der nu er en værdi, der er fastsat i forbigående, slug_theme_customizer_css, kan det være sig direkte, efter at de samme prøver for at sikre, at det hverken er urigtige, eller ikke en snor.den preprocessor klasse er ikke ladt, og kun ét spørgsmål stilles til databasen.hvis de forbigående angivelser, falske, er processen løber, og værdien er skjult for næste gang, vil vi naturligvis sørge for, at når tema mods ajourføres at vi renser forbigående, så det ikke produktion af dato indstillinger.wordpress vil proces, som når en specifik mulighed er ajourførte.,, vi kan bruge denne foranstaltning, eftersom tema mods opbevares mulighed ved navn til temaet sin forbundet med.for eksempel, twentyfourteen tema mods lagres i den mulighed, theme_mods_twentyfourteen,.her er, hvordan vi bruger denne aktion, for at klare vores forbigående: /* * * p - slug_theme_customizer_css forbigående når tema mods ajourføres.* /////////komme løbende tema er navn.$tema = get_stylesheet(); add_action ("update_option_theme_mods_ {$tema}", "slug_reset_theme_customizer_css_transient); funktion slug_reset_theme_customizer_css_transient() {delete_transient ('slug_theme_customizer_css)), at anvende og under det videre, nu hvor du kan skrive din forskning, der bliver ajourført form temaet customizer med variabler, én ting, du kan vil overveje bruger samme tema er mange steder.  , f.eks. hvad med i stedet for at fastsætte en theme_mod for hver farve i tema, og skaber muligheder, overbelastning, hvor om mulighederne for at farve, sekundære farve og accent?,, det system, som jeg har vist dig, hvordan man skaber her virker kun med farve valgmuligheder, der gør det eneste virkelig nyttige for css egenskaber som, farve, baggrund, farve, grænse, farve, osv. du kunne udvide det til at være nyttige for andre typer egenskaber.  , husk ikke at genopfinde frækhed, eller mindre, pointen med dette var at undgå oppustethed temaet med fuld php gennemførelse sass eller mindre, der allerede er til rådighed, som plugins.,,