Crear y Administrar Tablas con el Editor de Gutenberg

Las tablas y gráficos son más importantes de lo que pensamos cuando tenemos un sitio web, ya que esto podría hacer que sea mucho más fácil la forma en que mostramos nuestros precios, planes, trayectoria de la empresa y muchas cosas más

Podría ser realmente tedioso encontrar una tabla después de crearla, ya que deberíamos copiar y pegar el código corto, pero ¿qué pasa si hay un bloque dedicado a encontrar todas sus tablas? WP Table Manager

WP Table Manager añade bloques al editor de Gutenberg que te permitirán añadir estas tablas con un cuadro de búsqueda directamente en el bloque.

Creando Tablas de WordPress con este Plugin para Gutenberg

Para esta publicación, usaremos WP Table Manager para crear una tabla de comparación de precios, primero veremos cómo crear tablas.

Primero de todo, vaya a Administrador de tablas > Todas las tablas, en esta sección, haga clic en + Crear nuevo > Tabla, esto abrirá el editor de tablas, podríamos usar un tema para hacer las cosas realmente más fáciles, así que elijamos uno, haga clic en Tema > Selección de tema.

Verá todas las opciones para temas, así que vamos a seleccionar la que funcionará para la tabla de comparación de precios.

Ahora haga clic en Aceptar (tenga en cuenta que todos los datos de la tabla se eliminarán).

Como hemos añadido un tema, casi todo el trabajo está hecho.

Solo tenemos que hacer ajustes simples y adaptar la tabla a nuestras necesidades, eliminaré muchas filas y editaré muchas de ellas, estas se pueden editar simplemente haciendo clic en ella y empezar a escribir como si estuvieras usando Excel.

Para eliminar, simplemente haga clic en las filas, haga clic con el botón derecho y luego, Eliminar

Ahora, si desea editar la celda, simplemente haga clic en ella, se abrirá un editor avanzado que puede utilizar para personalizar el contenido como desee.

Si queremos personalizar más la tabla, podemos cambiar el color, solo tenemos que hacer clic en la celda y usar las herramientas superiores para cambiar el color de las celdas que queremos.

No tenemos que guardar la tabla ya que se guardará automáticamente con cada cambio.

Ahora que hemos creado la tabla, podemos agregarla a la publicación usando el bloque del Editor de Gutenberg.

Vaya a Entradas > Agregar nueva, verá el Editor de Gutenberg, seleccionaremos el bloque WP Table Manager.

Esto agregará un campo de búsqueda que le mostrará las categorías y tablas y podrá agregar una tabla con solo hacer clic en la tabla.

La tabla se agregará, y ahora, solo tendrá que publicar esa entrada y la tabla estará allí, tan fácil como hacer clic en la tabla y publicar la entrada/página.

Y eso es todo, hemos creado y publicado una tabla de precios en menos de 10 minutos, realmente fácil, ¿no es así?

Usar WP Table Manager en WordPress para crear gráficos

Sí, también tendremos la opción de crear gráficos a partir de las tablas, y la otra buena noticia es que la sección de gráficos tiene un bloque de Gutenberg dedicado para que puedas encontrar fácilmente el gráfico cuando estés creando tu entrada.

Ahora, para crear gráficos vaya a Administrador de tablas > Todas las tablas, deberíamos tener una tabla creada con los datos que queremos reflejar en el gráfico, tenemos una tabla preparada con información para crear este gráfico.

Una buena práctica podría ser crear una categoría para cada tipo de tabla que queramos crear, por ejemplo, aquí hemos creado una categoría llamada: “Gráficos”.

Las categorías son realmente fáciles de crear, para esto haga clic en + Crear Nuevo > Categoría

Finalmente, escriba el título de la categoría, seleccione la categoría principal (si es una subcategoría) y haga clic en Hecho.

Ahora vayamos a la tabla donde queremos crear el gráfico, hemos agregado una tabla basada en las poblaciones de 5 países.

Para crear el gráfico, tendremos que seleccionar las celdas que queremos agregar al gráfico y hacer clic en Gráfico > Crear gráfico a partir de los datos.

 Ahora, veremos la gráfica creada con el menú derecho donde vamos a poder ver las herramientas para personalizar la gráfica.

Usaremos el gráfico circular para este ejemplo.

En la parte inferior del panel del lado derecho, vamos a poder seleccionar el color para cada campo para que podamos hacer que los colores se ajusten al tema que estamos utilizando.

Ahora que hemos creado/personalizado el gráfico, vamos a Entradas > Añadir nueva para que podamos crear la entrada y añadir el nuevo gráfico que hemos creado.

En el Editor de Gutenberg, busque el bloque “WP Table Manager Chart” y agréguelo a la entrada.

Esto abrirá un campo de búsqueda donde podrá ver todos los gráficos disponibles.

Como puede ver, mostrará todas las categorías, tablas y gráficos disponibles, por eso deberíamos tener todo ordenado en categorías, ahora haga clic en el gráfico que desea agregar, en nuestro caso es el “gráfico de Población”.

Como puede ver, el shortcode se agregará automáticamente, por lo que solo tendrá que publicarlo y todo estará hecho.

Pero ahora, ¿qué sucede si queremos actualizar los datos en el gráfico? ¿Deberíamos crear un nuevo gráfico? ¡Bueno, la respuesta es no! Puede editar los datos dentro de la tabla y el gráfico se actualizará automáticamente.

En este ejemplo, la población de Tuvalu es 11147, como puede ver en la imagen, así que cambiemos la población a 20000 y comprobemos el gráfico nuevamente.

Ahora el gráfico debería estar actualizado, vamos a comprobarlo.

Y sí, la magia está hecha, hemos creado un gráfico dinámico que se puede cambiar fácilmente con solo cambiar los datos dentro de la tabla.

Además, Tablas desde Bases de Datos en WordPress

También hay una opción para crear tablas desde la Base de Datos y esta tabla se actualizará automáticamente cuando haya cambios en su base de datos, por lo que si tiene información almacenada en su Base de Datos y desea crear una tabla o gráfico basado en ella, simplemente haga clic en + Crear Nuevo > Tabla de Base de Datos

Esto lo redirigirá a una página con todas las tablas incluidas en su base de datos para que pueda seleccionarla con las columnas que desee, y WP Table Manager creará automáticamente la tabla.

Después de eso, podrá seleccionar las columnas que desea agregar a la tabla, por ejemplo, aquí seleccionaremos solo el tipo de comentario y el correo electrónico de los autores.

Finalmente, seleccione el título para cada columna y agregue las reglas para crear la tabla.

Ahora, haga clic en Crear Tabla y la tabla se creará automáticamente, tenga en cuenta que hay Condiciones que podemos agregar, por ejemplo, mostrar una variable solo si el correo electrónico del autor es “Esta dirección de correo electrónico está siendo protegida de los robots de spam. Necesita tener habilitado JavaScript para verla.”.

Podemos añadir tantas reglas como queramos, solo tenemos que hacer clic en “Añadir” y se añadirá una nueva caja para establecer una nueva regla.

Y ahora puede ver lo fácil que es crear tablas desde la base de datos.

¡Nuestro nuevo diseño hará que todo sea aún más fácil!

Comience a crear tablas con WP Table Manager

Ahora que sabe lo fácil que es crear tablas y administrarlas usando WP Table Manager, ¿qué está esperando? Vaya aquí y compre su membresía para comenzar a servir todas estas tablas de la manera más profesional.