Cómo crear tablas HTML avanzadas en WordPress sin codificación

WordPress sigue siendo la plataforma CMS más popular del mundo con una participación del 43% en toda la web. Si bien es indudable que tiene las características más atractivas, WordPress no es necesariamente la mejor plataforma cuando se trata de crear tablas HTML sin codificación.

Aunque muchas personas piensan que las tablas HTML son obsoletas, aún ofrecen un excelente valor para la audiencia. Como resultado, la mayoría de los usuarios tuvieron que contratar expertos para la tarea particular "solo para desarrolladores". Teniendo en cuenta el propósito, fue una gran decepción para los usuarios de WordPress en ese momento.

Gutenberg: el editor predeterminado de WordPress con un bloque de tabla

Durante la WordCamp de Europa celebrada en julio de 2017, el fundador de WordPress, Matt Mullenweg, anunció que el editor de bloques de Gutenberg era el futuro editor de WordPress. Para deleite de muchos usuarios de WordPress, el nuevo editor prometió haber incluido un bloque de tabla integrado.

Sin embargo, cuando Gutenberg llegó con WordPress 5.0, el editor fue criticado por causar problemas de capacidad de respuesta y optimización en diferentes dispositivos. No obstante, el editor vino con un bloque de tablas incorporado como se prometió, lo que permite a los usuarios crear tablas en su sitio web sin tener que codificar.

Aunque el bloque de tablas de Gutenberg es una opción bastante útil para crear tablas HTML en WordPress, estaba muy lejos de convertirse en una solución efectiva para crear tablas. No ofrecerá el aspecto más atractivo, no es reutilizable y no es bueno para manejar bases de datos masivas.

Gutenberg no es más que un simple constructor de tablas. No puede usar Gutenberg para funcionalidades avanzadas de tablas HTML, como clasificación, filtrado o estilo de tablas. Con todo, el editor de bloques de Gutenberg está lejos de convertirse en un generador de tablas avanzado.

Por lo tanto, dependía de los desarrolladores de WordPress de itinerancia libre como nosotros, WPManageNinja, crear un complemento que agregue funciones de tabla avanzadas a su tablero.

Ninja Tables: complemento avanzado de WordPress para tablas HTML

Incluso antes de que se anunciara Gutenberg, nuestros desarrolladores en WPManageNinja estaban trabajando sin descanso para crear un complemento de tabla de WordPress confiable que permitiera a los usuarios crear tablas sin problemas.

El 27 de febrero de 2018, lanzamos tablas Ninja en la tienda de complementos de WordPress, ¡y Ninja Tabes tardó solo unos meses en alcanzar más de 30000 instalaciones activas! El increíble apoyo y aprecio de nuestros usuarios también nos motivó a lanzar más de 45 actualizaciones de complementos en menos de 2,5 años desde el primer lanzamiento, ¡convirtiendo a Ninja Tables en el complemento de mesa de WordPress número uno en ese proceso!

Gracias a sus características dinámicas y su interfaz fácil de usar, Ninja Tables ahora es utilizado por más de 70k sitios web y empresas.

Ninja Tables es un complemento de visualización de datos que le permite crear una amplia gama de tablas para exhibir en su sitio web. La capacidad de respuesta, las funciones, la facilidad de personalización y las integraciones de terceros lo convierten en su mejor opción cuando se trata de llevar esas tablas HTML avanzadas difíciles de extraer a su sitio de WordPress.

Ahora, profundicemos en las funciones de creación y personalización de tablas HTML más avanzadas de Ninja Tables.

• la interfaz de usuario
• editor de tablas
• integraciones

la interfaz de usuario

Tras la activación, Ninja Tables se puede ubicar desde la barra lateral de su panel de WordPress. Como la mayoría de los complementos de WordPress, Ninja Table ofrece una interfaz de usuario con varias funcionalidades. ¡Aprendamos más al respecto!

• Todas las pestañas
• Herramientas y configuraciones
• Ayuda y documentaciones

Inicio/Todas las Mesas

Ninja Tables Home tiene una interfaz atractiva con nuevas ofertas. Le proporciona dos botones, uno para crear y otro para importar.

El botón Crear su primera tabla lo lleva a un generador de tablas manual de WordPress, mientras que también puede Importar desde CSV.

