Cómo agregar tablas receptivas móviles 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 aún tiene que integrar Excel en el núcleo ...entonces, ¿cómo puede aprovechar el poder de las tablas para su sitio de WordPress?? Con un plugin llamado wpDataTables.

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

Luego, puede mostrar, manipular y filtrar esas tablas de muchas maneras interesantes.

En esta publicación, voy a hacer dos cosas:

• Le ofrece un tutorial detallado para crear una tabla de comparación de productos filtrable con wpDataTables. Si bien esto no es de ninguna manera el solamente caso de uso, es uno de los más populares.
• Le brinda más información sobre las funciones del plugin, así como sobre algunos de esos otros casos de uso.

Al final, debería saber no solo cómo wpDataTables puede ayudar a su sitio, sino también cómo puede crear sus propias tablas de datos filtrables.

Funciones de wpDataTables: por qué es la herramienta para el trabajo

Empecemos desde el principio:

Incorporación de sus datos.

Sin datos en sus tablas, no son muy útiles, ¿verdad? wpDataTables le permite traer datos de dos formas:

• 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 panel de WordPress.

Una vez que haya cargado su tabla, puede mostrarla en el front-end usando un simple código corto. Sus tablas responden (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 desglosar solo 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 plugin o mediante CSS personalizado que se agrega fácilmente dentro de la interfaz del plugin.

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 una plugin premium adicional).

¡Sin embargo, eso es un montón de características abstractas! Así que practiquemos para que pueda ver cómo se desarrollan estas funciones en el mundo real.

Paso a paso: creación de una tabla de comparación de productos filtrable

Bien, 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é, esta no es de ninguna manera la solamente caso de uso de wpDataTables. Pero definitivamente es un uso popular del plugin.

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

Pero antes de comenzar, necesitamos algunos productos para comparar, ¿verdad? Entonces, ¿qué deberíamos 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:

• Lista el precio
• Especifique el tipo de cancelación de ruido
• Lista de la marca
• Agrega un Cómpralo aquí enlace

Por supuesto, cuando usa el plugin, puede usar sus propios criterios para comparar productos. Aquí solo estamos hablando de ejemplos.

Empecemos…

Paso 1: Instale y active wpDataTables

Como suele ser el caso con los plugins de WordPress, su primer paso es instalar y activar wpDataTables. Una vez que haya hecho eso, no hay nada que realmente necesite configurar inmediatamente.

Obtener wpDataTables

Regresaremos a algunas opciones de estilo opcionales más adelante. Pero por ahora, puede comenzar directamente a crear su tabla de comparación de productos.

Paso 2: importar datos y configurar opciones básicas

Ahora que tiene el plugin 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
• Crea una tabla manualmente
• Importar de otra fuente

Me gusta usar Hojas de cálculo de Google, por lo 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 haya optado 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. Estas configuraciones tratan con:

• Detalles básicos de la pantalla (por ejemplo, si mostrar o no el título)
• Diseño de respuesta
• Clasificación y filtrado global

Tocaré algunas de esas configuraciones en un segundo. Pero por ahora, eres libre de golpear Salvar y agarra el shortcode:

Paso 3: agregue el código corto donde desea que se muestre su tabla

¡Y eso es! Tiene 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ía ver su tabla:

¡Frio! Está allá. Pero aún no has terminado. Ver, 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: ajusta las columnas de tu 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 zona.

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 Engranaje icono para cada columna:

Para eliminar el filtrado en el Enlace de compra columna, solo necesita hacer clic en el ícono de ajustes, diríjase a la Filtración pestaña y desactívela:

También puede desactivar la clasificación desde el Clasificación lengüeta.

¡Y eso resolvió 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, facilitemos las cosas 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 necesita cambiar el Tipo de filtro a Seleccionar cuadro:

Y para resolver el tercero, cambie el Precio columna Tipo de filtro a Rango de números:

Ponlo todo junto y obtendrás 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 está preguntando cómo se ve agregar aún más filtrado, aquí hay un vistazo a la opción "Filtro en formulario" que puede habilitar desde la parte superior. Clasificación y filtrado lengüeta:

Otra cosa interesante que puedes hacer en el Monitor 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 Enlace de compra columna para crear un botón o llamar la atención.

También puede agregar formato condicional, 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 fuentes yendo a wpDataTables → Configuración → Configuración de color y fuente:

Paso 6: crea un gráfico (opcional)

Una característica más ingeniosa que puede que desee incorporar a las tablas de comparación de sus productos son los cuadros y gráficos personalizados. Si bien el ejemplo de los auriculares con cancelación de ruido realmente no beneficia tantoCiertamente, puedo pensar en ocasiones en las que un gráfico puede ser útil.

wpDataTables hace que sea muy sencillo crear un gráfico a partir de su tabla existente. Todo lo que necesitas hacer es ir al Crear un gráfico en la barra lateral de su tablero. Luego, dale un nombre y elige tu 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 algún formato:

Luego, solo necesita guardar su gráfico y tomar el código corto 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 de 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 plugin.

Debido a que permite una variedad de formatos de campo y estilos CSS personalizados, puede 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 lugares de los eventos
• Crear una tabla de precios para mostrar su propia información de producto
• Listado de apartamentos disponibles
• Visualización de una lista filtrable de tiendas / ubicaciones minoristas
• Creando un catálogo ordenable de todos sus productos

Realmente ... si puedes hacerlo con una tabla, puedes hacerlo con wpDataTables. Hay montones de usos de nichos creativos que puedes idear 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 plugin para todo tipo de cosas.

Terminando las cosas

A estas alturas, deberías saber:

• Cómo crear una tabla de comparación de productos filtrable en WordPress
• Por qué wpDataTables es una gran herramienta para el trabajo
• Algunas otras formas interesantes 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 crear un sitio web de WordPress más funcional!

Obtener wpDataTables