TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear tablas receptivas en WordPress?

12

El nuevo editor de Gutenberg tiene un hermoso bloque de tablas para insertar tablas en su sitio de WordPress. La tabla se verá hermosa en su sitio, también tiene opciones para proporcionar colores alternativos (rayas) a las filas y cambiar la configuración para reducir las columnas al modo de ajuste. Sin embargo, el mayor problema es que las tablas no responden en los dispositivos móviles. El ancho del dispositivo móvil puede ajustarse a un máximo de tres o cuatro columnas, según el contenido de la tabla. Cuando tenga más columnas, el navegador truncará la visualización al ancho del contenedor. Llevará a la situación de que los usuarios no tengan forma de ver el contenido oculto de sus tablas. Por lo tanto, el bloque de tablas de Gutenberg es inútil cuando desea tener tablas receptivas en su sitio.

Hay muchos complementos gratuitos y de pago para crear tablas receptivas en el sitio de WordPress. Nuestro complemento favorito es TablePress y explicaremos cómo crear tablas receptivas en WordPress con el complemento TablePress.

¿Por qué TablePress?

  • TablesPress es uno de los complementos más populares para crear tablas en WordPress.
  • El desarrollador ofrece una interfaz fácil de usar y mantiene la tabla continuamente.
  • Puede encontrar una buena documentación para usar el complemento.
  • Lo más importante es que el complemento es gratuito. Incluso puede descargar las extensiones gratis aunque el desarrollador solicite una donación. Esto contrasta mucho con muchos desarrolladores codiciosos que convierten las funciones gratuitas en la versión de pago cuando el complemento se vuelve popular.

Instalación de TablePress y complementos

Puede instalar y activar el complemento TablePress desde su panel de administración de WordPress de manera similar a cualquier otro complemento. Sin embargo, las tablas TablePress predeterminadas no responden de manera similar a las tablas de Gutenberg. Necesita instalar una extensión para que las tablas respondan.

  • Vaya a la página de extensión adaptable de TablePress.
  • Descargue el archivo zip de la extensión Responsive Tables
  • Como se mencionó, el desarrollador solicita $ 9 como donación para esta extensión. Recomendamos encarecidamente donar $ 9 si planea utilizar el complemento como recurso principal en su sitio.
  • Vuelve a tu panel de administración de WordPress y navega a la sección "Complementos> Agregar nuevo".
  • Haga clic en el botón "Cargar complemento". Haga clic en el botón "Elegir archivo" y seleccione el archivo "tablepress-responsive-tables.zip" que ha descargado antes.
  • Finalmente, haga clic en el botón "Instalar ahora" para comenzar a instalar la extensión en su sitio.
  • Active la extensión, después de una instalación exitosa.

¿Cómo crear tablas receptivas en WordPress?

Recuerde instalar y activar primero el complemento TablesPress antes de intentar instalar la extensión de tablas receptivas.

Creando una tabla

TablePress ofrece diferentes formas de crear una tabla; puede consultar la función de complemento en nuestro artículo anterior sobre cómo crear una tabla con TablePress. A continuación se muestra el resumen de los pasos para crear una tabla en TablePress:

  • Vaya al menú "Herramientas> TablePress> Agregar nuevo" y comience a crear una tabla y personalice las opciones.
  • Alternativamente, vaya a la pestaña "Importar" e importe una tabla desde una fuente de datos externa. Por ejemplo, puede simplemente cargar los datos de su hoja de Excel para crear una tabla.

¿Cómo crear tablas receptivas en WordPress?

Después de crear su tabla, guarde sus cambios y anote el código corto de la identificación de la tabla .

Insertar código corto de tabla

La interfaz del editor clásico tenía un icono de TablePress que le ayuda a elegir la tabla en el editor de publicaciones. Sin embargo, no tiene ningún bloque TablePress en el editor de Gutenberg. Por lo tanto, debe incrustar manualmente el código corto de la tabla en su publicación o página utilizando el bloque de código corto.

Las tablas de TablePress tendrán el código abreviado de id de tabla en el formato id de tabla = xxx / entre corchetes. Agregue un bloque de código corto e inserte el código corto de su ID de tabla como lo ha anotado antes.

Hacer que las tablas sean receptivas

TablePress ofrece tres formas diferentes de crear tablas receptivas.

  • Desplazarse
  • Voltear
  • Colapso

Dado que usamos el complemento TablePress, analicemos cada opción con una tabla de ejemplo.

Tabla de desplazamiento receptiva

