Los gráficos son herramientas poderosas para transmitir datos de manera visual y efectiva, y WordPress ofrece múltiples maneras de integrarlos. Sin embargo, si estás buscando una forma flexible y personalizable de agregar gráficos a tu sitio, Chart.js junto con shortcodes personalizados es una excelente opción.
Chart.js es una biblioteca de JavaScript ligera que permite generar gráficos interactivos y atractivos sin necesidad de instalar nada adicional. Gracias a su integración directa a través de un CDN, puedes aprovechar todo su poder de forma rápida y sencilla. En este artículo, exploraremos cómo registrar el script de Chart.js desde el CDN y cómo crear un shortcode en WordPress que permita a los usuarios generar gráficos dinámicos directamente desde el editor. ¡Con solo copiar y pegar el código, tendrás gráficos profesionales en tu sitio!
El código que veremos aquí hace uso de funciones nativas de WordPress, como wp_register_script y add_shortcode, para registrar el script de Chart.js y crear un sistema que permite insertar gráficos fácilmente con parámetros personalizados. El resultado es un shortcode poderoso que puede generar gráficos de tipo barras, líneas, pasteles y más, con etiquetas y datos definidos por el usuario.
Este enfoque no solo es flexible, sino que también facilita la integración de gráficos en páginas o entradas sin necesidad de manipular código complejo. Cada gráfico se genera dinámicamente con un ID único, lo que garantiza que múltiples gráficos puedan coexistir en la misma página sin conflictos.
A continuación, desglosaremos el código paso a paso, explicando cada componente y mostrando ejemplos prácticos de cómo usarlo.
Desglose del Código
1. Registrar el script de Chart.js
El primer paso es asegurarnos de que el script de Chart.js esté disponible en nuestro sitio.
wp_register_script: Registra el script de Chart.js desde un CDN.add_action: Conecta la función al hookwp_enqueue_scriptspara que el script esté disponible en el front-end.
2. Crear el shortcode para gráficos
El corazón del código es la función chartjs_shortcode, que permite generar gráficos mediante un shortcode.
shortcode_atts: Define parámetros predeterminados como tipo de gráfico, etiquetas, datos, colores, ancho y alto.uniqid: Genera un identificador único para cada gráfico.ob_startyob_get_clean: Captura y retorna el HTML y JavaScript generados.
3. Ejemplo de Uso del Shortcode
Puedes insertar gráficos en cualquier entrada o página usando un shortcode como este:
[chartjs type="bar" labels="Enero,Febrero,Marzo" data="10,20,30" colors="#FF6384,#36A2EB,#FFCE56" width="500" height="300"]
Esto generará un gráfico de barras con tres meses como etiquetas, valores de 10, 20 y 30, y colores personalizados. Solo tendrás que definir los labels, data y colors separados por comas y sin espacios. Igual que el ejemplo de arriba.
4. Ejemplos Adicionales de Gráficos
- Gráfico de Líneas:
[chartjs type="line" labels="Lunes,Martes,Miércoles" data="15,25,35" colors="#4BC0C0,#FF9F40,#9966FF" width="600" height="400"] - Gráfico Circular (Pie):
[chartjs type="pie" labels="A, B, C" data="40,30,30" colors="#FF6384,#36A2EB,#FFCE56" width="400" height="400"] - Gráfico Polar:
[chartjs type="polarArea" labels="X,Y,Z" data="50,20,30" colors="#FF6384,#36A2EB,#FFCE56" width="400" height="400"]
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
// Registrar el script de Chart.js desde el CDN
function register_chartjs_script() {
wp_register_script('chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'register_chartjs_script');
// Shortcode para generar gráficos con Chart.js
function chartjs_shortcode($atts) {
// Asegurarnos de que el script de Chart.js esté en cola
wp_enqueue_script('chartjs');
// Parámetros del shortcode
$atts = shortcode_atts(array(
'type' => 'bar', // Tipo de gráfico (bar, line, pie, etc.)
'labels' => '', // Etiquetas separadas por comas
'data' => '', // Datos separados por comas
'colors' => '', // Colores separados por comas
'width' => '400', // Ancho del canvas
'height' => '400' // Alto del canvas
), $atts);
// Generar un ID único para el gráfico
$unique_id = 'chart_' . uniqid();
// Procesar los datos del shortcode
$labels = explode(',', $atts['labels']);
$data = explode(',', $atts['data']);
$colors = explode(',', $atts['colors']);
// Generar el contenido del gráfico
ob_start();
?>
<div style="width: <?php echo esc_attr($atts['width']); ?>px; height: <?php echo esc_attr($atts['height']); ?>px;">
<canvas id="<?php echo $unique_id; ?>"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var ctx = document.getElementById('<?php echo $unique_id; ?>').getContext('2d');
new Chart(ctx, {
type: '<?php echo esc_js($atts['type']); ?>',
data: {
labels: <?php echo json_encode($labels); ?>,
datasets: [{
label: 'Datos',
data: <?php echo json_encode($data); ?>,
backgroundColor: <?php echo json_encode($colors); ?>,
borderColor: <?php echo json_encode($colors); ?>,
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('chartjs', 'chartjs_shortcode');
Lenguaje del código: PHP (php)En conclusión, integrar gráficos interactivos y visualmente atractivos en WordPress nunca ha sido tan fácil. Gracias a Chart.js y su disponibilidad a través de un CDN, no necesitas instalar plugins adicionales ni preocuparte por configuraciones complicadas. El shortcode personalizado que hemos creado te permite generar gráficos dinámicos adaptados a tus necesidades directamente desde el editor, lo que facilita la presentación de datos de forma clara y profesional.
Nos vemos en el siguiente tutorial. Un saludo.
Deja tus opiniones o dudas en los comentarios.