Si decide crear una tabla desde cero, le pedirá que proporcione un Título y una Descripción en una ventana emergente. También puede notar varias otras pestañas, que ofrecen varias funciones de importación e integración. Sin embargo, la versión gratuita de Ninja Tables solo le permitirá importar a través de CSV o JSON e integrarse con WP Fluent Forms.

Una vez que haya proporcionado un título y una descripción , haga clic en el botón Agregar para acceder al generador de tablas. Si no necesita uno, puede omitir el cuadro de descripción.

La función de importación también funciona de la misma manera. Le permite seleccionar un archivo de Excel o cualquier otro archivo CSV que haya creado en su computadora para cargarlo en su sitio web.

De cualquier manera, terminarás en el editor de tablas. Tenga en cuenta que sus tablas creadas son reutilizables y aparecerán en la ventana de inicio. Ninja Tables identifica tablas usando códigos cortos. Para usar una tabla en una publicación o página de su sitio web, solo necesita copiar y pegar el código abreviado de la tabla en su página o publicación.

Herramientas y configuraciones

Además de la pestaña Inicio , Ninja Table también incluye una pestaña Herramientas y configuración que permite a los usuarios importar, modificar la apariencia global , establecer permisos de usuario y cambiar la configuración global.

La herramienta Importar es adecuada si ya estaba utilizando cualquier otro complemento de tabla popular y ha cambiado a Ninja Table. Ninja Table tiene una función de importación de tablas con un solo clic para TablePress, Ultimate Tables y Data Tables Generator de Supsystic. También puede importar archivos CSV dentro de esta pestaña.

A continuación, la pestaña Apariencia global le permite cambiar los estilos de la tabla. Las mesas Ninja pueden improvisar sus mesas usando tres estilos de interfaz de usuario de mesa diferentes. También puede personalizar cada estilo según sus preferencias y elegir si permite que los visitantes busquen y filtren sus tablas. Sin embargo, las reglas de apariencia también se pueden modificar para cada mesa por separado.

Desafortunadamente, no puede establecer permisos para diferentes usuarios de back-end a menos que tenga la versión profesional de Ninja Tables. La pestaña restante le permite seleccionar cómo se manejarán los errores de Javascript y Borrar caché de tabla .

Ayuda y Documentación

La amplia gama de características de Ninja Tables exige una documentación confiable, y nuestro equipo ha preparado todo lo que necesita saber sobre Ninja Tables.

Nuestra interfaz de ayuda y documentación ofrece una guía de usuario bien documentada para una comprensión profunda de lo que puede hacer Ninja Tables. Y si todavía tiene algún problema, ¡siempre puede contactarnos enviando un ticket de soporte!

Ahora que aprendió sobre la interfaz de usuario, seguramente querrá crear una tabla. ¡Así que vuelve al Hogar y empieza a crear uno!

El editor de tablas

El editor de tablas es una de las cosas más emocionantes de Ninja Tables. Se potencia con algunas de las características más avanzadas del generador de tablas HTML, así como con la personalización. Al hacer clic en el botón Agregar o Importar, accederá al completo editor de tablas de Ninja Tables.

La interfaz de usuario del generador de tablas de Ninja Tables consta de las secciones que se muestran arriba. Cada sección del generador de tablas tiene múltiples funcionalidades de personalización para crear y diseñar hermosas tablas HTML de WordPress.

Puede cambiar el título y la descripción de la tabla y establecer un Título de la tabla haciendo clic en el botón Editar en la parte superior. Además, la interfaz de usuario del generador de tablas Ninja Tables también le permite obtener una vista previa de su tabla cuando lo desee.

• filas de la tabla
• Configuración
• Diseño
• Edición de interfaz
• CSS personalizado
• Importación y exportación

Analicemos las funciones del generador de tablas una por una.

Filas de tabla

Table Rows es uno de los aspectos fundamentales de cualquier generador de tablas HTML en WordPress. Como dice, puede comenzar haciendo clic en el botón Agregar columna .

El botón abrirá una ventana de creación de columnas que otorga algunas de las funciones de tabla HTML más avanzadas en WordPress. Ninja Tables no es solo un generador de tablas básico con instalaciones de creación de columnas promedio; es mucho más que eso.

Entonces, si bien puede escribir un título de columna, también puede establecer el tipo de datos y los puntos de interrupción receptivos (el punto de interrupción receptivo le permite elegir si desea mostrar una columna en dispositivos específicos) .

