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

Tutorial del complemento TablePress para usuarios de WordPress

219

En nuestro artículo anterior, hemos visto cómo agregar tablas en el sitio de WordPress utilizando diferentes métodos. El editor de bloques de Gutenberg tiene un bloque de tabla incorporado que hace que el uso del complemento de adición sea obsoleto. Sin embargo, TablePress es uno de los complementos que permite a los usuarios agregar fácilmente tablas atractivas en el sitio de WordPress. En este artículo, exploremos las características y cómo usar el complemento TablePress.

Aprenda WordPress: consulte más de 400 tutoriales gratuitos de WordPress.

¿Por qué TablePress Plugin?

Vaya a la opción "Complementos> Agregar nuevo" en el panel de administración de WordPress y busque la palabra clave "Tabla". Encontrará miles de complementos para crear diferentes tipos de tablas y la búsqueda de "tablepress" mostrará el complemento TablePress en la primera página.

Tutorial del complemento TablePress para usuarios de WordPress

Complemento de WordPress TablePress

  • Es un complemento gratuito completo del autor Tobias Bäthge. Aunque las extensiones se ofrecen como complementos premium separados, no hay banners o enlaces intrusivos que le soliciten que actualice desde el panel de control.
  • Más de 800.000 instalaciones activas con una calificación de 5 estrellas de casi usuarios de 4K no pueden ser un juicio equivocado.
  • Documentación decente y muy buen apoyo en el foro.
  • Cree tablas de apariencia uniforme a través del sitio y también personalice el aspecto de cualquier tabla en particular utilizando CSS personalizado.

Características del complemento TablePress

El complemento tiene las siguientes características que son suficientes para crear tablas para la mayoría de los propósitos generales:

  • Las tablas se pueden crear e incrustar en cualquier página de su sitio como un código corto.
  • Importe tablas de Microsoft Excel en formatos XLS, XLSX y CSV. También es posible importar mediante copiar y pegar manualmente y desde formato JSON / HTML.
  • Las tablas se pueden exportar en formatos CSV, JSON y HTML.
  • Inserción directa de shortcode de tabla en el editor visual.
  • Las tablas individuales se pueden personalizar con CSS personalizado.
  • Se pueden crear fácilmente tablas de datos complejas con cuadro de búsqueda, paginación y filtrado.

¿Cómo usar el complemento TablePress?

Instale y active el complemento para ver un menú de administración creado como se muestra a continuación:

Tutorial del complemento TablePress para usuarios de WordPress

Opciones del menú del complemento TablePress

La posición del menú TablePress se puede modificar en la sección "Opciones de complemento".

El complemento tiene las siguientes secciones:

  • Todas las tablas: muestra la lista de todas las tablas creadas.
  • Agregar nuevo: permite crear una nueva tabla.
  • Importar: ofrece varias opciones para importar tablas únicas y múltiples.
  • Exportar: ofrece varias opciones para exportar tablas únicas y múltiples.
  • Opción de complemento: las tablas individuales se pueden personalizar con CSS en esta sección.
  • Acerca de: muestra los detalles sobre el complemento y otros detalles.

Tutorial del complemento TablePress para usuarios de WordPress

Opciones del complemento de WordPress TablePress

Crear tabla en TablePress

Vaya a la pestaña "Agregar nuevo", donde puede ingresar detalles básicos como el nombre de la tabla, una descripción breve y elegir el número de columnas y filas para crear una tabla.

Tutorial del complemento TablePress para usuarios de WordPress

Agregar nueva tabla en TablePress

La siguiente pantalla le mostrará muchas opciones en múltiples secciones. Puede familiarizarse fácilmente con estas opciones creando una o dos tablas de muestra.

Oferta de SEO: Optimice su sitio con la prueba gratuita especial de 14 días de Semrush Pro.

Sección de información de la tabla

Aquí puede ver los detalles básicos que ingresó en la pantalla de creación junto con el código corto para su tabla.

Tutorial del complemento TablePress para usuarios de WordPress

Sección de información de la tabla

Contenido de la tabla

Aquí es donde debe ingresar el contenido real de su tabla en filas y columnas; la primera fila se considera por defecto como un encabezado de tabla que puede cambiar en la sección "Opciones de tabla".

Tutorial del complemento TablePress para usuarios de WordPress

Sección de contenido de la tabla

Manipulación de mesa

Esta sección ofrece las siguientes características:

  • Agrega filas y columnas a tu tabla.
  • Ocultar, mostrar, eliminar, duplicar e insertar filas y columnas.

Tutorial del complemento TablePress para usuarios de WordPress

Sección de manipulación de tablas

  • Haga clic en el botón "Insertar enlace" y elija la celda de la tabla para abrir la ventana emergente de enlace de inserción de WordPress predeterminada. También puede agregar enlaces directamente utilizando etiquetas de anclaje HTML.
  • Similar a los enlaces, haga clic en "Insertar imagen" y haga clic en la celda para insertar imágenes de la biblioteca de medios de WordPress. También puede agregar imágenes directamente usando la etiqueta HTML img.
  • El editor avanzado le permite agregar contenido formateado usando un editor simple.

