Como Exibir Shortcodes Dentro do Campo HTML

Pretende apresentar códigos curtos dentro do campo de formulário HTML? Por defeito, os campos de formulário não aceitam códigos curtos. Neste tutorial, vamos mostrar como usar PHP para permitir a adição de um código curto ao campo de formulário HTML.

Instalar o plugin Shortcodes Ultimate

Neste exemplo, vamos adicionar um código curto de acordeão a um campo de formulário HTML usando um plugin gratuito. Este passo é, claro, opcional, pois pode já ter um plugin de códigos curtos instalado ou códigos curtos integrados disponíveis. Sinta-se à vontade para usar o que precisar, apenas lembre-se que o CSS opcional abaixo é específico para este plugin.

Se optar por usar o plugin sugerido neste tutorial, por favor descarregue o plugin e instale-o no seu site WordPress.

Para obter ajuda sobre como adicionar um plugin ao seu site, pode consultar o guia da WPBeginner sobre como instalar um plugin.

Criar o código curto

Para criar o código curto de acordeão necessário para o seu campo HTML, terá de seguir a documentação deles sobre como criar o seu código curto de acordeão.

Vamos criar uma explicação de tabela de tamanhos para o nosso acordeão usando o estilo Simple. Assim, o nosso código curto fica assim.

<strong>Size chart explained</strong>

[su_accordion]
[su_spoiler title="X Small" open="no" style="simple"] Size Alpha: XS.  Size Numeric: 0-2. Bust(IN): 28-30.  Waist(IN): 23-24. [/su_spoiler]

[su_spoiler title="Small" style="simple"] Size Alpha: S.  Size Numeric: 4-6. Bust(IN): 30-32.  Waist(IN): 25-26.  [/su_spoiler]

[su_spoiler title="Medium" style="simple"] Size Alpha: M.  Size Numeric: 8-10. Bust(IN): 32-34.  Waist(IN): 27-28.  [/su_spoiler]

[su_spoiler title="Large" style="simple"] Size Alpha: L.  Size Numeric: 12-14. Bust(IN): 36-38.  Waist(IN): 30-32.  [/su_spoiler]

[su_spoiler title="X Large" style="simple"] Size Alpha: XL.  Size Numeric: 16-18. Bust(IN): 40-42.  Waist(IN): 33-35.  [/su_spoiler]

[su_spoiler title="XX Large" style="simple"] XXL.  Size Numeric: 20-22. Bust(IN): 44-46.  Waist(IN): 36-38.  [/su_spoiler]

[/su_accordion]

Apresentar código curto dentro do campo HTML

Antes de criarmos o nosso formulário, vamos adicionar o trecho ao nosso site.

Para obter ajuda sobre como e onde adicionar trechos ao seu site, por favor consulte este tutorial.

/**
 * Run shortcodes on HTML field content.
 *
 * @link   https://wpforms.com/developers/how-to-display-shortcodes-inside-the-html-field/
 *
 */

function wpf_dev_html_field_shortcodes( $field, $field_atts, $form_data ) {

	if ( ! empty( $field[ 'code' ] ) ) {
		$field[ 'code' ] = do_shortcode( $field[ 'code' ] );
	}

	return $field;
}
add_filter( 'wpforms_html_field_display', 'wpf_dev_html_field_shortcodes', 10, 3 );

Este trecho permitirá que qualquer campo de formulário HTML em todos os seus WPForms utilize códigos curtos.

Criação do formulário

Agora é hora de criar o nosso formulário e adicionar um campo de formulário HTML.

Se precisar de ajuda sobre como criar um formulário com WPForms, por favor reveja a nossa documentação.

Adicionar o código curto ao seu campo HTML

Agora vamos copiar e colar o código curto do passo anterior no campo HTML.

<strong>Size chart explained</strong>

[su_accordion]
[su_spoiler title="X Small" open="no" style="simple"] Size Alpha: XS.  Size Numeric: 0-2. Bust(IN): 28-30.  Waist(IN): 23-24. [/su_spoiler]

[su_spoiler title="Small" style="simple"] Size Alpha: S.  Size Numeric: 4-6. Bust(IN): 30-32.  Waist(IN): 25-26.  [/su_spoiler]

[su_spoiler title="Medium" style="simple"] Size Alpha: M.  Size Numeric: 8-10. Bust(IN): 32-34.  Waist(IN): 27-28.  [/su_spoiler]

[su_spoiler title="Large" style="simple"] Size Alpha: L.  Size Numeric: 12-14. Bust(IN): 36-38.  Waist(IN): 30-32.  [/su_spoiler]

[su_spoiler title="X Large" style="simple"] Size Alpha: XL.  Size Numeric: 16-18. Bust(IN): 40-42.  Waist(IN): 33-35.  [/su_spoiler]

[su_spoiler title="XX Large" style="simple"] XXL.  Size Numeric: 20-22. Bust(IN): 44-46.  Waist(IN): 36-38.  [/su_spoiler]

[/su_accordion]

Adicionar o CSS (opcional)

Como mencionámos acima, alguns dos estilos para códigos curtos podem ser diferentes do que esperaria devido à estilização padrão do WPForms. Para este exemplo em particular, vamos adicionar um CSS adicional para estilizar e posicionar o ícone de abertura do acordeão.

.wpforms-field .su-accordion {
    margin-bottom: 1.5em;
}

.wpforms-field .su-spoiler-style-simple {
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
}

.wpforms-field .su-spoiler {
    margin-bottom: 1.5em !important;
}

.wpforms-field .su-accordion .su-spoiler {
    margin-bottom: 0.5em !important;
}

.wpforms-field .su-u-trim>:first-child {
    margin-top: 0 !important;
}

.wpforms-field .su-spoiler-style-simple>.su-spoiler-title {
    padding: 5px 10px;
    background: #f0f0f0;
    color: #333;
    font-size: .9em;
}

.wpforms-field .su-spoiler-title {
    position: relative !important;
    cursor: pointer;
    min-height: 20px;
    line-height: 20px;
    padding: 7px 7px 7px 34px !important;
    font-weight: 700;
    font-size: 13px !important;
}

.wpforms-field .su-spoiler-icon {
    position: absolute !important;
    left: 7px;
    top: 7px;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 21px;
    text-align: center;
    font-size: 14px !important;
    font-family: ShortcodesUltimateIcons;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

.wpforms-field .su-spoiler-style-simple>.su-spoiler-content {
    padding: 1em 10px !important;
    background: #fff;
    color: #333;
}

.su-spoiler.su-spoiler-closed>.su-spoiler-content {
    height: 0;
    margin: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.wpforms-field .su-spoiler-content {
    padding: 14px !important;
    transition: padding-top .2s !important;
    -ie-transition: padding-top .2s !important;
}

Quando os seus visitantes virem o formulário, verão agora um acordeão com funcionalidades de produto dentro do campo HTML do formulário.

E é tudo o que precisa para apresentar qualquer código curto num campo de formulário HTML. Pretende apresentar Smart Tags no campo HTML? Dê uma vista de olhos ao nosso artigo sobre Como Processar Smart Tags em Campos HTML.

Referência de Filtro