Esta es la mejor opción para hacer que su tabla responda cuando la tabla tiene muchas columnas. Simplemente agregará una barra de desplazamiento horizontal para que los usuarios puedan deslizar y ver el contenido fuera de la pantalla. A continuación, se muestra un ejemplo de cómo se verá una tabla de desplazamiento receptiva.

Tabla de contracción receptiva

La segunda opción es tener una tabla de contracción receptiva. Como su nombre lo indica, agregará un ícono + en las filas para que los usuarios puedan tocar / hacer clic para ver más detalles. La extensión del complemento moverá el contenido de la tabla oculta debajo del icono de mostrar / ocultar. Esto es muy útil para mostrar algunas columnas importantes y ocultar los datos restantes debajo del botón +.

Mesa giratoria receptiva

La última opción es voltear, similar a transponer en Microsoft Excel. Esto convertirá la fila en columnas y las columnas en filas. Puede utilizar la mesa giratoria, si se adapta al contenido de su mesa. A continuación se muestra un ejemplo de tabla giratoria receptiva creada con el complemento TablePress.

Nombre Asunto 1 Asunto 2 Asunto 3 Asunto 4 Asunto 5 Asunto 6 Asunto 7 Sujeto 8 Asunto 9 Asunto 10 Sujeto 11 Asunto 12 Asunto 13
John 50 60 70 45 68 98 78 54 21 23 43 76 87
Pablo 89 sesenta y cinco 45 12 32 56 78 89 catorce 56 98 56 45
David 98 84 sesenta y cinco 89 12 45 98 sesenta y cinco 32 12 45 43 75
Ralf sesenta y cinco 56 23 45 78 54 sesenta y cinco 21 35 64 90 78 34
Krauss 15 56 48 98 sesenta y cinco 45 78 23 56 45 87 56 98
Pedro 45 89 98 51 sesenta y cinco sesenta y cinco 67 43 23 76 45 34 87
Bing 67 54 89 76 90 56 76 80 98 56 98 76 54

Relacionado: Revisión receptiva del complemento de WordPress flipbook.

Habilitación de Flip Responsive Tables en dispositivos específicos

Normalmente, puede utilizar una tabla receptiva dirigida a los usuarios de dispositivos móviles. En este caso, es suficiente cambiar el código abreviado de la tabla para incluir el modo de respuesta. Para probar las tablas, debe ver las tablas en un dispositivo móvil o usar la opción de alternancia de dispositivo en la sección de herramientas de desarrollador en sus navegadores Chrome / Firefox / Edge. Si usa Safari en Mac, habilite el menú de desarrollo para ingresar en un modo de respuesta.

Sin embargo, cuando tiene tablas más grandes con muchas columnas, es posible que deba tener una tabla receptiva incluso en una computadora de escritorio o tabletas. La extensión del complemento simplifica esta tarea al agregar un punto de ruptura para la tabla receptiva. Los modos de desplazamiento y contracción funcionarán en todos los dispositivos sin agregar ningún punto de interrupción. Para el modo flip, cambie el código corto como se muestra a continuación para que la tabla responda en diferentes dispositivos. (asegúrese de encerrar los códigos cortos entre corchetes []).

  • id de la tabla = 123 responisve = flip responsive_breakpoint = desktop /
  • id de la tabla = 123 responisve = flip responsive_breakpoint = tablet /
  • id de la tabla = 123 responisve = flip responsive_breakpoint = mobile /
  • id de la tabla = 123 responisve = flip responsive_breakpoint = all /

Aquí están las dimensiones exactas de los puntos de interrupción:

  • Computadora de escritorio: dispositivos con un ancho inferior a 1200 px
  • Tableta: dispositivos con un ancho inferior a 980 px
  • Teléfono: dispositivos con un ancho inferior a 768 px
  • Todo: agregue capacidad de respuesta en todos los dispositivos, independientemente de la dimensión del dispositivo.

Precaución con la velocidad de la página

Como puede ver, es fácil insertar diferentes tipos de tablas receptivas en todos los dispositivos. El problema que hemos notado con la extensión es que agregará un archivo CSS adicional para el modo flip. La mayoría de los complementos de almacenamiento en caché excluyen esta hoja de estilo sin combinarse con otros archivos CSS, por lo que crean una advertencia en Google PageSpeed ​​Insights. Además, el complemento también cargará los estilos y scripts en todas las páginas de su sitio, independientemente de si la página tiene tabla o no. Si solo tiene unas pocas tablas, no recomendamos usar el complemento TablePress para mejorar la velocidad de su página.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More