Tutorial del complemento TablePress para usuarios de WordPress

Editor avanzado de TablePress

  • Utilice las opciones de intervalo de filas y intervalo de columnas para combinar celdas en una fila y columnas.

Los atributos Rowspan y Colspan no se pueden usar en tablas de datos avanzadas usando la biblioteca JavaScript para ordenar.

Opciones de tabla

Aquí puede definir el encabezado, pie de página, diferentes colores para filas alternas y resaltar la fila al pasar el mouse. También puede mostrar el nombre y la descripción de la tabla arriba o debajo de la tabla.

Tutorial del complemento TablePress para usuarios de WordPress

Opciones de tabla de TablePress

Agregue clases CSS adicionales para personalizar la apariencia de la tabla, debe usar estas clases CSS a nivel de tema y definir estilos.

Características de la biblioteca JavaScript DataTables

Cuando haya habilitado la primera fila de la tabla como encabezado en la sección "Opciones de tabla", entonces la tabla se puede convertir en una tabla de datos habilitando las funciones en esta sección.

Tutorial del complemento TablePress para usuarios de WordPress

Creación de tablas de datos con TablePress

  • Clasificación basada en cualquiera de las columnas simplemente haciendo clic en la columna.
  • Búsqueda / filtrado: permite mostrar un cuadro de búsqueda en la esquina superior derecha de la tabla y los usuarios pueden filtrar los resultados ingresando una palabra clave. Esta es una característica muy útil, especialmente cuando tiene muchas filas y el contenido no es visible debido a la paginación.
  • Paginación: habilite la paginación para mostrar solo filas particulares con enlaces de paginación "anterior / siguiente" en la esquina inferior derecha de la tabla. También puede permitir que el usuario filtre y vea un número particular de filas.
  • Habilite el desplazamiento horizontal si tiene muchas columnas en la tabla y agregue comandos personalizados si sabe cómo usar tablas de datos avanzadas.

Una vez que haya completado las opciones, obtenga una vista previa de la tabla y guarde los cambios. También puede eliminar, copiar y exportar la tabla desde la misma pantalla.

Insertar tabla en una publicación o página

Cada tabla en TablePress tendrá una identificación única que se puede ver en la sección "Información de la tabla". Puede usar esto como un código corto en el editor de Gutenberg o insertar el código de la tabla en el editor clásico usando el icono de TablePress.

Ver todas las tablas

Todas las tablas creadas con TablePress se pueden ver en el menú "TablePress> Todas las tablas". Puede realizar acciones como copiar, exportar y eliminar tanto en tablas individuales como de forma masiva.

Tutorial del complemento TablePress para usuarios de WordPress

Opciones en la pestaña Todas las tablas

Importación de tablas

Aunque crear una tabla es fácil en la pantalla, será una tarea tediosa para tablas grandes. En tales escenarios, puede crear tablas utilizando una hoja de cálculo de Excel en formato XLS, XLSX o CSV e importarlas en su sitio de WordPress en la pestaña "Importar" del complemento TablePress. Vaya a la pestaña "Importar" para ver las siguientes opciones:

Tutorial del complemento TablePress para usuarios de WordPress

Importar opciones de tabla en TablePress

  • La fuente de importación puede ser desde un archivo en su computadora local, desde una URL, desde un archivo en un servidor o una entrada manual.
  • Según la fuente, cargue el archivo desde su computadora local o proporcione los detalles requeridos.
  • Elija el formato de archivo, si está utilizando XLSX, elija la opción "XLSX -" del menú desplegable. Aunque XLSX sigue siendo una opción beta, funciona perfectamente como lo probamos.
  • Elija si desea crear una nueva tabla o modificar o agregar una tabla existente. Al elegir las opciones reemplazar y agregar, se mostrará una lista desplegable de todas las tablas existentes de las que puede seleccionar una tabla.
  • Haga clic en el botón "Importar" para comenzar a importar la tabla.

El complemento permite importar varias tablas como un archivo zip. Por ejemplo, si tiene cinco tablas de hojas de cálculo XLSX, coloque todos los archivos en una sola carpeta y comprímalos en formato zip. Simplemente cargue el archivo zip para crear cinco tablas.

Exportación de tablas

De manera similar a la importación, todas las tablas existentes se pueden exportar a formato CSV, JSON o HTML a su computadora local. Además, el complemento permite seleccionar varias tablas y exportarlas como un archivo zip.

Tutorial del complemento TablePress para usuarios de WordPress

Exportación de tablas en TablePress

Los formatos CSV y HTML solo exportan el contenido de la tabla y el formato JSON también incluye las opciones de la tabla.

