Code

Das Feld Code fügt einen kleinen Code-Editor in ein benutzerdefiniertes Widget ein, das Sie mit den Master-Addons erstellen Widget-builder. Editoren fügen ein Snippet ein, wie das Badge HTML, das ein Zahlungsanbieter ausgibt, und das Feld hält es mit Zeilennummern und Syntaxhervorhebung lesbarEs ist das Feld für Markup, das eingefügt werden muss, anstatt als Prosa eingegeben zu werden.

Code ist ein Pro-Feld Das kostenlose Plugin enthält einen begrenzten Widget Builder und der gesamte Feldsatz ist im Lieferumfang enthalten Master Addons Pro.

Was das Feld Code bewirkt #

• Fügt dem Panel Ihres Widgets in Elementor einen Code-Editor mit Zeilennummern und Hervorhebungen hinzu.
• Highlights in der von Ihnen gewählten Sprache, von HTML und CSS bis hin zu JSON, SVG und PHP.
• Speichert alles, was als Text eingefügt wurde.
• Druckt es über ein Token wie z {{ badge_markup }}„mit dem eigenen Post-Content-Filter von WordPress bereinigt, sodass HTML-Renderings und Skript-Tags weggelassen werden können.
• Hat ein raw Filter für den seltenen Fall, dass ein Snippet unberührt ausgehen muss.

Neu beim Bauherrn? lesen Sie die Übersicht über Widget Builder Kommen Sie dann zuerst mit geöffnetem Widget zurück.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor und Master Addons Pro, beide aktiv Die Installationsführung Cover-einrichtung.
• Ein Widget im Widget Builder geöffnet Das Beispiel in diesem Handbuch ist ein Widget “Vertrauensabzeichen”: ein Textfeld für die Überschrift und ein Codefeld mit dem Namen badge_markup Das nimmt das Abzeichen des Anbieters HTML.

So fügen Sie ein Codefeld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Fügen Sie einen Abschnitt hinzu Inhalt Tab, zum Beispiel “Badges”.
3. Typ code Im Feldsuchfeld links.
4. Ziehen Code In den Abschnitt Klicken Sie auf den Bleistift auf dem Feld, um seine Einstellungen zu öffnen.

Codefeldoptionen erklärt #

• Etikett: Der Text über dem Editor in Elementor, zum Beispiel “Badge Markup”.
• Name: Die eindeutige ID des Feldes und der Name seines Tokens Verwenden Sie zum Beispiel nur Buchstaben, Zahlen und Unterstriche badge_markup.
• Beschreibung: Ein unter dem Editor in Elementor gezeigter Hinweis. sagen Sie damit, was das Feld erwartet, wie zum Beispiel “Fügen Sie das HTML ein, das Ihnen Ihr Zahlungs - oder Bewertungsanbieter gibt”
• Sprache: Der Hervorhebungsmodus Die Liste verfügt über HTML, CSS, SASS, SCSS, JavaScript, JSON, LESS, Markdown, PHP, Python, MySQL, SQL, SVG, Text, Twig und Typescript HTML ist die Voreinstellung.

Sprache ändert nur Hervorhebung Es schränkt nicht ein, was ein Editor einfügen kann, und es ändert nichts an der Art und Weise, wie der Wert gedruckt wird.

Das Panel hat keinen Standardwert und keine Höheneinstellung für dieses Feld, so dass der Editor immer leer auf seiner Standardhöhe aufmacht Einschalten Beschriftungsblock Das Etikett sitzt also über dem Editor, anstatt daneben zu drücken.

Unter Gemeinsame Einstellungen finden Sie auch Etikett anzeigen, Trenner und BedingungenDie genauso funktionieren wie auf anderen Feldern Verlassen Wähler Leer: ein eingeklebtes Snippet ist kein CSS-Wert.

Drucken Sie den Code in Ihrer Vorlage aus #

Legen Sie den Token dort ab, wo der Snippet landen soll, und bewachen Sie ihn so, dass ein leeres Feld keinen Wrapper zurücklässt:

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

Gestalten Sie den Wrapper im CSS-Panel wie gewohnt Das Snippet selbst bringt alle Klassen mit, die ihm der Anbieter gegeben hat, daher lohnt es sich, eine eigene Wrapper-Klasse hinzuzufügen, um Abstand und Ausrichtung zu steuern.