Sin embargo, la versión gratuita limita el campo Seleccionar, la imagen y la carga de archivos y no le permite crear botones. Aún así, el complemento mejora con algunas características increíbles de adición de datos, como campo HTML , valor numérico y campo de fecha .

Y si todavía está buscando un mayor control sobre las columnas de su tabla, puede desbloquear la Configuración avanzada, la Configuración condicional y el Valor de transformación disponibles en las otras pestañas de personalización de columnas. Consulte la documentación de Ninja Tables para obtener más información sobre cómo funcionan.

Una vez que haya agregado las columnas de la tabla, aparecerá un botón Agregar datos en el editor. Le permite agregar datos a su sitio web sin esfuerzo. Puede personalizar las columnas por separado haciendo clic en el ícono de ajustes al lado del encabezado de la columna y editar, duplicar o eliminar datos en cualquier momento.

Finalmente, la sección de filas de la tabla también le permitirá realizar acciones masivas o establecer una vista compacta si su tabla consta de muchos datos.

Configuración de mesa

La pestaña Configuración de tabla ofrece una organización de columnas de arrastrar y soltar. Generalmente, las tablas HTML no se pueden organizar en WordPress una vez creadas.

En ese sentido, las Ninja Tables no limitan la organización de las mesas. Las filas de la tabla se pueden organizar arrastrando y soltando, mientras que también puede crear nuevas columnas o editar las existentes.

La siguiente pestaña en la pestaña de configuración de la tabla le permite elegir Configuración de representación, es decir, cómo desea que los navegadores representen sus tablas. De forma predeterminada, sus tablas se representarán con la configuración de la tabla Ajax . Esta característica le permite incorporar bases de datos masivas sin dañar la velocidad de su sitio web.

Si bien hay dos opciones de representación, no puede seleccionar la configuración de tabla avanzada a menos que tenga la versión pro. La tabla avanzada puede incorporar algunos de los campos de tabla más avanzados, incluido el margen de celda y los códigos abreviados, y es adecuada para la optimización de SEO.

Los filtros personalizados son una función útil si desea incluir un botón de opción, una casilla de verificación, un selector de fecha u otras IU especializadas en su tabla. Estos podrían proporcionar excelentes funciones de optimización de conversión si está mostrando productos o agregando más datos dentro de las celdas de su tabla. Sin embargo, el filtro personalizado también es una característica profesional.

La configuración de botones le permite incluir el botón de importación Imprimir o CSV (función Pro). La configuración de idioma es útil si está interesado en usar un idioma diferente para la barra de búsqueda de su tabla, el marcador de posición de búsqueda o el encabezado desplegable de búsqueda.

Diseño de mesa

El diseño de mesa Ninja Tables es un personalizador visual increíble. Cuenta con tres bibliotecas de estilo con hasta nueve funciones de personalización de estilo, lo que le brinda el máximo control visual sobre sus tablas HTML en WordPress.

Además del estilo, también puede elegir si desea mostrar el título de la tabla, la descripción, la barra de búsqueda, el filtro de columna, la fila del encabezado, el borde, etc. Además, puede configurar los dispositivos de destino habilitando la Configuración de tabla apilable para que no se rompan. en cualquier dispositivo.

El estilo juega un papel importante en el atractivo visual de una mesa. Sin embargo, el color es lo más importante. Las mesas ninja ofrecen una personalización de color completa dentro de la pestaña de color de la mesa. Puede personalizar todo, desde el color del encabezado de la tabla hasta los bordes de la tabla, y no hay límite en los colores permitidos.

Y si no puede decidir sobre la personalización del color, ¡Ninja Table viene con trece esquemas de color predefinidos para sus mesas! Sin embargo, esta increíble característica requiere una versión premium.

La pestaña de diseño de la tabla restante presenta varias funciones de personalización, como paginación, posición de la barra de búsqueda, método de clasificación, y puede proporcionar una clase CSS adicional para el diseño de su tabla.

Edición de interfaz

La edición frontend es otra razón ejemplar por la que Ninja Tables es más que un complemento de mesa. Le permite habilitar la edición para su usuario front-end. Por ejemplo, si necesita que sus usuarios completen los datos de la tabla, puede facilitar la edición de la interfaz. Sin embargo, la función de edición de interfaz solo está disponible en la versión premium.

CSS/JS personalizado

