Cómo Crear Hermosos Tablas Y Gráficos De WordPress

Actualizado December 07, 2017

Si usted es un investigador recopilando datos acerca de una elección local o un profesor compartiendo datos acerca de la población de la fauna local con su clase, no hay mejores sustitutos que tablas y gráficos. Estas herramientas convierten a datos aburridos, aparentemente inútiles en información fácilmente digerible. Lo bueno es que no tiene que preocuparse acerca del manejo de una compleja construcción de software de gráficos, debido a que tablas y gráficos de WordPress pueden ser hechos con sencillos plugins. Por lo tanto, estamos aquí para resumir cuáles de esos plugins son los mejores, y también vamos a entrar en cómo crear hermosos tablas y gráficos de WordPress.

Ventajas de Hacer Tablas y Gráficos en WordPress

Puede que se pregunte por qué no simplemente desarrollar una tabla o gráfico, por ejemplo, en Excel y después tomar una captura de pantalla para colocarla en su blog. A veces, este método funciona bien, pero otras veces es un gran desperdicio. El motivo principal por el que escogería Excel o cualquier otro programa de creación de gráficos, es cuando necesita una característica avanzada que no está disponible mediante un plugin de WordPress.

De lo contrario, aquí están las ventajas de hacer tabkas y gráficos con plugins de WordPress:

  1. Consolida todos sus gráficos integrando todo en un área. Si usted hace tablas y gráficos con frecuencia, esto le ahorra un montón de tiempo.
  2. Le permite volver atrás y editar el gráfico, si es necesario. Una imagen limita soluciones rápidas y le obliga a encontrar ese archivo antiguo que utilizó para realizar el gráfico.
  3. Algunos tablas y gráficos tienen características interactivas, que nunca sería posible con una fotografía.

En general, un plugin de gráfico de WordPress simplifica el proceso, pero todavía le da la mayoría de las características que usted necesita para su blog.

5 Eficaces WordPress Plugins de Tablas y Gráficos

Antes de empezar con un tutorial sobre cómo crear hermosos tablas y gráficos de WordPress, queremos repasar los mejores plugins para lograr lo que necesita.

  1. wpDataTables
  2. WordPress Charts and Graphs Lite
  3. WordPress Charts
  4. Interactive Maps, Charts, Graphs
  5. UberChart

1. wpDataTables

WpDataTable es un WordPress plugin ¡muy robusto! No deje que le engañe el nombre. Puede hacer mucho más que simplemente crear lo típico de tablas. Puede diseñar todo tipo de tablas y gráficos. Fue desarrollado específicamente para permitir la entrada de grandes cantidades de datos y convertir eso rápidamente en una bonita visualización gráfica para sus lectores.

wpdatatables WordPress plugin

wpdatatables WordPress plugin

WpDataTables es un plugin premium, a partir de $44 por una licencia. Actualmente, cuenta con más de 13,000 ventas en CodeCanyon con 4.5 de 5 estrellas, así que usted puede estar seguro de que hay un montón de gente feliz usándolo. Algunas de sus características incluyen:

  • Todo es receptivo, lo que significa que se adaptará bellamente para cada dispositivo
  • El plugin wpDataTables tiene tres diferentes motores para visualizar gráficos: Google Graphs, Highcharts, y Chart.js. Esto permite representar gráficos sencillos y flexibles con un montón de opciones personalizables
  • Actualización automática en tiempo real para tablas y gráficos
  • Vista previa de los gráficos en el servidor junto con la tabla

2. WordPress Charts and Graphs Lite

Si desea visualizar los datos y la información sobre su blog de WordPress con bonitos tablas y gráficos, no busque más, el excelente plugin WordPress Charts and Graphs Lite. Hace un trabajo maravilloso de crear bellos gráficos interactivos, dando libertad completa para personalizar el output para ajustarlo a sus necesidades exactas: usted puede cambiar los colores, personalizar las fuentes, ocultar el texto, agregar texto – todo esto incluso después de que el gráfico sea publicado. La visualización de gráficos en sus publicaciones y páginas es tan sencilla como cargar una hoja de cálculo y añadir el código de acceso generado automáticamente por el plugin a su página.

