Come visualizzare gli shortcode nel campo HTML

Desideri visualizzare gli shortcode all'interno del campo modulo HTML? Per impostazione predefinita, i campi modulo non accetteranno shortcode. In questo tutorial, ti mostreremo come utilizzare PHP per abilitare l'aggiunta di uno shortcode al campo modulo HTML.

Installazione del plugin Shortcodes Ultimate

In questo esempio, aggiungeremo uno shortcode per fisarmonica a un campo modulo HTML utilizzando un plugin gratuito. Questo passaggio è ovviamente facoltativo poiché potresti già avere un plugin per shortcode installato o shortcode integrati disponibili. Sentiti libero di usare ciò di cui hai bisogno, ricorda solo che il CSS facoltativo di seguito è specifico per questo plugin.

Se scegli di utilizzare il plugin suggerito in questo tutorial, scarica il plugin e installalo sul tuo sito WordPress.

Per assistenza su come aggiungere un plugin al tuo sito, potresti voler consultare la guida di WPBeginner su come installare un plugin.

Creazione dello shortcode

Per creare lo shortcode per fisarmonica necessario per il tuo campo HTML, dovrai seguire la loro documentazione su come creare il tuo shortcode per fisarmonica.

Creeremo una spiegazione della tabella delle taglie per la nostra fisarmonica utilizzando lo stile Semplice. Quindi il nostro shortcode appare così.

<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]

Visualizza shortcode all'interno del campo HTML

Prima di creare il nostro modulo, aggiungeremo lo snippet al nostro sito.

Per aiuto su come e dove aggiungere snippet al tuo sito, consulta questo 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 );

Questo snippet consentirà qualsiasi campo modulo HTML in tutti i tuoi WPForms e di utilizzare gli shortcode.

Creazione del modulo

Ora è il momento di creare il nostro modulo e aggiungere un campo modulo HTML.

Se hai bisogno di aiuto su come creare un modulo con WPForms, rivedi la nostra documentazione.

Aggiunta dello shortcode al tuo campo HTML

Ora copieremo e incolleremo lo shortcode dal passaggio precedente nel 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]

Aggiunta del CSS (facoltativo)

Come abbiamo detto sopra, alcuni degli stili per gli shortcode possono essere diversi da quanto ti aspetteresti a causa dello stile predefinito di WPForms. Per questo particolare esempio, aggiungeremo del CSS aggiuntivo per stilizzare e posizionare l'icona di apertura della fisarmonica.

.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 i tuoi visitatori vedranno ora il modulo, vedranno una fisarmonica con le caratteristiche del prodotto all'interno del campo HTML del modulo.

E questo è tutto ciò che ti serve per visualizzare qualsiasi shortcode all'interno di un campo modulo HTML. Desideri visualizzare Smart Tag nel campo HTML? Dai un'occhiata al nostro articolo su Come elaborare Smart Tag nei campi HTML.

Riferimento filtro