Cómo crear tablas en WordPress con un diseño atractivo

Algo muy común en muchos sitios es la inclusión de tablas. Esto puede ser muy útil cuando queremos exhibir diferentes planes de servicios, tipos de productos o quizá varios grupos de estadísticas y datos, aunque esto es apenas una parte de lo que podemos lograr en WordPress. Aquí voy a mostrarte cómo crearlas y con un diseño atractivo, que llame la atención de los visitantes. Para ello utilizaremos un plugin muy útil y potente llamado wpDataTables, que además las implementa con un diseño responsivo, es decir, que se ajustan perfectamente a todo tipo de pantalla y dispositivo. Este plugin tiene una versión gratuita y otra de pago, ya en función a tus necesidades puede que necesites una u otra.

Algunas prestaciones del plugin wpDataTables

Este plugin es realmente muy completo y nos hace posible mucho más que implementar simples tablas. Entre sus muchas prestaciones encontramos:

  • Creación y edición de tablas desde el panel de administración.
  • Utilizar diferentes fuentes como ingreso de datos: Arrays PHP, archivos Excel, CSV, XML, etc.
  • Posibilidad de ordenar, realizar búsquedas, guardar en archivo, copiar, etc.
  • Posibilidad de personalizar y aplicar filtros avanzados para cada columna.
  • Varios estilos de columnas y grupos de filas.
  • Implementar gráficos lineales, de barras, tipo pastel, etc.

Instalación del plugin

En función a la versión que vayas a utilizar la instalación será de un modo u otro.

Si decides utilizar la versión gratuita sigue estos pasos:

  1. Localiza en el menú de WordPress el apartado "Plugins".
  2. Dentro de dicho apartado haz clic en "Añadir nuevo".
  3. En el cuadro de búsqueda situado en la esquina superior derecha introduce "wpDataTables".
  4. Te aparecerán varios plugins, una vez lo tienes localizado, sólo tienes que instalarlo y activarlo.

Para empezar te recomiendo que pruebes la versión gratuita y si necesitas más, ahí tienes la versión de pago 😉

En función a tus conocimientos, puede que te resulte un poco complejo su configuración. En caso de ser así, te recomiendo mi servicio de Ayuda WordPress.

Uso del wpDataTables

Para comenzar a utilizar el plugin, veremos que tenemos un nuevo menú en nuestro escritorio de WordPress con su nombre. En una primera pantalla veremos las tablas creadas hasta el momento y también un botón para crear nuevas. En otro menú tenemos la posibilidad de personalizar las ya creadas.

Dentro de las opciones podemos, entre otras cosas:

  • Obtener las entradas a la tabla desde la base de datos MySQL, indicando el servidor, su nombre, dirección, nombre de usuario y contraseña, etc.
  • Personalizar la apariencia con cosas como el tipo de letra y tamaño, color, dimensiones, etc.
  • Seleccionar los distintos campos que queramos mostrar, ya que al importar datos de otras tablas o bases de datos puede haber información que no nos interese. Cada columna puede personalizarse de forma independiente.

Insertar una tabla creada en una página

Una vez que guardamos los cambios, la pantalla del wpDataTables nos mostrará un shortcode. Vamos a copiar esta línea de código y nos dirigimos a la edición de páginas. Insertando el mismo en una de nuestras páginas ya creadas veremos como la tabla queda incluida, sin más necesidad de tomar otras acciones.

A través de esto no sólo estaremos creando una tabla, sino una aplicación en sí misma por la cual podemos consultar y manejar diferentes tipos de datos provenientes de diferentes bases de datos. Vamos una maravilla y con un potencial enorme, así que ya sabes, instálate el plugin y pruébalo.

Picture of Sobre mí

Sobre mí

¡Hola! Me llamo Jose AMD, vivo en Sevilla y soy Desarrollador Web. Estoy aquí para ayudarte a crear y mejorar tu página web, para que así puedas convertir tus grandes ideas en realidad. ¡Infórmate!

Déjame un mensaje

Me gustaría saber más sobre ti, tus proyectos y cómo crees que puedo ayudarte con tu página web. Puedes contactar conmigo enviándome un email a info@joseamd.es o rellenando el siguiente formulario, como prefieras 😉

  • Este campo es un campo de validación y debe quedar sin cambios.

Abrir chat
1
💬 ¿Necesitas ayuda?
Hola 👋
¿En qué te puedo ayudar?