Si más adelante decide que desea cambiar el tipo de gráfico desde, digamos una gráfica de bloque a una gráfico circular, simplemente haga clic en el botón Editar y haga el cambio. Sí, es realmente tan fácil como eso. También vale la pena mencionar que los tablas y gráficos que produce funcionan en todas las pantallas de dispositivos (computadoras, tabletas, teléfonos móviles) de todos los tamaños debido a que el plugin es receptivo.

WordPress Charts and Graphs Lite

WordPress Charts and Graphs Lite

Incluye 9 tipos de gráficos, código de acceso, y la opción de importar cargas de datos a un archivo CSV. Este plugin de gráficos es también conocido como el Visualizer plugin, así que quizás lo vea referido como eso. Hay una versión gratis y pro. La versión Pro cuesta por lo menos $74 (licencia de un sitio) y ofrece herramientas para importar desde otros gráficos. Algunas otras características de Pro incluyen:

  • La opción para dar a los usuarios las capacidades de edición
  • Creación de gráficos privados
  • Auto-sincronización con el archivo en línea
  • Tipos de gráficos adicionales
  • Puede acceder a un editor en vivo

El plugin Lite es aún bastante potente. Aquí están algunas de las tablas que usted puede hacer:

  • Gráfico de líneas
  • Gráfico circular
  • Gráfico de barras
  • Gráfico de columnas
  • Gráfico de área
  • Geo gráfico
  • Tablas
  • Gráfico de velas
  • Gráfico combinado
  • Gráfico de dispersión
  • Gráfico de línea de tiempo

3. WordPress Charts

El plugin WordPress Charts sería mi tercera opción, a muchos usuarios les gusta por los diseños limpios, animaciones y opciones de color. Sin embargo, también sea consciente de que no ha sido actualizado desde hace bastante tiempo.

WordPress Charts plugin

WordPress Charts plugin

WordPress Charts plugin ofrece seis gráficos únicos y plantillas de gráficos, que puede ajustar e introducir sus propios datos para mostrar en su sitio web. Los gráficos ofrecidos incluyen:

  • Líneas
  • Barras
  • Circular
  • Radar
  • Polar
  • Tipos de donut

Todos estos gráficos son construidos usando HTML5. Las opciones de personalización son casi infinitas, pero tendrá que saber un poco acerca de la codificación, códigos de acceso o al menos, el ajuste de la configuración predeterminada. La razón por las que nos gusta este plugin de gráficos de WordPress mucho es que es muy ligero. Usted puede insertar docenas de gráficos en todas las entradas de blog sin problema. Y este es el sentido de trabajar con HTML5. Puede quitar el desorden sin sacrificar ninguna de las funcionalidades.

4. Interactive Maps, Charts, Graphs – For VC

Si usted actualmente tiene el plugin Visual Composer en su sitio web, el plugin Interactive Maps, Charts, Graphs podría ser para usted. Es un complemento para Visual Composer, no hay ninguna razón para obtenerlo de otra forma.

Mega Main VC Add-on for charts

Mega Main VC Add-on for charts

El complemento se vende por $12, lo cual proporciona mapas interactivos, tablas y gráficos, todo integrado en la interfaz de Visual Composer. El add-on viene con iconos vectoriales, Google Fonts, colores ilimitados, y toda una serie de otras funciones para la construcción y personalización de las tablas y gráficos. El complemento tiene sus tablas y gráficos estándares, como los circulares y gráficos de líneas. También hay una función de mapa única para resaltar ciertas áreas, sea un mapa local o un mapa del mundo.

5. UberChart – WordPress Chart Plugin

UberChart es un plugin gráfico premium más versátil, ya que no requiere el plugin Visual Composer. El plugin ofrece 10 tipos de gráficos integrados, para lo cual usted recibe alrededor de 240 opciones personalizables por gráfico.

UberChart WordPress plugin

UberChart WordPress plugin

Puede exportar e importar datos con el clic de un botón, y el receptivo diseño asegura que todos los gráficos se muestren en cada dispositivo. Algunos de los tipos de gráfico incluyen:

  • Los gráficos de líneas
  • Los gráficos de área
  • Los gráficos de barras
  • Los gráficos circulares
  • Gráficos de donut
  • Gráficos de burbujas

