Código

O Campo código coloca um editor de código real no painel de um widget personalizado Destacamento de sintaxe, texto monoespaçado, números de linha, tudo cortesia do editor Ace Existe para os casos em que um editor precisa colar marcação em vez de escrever prosa: incorporar trechos, blocos de esquema, HTML de crachá de um terceiro Dentro dos Master Addons Construtor de widgets, você escolhe a linguagem de destaque e a altura em que o editor se senta no painel.

Como todo campo Widget Builder, o campo Código suporta Condições para visibilidade do painel e seu token é impresso no Mecanismo de modelo de sintaxe dupla com HTML seguro permitido através automaticamente Veja ambos os guias para configuração e limitações.

A saída passa pela higienização do WordPress O valor imprime com um token normal e o tempo de execução passa por ele wp_kses_posto mesmo filtro WordPress se aplica ao conteúdo da postagem Tags HTML seguras sobrevivem; <script> as tags são retiradas. Esse padrão protege o site de tudo o que for colado no campo.

O que o campo Código faz #

• Rende um editor de código Ace no painel Elementor do widget, com destaque de sintaxe para o idioma escolhido.
• Armazena o código colado como uma string.
• Imprime essa string {{ your_field_name }}, higienizado com wp_kses_post portanto, renderizações e scripts HTML permitidos são removidos.
• Oferece a |raw filtre a escotilha de escape que ignora a higienização para cenários de administração confiável.
• Define sua altura visível através de uma opção de linhas, para que trechos longos tenham espaço no painel.

Se você nunca construiu um widget com o construtor, leia o Visão geral do Widget Builder primeiro; as páginas de campo assumem esse trabalho de base.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é um widget de crachá de confiança onde um campo Código nomeado badge_markup aceita o HTML de crachá que os provedores de pagamento e revisão distribuem.

Como adicionar um campo Código #

Arraste o Código campo do painel de campos em uma seção abaixo do Conteúdo aba. As opções do campo abrem à esquerda no momento em que ele pousa.

Opções de campo de código explicadas #

• Etiqueta: o texto mostrado acima o editor em Elementor, por exemplo “Badge Markup”.
• Nome: o identificador exclusivo a que seus modelos se referem. Apenas letras, números e sublinhados, por exemplo badge_markup.
• Predefinição: o código inicial do widget vem com, útil como um exemplo preenchido do que o campo espera.
• Idioma: o modo de realce de sintaxe, HTML, CSS, JavaScript e outros modos comuns Isso afeta apenas o realce, não o que pode ser digitado.
• Linhas: a altura visível do editor no painel.

Conecte o campo Código com seu token #

O campo Código é um campo de token Imprimi - lo onde a marcação colada deverá aterrar no painel HTML:

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

Na saída, o valor passa wp_kses_post. Na prática, isso significa que as tags que o WordPress permite no conteúdo da postagem, <div>, <a>, <img>, <span>, e o resto, render como colado, enquanto <script> tags e atributos de manipulador de eventos são despojados Para um snippet de crachá ou esquema construído a partir de marcação simples, o comportamento padrão é exatamente o que você deseja.

Tenha em mente que o kses retira tags silenciosamente Se um trecho colado renderiza meio vazio na página, nada errou; o filtro removeu uma tag não permitida e manteve o restante Os trechos do provedor de teste em uma página de preparação uma vez antes de entregar o widget a um cliente, para que você saiba quais partes sobrevivem.

Quando um trecho realmente precisa sobreviver intocado, o |raw filtro ignora a higienização:

{{ badge_markup|raw }}

Cuidado: |raw saídas o que foi colado, scripts incluídos Só alcançá-lo quando todos que podem editar o widget já é confiado com HTML não filtrado, efetivamente usuários de nível de administrador, e nunca em widgets que editores de menor privilégio ou clientes podem tocar O token higienizado padrão é a escolha certa para quase todos os widgets que você enviar.

Proteja-se contra um campo vazio como faria com qualquer valor opcional, portanto, um campo Código não utilizado não deixa nenhum invólucro perdido para trás:

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

Use o controle de código no Elementor #

Adicione seu widget personalizado a uma página no Elementor ou recarregue o editor se a página já estiver aberta O campo Código aparece como um bloco de editor escuro sob seu rótulo, dimensionado para as linhas que você definiu.

Cole ou digite o snippet O destaque segue o idioma que você escolheu no construtor, o que torna a marcação malformada mais fácil de detectar antes de chegar à página, e a visualização é atualizada à medida que o campo muda.

Casos de uso comum #

• Marcação de crachá e certificação de provedores de pagamento, segurança e revisão.
• Esquema e trechos de dados estruturados um plugin de SEO não cobre.
• Incorporar códigos para jogadores e formas, onde o subconjunto higienizado é suficiente.
• Marcação personalizada da tabela ou da lista seria doloroso reconstruir com campos individuais.
• Blocos de anúncios ou promoções cujo HTML muda por campanha sem republicar o widget.

Dicas para trabalhar com o campo Código #

• Confie na higienização padrão. wp_kses_post mantém a marcação normal intacta e remove silenciosamente as partes perigosas A maioria dos relatórios de “my snippet is broken” são despojados <script> tag fazendo seu trabalho.
• Reserva |raw para widgets somente de administração. Ele desativa totalmente a rede de segurança desse token.
• Defina o idioma para corresponder ao conteúdo. O destaque é um auxílio à revisão; O modo HTML torna visível rapidamente uma tag de fechamento ausente.
• Envie um trecho padrão. Um exemplo comentado mostra aos editores exatamente qual formato de código pertence ao campo.
• Embrulhe o token {% if %} quando o snippet é opcional, um campo vazio não renderiza nenhum contêiner vazio.
• Use WYSIWYG para prosa. Se os editores escreverem texto em vez de colar a marcação, o Campo WYSIWYG é o controle mais amigável.

Perguntas frequentes #

Embrulhando #

O campo Código do Construtor de Widgets transforma o “paste seu snippet aqui” em um fluxo de trabalho adequado: um editor destacado no painel, um token no modelo e a higienização de grau WordPress entre a pasta e a página Use-o para marcação, mantenha |raw para o raro caso confiável, e alcance o Campo WYSIWYG quando o conteúdo é prosa em vez de código Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.