The Kodefelt sætter en rigtig kode editor ind i en brugerdefineret widgets panel. Syntaksfremhævning, monospaced tekst, linjenumre, alle høflighed af Ace editor. Det findes for de tilfælde, hvor en editor skal indsætte markup snarere end skrive prosa: indlejre uddrag, skema blokke, badge HTML fra en tredjepart. Inde i Master Addons Widget Builder, du vælger fremhævningssproget, og hvor høj editoren sidder i panelet.
Som hvert Widget Builder-felt understøtter kodefeltet Betingelser for panelsynlighed og dets token udskriver gennem Twig-syntaks skabelon motor med sikker HTML tilladt igennem automatisk. Se både guides for opsætning og begrænsninger.
Output går gennem WordPress sanitization. Værdien udskriver med en normal token, og runtime passerer det igennem wp_kses_post, det samme filter WordPress gælder for post indhold. Sikre HTML-tags overlever; <script> tags strippes. Den standard beskytter webstedet mod hvad der bliver indsat i feltet.
Hvad feltet Kode gør #
- Gengiver en es-kodeeditor i widgettens Elementor-panel med syntaksfremhævning for det sprog, du vælger.
- Gemmer den indsatte kode som en streng.
- Udskriver den streng igennem
{{ your_field_name }}, desinficeret medwp_kses_postså tilladte HTML-gengivelser og scripts fjernes. - Tilbyder en
|rawfilter escape hatch, der omgår desinficering til pålidelige admin-scenarier. - Indstiller sin synlige højde gennem en rækkeindstilling, så lange uddrag får plads i panelet.
Hvis du aldrig har bygget en widget med bygherren, så læs Widget Builder oversigt først; feltsiderne antager det grundarbejde.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- En brugerdefineret widget åben i Widget Builder editor. Vores eksempel er en tillid badge widget, hvor en Kode felt navngivet
badge_markupaccepterer badge HTML, som betalings- og anmeldelsesudbydere uddeler.
Sådan tilføjes et kodefelt #
Træk Code felt fra panelet felter til en sektion under Content fane. Feltets muligheder åbnes til venstre i det øjeblik, det lander.
Kodefeltindstillinger forklaret #
- Etiket: teksten vist over editoren i Elementor, for eksempel “Badge Markup”.
- Navn: den unikke identifikator, dine skabeloner henviser til. Kun bogstaver, tal og understregninger, f.eks
badge_markup. - Standard: startkode widgeten leveres med, nyttigt som et udfyldt eksempel på, hvad feltet forventer.
- Sprog: syntaksfremhævningstilstanden, HTML, CSS, JavaScript og andre almindelige tilstande. Dette påvirker kun fremhævning, ikke hvad der kan skrives.
- Rækker: editorens synlige højde i panelet.
Forbind feltet Kode med dets token #
Feltet Kode er et tokenfelt. Udskriv det, hvor den indsatte opmærkning skal lande i HTML-panelet:
<div class="tb-badges">
{{ badge_markup }}
</div>Ved output løber værdien igennem wp_kses_post. I praksis betyder det de tags WordPress tillader i indlæg indhold, <div>, <a>, <img>, <span>, og resten, gengives som indsat, mens <script> tags og event-handler attributter strippes. For et badge eller skema snippet bygget fra almindelig markup, er standardadfærden præcis, hvad du ønsker.
Husk på, at kses strimler tags lydløst. Hvis et indsat uddrag gør halvtomt på siden, er der intet, der er fejlbehæftet; filteret fjernede et ikke tilladt tag og beholdt resten. Testudbyder uddrag på en iscenesættelsesside én gang, før du afleverer widgetten til en klient, så du ved, hvilke dele der overlever.
Når et uddrag virkelig skal overleve uberørt, vil |raw filter omgår desinficering:
{{ badge_markup|raw }}Pas på: |raw udgange uanset hvad der blev indsat, scripts inkluderet. Kun nå til det, når alle, der kan redigere widget er allerede betroet med ufiltreret HTML, effektivt admin-niveau brugere, og aldrig på widgets, at lavere-privilegium redaktører eller klienter kan røre. Standard desinficeret token er det rigtige valg for næsten hver widget, du sender.
Beskyt mod et tomt felt, som du ville have nogen valgfri værdi, så et ubrugt kodefelt efterlader ingen vildfaren indpakning bag:
{% if badge_markup %}
<div class="tb-badges">{{ badge_markup }}</div>
{% endif %}Brug kodekontrollen i Elementor #
Føj din brugerdefinerede widget til en side i Elementor, eller genindlæs editoren, hvis siden allerede var åben. Feltet Kode vises som en mørk editorblok under din etiket, dimensioneret til de rækker, du indstiller.
Indsæt eller skriv uddraget. Fremhævning følger det sprog, du valgte i bygherren, hvilket gør forkert udformet opmærkning nemmere at få øje på, før den rammer siden, og forhåndsvisningen opdateres, efterhånden som feltet ændres.
Almindelige brugstilfælde #
- Badge og certificering markup fra betalings-, sikkerheds- og anmeldelsesudbydere.
- Skema og strukturerede datauddrag et SEO plugin dækker ikke.
- Indlejr koder for spillere og former, hvor den desinficerede delmængde er nok.
- Brugerdefineret tabel- eller listemarkering det ville være smertefuldt at genopbygge med individuelle marker.
- Annonce- eller promo-blokke hvis HTML ændres pr. kampagne uden at genudgive widgetten.
Tips til at arbejde med feltet Kode #
- Stol på standard desinficering.
wp_kses_postholder normal markup intakt og fjerner stille og roligt de farlige dele. De fleste “mit uddrag er brudt” rapporter er en strippet<script>tag gør sit arbejde. - Reserve
|rawtil widgets, der kun er admin. Det deaktiverer sikkerhedsnettet for det token helt. - Indstil sproget til at matche indholdet. Fremhævning er en korrekturhjælp; HTML-tilstand gør et manglende lukkende tag synligt med et øjeblik.
- Send et standarduddrag. Et kommenteret eksempel viser redaktører præcis, hvilken form for kode der hører til i feltet.
- Pak tokenet ind
{% if %}når uddraget er valgfrit, så et tomt felt gør ingen tom beholder. - Brug WYSIWYG til prosa. Hvis redaktører vil skrive tekst i stedet for at indsætte markup, vil WYSIWYG-feltet er den venligere kontrol.
Ofte stillede spørgsmål #
Hvad er feltet Kode i Master Addons Widget Builder?
Feltet Kode føjer en syntaksfremhævet Ace-editor til et brugerdefineret Elementor-widgetpanel. Editors indsætter opmærkning eller uddrag i den, og skabelonen udskriver værdien med {{ field_name }}, saniterede gennem wp_kses_post så tilladte HTML-gengivelser og script-tags strippes.
Hvorfor kører mit indsatte <script>-tag ikke?
Sanitisering fjernede det. Output passerer igennem wp_kses_post, som ikke tillader script- tags. Hvis widgetten kun nogensinde redigeres af betroede admins, {{ field_name|raw }} omgår filteret på bekostning af at udsende pastaen ufiltreret.
Hvad er forskellen mellem feltet Kode og feltet WYSIWYG?
Feltet Kode viser rå kilde med syntaksfremhævning og er beregnet til markup og uddrag. Feltet WYSIWYG viser en TinyMCE rich-text editor beregnet til at skrive formateret prosa. Begge desinficerer output med wp_kses_post.
Begrænser indstillingen Sprog, hvad der kan indtastes?
Nej. Det vælger kun syntaksfremhævningstilstanden, HTML, CSS, JavaScript og så videre. Enhver tekst kan indsættes uanset tilstanden.
Kan jeg udskrive koden et andet sted end HTML-panelet?
Tokenet fungerer i alle tre paneler, men HTML-panelet er, hvor uddrag hører hjemme i praksis. Sanitiseret markup har ringe betydning inde i et stylesheet eller scriptblok.
Er det sikkert at give kunderne en widget med et kodefelt?
Med standard token, ja inden for rimelighedens grænser: wp_kses_post håndhæver den samme HTML-undergruppe, som WordPress tillader i postindhold. Undgå |raw på klientredigerbare widgets, da det fjerner denne håndhævelse.
Indpakning #
Feltet Widget Builder Code forvandler “indsæt dit uddrag her” til en ordentlig arbejdsgang: en fremhævet editor i panelet, et token i skabelonen og WordPress-grade desinficering mellem indsættet og siden. Brug det til opmærkning, behold |raw for den sjældne betroede sag, og nå ud til WYSIWYG-feltet når indholdet er prosa i stedet for kode. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.