La parte más impresionante de este plugin de gráficos de WordPress es el editor de hojas de cálculo. Le permite copiar datos desde cualquier programa que usted desee (como Excel), ya que reúne las características más avanzadas de Excel y la versatilidad de un plugin gráfico.

Cómo Crear Hermosos Tablas y Gráficos de WordPress

Uno de nuestros plugins de gráficos de WordPress favoritos es WordPress Charts and Graphs Lite. Por lo tanto, sólo vamos a mostrarle el tutorial con ese plugin. Los otros plugins de gráficos tienen herramientas similares pero diferentes interfaces. Por lo tanto, yo recomendaría que probase todos ellos para ver cuál es el más adecuado para usted, ya que wpDataTables también es muy robusto.

Paso 1: Instale y Active el Plugin WordPress Charts and Graphs Lite

Bastante simple.

Paso 2: Vaya a la Biblioteca de Visualizer y Agregue un Gráfico Nuevo

Como hemos mencionado antes brevemente, el plugin WordPress Charts and Graphs Lite también se conoce como Visualizer. Es algo difícil de encontrar la página de configuración, pero todo lo que tiene que hacer es ir a la biblioteca de medios > Biblioteca de Visualizer. No hay ningún otro ajuste que tenga que configurar antes de empezar con sus gráficos de WordPress.

Biblioteca de Visualizer

Biblioteca de Visualizer

Al llegar en la biblioteca de Visualizer, verá un mensaje que dice “No se encontraron gráficos “. Eso está completamente bien, ya que no hemos hecho ningún gráfico todavía. Por lo tanto, debe hacer clic en el botón Agregar nuevo en la parte superior de la página.

Agregar Nuevo gráfico

Agregar Nuevo gráfico

Esto revela todas las tablas y gráficos de WordPress que puede hacer con el plugin. Por ejemplo, ofrece circulares, lineales, de área, GEO, y gráficos de barras. Nueve gráficos de WordPress son proporcionados en la versión gratuita. Puede obtener tres gráficos más si paga por la versión Pro. De todos modos, voy a seleccionar un gráfico circular para este tutorial.

Gráficos y tablas

Gráficos y tablas

Paso 3: Importe Datos en la Tabla de WordPress

El plugin inserta automáticamente los datos así el gráfico tiene algo para mostrar. Sin embargo, a fin de presentar sus propios datos, tendrá que importarla usando uno de los cinco métodos. Usted puede:

  • Importar datos desde un archivo (probablemente el método más común)
  • Importar datos desde una URL
  • Importar desde otro gráfico
  • Importar desde WordPress (sólo disponible en la versión Pro)
  • Importar datos manualmente (sólo disponible en la versión Pro)
Importar datos para el gráfico

Importar datos para el gráfico

Para este ejemplo, voy a importar datos desde un archivo CSV. Se originó como un archivo de Excel, que es una de las formas más comunes para obtener datos en una tabla o gráfico de WordPress. Al importar datos de un archivo, haga clic en el botón seleccionar archivo, busque el archivo en su ordenador y a continuación, pulse el botón Importar en el Panel de Control de WordPress.

Esto le debe de mostrar una vista previa sobre qué apariencia tendrán sus datos. La buena noticia es que siempre puede regresar y ajustar el formateo de su CSV y probar otra vez. Hay un montón de herramientas para personalización en el siguiente paso para mejorar la apariencia de las cosas.

Paso 4: Personalice Su Tabla de WordPress

Hay un enlace pequeño que dice “Avanzado” debajo de las opciones de importación. Haga clic en él para ver la configuración de los ajustes. Hay varias opciones para probar así no vamos a ver todas.

Podemos empezar con el título de la tabla. Introducimos algo como “Qué pasa con mi tiempo” debido a que mi tabla resalta el porcentaje del tiempo que la gente dedica a ciertas tareas durante el día. Puedo cambiar la fuente y su tamaño, la ubicación y el título.

Personalizar tabla de WordPress

Personalizar tabla de WordPress

