Estás leyendo la publicación: Cómo agregar tablas de respuesta móvil en WordPress
Las tablas son cosas poderosas. Si busca en Internet, encontrará todo tipo de historias de personas que básicamente automatizan todo su trabajo utilizando Excel y tablas. Es decir… las tablas tienen el potencial de hacer algunas cosas ingeniosas para su sitio web.
Pero WordPress todavía tiene que construir Excel en el núcleo…Entonces, ¿cómo puede aprovechar el poder de las tablas para su sitio de WordPress?? Con un complemento llamado wpDataTables.
Puede ayudarlo 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 Hojas de cálculo de Google con solo un par de clics.
Luego, puede mostrar, manipular y filtrar esas tablas de muchas maneras geniales.
En este post voy a hacer dos cosas:
- Brindarle un tutorial detallado para crear una tabla de comparación de productos filtrable con wpDataTables. Si bien este no es el caso de uso, es uno de los más populares.
- Darle más información sobre las características del complemento, así como algunos de esos otros casos de uso.
Al final, debe saber no solo cómo wpDataTables puede ayudar a su sitio, sino también cómo puede crear sus propias tablas de datos filtrables.
Características de wpDataTables: por qué es la herramienta para el trabajo
Empecemos desde el principio:
Ingresando tus datos.
Sin datos en sus tablas, no son muy útiles, ¿verdad? wpDataTables le permite traer datos de dos maneras:
- Desde un enlace (Hojas de cálculo de Google) o la carga de un archivo (JSON, CSV, Excel, etc.)
- A través de un constructor de tablas en el tablero donde ingresa datos en una interfaz similar a Excel
También puede cargar un archivo como base para su tabla y luego editarlo más dentro de su tablero de WordPress.
Una vez que cargue su tabla, puede mostrarla en el front-end usando un código abreviado simple. Sus tablas son receptivas (a menos que estén deshabilitadas), por lo que siempre se verán geniales.
Y también puede agregar opciones de filtrado detalladas para que sus lectores puedan profundizar 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 integrada del complemento o mediante CSS personalizado que se agrega 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 puede ir más allá y crear informes detallados de Word o Excel basados en los datos de sus tablas. (aunque esto requiere un complemento premium adicional).
¡Sin embargo, eso es un montón de características abstractas! Así que vamos a ponernos manos a la obra para que pueda ver cómo se desarrollan estas características en el mundo real.
Paso a paso: crear una tabla de comparación de productos filtrable
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 mencioné, este no es el caso de uso de wpDataTables. Pero definitivamente es un uso popular para el complemento.
Si está ejecutando cualquier tipo de sitio afiliado, una tabla de comparación de productos le permite ayudar a sus lectores a encontrar el producto que mejor se adapte a ellos ().
Pero antes de comenzar, necesitamos algunos productos para comparar, ¿verdad? Entonces, ¿qué debemos investigar? Recientemente compré un par de auriculares con cancelación de ruido, por lo que parece un buen ejemplo concreto para usar.
Podemos utilizar la tabla de comparación de productos para:
- Indique el precio
- Especificar el tipo de cancelación de ruido
- enumerar la marca
- Agrega un Cómpralo aquí enlace
Por supuesto, cuando usa el complemento, puede usar sus propios criterios para comparar productos. Solo estamos hablando de ejemplos aquí.
Empecemos…
Paso 1: Instalar y activar wpDataTables
Como suele ser el caso con los complementos de WordPress, su primer paso es instalar y activar wpDataTables. Una vez que haya hecho eso, no hay nada que realmente necesite configurar de inmediato.
Volveremos a algunas opciones de estilo opcionales más adelante. Pero por ahora, puede pasar directamente a crear su tabla de comparación de productos.
Paso 2: Importar datos y establecer opciones básicas
Ahora que tiene el complemento instalado, puede crear su primera tabla dirigiéndose a wpDataTables → Agregar nuevo:
A continuación, debe elegir qué tipo de mesa desea. 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 desde otra fuente
Me gusta usar Hojas de cálculo de Google, así que para este ejemplo importaré una tabla desde allí y luego la modificaré según sea necesario usando la interfaz de edición de WPDataTable.
A continuación, puede verificar las columnas de importación (suponiendo que optó por importar su tabla):
Una vez que verifique que todo está correcto, puede continuar con la siguiente pantalla.
Allí, puede configurar algunos ajustes básicos en la parte superior de la tabla si es necesario. Estos ajustes se ocupan de:
- Detalles básicos de visualización (p. ej., si mostrar o no el título)
- Diseño de respuesta
- Clasificación y filtrado global
Me referiré a algunas de esas configuraciones en un segundo. Pero por ahora, eres libre de simplemente golpear Ahorrar y toma el shortcode:
Paso 3: Agregue el código abreviado donde desea que se muestre su tabla
¡Y eso es! Tienes una tabla de comparación de productos filtrable. Para mostrarlo en el front-end, todo lo que necesita hacer es tomar el código abreviado mencionado anteriormente y agregarlo a la publicación o página donde desea que se muestre su tabla.
Luego, en el front-end, deberías ver tu tabla:
¡Fresco! Está allá. Pero aún no has terminado. Véase, en este punto, literalmente todo es filtrable. Eso tiene sentido para las primeras cuatro columnas de nuestro ejemplo, pero es un poco extraño hacer que el Enlace de compra columna filtrable.
Así que… ¡arreglemos eso!
Paso 4: Modifique las columnas de su tabla individual
Regresar a wpDataTables interfaz para su mesa.
Luego, si se desplaza hacia abajo, debería ver el Vista previa de la 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 cómo funciona cada columna haciendo clic en el botón Engranaje icono para cada columna:
Para eliminar el filtrado en el Enlace de compra columna, solo necesita hacer clic en el icono de engranaje, dirigirse a la Filtración y desactívelo:
También puede desactivar la clasificación desde el Clasificación pestaña.
¡Y eso solucionó el gran problema! Pero hagamos nuestra tabla de ejemplo aun mejor.
En este momento, para filtrar nuestra tabla, los usuarios deben ingresar su propio término de búsqueda en el filtro de cada columna. Si bien eso funciona… no es muy fácil de usar.
Entonces, hagamos las cosas más fáciles para ellos permitiéndoles:
- Elija la marca de un menú desplegable
- Elija el tipo de cancelación de un menú desplegable
- Seleccione diferentes rangos de precios
Para resolver los dos primeros, solo necesitas cambiar el Tipo de filtro a Seleccionar cuadro:
Y para resolver el tercero, cambia el Precio de columna Tipo de filtro a Rango de números:
Póngalo todo junto y obtendrá algo como esto en el front-end:
Ahora, los visitantes pueden elegir entre los menús desplegables e ingresar su propio rango de precios para aprovechar realmente el filtrado.
Nota: si se pregunta cómo se ve agregar aún más filtrado, aquí hay un vistazo a la opción “Filtrar en formulario” que puede habilitar desde la parte superior Clasificación y filtrado pestaña:
Otra cosa genial que puedes hacer en el Mostrar La pestaña de la configuración de cada columna es agregar clases CSS personalizadas a cada columna. Esto es especialmente útil si desea agregar, por ejemplo, un estilo personalizado solo al Enlace de compra columna para crear un botón o llamar la atención.
También puede agregar formato condicional, lo que le permite ser creativo y, por ejemplo, resaltar diferentes elementos según los criterios que especifique.
Paso 5: cambia los colores y las 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 las fuentes yendo a wpDataTables → Configuración → Configuración de color y fuente:
Paso 6: crea un gráfico (opcional)
Otra característica ingeniosa que puede o no desear incorporar a sus 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 realmente no beneficia, ciertamente puedo pensar en ocasiones en las que un gráfico podría ser útil.
wpDataTables hace que sea muy sencillo crear un gráfico a partir de su tabla existente. Todo lo que tienes que hacer es ir a la Crear un gráfico en la barra lateral de tu tablero. Luego, asígnele un nombre y elija su motor de renderizado y tipo de gráfico:
En la página siguiente, elija la tabla en la que le gustaría basar su gráfico:
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 funcione el gráfico):
En la siguiente pantalla, obtendrá una vista previa en vivo, así como la posibilidad de agregar algo de formato:
Luego, solo necesita guardar su gráfico y tomar el código abreviado para mostrarlo en el front-end. Póngalo junto con su tabla de comparación de productos filtrables y podrá brindar a sus lectores una descripción detallada de todos los productos que está comparando.
Otros usos para wpDataTables
Ok, he pasado la mayor parte de este artículo mostrándote cómo puedes crear una tabla de comparación de productos filtrable usando wpDataTables. Pero eso está lejos de ser el único uso de este complemento.
Debido a que permite una variedad de formatos de campo y estilo CSS personalizado, puede usarlo para todo tipo de cosas como:
- Crear un cronograma para su equipo deportivo, banda o cualquier otra cosa que requiera enumerar los horarios y lugares de los eventos
- Creación de una tabla de precios para mostrar la información de su propio producto
- Listado de unidades de apartamento disponibles
- Visualización de una lista filtrable de tiendas/ubicaciones minoristas
- Creación de un catálogo clasificable de todos sus productos
Realmente… si puede hacerlo con una tabla, puede hacerlo con wpDataTables. Hay montones de usos de nichos creativos que puedes pensar tú mismo.
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.
Es decir, las tablas abren un montón de funcionalidades para su sitio de WordPress. Agregue el hecho de que wpDataTables le permite ordenar, filtrar y buscar sus tablas en una variedad de formas útiles, y puede usar el complemento para todo tipo de cosas.
envolviendo las cosas
A estas alturas, deberías saber:
- Cómo crear una tabla de comparación de productos filtrables en WordPress
- Por qué wpDataTables es una gran herramienta para el trabajo
- Algunas otras formas ingeniosas de usar tablas para mejorar su sitio de WordPress
¡Ahora salga, cree su primera tabla y comience a usar el poder de los datos y las tablas para hacer un sitio web de WordPress más funcional!
