Code

Die Codefeld Setzt einen echten Code-Editor in das Panel eines benutzerdefinierten Widgets. Syntaxhervorhebung, monospaced Text, Zeilennummern, alles mit freundlicher Genehmigung des Ace-Editors. Es existiert für die Fälle, in denen ein Editor Markup einfügen muss, anstatt Prosa zu schreiben: Einbetten von Ausschnitten, Schema-Blöcken, Abzeichen-HTML von einem Dritten. Innerhalb der Master-Addons Widget-builderSie wählen die Hervorhebungssprache und die Größe des Editors im Panel aus.

Wie jedes Widget Builder-Feld unterstützt das Code-Feld Bedingungen Für die Sichtbarkeit des Panels und seine Token-Drucke durch die Twig-Syntax-Vorlagen-Engine Mit sicherem HTML, das automatisch durchgelassen wird Siehe beide Anleitungen für Einrichtung und Einschränkungen.

Ausgabe erfolgt durch WordPress-Bereinigung Der Wert druckt mit einem normalen Token, und die Laufzeit durchläuft ihn wp_kses_postDerselbe Filter WordPress gilt für Post-Inhalte Sichere HTML-Tags überleben; <script> Tags werden entfernt. Diese Standardeinstellung schützt die Website vor allem, was in das Feld eingefügt wird.

Was das Feld Code bewirkt #

• Rendert einen Ace-Code-Editor im Elementor-Panel des Widgets mit Syntaxhervorhebung für die von Ihnen ausgewählte Sprache.
• Speichert den eingefügten Code als Zeichenfolge.
• Druckt diese Zeichenfolge durch {{ your_field_name }}Desinfiziert mit wp_kses_post Erlaubte HTML-Renderings und Skripte werden daher entfernt.
• Bietet a |raw Filter-Fluchtluke, die die Bereinigung für Trusted-Admin-Szenarien umgeht.
• Legt seine sichtbare Höhe durch eine Reihenoption fest, sodass lange Schnipsel Platz im Panel schaffen.

Wenn Sie noch nie ein Widget mit dem Builder erstellt haben, lesen Sie die Übersicht über Widget Builder Erstens; Die Feldseiten gehen von dieser Grundlagenarbeit aus.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Ein benutzerdefiniertes Widget wird im Widget Builder-Editor geöffnet. Unser Beispiel ist ein Trust-Badge-Widget, bei dem ein Codefeld benannt ist badge_markup Akzeptiert das Abzeichen HTML, das Zahlungs- und Bewertungsanbieter verteilen.

So fügen Sie ein Codefeld hinzu #

Ziehen Sie die Code Feld aus dem Feldfeld in einen Abschnitt unter dem Inhalt Tab. Die Optionen des Feldes öffnen sich links, sobald es landet.

Codefeldoptionen erklärt #

• Etikett: Der über dem Editor in Elementor abgebildete Text, zum Beispiel “Badge Markup”.
• Name: Die eindeutige Kennung, auf die sich Ihre Vorlagen beziehen Nur Buchstaben, Zahlen und Unterstriche, zum Beispiel badge_markup.
• Standard: Startcode, mit dem das Widget ausgeliefert wird, nützlich als ausgefülltes Beispiel dafür, was das Feld erwartet.
• Sprache: Der Syntaxhervorhebungsmodus, HTML, CSS, JavaScript und andere gängige Modi Dies betrifft nur die Hervorhebung, nicht das, was eingegeben werden kann.
• Reihen: Die sichtbare Höhe des Editors im Panel.

Verbinden Sie das Codefeld mit seinem Token #

Das Feld Code ist ein Tokenfeld Drucken Sie es dort, wo das eingefügte Markup im HTML-Panel landen soll:

<div class="tb-badges">
  {{ badge_markup }}
</div>

Bei der Ausgabe läuft der Wert durch wp_kses_post. In der Praxis bedeutet das, dass die Tags, die WordPress im Post-Content zulässt, <div>, <a>, <img>, <span>Und der Rest wird als eingeklebt wiedergegeben <script> Tags und Event-Handler-Attribute werden entfernt. Für ein Badge- oder Schema-Snippet, das aus einfachem Markup erstellt wurde, entspricht das Standardverhalten genau Ihren Wünschen.

