Hoy traigo un pequeño sistema que me han preguntado en varias ocasiones: cómo crear una especie de directorio de usuarios, productos, proyectos, etc., donde los resultados se muestren en una tabla en el frontend y que al principio solo aparezca un buscador. Los resultados deben ir apareciendo conforme el usuario escribe, mostrando solo los que coinciden con la búsqueda.
Además, desde el administrador de WordPress podemos editar la tabla, agregar nuevos registros y modificar los datos directamente en la tabla sin necesidad de abrir cada registro manualmente. Esto garantiza una mayor productividad y rapidez en la gestión de datos.
1. Características del Sistema
- Búsqueda en tiempo real en el frontend: Los resultados se filtran conforme el usuario escribe, mostrando solo los registros que coinciden.
- Tabla responsive en el frontend: La tabla se adapta a dispositivos móviles y permite scroll horizontal si es necesario.
- Edición rápida en el admin: Se pueden modificar los datos directamente en la tabla del panel de administración.
- Fácil gestión de registros: Podemos agregar nuevos registros desde el administrador con un formulario intuitivo.
- Orden y búsqueda avanzada en el admin: DataTables nos permite ordenar columnas y buscar rápidamente los registros.
2. Creación de la Tabla en la Base de Datos
Antes de comenzar, necesitamos una tabla en la base de datos donde guardaremos los registros. Para ello, usamos una función que crea la tabla si no existe en la base de datos.
3. Creando el Panel de Administración
Queremos que el administrador pueda gestionar los registros directamente desde WordPress. Para ello, creamos un menú personalizado en el admin con un formulario para agregar registros y una tabla editable.
El formulario permite ingresar campos como nombre, email, teléfono, empresa, puesto y ciudad, pero se puede editar fácilmente en el código. Solo es necesario copiar, editar y duplicar los campos según las necesidades del usuario. La estructura es sencilla y flexible, por lo que se pueden agregar nuevos campos modificando el código del formulario.
4. Mostrando los Registros en el Frontend
Ahora que tenemos un sistema de administración funcional, queremos mostrar los registros en el frontend. La clave es:
- Inicialmente solo mostrar el buscador
- Mostrar los resultados conforme el usuario escribe
- Hacer la tabla responsive
Se utiliza un shortcode que se puede agregar en cualquier página de WordPress. La tabla permanece oculta hasta que el usuario ingresa texto en el buscador. Además, los resultados se filtran en tiempo real sin necesidad de recargar la página.
[mostrar_tabla]
Conclusión
Este sistema es ideal para crear directorios de cualquier tipo dentro de WordPress, permitiendo una gestión fácil desde el admin y una experiencia optimizada para los usuarios en el frontend. Con DataTables y WordPress, podemos ofrecer búsquedas rápidas, edición directa y una tabla responsive sin necesidad de plugins adicionales.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.
🔐 Este contenido es solo para suscriptores premium.
Estos códigos de la zona premium se mantienen regularmente. Si usas un código y no te funciona correctamente, puedes abrir un ticket de soporte explicando los detalles y lo vemos.
¿Qué te ha parecido este sistema?
Excelente post Fran.
Me parece buena la idea de poder buscar y encontrar y editar todo fácilmente. ¿Pero y si queremos que el usuario pueda editar su info? Sería posible?
¡Un abrazo y gracias por los tutoriales!
Se puede crear un código parecido pero para que los usuarios agreguen sus datos y los editen. Si explicas un poco el contexto con un ejemplo real puedo preparar algo. Saludos.
Hola Frank!
¿Pues, y si se crea un área de usuario? Donde el usuario pueda editar sus datos personales.
Y si queremos ir un paso más allá jaja se me ocurre y si el formulario de registro el usuario puede elegir por ejemplo que autor de libros le gusta de una lista, y que cuando elija el autor que el siguiente campo muestre los libros de ese autor, y si ese libro tiene una trilogía que pueda elegir los que ha leído... que sea ¿dinámico? Ese campo y así tener por ejemplo una base de datos de usuarios con autores y libros que le gustan.
Un abrazo!
Le daré una vuelta a ver que se me ocurre. Saludos.