El CSS personalizado le permite controlar la apariencia de HTML en WordPress y, en el caso del complemento, le da control sobre sus tablas. Aunque el artículo está dirigido a personas que no son programadores, conocer CSS y Javascript puede ofrecerle un control integral sobre la apariencia de las Tablas Ninja.

Importación y exportación

Nuevamente, la función Importar le permite importar un archivo CSV o reemplazar una tabla existente a través de CSV. Por otro lado, la función de exportación le permitirá guardar su tabla en un archivo CSV.

integraciones

Ninja Tables incorpora todas las herramientas y funciones esenciales para crear tablas HTML en WordPress sin problemas. Pero los poderes no se limitan a la construcción de mesas. Es mucho más que un complemento de tabla y viene con varias integraciones increíbles. Todos los cuales ofrecen magníficas instalaciones!

• Integración de formularios fluidos
• Publicaciones de WP
• WooCommerce
• Hojas de cálculo de Google
• Gráficos ninja

Integración de formularios fluidos

Como propietario de un sitio web, probablemente utilice un complemento de formulario en su sitio web. ¿Qué pasaría si quisiera tomar las entradas del formulario en una tabla? Ninja Tables toma las entradas de su formulario para crear y mostrar una tabla sin requerir que haga nada más que configurar la tabla.

WP Fluent Forms es el mejor complemento de formulario de contacto del mundo en este momento, y si ha estado usando el complemento para recopilar datos de su audiencia, puede llevarlo a sus tablas de WordPress sin tener que hacer mucho.

Integración de publicaciones de WP

Ninja Tables no solo lleva las entradas de su formulario de contacto a las tablas. También puede organizar todas sus publicaciones, productos, páginas y mucho más en una tabla con unos pocos clics. Si está buscando categorizar sus publicaciones o productos, la integración de Ninja Tables WP Posts puede minimizar significativamente su trabajo.

Integración WooCommerce

WooCommerce es el complemento de tienda de WordPress más popular. Sin embargo, una gran cantidad de personas que usan WooCommerce también significa que muchas de ellas ofrecen la misma experiencia de usuario. Ninja Tables con la integración de WooCommerce es un complemento legendario que puede ofrecer diversidad en su sitio y efectividad en su backend. ¡Aumenta las tasas de conversión al tiempo que permite la administración de la tienda WooCommerce más sencilla! Ninja Tables es justo lo que necesita para administrar su tienda WooCommerce.

Integración con Hojas de cálculo de Google

¡Es increíble lo que Ninja Tables tiene escondido bajo la manga! Eso es lo que estás pensando, ¿verdad?

Quizás, Google Sheets se encuentra entre las mejores opciones de integración que cualquier complemento de WordPress puede ofrecer. Google Sheet es la hoja de cálculo en línea más popular con las funcionalidades más simples. La aplicación web tiene características absolutamente de clase mundial y, lo que es más importante, ¡es accesible desde cualquier dispositivo!

Ninja Tables puede conectarse con cualquier hoja de Google y mostrar sus datos en su sitio web a medida que se actualiza la hoja. Entonces, si necesita actualizar sus tablas sobre la marcha, ¡la integración de hojas de Google de Ninja Tables es una clase magistral absoluta!

Integración de Gráficos Ninja

Las tablas funcionan con datos. Dependemos de las tablas de WordPress porque nos muestran datos estadísticos. Sin embargo, a veces necesitamos ser un poco creativos y descubrir formas gráficas de mostrarlos. La integración de Ninja Charts es la solución perfecta para producir una presentación visual de datos de tablas. ¿Quieres ver lo que puedes hacer con él? ¡Mira el vídeo!

Terminando

¡Con Ninja Tables, las dificultades de crear tablas HTML avanzadas en WordPress finalmente llegan a su fin! Es la solución integral para todos los usuarios de WordPress que necesitan mostrar hermosas tablas de datos mientras se deshacen de los códigos HTML.

Por lo tanto, cree tablas, aumente el compromiso, mejore la conversión y haga más que crear tablas con Ninja Tables.

Eso es todo por hoy. Te deseo lo mejor.

Coautor: Nusrat Fariha

Nusrat es un escritor de contenido creativo en WPManageNinja a quien le encanta trabajar en diversos temas. Y cuando no está escribiendo, ¡probablemente esté leyendo sus libros favoritos!