Personalización de tablas en TablePress

Hasta ahora, lo que hemos visto son las opciones predeterminadas y en la pestaña "Opciones de complementos" puede ingresar CSS personalizado para controlar todas las tablas de manera uniforme o controlar la visualización de tablas individuales.

Tutorial del complemento TablePress para usuarios de WordPress

Agregar CSS personalizado en TablePress

A continuación se muestran los selectores para definir su estilo:

  • .tablepress: todas las tablas de TablePress deben tener esta clase.
  • .tablepress-id: se utiliza para diseñar una tabla específica.
  • .column-id: se utiliza para diseñar la columna de una tabla.
  • .row-id: se utiliza para diseñar la fila de una tabla.

A continuación se muestra una tabla de ejemplo creada con TablePress, supongamos que la identificación es 3 y algunos de los estilos de personalización se dan en base a este ejemplo:

A continuación, el código CSS debe agregarse en el área de texto en "Opciones de complemento> CSS personalizado" y asegúrese de marcar la opción "Cargar estos comandos de" CSS personalizado "para influir en el estilo de la tabla".

Cambie el ancho de la segunda columna a 200px:

.tablepress-id-3 .column-2 { width: 200px; }

Cambie el color de fondo de la fila 2 a rojo:

.tablepress-id-3 .row-2 td { Background-color: red; }

Cambiar el color de las filas alternativas:

.tablepress-id-3 .odd td { background-color: red; } .tablepress-id-3 .even td { background-color: blue; }

Cambiar el color de la fila al pasar el mouse:

.tablepress-id-3 .row-hover tr:hover td { background-color lightgrey; }

Asuntos Generales

Hay algunos problemas básicos que notamos al usar TablePress:

  • Capacidad de respuesta de las tablas en dispositivos móviles que se puede resolver instalando la extensión del complemento.
  • Insertar tablas en el pie de página o en la barra lateral del sitio: esto se puede solucionar utilizando etiquetas de plantilla con "$ query" como cadena o matriz. Por ejemplo, a continuación se muestra un ejemplo para obtener los datos de la tabla para el id = 1 de la tabla:
<?php tablepress_print_table( array( 'id' => '1', 'use_datatables' => true, 'print_name' => false) ); ?>

Si tiene algún otro problema específico en su sitio, consulte el foro para ver si se trata y consulte la documentación antes de realizar la consulta de soporte. Notamos que la mayoría de los problemas se han abordado en uno de estos lugares.

Nota: No se admite la inserción de etiquetas HTML en las celdas de la tabla, aunque puede usar una etiqueta de imagen, una etiqueta de enlace, usar un editor avanzado y una extensión para agregar enlaces.

Extensiones de TablePress

Aunque las necesidades básicas pueden satisfacerse con la versión gratuita del complemento, puede descargar extensiones adicionales desde la página de extensiones de TablePress para mejorar las funciones de las tablas. Nuevamente, como contribución a la comunidad, el autor ofrece todas las extensiones de forma gratuita y nombra algunas como premium con una solicitud de donación. De todas las extensiones, encontramos que las " Tablas adaptables " es la que puede necesitar para que la tabla sea visible en dispositivos móviles. Cada extensión se puede descargar e instalar cargando el archivo zip a través de su panel de administración de WordPress en "Complementos> Agregar nuevo> Cargar complemento". También puede usar FTP para cargar la carpeta del complemento extraído en “/ wp-content / plugins /".

A continuación se muestra una tabla de ejemplo creada con estilo flip utilizando la extensión de tablas receptivas.

Tutorial del complemento TablePress para usuarios de WordPress

Mesa giratoria receptiva

TablePress SEO

El aspecto más importante de la creación de tablas con el complemento TablePress es el SEO: las tablas son más compatibles con los motores de búsqueda, especialmente en Google. A continuación, se muestra un ejemplo de un resultado de búsqueda de Google que muestra el contenido de la tabla de una manera más atractiva con el número total de elementos:

Tutorial del complemento TablePress para usuarios de WordPress

TablePress Table en los resultados de búsqueda de Google

Google muestra el resultado con una tabla si su página obtiene suficiente tráfico para las palabras clave dentro del contenido de la tabla. Aunque no se muestra la meta descripción de la página, notamos que la vista de tabla atrae a más usuarios que el texto simple.

Resumen

TablePress es el complemento gratuito de WordPress para crear tablas para su sitio. Puede insertar las tablas en cualquier lugar del sitio usando shortcode. Es posible hacer que las tablas respondan con complementos.

Pros

  • Actualizaciones periódicas y gratuitas
  • Interfaz de usuario sencilla
  • Tablas de datos avanzadas
  • Responsive en móviles

Contras

  • La carga de tablas requiere muchos recursos
  • Sin optimización del rendimiento para cargar CSS / JS solo en páginas con tablas
  • Sin plantillas

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