jueves, marzo 28, 2024
No menu items!
InicioBlogsCómo agregar tablas responsivas móviles en WordPress

Cómo agregar tablas responsivas móviles en WordPress

Cómo agregar tablas responsivas móviles en WordPress

Imagen oculta de Pinterest

Las mesas son cosas poderosas. Si realiza una búsqueda en Internet, encontrará todo tipo de historias de personas que básicamente automatizan todo su trabajo utilizando Excel y tablas. Dicho esto… las tablas tienen el potencial de hacer cosas interesantes para su sitio web.

Pero WordPress todavía necesita integrar Excel en el núcleo…Entonces, ¿cómo puedes aprovechar el poder de las tablas para tu sitio de WordPress?? Con un complemento llamado wpDataTables.

Puede ayudarle a crear todo tipo de tablas para su sitio de WordPress. Puede crear tablas desde cero utilizando el generador similar a Excel del complemento, o puede importar tablas directamente desde Excel o Google Sheets con solo un par de clics.

Luego, podrá ver, manipular y filtrar esas tablas de muchas maneras interesantes.

En este post haré dos cosas:

  • Proporcione un tutorial detallado para crear una tabla de comparación de productos filtrable con wpDataTables. Aunque esto no es en absoluto el solo caso de uso, es uno de los más populares.
  • Le contaré más sobre la funcionalidad del complemento y algunos de estos otros casos de uso.

Al final, deberías saber no sólo cómo wpDataTables puede ayudar a tu sitio, sino también cómo crear tus propias tablas de datos filtrables.

Características de wpDataTables: por qué es la herramienta para este trabajo

Vamos a empezar desde el principio:

Introduciendo tus datos.

Sin datos en las tablas, no son muy útiles, ¿verdad? wpDataTables le permite importar datos de dos maneras:

  • Desde un enlace (Google Sheets) o cargando un archivo (JSON, CSV, Excel, etc.)
  • A través de un generador de tablas en el panel donde ingresa datos en una interfaz similar a Excel

También puede cargar un archivo como base para su tabla y luego editarlo en su panel de WordPress.

Una vez cargada la tabla, puede mostrarla en la interfaz usando un código corto simple. Sus tablas responden (a menos que estén deshabilitadas), por lo que siempre se verán geniales.

E incluso puede agregar opciones de filtrado detalladas para que sus lectores puedan profundizar solo en la información que necesitan. Este filtrado es especialmente importante porque wpDataTables está diseñado para poder manejar tablas enormes con millones de filas.

Puede diseñar sus tablas utilizando la configuración de fuente y color incorporada del complemento o mediante CSS personalizado que se puede agregar fácilmente dentro de la interfaz del complemento.

Y si desea manipular sus datos, puede crear fácilmente una variedad de gráficos basados ​​en sus tablas. Incluso puedes ir más allá y crear informes detallados en Word o Excel basados ​​en los datos de tus tablas. (aunque esto requiere un complemento premium).

🔥 Leer:  Este es el nuevo aire acondicionado portátil de Sony que puede caber en su bolsillo

¡Sin embargo, son muchas características abstractas! Entonces, pongámonos manos a la obra para que pueda ver cómo funcionan estas funciones en el mundo real.

Paso a paso: crear una tabla comparativa de productos filtrables

Ok, entremos en el tutorial prometido. Así es exactamente cómo puede usar wpDataTables para crear una tabla de comparación de productos filtrable en WordPress. Como dije, esto no es en absoluto el solo caso de uso para wpDataTables. Pero definitivamente es un uso popular del complemento.

Si ejecuta algún tipo de sitio afiliado, una tabla de comparación de productos le permite ayudar a sus lectores a encontrar el mejor producto para ellos (¡lo que significa una tasa de conversión más alta y más dinero en tu bolsillo!).

Pero antes de empezar, debemos comparar algunos productos, ¿verdad? Entonces, ¿qué deberíamos considerar? Recientemente compré un par de auriculares con cancelación de ruido, por lo que este parece un buen ejemplo concreto de uso.

Podemos utilizar la tabla comparativa de productos para:

  • Lista el precio
  • Especificar el tipo de cancelación de ruido.
  • Lista la marca
  • Agrega un Cómpralo aquí conexión

