Plugin e Shortcode per mostrare valori dei checkbox di ACF su Elementor.

Se stai sviluppando un sito WordPress con Elementor PRO e ACF Free, probabilmente ti sei imbattuto nel problema di dover visualizzare i valori di un campo checkbox in modo chiaro e personalizzabile. In questo articolo, vedremo come risolvere questo problema creando uno shortcode personalizzato.

Il Problema

I campi checkbox di ACF restituiscono un array di valori selezionati, ma Elementor non offre un metodo diretto per visualizzarli in un elenco personalizzabile con icone. Inoltre, la gestione delle icone può essere scomoda se dobbiamo inserire manualmente il codice SVG per ciascuna.

La soluzione

Ho sviluppato un semplice plugin che genera uno shortcode per recuperare i valori del campo checkbox e mostrarli come lista di elementi con icone FontAwesome (tramite cdn).

Il plugin permette di:

Recuperare i valori di un campo checkbox di ACF.
Personalizzare la spaziatura tra gli elementi.
Decidere se mettere la lista in più colonne (attraverso la regola css ‘columns’
Associare un’icona FontAwesome ai valori, senza dover copiare manualmente il codice SVG.
Caricare automaticamente FontAwesome tramite CDN per garantire il corretto funzionamento delle icone.

Installazione del Plugin

Scarica il file zip e caricalo come un comune plugin oppure copia e incolla il codice seguente in una tua cartella e caricala come plugin.

Download Plugin

<?php
/**
 * Plugin Name: ACF Checkbox Shortcode
 * Description: Shortcode per mostrare valori dei checkbox di ACF con icone personalizzabili e spaziatura.
 * Version: 1.3
 * Author: Alberto Gaia
 */

// Impedisce accesso diretto
if (!defined('ABSPATH')) {
    exit;
}

// Carica FontAwesome da CDN
function acf_checkbox_enqueue_fontawesome() {
    wp_enqueue_style('fontawesome-cdn', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css', [], null);
}
add_action('wp_enqueue_scripts', 'acf_checkbox_enqueue_fontawesome');

function acf_checkbox_shortcode($atts) {
    $atts = shortcode_atts([
        'field' => '', // Nome del campo ACF
        'distance_between_items' => '10px', // Spaziatura tra gli elementi
        'icon' => 'fas fa-user-friends', // Classe FontAwesome di default
        'cols' => 2,
        'distance_between_icon'=>'0px'
    ], $atts, 'acf_checkbox');

    if (empty($atts['field'])) {
        return '<p>Errore: Specifica il nome del campo ACF.</p>';
    }

    $values = get_field($atts['field']);
    if (empty($values) || !is_array($values)) {
        return '<p>Nessun valore selezionato.</p>';
    }

    $output = '<ul class="elementor-icon-list" style="list-style: none; padding: 0; columns:'. $atts['cols'].'">';
    foreach ($values as $value) {
        $output .= '<li class="elementor-icon-list-item" style="margin-bottom: ' . esc_attr($atts['distance_between_items']) . '; display: flex; align-items: center;">';
        $output .= '<span class="elementor-icon-list-icon" style="margin-right:'.$atts['distance_between_icon'].';"><i class="' . esc_attr($atts['icon']) . '"></i></span>';
        $output .= '<span class="elementor-icon-list-text">' . esc_html($value) . '</span>';
        $output .= '</li>';
    }
    $output .= '</ul>';

    return $output;
}
add_shortcode('acf_checkbox', 'acf_checkbox_shortcode');

Utilizzo dello Shortcode

Dopo aver attivato il plugin, puoi utilizzare lo shortcode nel tuo contenuto o nei widget di Elementor:

[acf_checkbox field="acf_field" distance_between_items="15px" distance_between_icon="20px" icon="fas fa-check" cols=2]

Questo mostrerà i valori selezionati nel campo servizi_servizi con un’icona fas fa-check e uno spazio di 15px tra gli elementi.

Conclusione

Grazie a questo plugin, puoi gestire facilmente la visualizzazione dei checkbox di ACF con Elementor, senza dover scrivere codice complesso o usare strumenti esterni. Questa soluzione ti permette di mantenere il design coerente e facilmente personalizzabile direttamente dallo shortcode.

Share the Post:

A

G