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.
<?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.