Code

Le champ Code place un petit éditeur de code dans un widget personnalisé que vous construisez avec les modules complémentaires principaux Constructeur de widgets. Les éditeurs collent un extrait, tel que le badge HTML qu'un fournisseur de paiement distribue, et le champ le maintient lisible avec les numéros de ligne et la coloration syntaxique C'est le champ pour le balisage qui doit être collé plutôt que tapé en prose.

Code est un champ Pro. Le plugin gratuit comprend un Widget Builder limité et l'ensemble complet des champs est livré avec Maître Addons Pro.

Ce que fait le champ Code #

• Ajoute un éditeur de code au panneau de votre widget dans Elementor, avec des numéros de ligne et une surbrillance.
• Faits saillants dans la langue que vous choisissez, du HTML et CSS au JSON, SVG et PHP.
• Enregistre tout ce qui a été collé sous forme de texte.
• L'imprime via un jeton tel que {{ badge_markup }}« , nettoyé avec le propre filtre de contenu de publication de WordPress afin que les rendus HTML autorisés et les balises de script soient supprimés ».
• A un raw filtrer pour le cas rare où un extrait doit sortir intact.

Nouveau au constructeur ? lire le Aperçu du constructeur de widgets tout d'abord, revenez avec un widget ouvert.

Avant de commencer #

• WordPress avec Elementor installé et actif.
• Master Addons pour Elementor et Master Addons Pro, tous deux actifs. Le guide d'installation couverture configuration.
• Un widget ouvert dans le Widget Builder L'exemple de ce guide est un widget “Trust Badges” : un champ Texte pour le titre et un champ Code nommé badge_markup cela prend le badge HTML du fournisseur.

Comment ajouter un champ Code #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Ajouter une section sur le Contenu tab, par exemple “Badges”.
3. Type code dans le champ champ rechercher box à gauche.
4. Glisser Code dans la section Cliquez sur le crayon sur le champ pour ouvrir ses paramètres.

Options du champ de code expliquées #

• Étiquette: le texte au-dessus de l'éditeur dans Elementor, par exemple “Badge Markup”.
• Nom: l'identifiant unique du champ et le nom de son jeton Utilisez uniquement des lettres, des chiffres et des traits de soulignement, par exemple badge_markup.
• Description: un indice affiché sous l'éditeur dans Elementor. Utilisez-le pour indiquer ce que le champ attend, comme “Paste the HTML que votre fournisseur de paiement ou d'avis vous donne.”
• Langue: le mode de surbrillance La liste a HTML, CSS, SASS, SCSS, JavaScript, JSON, LESS, Markdown, PHP, Python, MySQL, SQL, SVG, Text, Twig et Typescript. HTML est la valeur par défaut.

La langue change uniquement en surbrillance Elle ne limite pas ce qu'un éditeur peut coller, et elle ne change pas la façon dont la valeur est imprimée.

Le panneau n'a pas de valeur par défaut et aucun réglage de hauteur pour ce champ, donc l'éditeur s'ouvre toujours vide à sa hauteur standard Allumez Bloc d'étiquettes l'étiquette se trouve donc au-dessus de l'éditeur au lieu de se faufiler à côté.

Sous Paramètres communs, vous trouverez également Afficher l'étiquette, Séparateur et Conditions´, qui fonctionnent de la meme que sur d'autres champs. Laisser Sélecteur vide : un extrait collé n'est pas une valeur CSS.

Imprimez le code dans votre modèle #

Mettez le jeton là où l'extrait doit atterrir et gardez-le afin qu'un champ vide ne laisse aucun emballage derrière lui :

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

Style l'emballage dans le panneau CSS comme d'habitude L'extrait lui-même apporte les classes que le fournisseur lui a données, il vaut donc la peine d'ajouter votre propre classe d'emballage pour contrôler l'espacement et l'alignement.

Ce que le jeton enlève #

La valeur passe par le même filtre que WordPress utilise pour le contenu des publications. Les balises autorisées dans les publications sortent telles que collées : div, span, a, img et le reste. Les balises de script et les iframes sont supprimées.

Un détail vaut la peine d'être connu avant de remettre le widget à un client Dans nos tests, une balise de script collée a été supprimée mais le JavaScript qu'elle contient est resté sur la page sous forme de texte brut, de sorte que le visiteur a vu une ligne de code au milieu du widget Rien ne vous en avertit Testez une fois l'extrait d'un fournisseur sur une page de brouillon, et dites aux éditeurs de coller uniquement le balisage.

Le filtre brut #

Ajout raw au jeton imprime exactement ce qui a été collé, scripts et iframes inclus :

{{ badge_markup|raw }}

Dans nos tests cette version a gardé l'iframe et a exécuté le script C'est utile pour une intégration que vous contrôlez, et risquée partout ailleurs, car toute personne qui peut éditer le widget peut alors exécuter JavaScript sur la page Utilisez-le uniquement lorsque chaque éditeur de cette page est déjà fiable avec du HTML non filtré, et gardez le jeton simple pour les widgets clients toucher.

Le moteur de modèle accepte également trim, upper et lower sur un jeton, qui sont parfois pratiques pour un court extrait de texte brut.

Utilisez le contrôle Code dans Elementor #

Ajoutez le widget à une page, ou rechargez l'éditeur si la page était déjà ouverte Le champ s'affiche comme un bloc d'éditeur sombre sous votre étiquette, avec des numéros de ligne sur le côté Collez l'extrait et les mises à jour de l'aperçu dès que vous cliquez loin.

L'éditeur est une petite fenêtre, donc un long extrait défile à l'intérieur. C'est bien pour coller, moins pour lire ; écrivez l'extrait dans un endroit plus spacieux si vous envisagez de le modifier à la main.

Voici le widget fini sur l'avant, construit à partir de trois blocs de badges collés :

Cas d'utilisation courants #

• Badges de paiement, d'examen et de confiance que les fournisseurs distribuent en HTML.
• Blocs de schéma ou de données structurées qu'un éditeur doit coller par page.
• Petites icônes ou logos SVG collés comme balisage.
• Un court extrait CSS ou JSON lit le script de votre widget.

Conseils pour travailler avec le champ Code #

• Dites quoi coller dans la Description. Les éditeurs ne peuvent pas dire à partir d'un éditeur vide ce que le champ attend.
• Gardez le jeton avec {% if %}. Un champ inutilisé laisserait autrement un wrapper vide sur la page.
• Testez une seule fois un véritable extrait de fournisseur. C'est comme ça qu'on découvre quelles parties survivent au filtre.
• Gardez raw pour les éditeurs de confiance seulement. Le jeton simple est la valeur par défaut sûre pour les sites clients.
• Texte formaté plutôt que balisage ? Utilisez le Champ WYSIWYG les éditeurs obtiennent donc un éditeur visuel au lieu de code.

Foire aux questions #

Envelopper #

Déposez un champ Code dans une section Contenu, choisissez la langue, écrivez une description indiquant quoi coller et imprimez le jeton à l'intérieur d'un {% if %} garde. Gardez le jeton simple pour les sites clients et atteignez raw uniquement avec des éditeurs de confiance Pour un texte riche au lieu d'un balisage, voir le Champ WYSIWYGet vérifiez tarification pour ce que chaque plan comprend.