Code

Le Champ code met un véritable éditeur de code dans le panneau d'un widget personnalisé Surlignage syntaxique, texte à espacement fixe, numéros de ligne, le tout gracieuseté de l'éditeur Ace Il existe pour les cas où un éditeur a besoin de coller du balisage plutôt que d'écrire de la prose : intégrer des extraits, des blocs de schéma, du badge HTML d'un tiers À l'intérieur des modules complémentaires Master Constructeur de widgets1, vous choisissez la langue de surbrillance et la taille de l'éditeur dans le panneau.

Comme chaque champ Widget Builder, le champ Code prend en charge Conditions pour la visibilité du panneau et ses impressions de jetons via le Moteur de modèles de syntaxe Twig avec un HTML sûr autorisé automatiquement. Consultez les deux guides pour connaître la configuration et les limitations.

La sortie passe par la désinfection WordPress La valeur s'imprime avec un jeton normal, et le runtime le passe wp_kses_post, le même filtre WordPress s'applique au contenu de publication Des balises HTML sûres survivent ; <script> les balises sont supprimées. Cette valeur par défaut protège le site de tout ce qui est collé dans le champ.

Ce que fait le champ Code #

• Rend un éditeur de code Ace dans le panneau Élémenteur du widget, avec une coloration syntaxique pour la langue que vous choisissez.
• Stocke le code collé sous forme de chaîne.
• Imprime cette chaîne {{ your_field_name }}, désinfecté avec wp_kses_post ainsi, les rendus HTML autorisés et les scripts sont supprimés.
• Offre un |raw filtrez la trappe d'évacuation qui contourne la désinfection pour les scénarios d'administration de confiance.
• Définit sa hauteur visible via une option de lignes, de sorte que les longs extraits prennent de la place dans le panneau.

Si vous n'avez jamais construit de widget avec le constructeur, lisez le Aperçu du constructeur de widgets d'abord ; les pages de terrain supposent que le travail de base.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est un widget de badge de confiance où un champ Code est nommé badge_markup accepte le badge HTML distribué par les fournisseurs de paiement et d'avis.

Comment ajouter un champ Code #

Faites glisser le Code champ du panneau des champs dans une section sous le Contenu onglet. Les options du champ s'ouvrent à gauche au moment où il atterrit.

Options du champ de code expliquées #

• Étiquette: le texte affiché au-dessus de l'éditeur dans Elementor, par exemple “Badge Markup”.
• Nom: l'identifiant unique auquel vos modèles font référence Lettres, chiffres et soulignements uniquement, par exemple badge_markup.
• Par défaut: code de départ avec lequel le widget est livré, utile comme exemple rempli de ce à quoi le champ s'attend.
• Langue: le mode de coloration syntaxique, HTML, CSS, JavaScript, et d'autres modes communs Cela affecte la mise en évidence seulement, pas ce qui peut être tapé.
• Lignes: la hauteur visible de l'éditeur dans le panneau.

Connectez le champ Code avec son jeton #

Le champ Code est un champ de jeton Imprimez-le là où le balisage collé doit atterrir dans le panneau HTML :

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

En sortie, la valeur passe wp_kses_post. En pratique, cela signifie que les balises WordPress autorisent le contenu en publication, <div>, <a>, <img>, <span>& le reste, rendre comme collé, tandis que <script> les balises et les attributs de gestionnaire d'événements sont supprimés Pour un badge ou un extrait de schéma construit à partir d'un balisage simple, le comportement par défaut est exactement ce que vous souhaitez.

Gardez à l'esprit que kses supprime les balises silencieusement Si un extrait collé se rend à moitié vide sur la page, rien n'est erré ; le filtre a supprimé une balise interdite et a conservé le reste. Testez les extraits du fournisseur sur une page de mise en scène une fois avant de remettre le widget à un client, afin de savoir quelles parties survivent.

Lorsqu'un extrait a réellement besoin de survivre intact, le |raw filtre contourne la désinfection :

{{ badge_markup|raw }}

Attention: |raw sort tout ce qui a été collé, scripts inclus Ne le saisissez que lorsque tous ceux qui peuvent éditer le widget sont déjà confiés avec du HTML non filtré, effectivement des utilisateurs de niveau administrateur, et jamais sur des widgets que les éditeurs ou clients de moindre privilège peuvent toucher Le jeton aseptisé par défaut est le bon choix pour presque tous les widgets que vous expédiez.

Gardez-vous contre un champ vide comme vous le feriez pour n'importe quelle valeur facultative, donc un champ Code inutilisé ne laisse aucun emballage parasite derrière vous :

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

Utilisez le contrôle Code dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, ou rechargez l'éditeur si la page était déjà ouverte Le champ Code apparaît comme un bloc d'éditeur sombre sous votre étiquette, dimensionné selon les lignes que vous définissez.

Coller ou taper l'extrait L'accent suit la langue que vous avez choisie dans le constructeur, ce qui facilite la détection du balisage mal formé avant qu'il n'atteigne la page, et l'aperçu se met à jour à mesure que le champ change.

Cas d'utilisation courants #

• Badge et balisage de certification des fournisseurs de paiement, de sécurité et d’examen.
• Schéma et extraits de données structurées un plugin SEO ne couvre pas.
• Intégrer des codes pour les joueurs et les formulaires, où le sous-ensemble aseptisé est suffisant.
• Marquage personnalisé de table ou de liste ce serait douloureux à reconstruire avec des champs individuels.
• Blocs publicitaires ou promotionnels dont le HTML change par campagne sans republier le widget.

Conseils pour travailler avec le champ Code #

• Faites confiance à la désinfection par défaut. wp_kses_post garde intact le balisage normal et supprime tranquillement les parties dangereuses La plupart des rapports de” cassés de “my sont dépouillés <script> tag faisant son travail.
• Réserve |raw pour les widgets admin-only. Il désactive complètement le filet de sécurité de ce jeton.
• Définissez la langue pour qu'elle corresponde au contenu. La mise en surbrillance est une aide à la relecture ; le mode HTML rend visible en un coup d'œil une balise de fermeture manquante.
• Expédier un extrait par défaut. Un exemple commenté montre aux éditeurs exactement à quelle forme de code appartient le champ.
• Enveloppez le jeton {% if %} lorsque l'extrait est facultatif, un champ vide ne rend aucun conteneur vide.
• Utilisez WYSIWYG pour la prose. Si les éditeurs écrivent du texte plutôt que de coller du balisage, le Champ WYSIWYG est le contrôle le plus convivial.

Foire aux questions #

Envelopper #

Le champ Code du constructeur de widgets transforme “paste your snippet ici” en un flux de travail approprié : un éditeur en surbrillance dans le panneau, un jeton dans le modèle et une désinfection de qualité WordPress entre le coller et la page Utilisez-le pour le balisage, conservez |raw pour le cas de confiance rare, et atteindre le Champ WYSIWYG lorsque le contenu est en prose au lieu de code Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.