Share
Het toestaan van een eindgebruiker om het lettertype van uw thema te veranderen kan een intimiderende taak zijn, vooral wanneer u deze optie wilt bieden in een aangepast admin-paneel, een metabox of zelfs de thema-aanpasser. Vandaag zal ik bespreken hoe je een aangepast toevoegt doopvont type optie via Titan Framework.
De doopvont type optie is een van de meest veelzijdige opties in termen van functionaliteit in Titan Framework. Je kunt er niet alleen het lettertype van wijzigen, maar het is ook vol tekenstijl selector. Met een compleet scala aan functionaliteitrijke opties kunt u zowel webveilige lettertypen als Google WebFonts erin kiezen. Pas zoveel stijlen toe als u wilt, bijvoorbeeld kleuren, letterspatiëring, schaduwen, lijnhoogte, enz. Een eindgebruiker kan ook kijken naar de voorvertoning van hoe het lettertype en de stijlen eruitzien. Hier ziet u hoe deze optie eruitziet:
Je kunt in de bovenstaande afbeelding zien hoe gedetailleerd de lettertype-instellingen zijn. Dit is mogelijk via een hele reeks instellingsparameters die deze optie ondersteunt. Er zijn enkele verplichte en optionele parameters. Laten we eerst de verplichte bekijken:
Accentsconagua
doopvont type optie.Nu zijn enkele van de optionele parameters die u zou moeten gebruiken:
doopvont type optie, deze parameter gedraagt zich iets anders. Het neemt een array op die enkele standaardlettertypen en -stijlen bevat die u wilt gebruiken (hier later meer over).Ten slotte is er een lange lijst met bepaalde op cheques gebaseerde parameters, waarvan de standaardwaarden zijn ingesteld op waar. Laten we ze een naam geven en zien hoe ze zich gedragen als ze zijn ingesteld vals.
vals.vals.vals.vals.vals.vals.vals.vals.vals.vals.vals.vals.vals dan wordt het Google-lettertype (indien gebruikt) niet automatisch in de wachtrij geplaatst.U kunt de doopvont typ optie binnen:
De reikwijdte van dit artikel gaat niet over het maken van deze containers. Je kunt naar mijn vorige artikelen verwijzen als je daar meer over wilt weten.
Het algemene proces van het toevoegen van dit optietype blijft hetzelfde:
getInstance () functie.createOption () functie.GetOption () functie. Laten we deze optie binnen een admin-paneel maken.
Hier is de code:
createOption (array ('id' => 'aa_font', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'font', // Type optie we maken 'naam' => 'My Font Option', // Naam van de optie die wordt weergegeven in het admin-paneel 'desc' => 'Kies uw lettertype-instellingen' // Beschrijving van de optie die wordt weergegeven in het admin-paneel)); Ik heb de createOption () functie (regel # 7) om een toe te voegen doopvont typ optie in een admin paneel $ aa_panel. Deze functie neemt een reeks parameters in beslag. Dat is waarom parameters zoals naam, id, type en desc worden hier gebruikt. De waarde van ID (d.w.z.. aa_font) moet uniek zijn omdat het de opgeslagen optiewaarden krijgt.
In de bovenstaande schermafbeelding is er een doopvont type optie met de naam Mijn lettertype optie in een admin-paneel Nette opties. Er zijn verschillende instellingsopties die kunnen worden ingesteld om de lettertype-instellingen van uw webontwikkelingsproject te configureren.
Nu haal ik de opgeslagen optiewaarden op.
getOption ('aa_font'); / ** * * Lettertypewaardewaarden afdrukken * * / var_dump ($ aa_font_array); ?>Het proces van het verkrijgen van de opgeslagen waarden is vrijwel hetzelfde als in voorgaande artikelen. In regel # 3, de getInstance () functie wordt gebruikt, die een unieke parameter inneemt, bij voorkeur uw themanaam (d.w.z.. netjesin dit geval). Vervolgens gebruikte ik de GetOption () functie (regel # 6), die de waarde krijgt via de ID aa_font, en vervolgens heb ik het in een nieuwe variabele opgeslagen $ aa_font_array.
Eerder hebben we vastgesteld dat de doopvont type optie neemt een array van parameterinstellingen op, zelfs als we ze niet in werkelijkheid definiëren omdat hun standaardwaarde is ingesteld op waar. Dus voordat ik de opgehaalde waarden aan de voorkant weergeeft, kan ik deze complete reeks parameters afdrukken.
Hiervoor heb ik de var_dump () functie (op regel # 16) voor de variabele $ aa_font_array. Laten we kijken hoe deze array wordt afgedrukt:
In de bovenstaande schermafbeelding wordt een gedetailleerde beschrijving van elk element van een array weergegeven. Het legt duidelijk uit hoe het doopvont type optie in Titan Framework is ingesteld.
Dit deel was slechts een extra ding - ons belangrijkste doel is om de standaard lettertype-instellingen te wijzigen en deze aan de voorkant af te drukken.
Vervang regel # 16 door de volgende regels code:
Pellentesque habitant morbi tristique.
In regel # 7 heb ik inline CSS-styling gebruikt in een H3-tag (rubriek 3). De waarde die overeenkomt met de stijl attribuut,d.w.z. lettertypegrootte, wordt afgedrukt aan de voorkant.
Voor dit doel heb ik de echo opdracht, die alleen een specifiek deel van de array afdrukt, d.w.z.. echo $ aa_font_array ['font_size'], in de inline CSS. In dit stadium ziet de voorkant er als volgt uit:
De afgedrukte tekst is momenteel 14px in grootte. Laten we deze waarde van ons dashboard veranderen en een voorbeeld van het resultaat bekijken.
Stel dat ik de demo-waarde instel 30px.
Sla deze instelling op en ontdek de wijzigingen. Hier is de screenshot:
Een toegenomen lettertypegrootte van de tekst is duidelijk te zien. Op deze manier kunt u elk array-element in regel # 16 van code invoeren en een voorbeeld van de resultaten bekijken.
Laten we een maken doopvont type optie in een metabox die heeft alle stijlvelden in het.
createOption (array ('id' => 'aa_mb_font', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'font', // Type optie we maken 'naam' => 'My Font Option', // Naam van de optie die wordt weergegeven 'desc' => 'Kies uw lettertype-instellingen' // Beschrijving van de optie die wordt weergegeven));Ik heb er een toegevoegd doopvont type optie met ID aa_mb_font in een metabox $ aa_metbox via de createOption () functie (regel # 8). Het lijkt tegen de naam 'Mijn lettertype optie'.
Hier is de screenshot, waar je kunt vinden Mijn lettertype optie in een metabox die wordt weergegeven aan het einde van een bewerkingsscherm voor een pagina.
Dit is een aangepaste metabox die ik heb gemaakt met Titan Framework. Raadpleeg mijn vorige artikelen om te leren hoe.
Nu haal ik de opgeslagen optiewaarden op.
getOption ('aa_mb_font', get_the_ID ()); // Controleer of de waarde is ingesteld / Validatie $ aa_mb_font1_val = (is_array ($ aa_mb_font1_array) &&! Empty ($ aa_mb_font1_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Krijg alle waarden die je nodig hebt Abstractie van PHP en HTML // //////////////////////// ///////////////////////////////////// // Krijg kleurwaarde $ aa_mb_font1_clr_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['color']: 'rood'); // Krijg font-family value $ aa_mb_font1_ffm_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['font-family']: 'Arial'); // Krijg font-size value $ aa_mb_font1_fsz_val = ($ aa_mb_font1_val == TRUE? $ Aa_mb_font1_array ['font-size']: '14px'); / ** * * Print waarden aan de voorkant * * /?> Gedrukte waarde van de optie lettertype in metabox. Het proces om de waarden te verkrijgen die ik hier gebruik, is enigszins gecompliceerd. Krijg eerst een uniek exemplaar via de getInstance () functie in regel # 3. Vang vervolgens de opgeslagen waarde op door de ID te registreren aa_mb_font binnen in de GetOption () functie als een parameter (regel # 11).
Nu, aa_mb_font is geen gewoon ID, maar bevat een complete associatieve array van onze lettertype-opties. Ik heb deze associatieve array in een nieuwe variabele opgeslagen $ aa_mb_font1_array.
Regel # 14 valideert de aanwezigheid van een array-variabele binnen $ aa_mb_font1_array en controleert of het niet leeg is. Deze stap is belangrijk omdat we niet willen eindigen met fatale PHP-fouten door een element van een variabele uit te voeren dat in de eerste plaats niet eens een array is.
Soms als de gebruiker geen waarde heeft opgeslagen in het dashboard en u geen standaardwaarden hebt ingesteld, dit GetOption functie krijgt NUL. Voor dit doel wordt een op cheques gebaseerde verklaring gebruikt. Als het een array is en niet leeg is, wordt er een geplaatst TRUE waarde, of anders wordt het ingesteld als het geen array is en leeg is VALSE als de waarde van $ aa_mb_font1_val.
Als TRUE, dan betekent het:
$ aa_mb_font1_array is een array.$ aa_mb_font1_array is geen lege array, maar bevat elementen. Als VALSE, dan betekent het:
$ aa_mb_font1_array is geen array, of $ aa_mb_font1_array is een lege array en bevat geen elementen. Dit was een algemene validatie van de lettertype-array. Nu zal ik dit proces uitbreiden naar individuele array-elementen. Lijnen # 21 tot # 27 krijgen de waarden van individuele sleutels in de associatieve array en definiëren een standaard als er geen waarde bestaat.
Regel # 21 legt bijvoorbeeld uit dat als de gedefinieerde voorwaarde geldt TRUE, wat betekent dat er een waarde bestaat, haal dan de kleur van een array en sla het op in een variabele $ aa_mb_font1_clr_val. Als er geen dergelijke waarde bestaat, stelt u de waarde in op rood, wat in dit geval standaard is. Er zijn een aantal manieren om dit te omzeilen, dus het is slechts een van de manieren die ik leuk vind.
Kortom, als een gebruiker nieuwe lettertypekleur van zijn of haar dashboard heeft opgeslagen, verschijnt de geselecteerde lettertypekleur; anders- roodwordt getoond. Ik raad u aan de standaardopties in te stellen tijdens het instellen van het lettertype om dergelijke problemen te voorkomen.
Dezelfde uitleg is van toepassing op regel # 24 en # 27, behalve dat deze regels de waarden valideren font-family en lettertypegrootte.
Uiteindelijk heb ik zojuist de code geschreven die het resultaat aan de voorkant afdrukt. In lijnen # 38 tot # 48 wordt een div gemaakt in HTML. Vervolgens herhaalde ik de waarden van alle gewenste variabelen via inline CSS-styling.
Stel dat ik de volgende demo-lettertype-instellingen instel:
Dit is hoe het aan de voorkant verschijnt:
Je kunt nu zelf een aantal nieuwe instellingen uitproberen.
Laten we deze optie binnen een admin-tabblad maken, maar met een andere benadering.
createOption (array ('id' => 'aa_font_in_tab1_panel2', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'font', // Type optie we maken 'naam' => 'My Font Option', // Naam van de optie die wordt weergegeven in het admin-paneel 'desc' => 'Choose font settings', // Beschrijving van de optie die wordt weergegeven in het admin-paneel 'show_font_weight' => false, // Font-weight field wordt niet getoond 'show_font_style' => false, // Font-style veld wordt niet getoond 'show_line_height' => false, // Veld van de regelhoogte wordt niet getoond 'show_letter_spacing' => false, // Letter-spacing veld wordt niet getoond 'show_text_transform' => false, // Tekst-transform veld wordt niet getoond 'show_font_variant' => false, // Veld met font-variant wordt niet getoond 'show_text_shadow' => false, // Tekstschaduwveld wordt niet getoond 'default' => array ('font-family' => 'Arial', // Standaardwaarde van lettertype-familie 'kleur' => 'rood', // Standaardwaarde van letterkleur ' regelhoogte '=>' 2em ', // Standaardwaarde van regelhoogte' font-w acht '=>' 500 '// Standaardwaarde van font-gewicht))); Deze keer voeg ik een toe doopvont type optie maar laat er maar een paar toe stijlvelden verschijnen. De unieke ID van deze optie is aa_font_in_tab1_panel2. Kijk naar de parameterlijst en je zult uitvinden wat deze code anders maakt dan de vorige.
Ik heb de standaard waarden van verschillende op controle gebaseerde parameters aan vals. Dit betekent dat alle stijlvelden van regels 13 t / m 19 niet verschijnen. Let ook op de aanwezigheid van standaard waarden voor de stylingopties zoals lettertypefamilie, kleur, lijnhoogte en lettertype dikte.
EEN doopvont type optie met de naam Mijn lettertype optie bestaat in Tab 1 van het admin panel Nette opties 2. Als je wilt weten hoe deze admin-tab is gemaakt via Titan Framework, blader dan door de vorige artikelen van deze serie.
In de bovenstaande schermafbeelding wordt het lettertypemenu minder gedetailleerd weergegeven in termen van stijlvelden. De reden ligt voor de hand, d.w.z. de vals status van een aantal parameters in mijn code. Merk een ander ding op: de standaardwaarden van opties worden automatisch ingesteld, d.w.z.. 'font-family' => 'Arial' en kleur => 'rood'.
Heb ik details overgeslagen? Ja! Ik weet zeker dat je je af moet vragen waar de standaardwaarden van zijn lijnhoogte en lettertype dikte ging. Kijk nogmaals naar de lijst met parameters en u zult de waarden vinden van show_line_height en show_font_weight zijn ingesteld op vals.
Dit betekent dat het niet uitmaakt in welke hoedanigheid u een parameter definieert, maar dat deze alleen werkt als deze is ingesteld op waar. Het enige doel van het toevoegen van deze twee parameters was om dit concept uit te leggen. Voor nu kunt u deze ook weglaten.
Laten we de opgeslagen optiewaarden ophalen:
getOption ('aa_font_in_tab1_panel2'); // Controleer of de waarde is ingesteld / Validatie $ aa_font2_val = (is_array ($ aa_font2_array) ||! Empty ($ aa_font2_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Krijg alle waarden die je nodig hebt Abstractie van PHP en HTML // //////////////////////// ///////////////////////////////////// // Krijg kleurwaarde $ aa_font2_clr_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['color']: 'rood'); // Krijg familie-waarde lettertype $ aa_font2_ffm_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['font-family']: 'Arial'); // Get-tekengrootte ophalen $ aa_font2_fsz_val = ($ aa_font2_val == TRUE? $ Aa_font2_array ['font-size']: '14px'); / ** * * Print waarden aan de voorkant * * /?> Gedrukte waarde van het type lettertype in het tabblad. De regels die zijn geschreven om de bewaarde optiewaarden op te halen, zijn vrijwel hetzelfde als ik eerder schreef voor een metabox. Alleen de namen en ID's van de variabelen zijn verschillend. Dus, ik vat alleen de hierboven beschreven stappen samen:
Als ik in dit stadium een voorbeeld van de front-end bekijk, worden alleen de standaardinstellingen als volgt weergegeven:
Stel dat dit onze nieuwe lettertype-instellingen zijn:
Hier is het screenshot van deze nieuwe configuratie:
Het verschil tussen de twee instellingen is vrij duidelijk.
Laten we uiteindelijk deze optie in de customizer maken.
createOption (array ('id' => 'aa_sec_font', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'font', // Type optie we maken 'naam' => 'My Font Option', // Naam van de optie die wordt weergegeven 'desc' => 'Kies uw lettertype-instellingen' // Beschrijving van de optie die wordt weergegeven));EEN doopvont type optie met ID aa_sec_font bestaat in een thema-aanpasser $ aa_section1. Het verschijnt met de naam 'Mijn lettertype optie'. De rest van de parameters zijn hetzelfde.
Je kunt deze optie vinden in het gedeelte voor het aanpassen van thema's met de naam Mijn sectie.
Laten we de opgeslagen waarden ophalen.
getOption ('aa_sec_font'); // Controleer of de waarde is ingesteld / Validatie $ aa_sec_font3_val = (is_array ($ aa_sec_font3_array) ||! Empty ($ aa_sec_font3_array)? TRUE: FALSE); ////////////////////////////////////////////////// /////////// // Krijg alle waarden die je nodig hebt Abstractie van PHP en HTML // //////////////////////// ///////////////////////////////////// // Krijg kleurwaarde $ aa_sec_font3_clr_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['color']: 'rood'); // Get font family value $ aa_sec_font3_ffm_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['font-family']: 'Arial'); // Get-tekengrootte ophalen $ aa_sec_font3_fsz_val = ($ aa_sec_font3_val == TRUE? $ Aa_sec_font3_array ['font-size']: '14px'); / ** * * Print waarden aan de voorkant * * /?> Bedrukking van de waarde van het lettertype in de customizer. Nogmaals, deze code is exact dezelfde die ik schreef in het geval van een admin-tab en een metabox. Alleen de namen en ID's van de variabelen zijn verschillend. Dus, refereer naar de hierboven geschreven details.
Laten we eens kijken naar de live preview van de wijzigingen die ik heb gemaakt.
In onze discussie over de doopvont type optie in Titan Framework, we hebben geleerd dat de CSS-parameter zich enigszins anders gedraagt in vergelijking met andere opties. Vandaag, in dit artikel, laat ik je zien hoe je automatisch CSS van je lettertype-optie in een aangepast admin-paneel of zelfs in een thema-aanpasser kunt genereren.
Over het algemeen, css is een draad type parameter, dus als je het instelt, kan het automatisch CSS genereren elke keer dat een Titan Framework-optie wordt aangemaakt in een admin paneel en / of thema-aanpasser.
We weten dat een doopvont type optie in Titan Framework is in feite een associatieve array die een bereik van stijlvelden draagt, bijv.kleur, font-family, lettertypegrootte, enz. Het kan ook voorkomen dat u dezelfde stijleigenschappen op een andere plaats in uw thema of plug-in gebruikt. Het schrijven van deze vele opties in de css parameter kan een repetitieve en tijdverspillende taak zijn. Wanneer u sommige eigenschappen niet gebruikt, wat dan?
Om het eenvoudiger te maken, kunt u met Titan Framework alle stijlen aan uw CSS-selectors toewijzen via de lettertypen css parameter. Gebruik gewoon de term waarde binnen deze parameter en uw taak is voltooid. Laat me je laten zien hoe:
'h1.site-header value'
Omdat we weten dat de css parameter genereert alle noodzakelijke CSS-regels, laten we bespreken wanneer het zich in de volgende containers bevindt:
Notitie: De reikwijdte van dit artikel gaat alleen over het gebruik en het gedrag van de css parameter met de doopvont type optie in Titan Framework. Als u wilt weten hoe deze containers zijn gemaakt of hoe u een kunt toevoegen doopvont typ optie in Titan Framework en verwijs dan naar mijn vorige artikelen.
Laten we de code schrijven.
createOption (array ('id' => 'aa_font', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'font', // Type optie we maken 'naam' => 'My Font Option', // Naam van de optie die wordt weergegeven 'desc' => 'Kies uw lettertype-instellingen', // Beschrijving van de optie die wordt weergegeven 'show_font_style' => false, 'show_letter_spacing' => false, 'show_text_transform' => false, 'show_font_variant' => false, 'show_text_shadow' => false, 'default' => array ('font-family' => 'Exo 2', 'color' => '# 888888 ',' line-height '=>' 2em ',' font-weight '=>' 500 ',),' css '=>' .aa_site_font1 value '));Deze code maakt een doopvont typ optie in een admin paneel $ aa_panel met beperkte stylingvelden. De ID van deze optie is aa_font. Alle parameters (regels # 13 tot # 17) waar de waarden zijn ingesteld vals zal niet verschijnen. Ik heb ook standaardwaarden voor de font-family, kleur, lijnhoogte en lettertype dikte instellingen.
Regel # 24 definieert a css parameter voor een klasse met de naam .aa_site_font1. Merk op dat ik binnen deze klassendefinitie alleen geschreven heb waarde. Dit betekent dat alle CSS die dit veld zal genereren, waar zal worden geplaatst waarde is geschreven. Dus, waar deze klasse ook wordt gebruikt, het laadt de CSS-eigenschappen automatisch.
De bovenstaande schermafbeelding toont de huidige lettertype-instellingen en maakt duidelijk dat deze optie is gemaakt in mijn eerste admin-paneel, d.w.z.. Nette opties.
Laten we een div-tag maken met aa_site_font1 klasse en zie het resultaat aan de voorkant.
Waarde van 'css' in tab 2 van amdin panel2
Als u de bovenstaande code bekijkt, hebben we de css parameter van de doopvont een veld te classificeren waar het de CSS-resultaten moet opleveren, en die klasse was aa_site_font1. Dus ging ik door en creëerde een div met klasse aa_site_font1, om de resultaten aan de voorkant weer te geven.
Als je in dit stadium naar de voorkant kijkt, ziet het er als volgt uit:
Laten we nu onze standaardinstellingen wijzigen en dit lettertype groter en rood van kleur maken.
De nieuwe veranderingen verschijnen aan de voorkant zoals deze. Onthoud dat het alleen een div is aan de voorkant met de CSS-klasse aa_site_font1 erin, die we gebruikten in de css parameter.
Dit is hoe je een kunt toevoegen css parameter in a doopvont type optie. Titan Framework genereert automatisch de CSS ervoor in uw thema.
Kijk naar de code.
createOption (array ('id' => 'aa_sec_font', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'font', // Type optie we maken 'naam' => 'My Font Option', // Naam van de optie die wordt weergegeven 'desc' => 'Kies uw lettertype-instellingen', // Beschrijving van de optie die wordt weergegeven 'css' => '.aa_site_font2 value' ));Deze keer heb ik de css parameter met klasse .aa_site_font2. Het is gedefinieerd in a doopvont type optie met alle stijlvelden erin.
De bovenstaande schermafbeelding toont deze optie in een themaaanpassingsgedeelte $ aa_section1. Kijk ook naar de instellingen die momenteel zijn ingesteld.
Ik zal nogmaals het gebruik van stylingeigenschappen van klasse laten zien aa_site_font2 op een andere plaats, b.v. in een metabox die wordt weergegeven op alle bewerkingsschermen voor berichten en pagina's.
Waarde van 'css' in een metabox
Opnieuw heb ik een div met de klas aa_site_font2. Er zit wat dummy tekst in, maar negeer de tekst en kijk hoe het automatisch gestyled wordt.
Laten we alle demoletterinstellingen zo instellen vanuit ons thema-aanpassergedeelte als dit:
Hier ziet u hoe het naar de voorkant kijkt:
Dat is alles over het gebruik van de doopvont type optie met Titan