Por supuesto, cuando utiliza el complemento, puede utilizar sus propios criterios para comparar productos. Aquí solo estamos hablando de ejemplos.

Vamos a empezar…

Paso 1: Instalar y activar wpDataTables

Como suele ser el caso con los complementos de WordPress, el primer paso es instalar y activar wpDataTables. Una vez hecho esto, no hay nada que realmente necesites configurar. en este momento.

Volveremos a algunas opciones de estilo opcionales más adelante. Pero por ahora puedes pasar directamente a crear la tabla comparativa de productos.

Paso 2: importar datos y configurar opciones básicas

Ahora que tiene el complemento instalado, puede crear su primera tabla yendo a wpDataTables → Agregar nuevo:

wpDataTables Agregar nuevo

A continuación, debes elegir qué tipo de mesa quieres. Tienes varias opciones, pero las más relevantes para nuestros propósitos son:

  • Una tabla vinculada a una fuente existente
  • Crear una tabla manualmente
  • Importar de otra fuente

Me gusta usar Google Sheets, así que para este ejemplo importaré una tabla desde allí y luego la editaré según sea necesario usando la interfaz de edición de WPDataTable.

Interfaz de edición

A continuación, puede verificar las columnas de importación (suponiendo que eligió importar la tabla):

Importar columnas

Una vez que se haya asegurado de que todo esté correcto, puede continuar con la siguiente pantalla.

Allí podrá configurar algunos ajustes básicos en la parte superior de la tabla si es necesario. Estas configuraciones se refieren a:

  • Detalles básicos de visualización (como si mostrar o no el título)
  • Diseño de respuesta
  • Clasificación y filtrado globales

Hablaré de algunas de estas configuraciones en un segundo. Pero por ahora eres libre de simplemente golpear Ahorrar y obtenga el código corto:

Obtenga el código corto

Paso 3: agregue el código corto donde desea que aparezca la tabla

¡Y esto es todo! Dispones de una tabla comparativa de productos filtrable. Para mostrarlo en la interfaz, todo lo que necesita hacer es tomar el código corto de arriba y agregarlo a la publicación o página donde desea mostrar la tabla.

🔥 Leer:  Cómo reiniciar la impresora Epson L120 sin el software más reciente

Luego, en la parte frontal, deberías ver tu tabla:

Mi tabla comparativa de auriculares

¡Frío! Está allá. Pero aún no has terminado. Verás, en este punto, literalmente cualquier cosa es filtrable. Esto tiene sentido para las primeras cuatro columnas de nuestro ejemplo, pero es un poco extraño crear el archivo Enlace de compra columna filtrable.

Así que… ¡arreglémoslo!

Paso 4: editar columnas de tabla individuales

Regresa a wpDataTables interfaz para su mesa.

Entonces, si te desplazas hacia abajo, deberías ver el archivo. Vista previa de tabla y configuración de columnas área.

Además de permitirle agregar nuevas entradas o editar las existentes, esta interfaz también le permite personalizar el funcionamiento de cada columna haciendo clic en Engranaje icono para cada columna:

Haga clic en Engranaje

Para eliminar el filtrado en Enlace de compra columna, solo necesita hacer clic en el ícono de ajustes, ir a la columna Filtración pestaña y deshabilítela:

Filtración

También puedes desactivar la clasificación del archivo. Clasificación forma.

¡Y eso resolvió el gran problema! Pero hagamos nuestra propia tabla de ejemplo. aun mejor.

En este momento, para filtrar nuestra tabla, los usuarios necesitan ingresar su término de búsqueda en el filtro de cada columna. Si bien funciona… no es muy fácil de usar.

Por eso, les facilitamos las cosas permitiéndoles:

  • Elija su marca en un menú desplegable
  • Elija el tipo de eliminación en un menú desplegable
  • Seleccione diferentes rangos de precios

Para resolver los dos primeros simplemente cambia el archivo. Tipo de filtro A Seleccionar cuadro:

Clasificación

Y para solucionar el tercero, cambia el archivo. Precio columna Tipo de filtro A Rango de números:

rango de números

Ponlo todo junto y obtendrás algo como esto en la parte frontal:

Vista frontal

Ahora, los visitantes pueden elegir en los menús desplegables e ingresar su rango de precios para aprovechar al máximo el filtro.