Conociendo los ajustes verá varias pestañas de los ajustes generales, acciones del frontend y más. Es muy probable que desee decidir en qué parte quiere colocar la leyenda ya que es una parte esencial del gráfico.

Por otro lado todo depende de qué tipo de gráfico intenta elaborar y qué elementos desea mostrar. Ahora supongamos que necesitamos una tabla de WordPress para los estudiantes que tenemos. Por lo tanto queremos darles la posibilidad de imprimir y descargar los datos y el gráfico.

Ajustes de tabla de WordPress

Ajustes de tabla de WordPress

Para hacerlo hay que ir a la pestaña de las acciones de frontend. Allí las casillas de verificación permiten a los imprimir y descargar los datos. Podemos darles hojas de Excel descargables y CSVs. Después de terminar con la personalización del gráfico asegúrese de guardar los cambios.

Paso 5: Copie el Código Corto en la Página o Post

Después de guardar su tabla o gráfico de WordPress vuelva a la biblioteca de Visualizer. Verá una lista de tablas y puede filtrar basado en el tipo de la tabla. Dado que tengo una solo una tabla, instantáneamente puedo verla como la única opción. Con el fin de publicar su tabla de WordPress en una página o publicación debe copiar el código corto de la tabla y pegarlo en la página o publicación deseada. El código corto se encuentra debajo de la vista previa de la tabla (vea la captura de pantalla abajo).

Código corto de WordPress

Código corto de WordPress

Una vez que copie el código corto puede crear una página o post o ir a uno ya publicado de ellos. Decida dónde necesita la tabla y pegue el código corto.

Paso 6: Ver la Tabla de WordPress en el Frontend

Recomiendo prever su tabla antes de publicarla. De esta manera sabrá qué van a ver sus usuarios ya que las tablas de WordPress pueden resultar meticulosas. Si echa un vistazo a la captura de pantalla de abajo va a ver una vista previa de la tabla de prueba en el frontend del sitio. Los botones Imprimir y Descargar son visibles y la tabla tiene unas animaciones bonitas, los colores y elementos tienen buena pinta.

Ver tabla/gráfico

Ver tabla/gráfico

Los cambios suceden inmediatamente en una vista previa en vivo así se puede ver como afectará la tabla sin tener que guardar y después ver la página en una pestaña nueva. Cabe mencionar una característica más no solamente podemos editar y estilizar la tabla sino se puede editar los datos dentro de las tablas cargando archivos distintos, sobreescribiendo el archivo original o reemplazando los datos antiguos con los nuevos.

¿Dudas sobre Cómo Crear Tablas y Gráficos de WordPress?

Todos los tablas y gráficos de WordPress tienen funciones diferentes. La mejor parte de estos plugins es que son muy flexibles. Por lo tanto le animo pasar tiempo con la prueba de los gráficos y la comprensión de los ajustes diferentes. Luego llegará a ser el maestro de tablas y las preguntas recibirá usted. Si por el momento tiene dudas sobre cómo crear tablas y gráficos de WordPress deje su comentario abajo.

Este artículo fue escrito por Brian Jackson

Brian enfoca en nuestros esfuerzos de marketing a través de las redes sociales: desde el desarrollo de la nueva estrategia de crecimiento online, creación de contenido, optimización técnica de buscadores hasta nuestra expansión en la comunidad WordPress. Es apasionado por Wordpress lleva usándolo desde hace más de 8 años e incluso está desarrollando su propio plugin exclusivo. A Brian le encanta el blogueo, películas, montar en bici y trabajar con sitios web.

Artículos relacionados

  1. Gravatar for this comment's author
    Visualmodo WordPress Themes diciembre 7, 2017 at 12:52 pm

    Los buenos plugins y recomendaciones, nuestros temas son contabíles con ellos, también creo herramientas para ello.

Deja un comentario

kinsta newsletter

¿Utilizas WordPress?

¡Únete a más de 20.000 lectores que ya reciben nuestro newsletter semanal GRATUITO con consejos de WordPress sobre cómo generar más tráfico e ingresos para tu negocio!

You have Successfully Subscribed!

Send this to a friend