Was die Tokenstreifen #

Der Wert durchläuft denselben Filter, den WordPress für Post-Inhalte verwendet. In Beiträgen erlaubte Tags werden als eingefügt ausgegeben: div, span, a, img Und der Rest. Script-Tags und Iframes werden entfernt.

Ein Detail ist wissenswert, bevor Sie das Widget an einen Client übergeben In unseren Tests wurde ein eingefügter Skript-Tag entfernt, aber das JavaScript darin blieb als Klartext auf der Seite, sodass der Besucher eine Codezeile in der Mitte des Widgets sah Nichts warnt Sie davor Testen Sie einmal den Snippet eines Anbieters auf einer Entwurfsseite und sagen Sie den Redakteuren, sie sollen nur Markup einfügen.

Der Rohfilter #

Hinzufügen raw Auf dem Token wird genau das gedruckt, was eingefügt wurde, Skripte und Iframes enthalten:

{{ badge_markup|raw }}

In unseren Tests behielt diese Version den iframe bei und führte das Skript aus. Das ist nützlich für eine Einbettung, die Sie steuern, und überall sonst riskant, denn jeder, der das Widget bearbeiten kann, kann dann JavaScript auf der Seite ausführen. Verwenden Sie es nur, wenn jedem Editor dieser Seite bereits ungefiltertes HTML anvertraut ist, und behalten Sie den einfachen Token für Widgets-Clients bei.

Die Template-Engine akzeptiert auch trim, upper und lower Auf einem Token, die gelegentlich für einen kurzen Klartextausschnitt praktisch sind.

Verwenden Sie die Codesteuerung in Elementor #

Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite schon geöffnet war Das Feld wird als dunkler Editorblock unter Ihrem Label angezeigt, mit Zeilennummern an der Seite Fügen Sie das Snippet und die Vorschau-Updates ein, sobald Sie wegklicken.

Der Editor ist ein kleines Fenster, also scrollt ein langer Ausschnitt darin. Das ist in Ordnung zum Einfügen, weniger zum Lesen; Schreiben Sie den Ausschnitt irgendwo geräumiger, wenn Sie ihn von Hand bearbeiten möchten.

Hier ist das fertige Widget am Frontend, das aus drei eingeklebten Abzeichenblöcken besteht:

Häufige Anwendungsfälle #

• Zahlungs, Überprüfungs - und Vertrauensabzeichen, die Anbieter als HTML verteilen.
• Schema oder strukturierte Datenblöcke, die ein Editor pro Seite einfügen muss.
• Kleine SVG-Symbole oder Logos, die als Markup eingefügt wurden.
• Ein kurzer CSS- oder JSON-Snippet, in dem das Skript Ihres Widgets lautet.

Tipps für die Arbeit mit dem Feld Code #

• Sagen Sie, was Sie in die Beschreibung einfügen sollen. Redakteure können einem leeren Editor nicht entnehmen, was das Feld erwartet.
• Bewachen Sie den Token mit {% if %}. Ein unbenutztes Feld würde sonst eine leere Hülle auf der Seite hinterlassen.
• Testen Sie einmal ein echtes Anbieter-Snippet. So findet man heraus, welche Teile den Filter überstehen.
• Behalten raw Nur für vertrauenswürdige Redakteure. Der einfache Token ist die sichere Standardeinstellung für Client-Sites.
• Formatierter Text statt Markup? Nutzen Sie die WYSIWYG-Feld Redakteure erhalten also einen visuellen Editor anstelle von Code.

Häufig gestellte Fragen #

Einwickelnd #

Geben Sie ein Codefeld in einen Inhaltsabschnitt, wählen Sie die Sprache aus, schreiben Sie eine Beschreibung, die angibt, was eingefügt werden soll, und drucken Sie das Token in einen {% if %} Wache. Bewahren Sie den einfachen Token für Kundenseiten auf und greifen Sie nach raw Nur mit vertrauenswürdigen Redakteuren Für Rich Text statt Markup siehe die WYSIWYG-Feldund überprüfen Preisbildung Für das, was jeder Plan beinhaltet.