Share
Soms willen ontwikkelaars tijdens het bouwen van een plug-in of een thema eindgebruikers de mogelijkheid bieden om aangepaste code toe te voegen. Vandaag zal ik bespreken hoe ik het kan toevoegen code typ de optie met Titan Framework, waarmee u een editor kunt maken waarin u aangepaste codes kunt toevoegen. Laten we er eens naar kijken!
In Titan Framework is het mogelijk om een tekstgebied te creëren voor het invoeren van de code via zijn code type optie. Het tekstgebied ondersteunt syntaxisaccentuering, dus in welke taal u ook codeert, de bijbehorende markering wordt gebruikt. Deze optie kan CSS en JavaScript automatisch in wachtrij plaatsen. Hoe cool is dat? In uw dashboard ziet het er als volgt uit:
Laten we de parameters van deze optie bekijken:
Accentsconagua
code type optie in een thema customizer sectie, je krijgt een live preview van veranderingen te zien met deze parameter.css. Hier is een lijst met alle ondersteunde talen.chroom. Hier is een lijst met alle ondersteunde thema's.200 px.Alle parameters zijn draad op type, behalve 'hoogte' welke is int.
U kunt deze optie toevoegen aan:
U kunt deze optie in de containers toevoegen door deze stappen te volgen:
getInstance () functie.createOption () functie.GetOption () functie.Om je concepten over het maken van containers met Titan Framework te herzien, lees je de vorige artikelen van deze serie.
Laten we deze optie eerst in een beheerdersvenster maken.
createOption (array ('id' => 'aa_code_opt', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'code', // Type optie we maken 'naam' => 'Voer aangepaste code in', // 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 'lang' = > 'css' // Taal gebruikt voor syntax highlighting)); Ik heb de optie gemaakt met de createOption () functie in regel # 7 om een toe te voegen code typ optie in een aangepaste beheerderspaneelcontainer $ aa_panel. Ik heb een lijst met parameters gedefinieerd: naam, id, type, lang en desc. De waarde van ID moet altijd uniek zijn, d.w.z.. aa_code_opt. De waarde van LANG is css, wat betekent dat de syntax highlighting van CSS wordt toegepast.
In de bovenstaande schermafbeelding bestaat een beheerdersvensterNette opties en daarbinnen, kun je een vinden code type optie met de naam Voer de aangepaste code in.
Nu krijg ik de opgeslagen waarden.
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
De code type optie kan worden gebruikt om eindgebruikers toe te staan om aangepaste CSS / JS-code toe te voegen aan het thema of de plug-in. Dus als ik dit voorbeeld overweeg, laat ik je dan zien hoe het werkt.
Titan Framework zal automatisch uw code in wachtrij plaatsen in overeenstemming met wat u kiest als de waarde van de LANGparameter. Als het is ingesteld op css of javascript, een CSS- of een JS-bestand met de gebruikerscode wordt in de wachtrij geplaatst.
Als de waarde van de LANGparameter is css, het zal een CSS-bestand in de wacht slepen met mijn aangepaste code. Ik hoef niets anders te doen. Kijk naar de bovenstaande code - het heeft een div met klasse aa_content en dummy tekst erin.
In deze fase ziet mijn front-end er als volgt uit:
Ik heb mijn aangepaste CSS ingevoerd voor .aa_content klasse in de code optie in het dashboard.
Dat div met .aa_content de klasse aan de voorkant werd als volgt gestyled:
De veranderingen zijn vrij zichtbaar in de bovenstaande screenshot.
Vervolgens maak ik deze optie op een admin-tabblad.
createOption (array ('id' => 'aa_code_opt_in_tab', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'code', // Type optie we maken 'naam' => 'Voer aangepaste code in', // 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 'lang' = > 'css' // Taal gebruikt voor syntax highlighting)); Hier voeg ik deze optie toe op een admin-tabblad $ aa_tab1. De waarde van zijn ID is aa_code_opt_in_tab en LANG is css.
In de afbeelding is er een code typ optie binnen Tab 1 van paneel Nette opties 2.
Laten we de opgeslagen optiewaarden ophalen.
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
Wederom een div-tag met .aa_content klasse en een alinea van dummy-tekst.
Om resultaten aan de voorkant weer te geven, heb ik aangepaste CSS-code toegevoegd en opgeslagen.
Nu ziet het front-end er als volgt uit:
Nu maak ik deze optie in een metabox.
createOption (array ('id' => 'aa_code_opt_in_metabox', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'code', // Type optie we maken 'naam' => 'Enter Custom Code', // Naam van de optie die wordt weergegeven 'desc' => 'Dit is onze optie', // Beschrijving van de optie die wordt weergegeven 'lang' => 'css' // Gebruikte taal voor syntax highlighting)); Ik voeg er nog een toe code type optie in een metabox $ aa_metbox met ID aa_code_opt_in_metabox. De rest van de parameters zijn hetzelfde.
U kunt deze optie vinden in een metabox met de naam Metabox-opties. Het verschijnt op alle pagina's en na bewerkingsschermen.
Gebruik de volgende code om opgeslagen waarden uit een metabox te halen.
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
Dezelfde dummy-tekst met .aa_content klasse in een div-tag.
Deze keer heb ik de volgende code gebruikt.
De voorkant ziet er als volgt uit:
Ten slotte maak ik deze optie in een themaaanpassingsgedeelte.
createOption (array ('id' => 'aa_code_opt_in_sec', // De ID die wordt gebruikt om de waarde van deze optie te krijgen 'type' => 'code', // Type optie we maken 'naam' => 'Enter Custom Code', // Naam van de optie die wordt weergegeven 'desc' => 'Dit is onze optie', // Beschrijving van de optie die wordt weergegeven 'lang' => 'css' // Gebruikte taal voor syntax highlighting)); Ik heb deze optie gemaakt in een gedeelte voor het aanpassen van een thema $ aa_section1. De unieke ID is aa_code_opt_in_sec.
In deze afbeelding is er een code type optie met de naam Voer de aangepaste code in in een customizer-gedeelte Mijn sectie.
Deze keer voeg ik de klas toe .aa_content in de div-tag van een enkele post.
Hier is een screenshot van de live voorvertoning van wijzigingen.
Dat is het zo'n beetje. Hoewel er een groot debat is over de vraag of een aangepaste code moet worden geboden met de mogelijkheid om aangepaste CSS toe te voegen of niet, is er een belangrijk voordeel als u.
Op deze manier worden de aanpassingen of de aangepaste code door de eindgebruikers opgeslagen in de optiedatabase in plaats van te worden geschreven in de themabestanden, dus wanneer ze hun thema's bijwerken, zouden de wijzigingen er nog steeds zijn.
Als je vragen hebt, kun je me dit laten weten via de reacties of contact opnemen via Twitter.
