✅Tabla con Lista de Usuarios de WordPress en el Front End (Sin Plugins)

En la administración de un sitio web en WordPress, es común la necesidad de obtener y mostrar información sobre los usuarios registrados. En esta guía, vamos a explorar cómo crear una tabla personalizada que liste los usuarios en orden alfabético con el rol de «suscriptor» en WordPress, utilizando un shortcode personalizado y algunos estilos CSS para mejorar la presentación.

WordPress ofrece una variedad de funciones y ganchos que permiten a los desarrolladores personalizar y extender la funcionalidad de un sitio web. En este caso, utilizaremos funciones personalizadas y shortcodes para generar una tabla que muestre información relevante sobre los usuarios registrados.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

<?php

// Función para obtener los datos de los usuarios y generar la tabla
function mostrar_datos_usuarios() {
    global $wpdb;
    
    // Obtener usuarios con el rol de "suscriptor"
    $users = get_users(array('role' => 'subscriber'));
    
    // Comprobar si hay usuarios
    if (!empty($users)) {
        $output = '<div class="custom-table-responsive"><table class="custom-table">';
        $output .= '<thead><tr>';
        $output .= '<th>Nombre de usuario</th>';
		$output .= '<th>Rol</th>';
        $output .= '<th>Nombre</th>';
        $output .= '<th>Apellidos</th>';
        $output .= '<th>Email</th>';
        $output .= '<th>Página Web</th>';
        
        $output .= '</tr></thead><tbody>';
        
        // Iterar sobre cada usuario
        foreach ($users as $user) {
            $output .= '<tr>';
            $output .= '<td>' . esc_html($user->user_login) . '</td>';
			$output .= '<td>' . translate_user_role( ucfirst(implode(', ', $user->roles))) . '</td>'; // Mostrar los roles del usuario en español
            $output .= '<td>' . esc_html($user->first_name) . '</td>';
            $output .= '<td>' . esc_html($user->last_name) . '</td>';
            $output .= '<td>' . esc_html($user->user_email) . '</td>';
            $output .= '<td>' . esc_url($user->user_url) . '</td>';
            
            $output .= '</tr>';
        }
        
        $output .= '</tbody></table></div>';
        
        return $output;
    } else {
        return 'No se encontraron usuarios.';
    }
}



// Registrar el shortcode
function register_custom_shortcode() {
    add_shortcode('mostrar_usuarios', 'mostrar_datos_usuarios');
}
add_action('init', 'register_custom_shortcode');


// Función para agregar CSS personalizado al wp_head
function agregar_css_personalizado() {
    echo '<style>
        .custom-table-responsive {
            overflow-x: auto;
        }

        .custom-table {
            width: 100%;
            border-collapse: collapse;
        }

        .custom-table th,
        .custom-table td {
            border: 1px solid #dddddd;
            padding: 8px;
            text-align: left;
        }

        .custom-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
    </style>';
}

// Enganchar la función al evento wp_head
add_action('wp_head', 'agregar_css_personalizado');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

La función mostrar_datos_usuarios() es el núcleo de nuestra solución. Veamos cómo funciona:

1. Obtener Usuarios con Rol de «Suscriptor»: Utilizamos la función get_users() para obtener una lista de usuarios con el rol de «suscriptor». Este es un enfoque eficaz y directo para filtrar usuarios por roles específicos en WordPress.
2. Generar la Tabla HTML: Una vez que hemos obtenido la lista de usuarios, comenzamos a construir la tabla HTML que los mostrará. Utilizamos un enfoque de concatenación de cadenas para construir dinámicamente la tabla.
3. Iterar sobre los Usuarios: Usamos un bucle foreach para recorrer cada usuario obtenido y generamos una fila de tabla para cada uno de ellos. Dentro de cada fila, mostramos información relevante como el nombre de usuario, el rol, el nombre, los apellidos, el correo electrónico y la página web (si está disponible).
4. Escapar Datos de Usuario: Es importante escapar los datos del usuario utilizando funciones como esc_html() y esc_url() para evitar ataques XSS y garantizar la seguridad de nuestro sitio.

El shortcode [mostrar_usuarios] se registra mediante la función register_custom_shortcode(). Esto permite a los usuarios insertar fácilmente la tabla de usuarios en cualquier parte del contenido de WordPress utilizando este shortcode.

La función agregar_css_personalizado() se encarga de imprimir estilos CSS personalizados en la sección <head> de cada página utilizando el gancho wp_head. Estos estilos CSS son específicos para la tabla de usuarios generada por nuestra función mostrar_datos_usuarios(), lo que nos permite personalizar su apariencia visual.

Conclusión

La creación de una tabla de usuarios personalizada en WordPress es una tarea relativamente sencilla gracias a las funciones y ganchos disponibles en la plataforma. Mediante el uso de funciones personalizadas y shortcodes, podemos obtener y mostrar información específica de los usuarios de manera eficiente.

Además, la capacidad de agregar estilos CSS personalizados nos permite mejorar la presentación de la tabla, adaptándola al diseño y estilo general del sitio web.

En resumen, este enfoque nos brinda una solución flexible y poderosa para mostrar datos de usuarios en WordPress, lo que puede ser útil en una variedad de contextos, desde sitios web de membresía hasta intranets corporativas.;unsaludo

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.