El campo Código coloca un pequeño editor de código en un widget personalizado que crea con los complementos maestros Creador de widgets. Los editores pegan un fragmento, como la insignia HTML que reparte un proveedor de pagos, y el campo lo mantiene legible con números de línea y resaltado de sintaxis. Es el campo de marcado el que debe pegarse en lugar de escribirse como prosa.
El código es un campo profesional. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.
Qué hace el campo Código #
- Agrega un editor de código al panel de su widget en Elementor, con números de línea y resaltado.
- Aspectos destacados en el idioma que elijas, desde HTML y CSS hasta JSON, SVG y PHP.
- Guarda todo lo que se pegó como texto.
- Lo imprime a través de un token como
{{ badge_markup }}, limpiado con el filtro de contenido de publicaciones propio de WordPress, por lo que se eliminan las representaciones HTML permitidas y las etiquetas de script. - Tiene un
rawfiltre el raro caso en el que un fragmento debe salir intacto.
¿Nuevo para el constructor? Leer el Descripción general del creador de widgets primero, luego regresa con un widget abierto.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Master Addons para Elementor y Master Addons Pro, ambos activos. El guía de instalación configuración de cubiertas.
- Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget “Trust Badges”: un campo de texto para el encabezado y un campo de código llamado
badge_markupeso requiere la insignia HTML del proveedor.
Cómo agregar un campo Código #
- Ir a Complementos maestros > Creador de widgets y abre tu widget.
- Agregue una sección sobre el Contenido pestaña, por ejemplo “Insignias”.
- Tipo
codeen el cuadro de búsqueda de campo de la izquierda. - Arrastrar Código en la sección. Haga clic en el lápiz en el campo para abrir su configuración.
Se explicaron las opciones del campo de código #
- Etiqueta: el texto encima del editor en Elementor, por ejemplo “Badge Markup”.
- Nombre: el ID único del campo y el nombre de su token. Utilice únicamente letras, números y guiones bajos, por ejemplo
badge_markup. - Descripción: una pista que se muestra en el editor de Elementor. Úselo para decir lo que espera el campo, como “Pegue el HTML que le brinda su proveedor de pagos o reseñas”
- Idioma: el modo de resaltado. La lista tiene HTML, CSS, SASS, SCSS, JavaScript, JSON, LESS, Markdown, PHP, Python, MySQL, SQL, SVG, Text, Twig y Typescript. HTML es el predeterminado.
El idioma cambia solo resaltando. No limita lo que un editor puede pegar y no cambia la forma en que se imprime el valor.
El panel no tiene valor predeterminado ni configuración de altura para este campo, por lo que el editor siempre abre vacío a su altura estándar. Encender Bloque de etiquetas entonces la etiqueta se encuentra encima del editor en lugar de apretarla al lado.
En Configuración común también encontrarás Mostrar etiqueta, Separador y Condiciones, que funcionan igual que en otros campos. Dejar Selector vacío: un fragmento pegado no es un valor CSS.
Imprime el código en tu plantilla #
Pon la ficha donde debe aterrizar el fragmento y guárdalo para que un campo vacío no deje ningún envoltorio:
<div class="tb">
<p class="tb-heading">{{ tb_heading }}</p>
{% if badge_markup %}
<div class="tb-badges">{{ badge_markup }}</div>
{% endif %}
</div>
Pegue el contenedor en el panel CSS como de costumbre. El fragmento en sí trae todas las clases que le dio el proveedor, por lo que vale la pena agregar su propia clase de contenedor para controlar el espaciado y la alineación.
Lo que tira el token #
El valor pasa por el mismo filtro que usa WordPress para el contenido de la publicación. Las etiquetas permitidas en las publicaciones salen pegadas: div, span, a, img y el resto. Se eliminan las etiquetas de script y los iframes.
Vale la pena conocer un detalle antes de entregar el widget a un cliente. En nuestras pruebas, se eliminó una etiqueta de script pegada, pero el JavaScript que contenía permaneció en la página como texto sin formato, por lo que el visitante vio una línea de código en el medio del widget. Nada te lo advierte. Pruebe el fragmento de un proveedor en una página de borrador una vez y dígales a los editores que peguen solo el marcado.
El filtro crudo #
Añadiendo raw el token imprime exactamente lo que se pegó, se incluyen guiones e iframes:
{{ badge_markup|raw }}En nuestras pruebas, esa versión mantuvo el iframe y ejecutó el script. Eso es útil para una inserción que usted controla y arriesgado en todas partes, porque cualquiera que pueda editar el widget puede ejecutar JavaScript en la página. Úselo solo cuando a cada editor de esa página ya se le confíe HTML sin filtrar y mantenga el token simple para los widgets que tocan los clientes.
El motor de plantillas también acepta trim, upper y lower en un token, que ocasionalmente resulta útil para un breve fragmento de texto sin formato.
Utilice el control Código en Elementor #
Agregue el widget a una página o recargue el editor si la página ya estaba abierta. El campo se muestra como un bloque de editor oscuro debajo de su etiqueta, con números de línea en el costado. Pegue el fragmento y las actualizaciones de vista previa tan pronto como haga clic.
El editor es una ventana pequeña, por lo que dentro se desplaza un fragmento largo. Está bien para pegar, menos para leer; Escriba el fragmento en algún lugar más espacioso si planea editarlo a mano.
Aquí está el widget terminado en la parte frontal, construido a partir de tres bloques de insignias pegados:
Casos de uso comunes #
- Insignias de pago, revisión y confianza que los proveedores entregan como HTML.
- Bloques de datos estructurados o de esquema que un editor necesita pegar por página.
- Pequeños iconos o logotipos de SVG pegados como marcado.
- Se lee un breve fragmento de CSS o JSON del script de su widget.
Consejos para trabajar con el campo Código #
- Di qué pegar en la Descripción. Los editores no pueden decir desde un editor vacío lo que espera el campo.
- Guarde la ficha con
{% if %}. De lo contrario, un campo no utilizado dejaría un contenedor vacío en la página. - Pruebe un fragmento de proveedor real una vez. Así es como descubres qué partes sobreviven al filtro.
- Mantener
rawsólo para editores confiables. El token simple es el valor predeterminado seguro para los sitios cliente. - ¿texto formateado en lugar de marcado? Utilice el Campo WYSIWYG entonces los editores obtienen un editor visual en lugar de código.
Preguntas frecuentes #
¿el campo Código es gratuito?
No. Code es uno de los campos Pro en Widget Builder, por lo que Master Addons Pro debe estar activo antes de poder agregarlo a un widget.
¿Puedo configurar un fragmento predeterminado o hacer que el editor sea más alto?
No desde la configuración de campo. El panel tiene una etiqueta, nombre, descripción e idioma, por lo que el editor siempre abre vacío a su altura estándar.
¿Por qué desapareció parte de mi fragmento pegado?
El token ejecuta el valor a través del filtro de contenido de publicaciones de WordPress, que elimina etiquetas de script e iframes. Utilice el marcado que permite el filtro, o el filtro sin formato si se confía en cada editor de esa página HTML sin filtrar.
¿por qué JavaScript aparece como texto en mi widget?
Se eliminó una etiqueta de script pegada pero su contenido permaneció como texto. Saque el script del fragmento o imprima el campo con el filtro sin formato si el script está destinado a ejecutarse.
¿la configuración de idioma restringe lo que los editores pueden pegar?
No. Solo cambia el resaltado de sintaxis en el editor.
Envolviendo #
Coloque un campo Código en una sección de Contenido, elija el idioma, escriba una Descripción que diga qué pegar e imprima el token dentro de un archivo {% if %} guardia. Mantenga el token simple para los sitios de los clientes y comuníquese con él raw sólo con editores confiables. Para texto enriquecido en lugar de marcado, consulte Campo WYSIWYGși verifică precios por lo que incluye cada plan.
