• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Mostrar datos de archivo CSV en WordPress

Mostrar datos de archivo CSV en WordPress

[ 28 junio 2023 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras

Suscríbete a DecodeCMS:  

En un artículo anterior habíamos visto cómo mostrar datos de una tabla de la base de datos de WordPress, sin embargo en algunos proyectos es posible que tu información se encuentre en un archivo .csv

 

Resultado Final

Al final queremos obtener algo similar a como se muestra en la siguiente imagen:

Mostrar archivo CSV en WordPress

 

Código para mostrar datos CSV en WordPress

Podemos mostrar el contenido usando un shortcode, una plantilla de página, o como hacemos en este caso, directamente un Hook que agrega contenido a una página específica.

add_filter('the_content', 'dcms_show_csv_data');

function dcms_show_csv_data($content){
    $upload_path = wp_get_upload_dir()['basedir'];

    $page_slug = 'mostrar-datos';
    $file_path = $upload_path . '/ciudades.csv';

    // Show in page
    if ( is_page($page_slug)){

        echo "<div style='overflow-x: auto;'>\n";
        echo "<table class='csv-data'>\n";

            if (file_exists($file_path)) {

                $f = fopen($file_path, "r");

                // Header
                if ( $line = fgetcsv($f) ){
                    echo "<tr>";
                    foreach ($line as $cell) {
                        echo "<th>" . htmlspecialchars($cell) . "</th>";
                    }
                    echo "</tr>\n";
                }

                // Body
                while ( $line = fgetcsv($f) ) {
                    echo "<tr>";
                    foreach ($line as $cell) {
                        echo "<td>" . htmlspecialchars($cell) . "</td>";
                    }
                    echo "</tr>\n";
                }

                fclose($f);
            }

        echo "</table>";
        echo "\n</div>";
    } else {
        return $content;
    }

}
Puedes agregar el siguiente código como parte de tu archivo functions.php de tu tema hijo

 
En el código anterior:

  • Usamos el Hook de filtro the_content que hace referencia a la función dcms_show_csv_data()
  • Definimos la variable $page_slug que indicará el slug de la página en donde se mostrará el contenido
  • Definimos la variable $file_path la ruta del archivo .csv, que en nuestro caso esta dentro de la carpeta uploads de WordPress
  • Comprobamos la existencia del archivo, lo abrimos y luego usamos la función fgetcsv() de PHP
  • La función fgetcsv() lee el archivo csv línea a línea, primero obtenemos la cabecera para construir la tabla HTML con los datos
  • Luego obtenemos el resto de los datos a través de un bucle
  • Finalmente cerramos el archivo

 

Conclusión

Tal como has podido comprobar, puedes leer fácilmente la información de un archivo CSV y mostrarlo en una página en WordPress en formato de tabla. En este artículo hemos visto cómo realizar esto directamente a través de código.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mostrar datos desde una tabla personalizada de la base de datos de WordPressMostrar datos desde una tabla personalizada de la base de datos de WordPress
  • Shortcodes en WordPress cómo usarlosQué son los Shortcodes en WordPress y cómo usarlos
  • Plantillas de página en WordPressPlantillas de página en WordPress
  • Animación de saltos de enlace en WordPressAnimación de saltos de enlace en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Omnisend
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad SEO social woocommerce

Populares

Optimizar la tabla wp_postmeta en WordPress

Saltos de enlace en una misma página en WordPress

Jerarquía de Archivos de Plantilla en WordPress

Personalizar la página de error 404 en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2026 Todos los derechos reservados