Formatear Números en ACF y WordPress con PHP: Guía Completa para Personalizar su Presentación

Trabajar con números en ACF (Advanced Custom Fields) en WordPress puede ser un dolor de cabeza cuando necesitamos mostrar los valores con un formato específico. Dependiendo del contexto, es posible que queramos agregar separadores de miles, definir la cantidad de decimales o incluso eliminar los ceros innecesarios. Afortunadamente, aprender a formatear números en ACF y WordPress con PHP nos brinda la solución para personalizar cómo se presentan estos valores en nuestro sitio web. En este artículo, te mostraré cuatro formas de hacerlo, para que puedas elegir la que mejor se adapte a tu proyecto.

Formatear números con punto como separador de miles

<pre class="wp-block-syntaxhighlighter-code">
add_filter(&#039;acf/format_value/type=number&#039;, &#039;format_all_acf_numbers&#039;, 10, 3);
add_filter(&#039;acf/format_value/type=range&#039;, &#039;format_all_acf_numbers&#039;, 10, 3); // Optional: Include range fields if needed

function format_all_acf_numbers($value, $post_id, $field) {
    // Check if the value is numeric
    if (is_numeric($value)) {
        // Format the number with . as the thousands separator and no decimals
        return number_format($value, 0, &#039;,&#039;, &#039;.&#039;);
    }
    // Return the original value if it&#039;s not a number
    return $value;
}
</pre>

Este código utiliza el filtro acf/format_value/type=number para modificar la forma en que ACF muestra los valores numéricos. La función number_format() se encarga de aplicar el formato, agregando un punto como separador de miles y eliminando los decimales. Así, un número como 10000 se mostrará como 10.000.

Formatear números con punto para miles y coma para decimales (máximo 3 decimales)

<pre class="wp-block-syntaxhighlighter-code">
add_filter(&#039;acf/format_value/type=number&#039;, &#039;format_all_acf_numbers&#039;, 10, 3);
add_filter(&#039;acf/format_value/type=range&#039;, &#039;format_all_acf_numbers&#039;, 10, 3); // Optional: Include range fields if needed

function format_all_acf_numbers($value, $post_id, $field) {
    // Check if the value is numeric
    if (is_numeric($value)) {
        // Format the number with . as the thousands separator and , for decimals
        return number_format($value, 3, &#039;,&#039;, &#039;.&#039;);
    }
    // Return the original value if it&#039;s not a number
    return $value;
}
</pre>

Este código usa la función number_format() para formatear los números en ACF, colocando un punto como separador de miles y una coma para los decimales, con un máximo de tres decimales. Así, un número como 1234.5678 se mostrará como 1.234,568.

Eliminar los decimales si son cero

<pre class="wp-block-syntaxhighlighter-code">
add_filter(&#039;acf/format_value/type=number&#039;, &#039;format_all_acf_numbers&#039;, 10, 3);
add_filter(&#039;acf/format_value/type=range&#039;, &#039;format_all_acf_numbers&#039;, 10, 3); // Optional: Include range fields if needed

function format_all_acf_numbers($value, $post_id, $field) {
    // Check if the value is numeric
    if (is_numeric($value)) {
        // Si el número es entero, lo mostramos sin decimales
        if (floor($value) == $value) {
            return number_format($value, 0, &#039;,&#039;, &#039;.&#039;);
        } else {
            // Si tiene decimales, mostramos hasta 3 y usamos , para decimales y . para miles
            return number_format($value, 3, &#039;,&#039;, &#039;.&#039;);
        }
    }
    // Return the original value if it&#039;s not a number
    return $value;
}
</pre>

Este código verifica si el número es entero o tiene decimales. Si el número no tiene decimales (floor($value) == $value), se muestra sin decimales y con punto como separador de miles. Si tiene decimales, se muestran hasta 3, usando la coma como separador decimal y el punto para miles. Por ejemplo:

1000.00 se mostrará como 1.000
1234.567 se mostrará como 1.234,567

Eliminar dinámicamente los ceros decimales innecesarios

<pre class="wp-block-syntaxhighlighter-code">
add_filter(&#039;acf/format_value/type=number&#039;, &#039;format_all_acf_numbers&#039;, 10, 3);
add_filter(&#039;acf/format_value/type=range&#039;, &#039;format_all_acf_numbers&#039;, 10, 3); // Optional: Include range fields if needed

function format_all_acf_numbers($value, $post_id, $field) {
    // Check if the value is numeric
    if (is_numeric($value)) {
        // Redondear a 3 decimales máximo
        $formattedValue = number_format($value, 3, &#039;,&#039;, &#039;.&#039;);

        // Eliminar ceros innecesarios después de la coma
        $formattedValue = rtrim($formattedValue, &#039;0&#039;); // Quita ceros al final
        $formattedValue = rtrim($formattedValue, &#039;,&#039;); // Si queda una coma al final, la elimina

        return $formattedValue;
    }
    // Return the original value if it&#039;s not a number
    return $value;
}
</pre>

Este código formatea el número con un máximo de 3 decimales y utiliza la coma como separador decimal y el punto para los miles. Luego, elimina dinámicamente los ceros innecesarios a la derecha de los decimales. Si todos los decimales son ceros, se elimina la coma también.

Ejemplos:

1000.000 se mostrará como 1.000
1234.500 se mostrará como 1.234,5
9876.543 se mostrará como 9.876,543

Conclusión

Y así es como podemos formatear números en ACF y WordPress con PHP de diversas formas, adaptándolos a nuestras necesidades de presentación. Con unos simples ajustes en el código, puedes personalizar completamente cómo se muestran los valores numéricos en tu sitio web.

Recuerda que todo este proceso está basado en PHP, lo que te permite tener un control total sobre cómo se manejan los datos en tu sitio WordPress. Si te ha gustado este tutorial y quieres aprender más sobre cómo optimizar tu trabajo con ACF, PHP y otras herramientas útiles en WordPress, te invito a visitar mi blog en elchimo.com y seguirme en mis redes sociales. ¡Sigue aprendiendo y mejorando tu desarrollo web!

¡Nos vemos en el próximo artículo! 🚀