Bedenken Sie, dass kses strips Tags lautlos Wenn ein eingefügter Snippet auf der Seite halb leer wird, ist nichts fehlerhaft; der Filter hat ein nicht zugelassenes Tag entfernt und den Rest behalten Testanbieter-Snippets auf einer Staging-Seite einmal, bevor Sie das Widget an einen Client übergeben, so wissen Sie, welche Teile überleben.

Wenn ein Schnipsel wirklich unberührt überleben muss, ist die |raw Filter umgeht Desinfektion:

{{ badge_markup|raw }}

Pass auf: |raw Gibt aus, was eingefügt wurde, Skripte enthalten Nur danach greifen, wenn jeder, der das Widget bearbeiten kann, bereits mit ungefiltertem HTML vertraut ist, effektiv Benutzern auf Admin-Ebene und niemals auf Widgets, die Editoren oder Clients mit niedrigeren Berechtigungen berühren können Der standardmäßige bereinigte Token ist die richtige Wahl für fast jedes Widget, das Sie aussenden.

Schützen Sie sich vor einem leeren Feld, wie Sie es bei einem beliebigen optionalen Wert tun würden, sodass ein ungenutztes Codefeld keine Streubandhülle hinterlässt:

{% if badge_markup %}
<div class="tb-badges">{{ badge_markup }}</div>
{% endif %}

Verwenden Sie die Codesteuerung in Elementor #

Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war. Das Codefeld erscheint als dunkler Editorblock unter Ihrem Etikett, dimensioniert nach den von Ihnen festgelegten Zeilen.

Fügen Sie den Ausschnitt ein oder geben Sie ihn ein Hervorhebung folgt der Sprache, die Sie im Builder gewählt haben, wodurch fehlerhaftes Markup leichter erkannt werden kann, bevor es auf die Seite trifft, und die Vorschau aktualisiert sich, wenn sich das Feld ändert.

Häufige Anwendungsfälle #

• Abzeichen und Zertifizierungsaufschlag von Zahlungs-, Sicherheits- und Prüfungsanbietern.
• Schema- und Strukturdatenschnipsel Ein SEO-Plugin deckt nicht ab.
• Codes einbetten Für Spieler und Formen, bei denen die bereinigte Teilmenge ausreicht.
• Benutzerdefinierte Tabelle oder Listenmarkup Das wäre schmerzhaft, mit einzelnen Feldern wieder aufzubauen.
• Werbe- oder Werbeblöcke Deren HTML sich pro Kampagne ändert, ohne das Widget neu zu veröffentlichen.

Tipps für die Arbeit mit dem Feld Code #

• Vertrauen Sie der Standardbereinigung. wp_kses_post Hält den normalen Markup intakt und entfernt leise die gefährlichen Teile Die meisten “mein Snippet ist kaputt” Berichte sind ein gestrippter <script> Tag macht seine Arbeit.
• Reserve |raw Für Admin-only Widgets. Es deaktiviert das Sicherheitsnetz für diesen Token vollständig.
• Stellen Sie die Sprache so ein, dass sie zum Inhalt passt. Highlighting ist eine Korrekturlesehilfe; der HTML-Modus macht ein fehlendes Schließ-Tag auf einen Blick sichtbar.
• Versenden Sie einen Standardausschnitt. Ein kommentiertes Beispiel zeigt Redakteuren genau, welche Form von Code in das Feld gehört.
• Wickeln Sie den Token ein {% if %} Wenn der Ausschnitt optional ist, wird durch ein leeres Feld kein leerer Behälter angezeigt.
• WYSIWYG für Prosa verwenden. Wenn Redakteure Text schreiben, anstatt Markup einzufügen, ist die WYSIWYG-Feld freundlicheren Kontrolle ist.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Code verwandelt “fügen Sie Ihren Snippet hier” in einen richtigen Workflow: einen hervorgehobenen Editor im Panel, ein Token in der Vorlage und eine Bereinigung auf WordPress-Niveau zwischen der Paste und der Seite Verwenden Sie es für Markup, behalten Sie |raw Für den seltenen vertrauenswürdigen Fall und greifen Sie nach dem WYSIWYG-Feld Wenn der Inhalt Prosa statt Code ist Erkunden Sie den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.