Hace ya algunos meses me propusieron como acceso a una oportunidad laboral como programador una prueba consistente en crear un listado paginado de usuarios con WordPress y AJAX. Quisiera, ahora reproducir el resultado de la misma aportando unos códigos alternativos a los que envié en su momento y que creo que os pueden ser utilidad. No sólo sabréis a qué tipo de pruebas debe enfrentarse un postulante a programador, además dispondréis de un módulo que, si os interesa, podréis incorporar a vuestro proyecto personal o profesional. ¡Vamos con ello!.
¿Qué son los módulos en WordPress?
En el mundo del desarrollo web, WordPress se ha consolidado como una de las plataformas más versátiles y accesibles gracias a su capacidad para adaptarse a las necesidades específicas de cada proyecto. Un elemento clave en esta flexibilidad son los módulos, componentes que permiten extender las funcionalidades del sitio web de forma modular y personalizada.
Pero, ¿qué son exactamente los módulos en WordPress?. Básicamente, son pequeñas unidades funcionales que se integran en el sitio para realizar tareas específicas, como mostrar galerías, agregar formularios o crear elementos interactivos. Estos módulos no solo mejoran la experiencia del usuario, sino que también facilitan a los desarrolladores la creación de sitios robustos y fáciles de mantener.
En este artículo, exploraremos en detalle un ejemplo práctico de un módulo y te guiaré a través de los pasos esenciales para crear tu propio módulo personalizado.
Si buscas llevar tus habilidades de desarrollo web al siguiente nivel, este es un ejemplo perfecto para comenzar.
Proyecto en WordPress
Aquí tienes un proyecto en WordPress que implementa un módulo para mostrar un listado paginado de usuarios, con filtrado por nombre, apellidos y correo electrónico. Se utiliza AJAX para la comunicación dinámica sin recargar la página.
Paso 1: Crear un archivo PHP para el shortcode y el manejo de AJAX
Crea un archivo llamado user-listing.php en el directorio de tu tema.
<?php
/**
* Plugin Name: User Listing Module
* Description: Módulo para listar usuarios con paginación y filtro.
*/
add_shortcode('user_listing', 'user_listing_shortcode');
add_action('wp_enqueue_scripts', 'enqueue_user_listing_assets');
add_action('wp_ajax_nopriv_fetch_users', 'fetch_users');
add_action('wp_ajax_fetch_users', 'fetch_users');
// Función para generar el shortcode
function user_listing_shortcode() {
ob_start();
?>
<div id="user-listing-module">
<!-- Formulario de búsqueda -->
<form id="user-search-form">
<input type="text" name="name" placeholder="Nombre">
<input type="text" name="surname" placeholder="Apellido">
<input type="email" name="email" placeholder="Correo Electrónico">
<button type="submit">Buscar</button>
</form>
<!-- Contenedor para el listado de usuarios -->
<div id="user-listing">
<p>Cargando usuarios...</p>
</div>
<!-- Contenedor para la paginación -->
<div id="pagination-controls"></div>
</div>
<?php
return ob_get_clean();
}
// Encolar los scripts y estilos necesarios
function enqueue_user_listing_assets() {
wp_enqueue_script('user-listing-script', get_template_directory_uri() . '/js/user-listing.js', ['jquery'], null, true);
wp_localize_script('user-listing-script', 'ajax_object', [
'ajax_url' => admin_url('admin-ajax.php'),
]);
}
// Simulación de datos desde una API
function fetch_users() {
$page = isset($_POST['page']) ? (int)$_POST['page'] : 1;
$name = sanitize_text_field($_POST['name'] ?? '');
$surname = sanitize_text_field($_POST['surname'] ?? '');
$email = sanitize_email($_POST['email'] ?? '');
$users_per_page = 5;
// Generar usuarios simulados
$all_users = [];
for ($i = 1; $i <= 20; $i++) {
$all_users[] = [
'username' => 'user' . $i,
'first_name' => 'FirstName' . $i,
'last_name1' => 'LastName1_' . $i,
'last_name2' => 'LastName2_' . $i,
'email' => 'user' . $i . '@example.com',
];
}
// Filtrar por nombre, apellido o email
$filtered_users = array_filter($all_users, function ($user) use ($name, $surname, $email) {
return (stripos($user['first_name'], $name) !== false || !$name) &&
(stripos($user['last_name1'], $surname) !== false || stripos($user['last_name2'], $surname) !== false || !$surname) &&
(stripos($user['email'], $email) !== false || !$email);
});
// Paginación
$total_users = count($filtered_users);
$offset = ($page - 1) * $users_per_page;
$paged_users = array_slice($filtered_users, $offset, $users_per_page);
wp_send_json([
'users' => $paged_users,
'total_pages' => ceil($total_users / $users_per_page),
'current_page' => $page,
]);
}Paso 2: Crear el archivo JavaScript para AJAX
Crea un archivo user-listing.js en el directorio js de tu tema.
jQuery(document).ready(function ($) {
function fetchUsers(page = 1) {
const formData = $('#user-search-form').serializeArray();
formData.push({ name: 'page', value: page });
$.post(ajax_object.ajax_url, formData, function (response) {
const userListing = $('#user-listing');
const paginationControls = $('#pagination-controls');
if (response.users.length === 0) {
userListing.html('<p>No se encontraron usuarios.</p>');
paginationControls.html('');
return;
}
// Renderizar usuarios
let html = '<ul>';
response.users.forEach(user => {
html += `
<li>
<strong>${user.username}</strong><br>
${user.first_name} ${user.last_name1} ${user.last_name2}<br>
${user.email}
</li>
`;
});
html += '</ul>';
userListing.html(html);
// Renderizar paginación
let paginationHtml = '';
for (let i = 1; i <= response.total_pages; i++) {
paginationHtml += `<button class="page-btn" data-page="${i}">${i}</button>`;
}
paginationControls.html(paginationHtml);
});
}
// Evento para el formulario de búsqueda
$('#user-search-form').on('submit', function (e) {
e.preventDefault();
fetchUsers();
});
// Evento para la paginación
$('#pagination-controls').on('click', '.page-btn', function () {
const page = $(this).data('page');
fetchUsers(page);
});
// Cargar usuarios iniciales
fetchUsers();
});Paso 3: Incluir estilos opcionales
Crea un archivo user-listing.css en el directorio css de tu tema.
#user-listing-module {
font-family: Arial, sans-serif;
}
#user-search-form {
margin-bottom: 20px;
}
#user-listing ul {
list-style-type: none;
padding: 0;
}
#user-listing li {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
#pagination-controls button {
margin: 5px;
padding: 5px 10px;
cursor: pointer;
}Paso 4: Integrar el shortcode en WordPress
Añade el shortcode [user_listing] en cualquier página o entrada para mostrar el módulo.
Explicación Detallada
Shortcode: Permite integrar fácilmente el módulo en cualquier página.
AJAX: Se usa para comunicarse con WordPress sin recargar la página.
Simulación de API: En el backend, generamos usuarios simulados y aplicamos filtros y paginación.
Scripts Localizados: Usamos wp_localize_script para pasar la URL de AJAX a JavaScript.
Frontend Dinámico: JavaScript gestiona el formulario y la paginación.
Gracias por tomarte el tiempo de leer este artículo. Cada comentario, sugerencia o pregunta que puedas aportar no solo enriquece este espacio, sino que también me impulsa a seguir compartiendo y creciendo junto a una comunidad que valora la creatividad y la innovación en el mundo digital. Tu opinión es importante, y estaré encantado de saber cómo este contenido ha podido inspirarte o ayudarte en tu propio camino.
Si estás buscando transformar tus ideas en una presencia digital efectiva y memorable, estoy aquí para ayudarte. Como diseñador y programador de páginas web, mi misión es crear soluciones que no solo destaquen visualmente, sino que también sean funcionales, intuitivas y adaptadas a tus necesidades. Juntos, podemos construir un sitio web que conecte con tu audiencia y represente lo mejor de tu visión.
¡Hablemos!. Estoy a un mensaje de distancia para acompañarte en este emocionante viaje hacia el éxito en línea.