Nota: Si se pregunta cómo sería agregar filtros adicionales, aquí tiene un vistazo a la opción “Filtro en formulario” que puede habilitar desde arriba. Ordenar y filtrar forma:

Ordenar y filtrar

Otra cosa interesante que puedes hacer en Pantalla La pestaña de configuración de cada columna le permite agregar clases CSS personalizadas a cada columna. Esto es especialmente útil si desea agregar, por ejemplo, un estilo personalizado solo al archivo. Enlace de compra columna para crear un botón o llamar la atención de otra manera.

También puede agregar formato condicional, lo que le permite ser creativo y, por ejemplo, resaltar diferentes elementos según criterios específicos.

Paso 5: cambia colores y fuentes (opcional)

¿Recuerdas cómo pasé por alto la configuración predeterminada de wpDataTable? Aquí es donde pueden resultar útiles.

Si no está satisfecho con el aspecto predeterminado de su tabla, puede continuar y cambiar los colores y fuentes yendo a wpDataTables → Configuración → Configuración de color y fuente:

Configuración de color y fuente

Paso 6: crea un gráfico (opcional)

Otra característica interesante que quizás quieras incorporar o no a tus tablas de comparación de productos son los cuadros y gráficos personalizados. Si bien el ejemplo de los auriculares con cancelación de ruido no aporta muchos beneficios muchoCiertamente puedo pensar en ocasiones en las que un gráfico sería útil.

🔥 Leer:  God of War Ragnarok Todos los actores de voz

wpDataTables facilita la creación de un gráfico a partir de su tabla existente. Todo lo que tienes que hacer es ir al Crear un gráfico en la barra lateral del tablero. Luego, asígnale un nombre y elige el motor de renderizado y el tipo de gráfico:

Crear un gráfico

En la página siguiente, elija la tabla en la que desea basar el gráfico:

Fuente de datos wpDataTables

Luego, agregue algunas columnas para usar en el gráfico. Para esto, usaré una combinación de Número de modelo Y Precio (debe elegir al menos dos columnas para que el gráfico funcione):

Elige columnas

En la siguiente pantalla, obtendrá una vista previa en vivo, así como la posibilidad de agregar algunos formatos:

Agregar formato

Luego, solo necesita guardar el gráfico y tomar el código corto para mostrarlo en la interfaz. Combine esto con la tabla de comparación de productos filtrable y podrá brindarles a sus lectores una descripción detallada de todos los productos que está comparando.

Otros usos de wpDataTables

Ok, he pasado la mayor parte de este artículo mostrándote cómo crear una tabla de comparación de productos filtrable usando wpDataTables. Pero este no es el único uso de este complemento.

Dado que permite una variedad de formatos de campo y estilos CSS personalizados, puedes usarlo para todo tipo de cosas como:

  • Crear un horario para su equipo deportivo, banda o cualquier otra cosa que requiera enumerar los horarios y ubicaciones de los eventos.
  • Crear una tabla de precios para mostrar información del producto.
  • Lista de apartamentos disponibles
  • Ver una lista filtrable de tiendas/ubicaciones minoristas
  • Crear un catálogo ordenable de todos sus productos

De verdad… si puedes hacerlo con una tabla, puedes hacerlo con wpDataTables. Hay toneladas de usos creativos que puedes idear por tu cuenta.

Por ejemplo, utilizo una tabla en uno de mis sitios para ayudar a las personas a comprender el costo de vida en Vietnam. Es esencialmente una base de datos de precios de bienes comunes. Los lectores pueden filtrar por tipo, nombre en inglés, etc.

Dicho esto, las tablas abren toneladas de funcionalidades para su sitio de WordPress. Agregue el hecho de que wpDataTables le permite ordenar, filtrar y buscar tablas en una variedad de formas útiles, y puede usar el complemento para todo tipo de cosas.

Resumiendo las cosas

En este punto debes saber:

  • Cómo crear una tabla comparativa de productos filtrable en WordPress
  • Por qué wpDataTables es una gran herramienta para este trabajo
  • Algunas otras formas interesantes de utilizar tablas para mejorar su sitio de WordPress

¡Ahora sal, crea tu primera tabla y comienza a usar el poder de los datos y las tablas para crear un sitio web de WordPress más funcional!

Recomendamos

Populares