Código

El Campo de código coloca un editor de código real en el panel de un widget personalizado. Resaltado de sintaxis, texto monoespaciado, números de línea, todo cortesía del editor Ace. Existe para los casos en los que un editor necesita pegar marcas en lugar de escribir prosa: incrustar fragmentos, bloques de esquema, insignia HTML de un tercero. Dentro de los complementos maestros Creador de widgets, usted elige el idioma de resaltado y qué altura ocupa el editor en el panel.

Como todos los campos de Widget Builder, el campo Código es compatible Condiciones para visibilidad del panel y sus impresiones de tokens a través del Motor de plantilla de sintaxis de ramita con HTML seguro permitido automáticamente. Consulte ambas guías para conocer la configuración y las limitaciones.

La salida pasa por la desinfección de WordPress. El valor se imprime con un token normal y el tiempo de ejecución lo pasa wp_kses_post, el mismo filtro que se aplica WordPress al contenido de publicaciones. Sobreviven etiquetas HTML seguras; <script> las etiquetas se eliminan. Ese valor predeterminado protege el sitio de lo que se pega en el campo.

Qué hace el campo Código #

• Representa un editor de código Ace en el panel Elementor del widget, con resaltado de sintaxis para el idioma que elija.
• Almacena el código pegado como una cadena.
• Imprime esa cadena {{ your_field_name }}, desinfectado con wp_kses_post por lo tanto, se eliminan las representaciones y scripts HTML permitidos.
• Ofertas a |raw escotilla de escape de filtro que evita la desinfección para escenarios de administración confiable.
• Establece su altura visible a través de una opción de filas, por lo que los fragmentos largos dejan espacio en el panel.

Si nunca ha creado un widget con el creador, lea el archivo Descripción general del creador de widgets primero; las páginas de campo asumen ese trabajo preliminar.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor Widget Builder. Nuestro ejemplo es un widget de insignia de confianza donde se nombra un campo Código badge_markup acepta la insignia HTML que entregan los proveedores de pagos y reseñas.

Cómo agregar un campo Código #

Arrastra el Código campo desde el panel de campos a una sección debajo del Contenido pestaña. Las opciones del campo se abren a la izquierda en el momento en que aterriza.

Se explicaron las opciones del campo de código #

• Etiqueta: el texto que se muestra encima del editor en Elementor, por ejemplo “Badge Markup”.
• Nombre: el identificador único al que se refieren sus plantillas. Sólo letras, números y guiones bajos, por ejemplo badge_markup.
• Predeterminado: código inicial con el que se envía el widget, útil como ejemplo completo de lo que espera el campo.
• Idioma: el modo de resaltado de sintaxis, HTML, CSS, JavaScript y otros modos comunes. Esto afecta únicamente al resaltado, no a lo que se puede escribir.
• Filas: la altura visible del editor en el panel.

Conecte el campo Código con su token #

El campo Código es un campo de token. Imprímalo donde debería aterrizar el marcado pegado en el panel HTML:

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

En la salida, el valor se transmite wp_kses_post. En la práctica, eso significa que las etiquetas que WordPress permite en el contenido de la publicación, <div>, <a>, <img>, <span>, y el resto, renderizar como pegado, mientras <script> se eliminan las etiquetas y los atributos del controlador de eventos. Para una insignia o fragmento de esquema creado a partir de un marcado simple, el comportamiento predeterminado es exactamente lo que desea.

Tenga en cuenta que kses elimina las etiquetas en silencio. Si un fragmento pegado se vuelve medio vacío en la página, nada se equivoca; el filtro eliminó una etiqueta no permitida y se quedó con el resto. Pruebe los fragmentos del proveedor en una página de preparación una vez antes de entregar el widget a un cliente, para saber qué partes sobreviven.

Cuando un fragmento realmente necesita sobrevivir intacto, el |raw el filtro evita la desinfección:

{{ badge_markup|raw }}

Ai grijă: |raw salidas, lo que sea que se haya pegado, scripts incluidos. Solo acérquese a él cuando a todos los que pueden editar el widget ya se les confíe HTML sin filtrar, usuarios efectivos de nivel de administrador y nunca en widgets que los editores o clientes de menor privilegio puedan tocar. El token desinfectado predeterminado es la opción correcta para casi todos los widgets que envíe.

Protéjase contra un campo vacío como lo haría con cualquier valor opcional, por lo que un campo de Código no utilizado no deja ningún contenedor perdido:

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

Utilice el control Código en Elementor #

Agregue su widget personalizado a una página en Elementor o recargue el editor si la página ya estaba abierta. El campo Código aparece como un bloque de editor oscuro debajo de su etiqueta, dimensionado según las filas que establezca.

Pegue o escriba el fragmento. Resaltar sigue el idioma que eligió en el generador, lo que hace que el marcado con formato incorrecto sea más fácil de detectar antes de que llegue a la página y la vista previa se actualice a medida que cambia el campo.

Casos de uso comunes #

• Marcado de insignia y certificación de proveedores de pagos, seguridad y reseñas.
• Esquema y fragmentos de datos estructurados un complemento SEO no cubre.
• Incrustar códigos para jugadores y formas, donde el subconjunto desinfectado es suficiente.
• Marcado personalizado de tabla o lista sería doloroso reconstruirlo con campos individuales.
• Bloques publicitarios o promocionales cuyo HTML cambia por campaña sin volver a publicar el widget.

Consejos para trabajar con el campo Código #

• Confíe en la desinfección predeterminada. wp_kses_post mantiene intacto el marcado normal y elimina silenciosamente las partes peligrosas. La mayoría de los informes de “mi fragmento está roto” son despojados <script> etiqueta haciendo su trabajo.
• Reserva |raw para widgets de solo administrador. Desactiva por completo la red de seguridad para ese token.
• Establezca el idioma para que coincida con el contenido. Lo más destacado es una ayuda para la revisión; El modo HTML hace visible de un vistazo una etiqueta de cierre faltante.
• Envíe un fragmento predeterminado. Un ejemplo comentado muestra a los editores exactamente a qué forma de código pertenece el campo.
• Envuelva el token {% if %} cuando el fragmento es opcional, un campo vacío no genera ningún contenedor vacío.
• Utilice WYSIWYG para la prosa. Si los editores escriben texto en lugar de pegar marcado, el Campo WYSIWYG es el control más amigable.

Preguntas frecuentes #

Envolviendo #

El campo Código del creador de widgets convierte “pegar su fragmento aquí” en un flujo de trabajo adecuado: un editor resaltado en el panel, un token en la plantilla y desinfección de grado de WordPress entre la pasta y la página. Úselo para marcar, manténgalo |raw para el raro caso confiable, y alcance el Campo WYSIWYG cuando el contenido es prosa en lugar de código. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.