Este conjunto de funciones personalizadas para WordPress está diseñado para optimizar y personalizar la gestión de perfiles de usuario en un sitio web. Sin adentrarnos en términos técnicos, veamos cómo estas funciones pueden beneficiar a diferentes tipos de sitios web y por qué la implementación de código personalizado puede ser ventajosa.
Casos de Uso:
- Comunidades en Línea:
- Ventaja: Permite organizar a los miembros en categorías específicas, facilitando la conexión y colaboración entre usuarios con intereses comunes.
- Ejemplo de Uso: Un sitio de discusión sobre tecnología puede clasificar a los usuarios en categorías como «Desarrolladores», «Diseñadores» y «Entusiastas».
- Plataformas de Contenido Colaborativo:
- Ventaja: Facilita la identificación y colaboración entre usuarios con habilidades y roles específicos.
- Ejemplo de Uso: Un sitio web de creación de contenido puede clasificar a los colaboradores en categorías como «Escritores», «Editores» y «Ilustradores».
- Portafolios Profesionales:
- Ventaja: Permite a profesionales mostrar información detallada, como su categoría de especialización y enlaces a perfiles en redes sociales.
- Ejemplo de Uso: Un portafolio en línea puede clasificar a los profesionales en categorías como «Diseñadores Gráficos», «Desarrolladores Web» y «Fotógrafos».
- Sitios de Membresía:
- Ventaja: Ofrece una presentación visual mejorada de los perfiles de los miembros, lo que puede aumentar la interactividad y la participación.
- Ejemplo de Uso: Un sitio de membresía puede clasificar a los usuarios en categorías según sus niveles de membresía o intereses.
Ventajas de Usar Código Personalizado:
- Adaptabilidad a Necesidades Específicas:
- Beneficio: El código personalizado permite adaptar las funcionalidades exactamente a las necesidades del sitio, sin limitaciones impuestas por soluciones preconstruidas.
- Mejora de Experiencia de Usuario:
- Beneficio: Ofrece una experiencia de usuario mejorada al presentar información relevante de manera estructurada y visualmente atractiva.
- Diferenciación y Marca Personal:
- Beneficio: Permite la diferenciación del sitio al ofrecer características únicas, fortaleciendo la marca y destacando la identidad del sitio.
- Eficiencia en la Administración:
- Beneficio: Facilita la administración al organizar y presentar la información de los usuarios de manera eficiente, reduciendo la carga de trabajo administrativo.
- Aumento de Participación:
- Beneficio: La capacidad de mostrar información detallada y relevante puede aumentar la participación y la interacción entre los usuarios del sitio.
Tipos de Sitios Web Aptos para la Implementación:
- Comunidades en Línea y Foros: Mejora la organización y conexión entre miembros.
- Plataformas de Colaboración: Facilita la colaboración entre usuarios con roles específicos.
- Portales de Contenido Profesional: Destaca las habilidades y especializaciones de profesionales.
- Sitios de Membresía y Redes Sociales: Aumenta la interactividad y participación entre los miembros.
En conclusión, estas funciones personalizadas ofrecen una flexibilidad significativa para adaptarse a una variedad de sitios web, mejorando la administración de usuarios y la experiencia general del usuario. La implementación de código personalizado proporciona una ventaja competitiva al permitir una adaptación precisa a las necesidades específicas de un sitio.

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 cargar Font Awesome si es necesario
function cargar_font_awesome_si_es_necesario() {
if (!wp_script_is('font-awesome', 'enqueued')) {
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), null);
}
}
add_action('wp_enqueue_scripts', 'cargar_font_awesome_si_es_necesario');
// Función para cargar jQuery si es necesario
function cargar_jquery_si_es_necesario() {
if (!wp_script_is('jquery', 'enqueued')) {
// Si jQuery no está cargado, encolamos la versión incluida en WordPress
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'cargar_jquery_si_es_necesario');
// Definir constante para el nombre de la taxonomía
define('CATEGORIA_USUARIO', 'categoria_usuario');
// Registrar una taxonomía personalizada para usuarios
function registrar_taxonomia_usuario() {
register_taxonomy(
CATEGORIA_USUARIO,
'user',
array(
'label' => 'Categoría de Usuario',
'rewrite' => array('slug' => 'categoria-usuario'),
'hierarchical' => true,
)
);
}
add_action('init', 'registrar_taxonomia_usuario');
// Agregar la pestaña de categorías de usuarios
function agregar_pestana_categorias_usuario() {
add_users_page('Categorías de Usuarios', 'Categorías de Usuarios', 'edit_users', 'edit-tags.php?taxonomy=' . CATEGORIA_USUARIO);
}
add_action('admin_menu', 'agregar_pestana_categorias_usuario');
// Mostrar campo de categoría en el perfil de usuario
function mostrar_campo_categoria_usuario($user) {
$categoria_usuario = get_user_meta($user->ID, 'categoria_usuario', true);
?>
<h3>Categoría de Usuario</h3>
<table class="form-table">
<tr>
<th><label for="categoria_usuario_nueva">Seleccionar Categoría</label></th>
<td>
<?php
// Obtener todas las categorías de usuario
$terms = get_terms('categoria_usuario', array('hide_empty' => false));
if (!empty($terms)) {
?>
<select name="categoria_usuario" id="categoria_usuario">
<option value="">Seleccionar Categoría</option>
<?php
foreach ($terms as $term) {
echo '<option value="' . esc_attr($term->slug) . '" ' . selected($categoria_usuario, $term->slug, false) . '>' . esc_html($term->name) . '</option>';
}
?>
</select>
<?php
} else {
echo 'No hay categorías disponibles. Por favor, crea categorías en la sección de Categorías de Usuarios.';
}
?>
</td>
</tr>
</table>
<?php
}
add_action('show_user_profile', 'mostrar_campo_categoria_usuario');
add_action('edit_user_profile', 'mostrar_campo_categoria_usuario');
// Guardar la categoría y relacionar al usuario al actualizar el perfil de usuario
function guardar_categoria_usuario($user_id) {
if (current_user_can('edit_user', $user_id)) {
$categoria_seleccionada = sanitize_text_field($_POST['categoria_usuario']);
// Guardar la categoría en el perfil del usuario
update_user_meta($user_id, 'categoria_usuario', $categoria_seleccionada);
// Asignar al usuario a la categoría
wp_set_object_terms($user_id, $categoria_seleccionada, 'categoria_usuario', false);
}
}
add_action('personal_options_update', 'guardar_categoria_usuario');
add_action('edit_user_profile_update', 'guardar_categoria_usuario');
// Mostrar campo de foto de perfil en el perfil de usuario
function mostrar_campo_foto_perfil($user) {
$foto_perfil = get_user_meta($user->ID, 'foto_perfil', true);
?>
<h3>Foto de Perfil</h3>
<table class="form-table">
<tr>
<th><label for="foto_perfil">Seleccionar Foto</label></th>
<td>
<input type="text" name="foto_perfil" id="foto_perfil" value="<?php echo esc_attr($foto_perfil); ?>" class="regular-text" />
<p class="description">Introduce la URL de tu foto de perfil.</p>
</td>
</tr>
</table>
<?php
}
add_action('show_user_profile', 'mostrar_campo_foto_perfil');
add_action('edit_user_profile', 'mostrar_campo_foto_perfil');
// Guardar la foto de perfil al actualizar el perfil de usuario
function guardar_foto_perfil($user_id) {
if (current_user_can('edit_user', $user_id)) {
$foto_perfil = sanitize_text_field($_POST['foto_perfil']);
update_user_meta($user_id, 'foto_perfil', $foto_perfil);
}
}
add_action('personal_options_update', 'guardar_foto_perfil');
add_action('edit_user_profile_update', 'guardar_foto_perfil');
// Agregar nueva columna en la página de usuarios
function agregar_columna_categoria_usuario($columns) {
$columns['categoria_usuario'] = 'Categoría';
return $columns;
}
add_filter('manage_users_columns', 'agregar_columna_categoria_usuario');
// Mostrar contenido en la nueva columna sin enlace de filtrado
function mostrar_contenido_columna_categoria_usuario($value, $column_name, $user_id) {
if ('categoria_usuario' === $column_name) {
$categoria_usuario = wp_get_object_terms($user_id, 'categoria_usuario');
if (!empty($categoria_usuario)) {
$categoria = array_shift($categoria_usuario);
$categoria_nombre = esc_html($categoria->name);
return $categoria_nombre;
} else {
return 'Sin categoría';
}
}
return $value;
}
add_action('manage_users_custom_column', 'mostrar_contenido_columna_categoria_usuario', 10, 3);
// Shortcode para mostrar usuarios por categoría
function mostrar_usuarios_por_categoria_shortcode($atts) {
ob_start();
// Muestra las categorías disponibles
$categorias = get_terms('categoria_usuario', array('hide_empty' => false));
if (!empty($categorias)) {
echo '<div class="categorias-filtro">';
echo '<a class="filtro-categoria" data-categoria="todas" href="#">Todas las categorías</a>';
foreach ($categorias as $categoria) {
echo '<a class="filtro-categoria" data-categoria="' . esc_attr(sanitize_title($categoria->name)) . '" href="#">' . esc_html($categoria->name) . '</a>';
}
echo '</div>';
}
// Muestra las cajas de usuarios
$args = array(
'role' => 'subscriber', // Cambia el rol según tus necesidades
);
// Realiza la consulta de usuarios
$usuarios = get_users($args);
if (!empty($usuarios)) {
echo '<div class="user-boxes-wrapper">';
foreach ($usuarios as $usuario) {
$usuario_data = get_userdata($usuario->ID);
// Obtenemos la URL de la foto de perfil
$foto_perfil_url = esc_url(get_user_meta($usuario->ID, 'foto_perfil', true));
$foto_perfil_html = '<img src="' . $foto_perfil_url . '" alt="Foto de perfil" width="300" height="200"/ class="user-avatar">';
// Obtenemos la categoría del usuario
$categoria_usuario = wp_get_object_terms($usuario->ID, 'categoria_usuario');
$categoria = !empty($categoria_usuario) ? array_shift($categoria_usuario)->name : 'Sin categoría';
// Unificamos el campo "Nombre" y "Apellidos"
$nombre_completo = esc_html($usuario_data->first_name . ' ' . $usuario_data->last_name);
$email = $usuario_data->user_email;
$pagina_web = esc_url($usuario_data->user_url);
// Nueva: Campos de redes sociales
$whatsapp = esc_html(get_user_meta($usuario->ID, 'whatsapp', true));
$facebook = esc_html(get_user_meta($usuario->ID, 'facebook', true));
$instagram = esc_html(get_user_meta($usuario->ID, 'instagram', true));
$linkedin = esc_html(get_user_meta($usuario->ID, 'linkedin', true));
// Nueva: Biografía del usuario
$biografia = esc_html(get_user_meta($usuario->ID, 'description', true));
echo '<div class="user-box categoria-' . esc_attr(sanitize_title($categoria)) . '">';
echo '<div class="user-avatar">' . $foto_perfil_html . '</div>';
echo '<div class="user-info">';
echo '<div class="categoria" data-label="Categoría"><span class="filtro-categoria" data-categoria="' . esc_attr(sanitize_title($categoria)) . '">' . esc_html($categoria) . '</span></div>';
echo '<div class="nombre" data-label="Nombre"><i class="fas fa-user"></i> ' . $nombre_completo . '</div>';
echo '<div class="email" data-label="Email"><i class="fas fa-envelope"></i> ' . esc_html($email) . '</div>';
echo '<div class="pagina-web" data-label="Página Web"><i class="fas fa-globe"></i> ' . esc_html($pagina_web) . '</div>';
// Nueva: Campos de redes sociales
echo '<div class="redes-sociales" data-label="Redes Sociales">';
if (!empty($whatsapp)) {
echo '<div class="whatsapp"><a href="' . esc_url($whatsapp) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-whatsapp"></i></a></div>';
}
if (!empty($facebook)) {
echo '<div class="facebook"><a href="' . esc_url($facebook) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook"></i></a></div>';
}
if (!empty($instagram)) {
echo '<div class="instagram"><a href="' . esc_url($instagram) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>';
}
if (!empty($linkedin)) {
echo '<div class="linkedin"><a href="' . esc_url($linkedin) . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin"></i></a></div>';
}
echo '</div>';
// Nueva: Biografía del usuario
if (!empty($biografia)) {
echo '<div class="biografia" data-label="Biografía"><i class="fas fa-info-circle"></i> ' . $biografia . '</div>';
}
echo '</div>';
echo '</div>';
}
echo '</div>';
} else {
echo 'No hay usuarios disponibles.';
}
// Agrega el script jQuery para manejar el filtrado
?>
<script>
jQuery(document).ready(function($) {
$('.filtro-categoria').on('click', function() {
var categoria = $(this).data('categoria');
// Oculta todos los usuarios
$('.user-box').hide();
// Muestra los usuarios de la categoría seleccionada
if (categoria === 'todas') {
$('.user-box').show();
} else {
$('.categoria-' + categoria).show();
}
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('mostrar_usuarios_por_categoria', 'mostrar_usuarios_por_categoria_shortcode');
// Mostrar campos de redes sociales en el perfil de usuario
function mostrar_campos_redes_sociales($user) {
?>
<h3>Redes Sociales</h3>
<table class="form-table">
<tr>
<th><label for="whatsapp">WhatsApp</label></th>
<td>
<input type="text" name="whatsapp" id="whatsapp" value="<?php echo esc_attr(get_user_meta($user->ID, 'whatsapp', true)); ?>" class="regular-text" />
<p class="description">Ingresa la URL de WhatsApp.</p>
</td>
</tr>
<tr>
<th><label for="facebook">Facebook</label></th>
<td>
<input type="text" name="facebook" id="facebook" value="<?php echo esc_attr(get_user_meta($user->ID, 'facebook', true)); ?>" class="regular-text" />
<p class="description">Ingresa la URL de Facebook.</p>
</td>
</tr>
<tr>
<th><label for="instagram">Instagram</label></th>
<td>
<input type="text" name="instagram" id="instagram" value="<?php echo esc_attr(get_user_meta($user->ID, 'instagram', true)); ?>" class="regular-text" />
<p class="description">Ingresa la URL de Instagram.</p>
</td>
</tr>
<tr>
<th><label for="linkedin">LinkedIn</label></th>
<td>
<input type="text" name="linkedin" id="linkedin" value="<?php echo esc_attr(get_user_meta($user->ID, 'linkedin', true)); ?>" class="regular-text" />
<p class="description">Ingresa la URL de LinkedIn.</p>
</td>
</tr>
</table>
<?php
}
add_action('show_user_profile', 'mostrar_campos_redes_sociales');
add_action('edit_user_profile', 'mostrar_campos_redes_sociales');
// Guardar URLs de redes sociales al actualizar el perfil de usuario
function guardar_redes_sociales($user_id) {
if (current_user_can('edit_user', $user_id)) {
$whatsapp = sanitize_text_field($_POST['whatsapp']);
$facebook = sanitize_text_field($_POST['facebook']);
$instagram = sanitize_text_field($_POST['instagram']);
$linkedin = sanitize_text_field($_POST['linkedin']);
update_user_meta($user_id, 'whatsapp', $whatsapp);
update_user_meta($user_id, 'facebook', $facebook);
update_user_meta($user_id, 'instagram', $instagram);
update_user_meta($user_id, 'linkedin', $linkedin);
}
}
add_action('personal_options_update', 'guardar_redes_sociales');
add_action('edit_user_profile_update', 'guardar_redes_sociales');
// Definir una función para agregar estilos a la tabla de usuarios
function estilo_tabla_usuarios() {
echo '<style>
.categorias-filtro {
text-align: center;
margin-bottom: 20px;
}
.filtro-categoria {
display: inline-block;
padding: 8px 16px;
margin: 5px;
background-color: Transparent; /* Color de fondo del botón */
color: #4286F3; /* Color del texto del botón */
text-decoration: none;
border: 1px solid #4286F3;
border-radius: 4px;
cursor: pointer;
}
.filtro-categoria:hover {
background-color: #4286F3; /* Cambia el color de fondo al pasar el ratón por encima */
color:white;
}
.user-boxes-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 800px; /* Ajusta el ancho máximo según sea necesario */
margin: 0 auto; /* Centra el contenedor de usuarios */
}
.user-box {
width: calc(33.33% - 20px);
margin-bottom: 20px;
border: 1px solid #ddd;
padding: 50px;
box-sizing: border-box;
text-align: center;
transition: box-shadow 0.3s ease;
}
.user-box .user-avatar {
margin-bottom: 10px;
text-align:left;
}
.user-avatar img {
border-radius: 5%; /* Hace que la imagen sea redonda */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Agrega sombra a la imagen */
}
.user-box .user-info {
font-size: 14px;
text-align:left;
}
.user-info .nombre,
.user-info .email,
.user-info .pagina-web,
.user-info .categoria {
margin-bottom: 10px; /* Añade espacio entre elementos específicos dentro de .user-info */
}
/* Estilos para la sección de redes sociales */
.redes-sociales {
display: flex;
justify-content: center; /* Alinea los elementos al centro */
align-items: center;
margin-top: 10px;
float:left;
}
.redes-sociales div {
margin-right: 10px;
}
.redes-sociales a {
text-decoration: none;
color: #333; /* Color del enlace */
display: flex;
align-items: center; /* Alinea los elementos verticalmente */
}
.redes-sociales i {
font-size: 24px; /* Tamaño del icono */
margin-right: 5px;
color: #4286F3; /* Color del icono */
}
/* Estilos específicos para cada red social */
.whatsapp i {
color: #25D366; /* Color verde de WhatsApp */
}
.facebook i {
color: #1877F2; /* Color azul de Facebook */
}
.instagram i {
color: #E4405F; /* Color rosado de Instagram */
}
.linkedin i {
color: #0077B5; /* Color azul de LinkedIn */
}
/* Estilos para pantallas pequeñas */
@media only screen and (max-width: 600px) {
.user-box {
width: 100%; /* Mostrar una caja por fila en dispositivos móviles */
}
}
</style>';
}
add_action('wp_head', 'estilo_tabla_usuarios');
Lenguaje del código: HTML, XML (xml)
Entendiendo el Código
Agrega el siguiente shortcode en cualquier página o entrada para mostrar el Directorio de Usuarios en la parte frontal de tu página web:
[mostrar_usuarios_por_categoria]Lenguaje del código: JSON / JSON con comentarios (json)
- Cargar Font Awesome y jQuery si es necesario:El proceso de carga de recursos es esencial para garantizar un rendimiento eficiente del sitio. La función
cargar_font_awesome_si_es_necesarioverifica la presencia del script de Font Awesome. Si no está cargado, utilizawp_enqueue_stylepara añadirlo dinámicamente al sitio. De manera similar, la funcióncargar_jquery_si_es_necesariorealiza la misma verificación y carga dinámica para jQuery, asegurando que estos recursos estén disponibles solo cuando sea necesario. - Definir constante para el nombre de la taxonomía:La constante
CATEGORIA_USUARIOse establece con el valor ‘categoria_usuario’, proporcionando un identificador único para referenciar la taxonomía personalizada más adelante en el código. Esta práctica permite una gestión consistente y evita la repetición de cadenas en el código, mejorando la mantenibilidad. - Registrar una taxonomía personalizada para usuarios:La función
registrar_taxonomia_usuariocumple la función de registrar una taxonomía personalizada denominada «Categoría de Usuario». Esta taxonomía está diseñada para el tipo de usuario (‘user’) y se configura como jerárquica, lo que permite una organización más estructurada. Además, se establece el slug ‘categoria-usuario’ para facilitar la generación de URL amigables. - Mostrar campo de categoría en el perfil de usuario:La función
mostrar_campo_categoria_usuariose encarga de presentar un campo en el perfil del usuario destinado a la selección de la categoría a la que pertenece. Esto proporciona a los usuarios una forma intuitiva de definir su pertenencia a una categoría específica. - Guardar la categoría y relacionar al usuario al actualizar el perfil:La función
guardar_categoria_usuariose activa durante la actualización del perfil del usuario. Su función principal es almacenar la categoría seleccionada en el perfil del usuario y asociar al usuario con dicha categoría. Este paso es crucial para la organización y clasificación de usuarios. - Mostrar campo de foto de perfil en el perfil de usuario:La función
mostrar_campo_foto_perfilañade un campo al perfil del usuario destinado a la inserción de la URL de la foto de perfil. Este detalle personalizado contribuye a la presentación visual de la identidad del usuario. - Guardar la foto de perfil al actualizar el perfil de usuario:La función
guardar_foto_perfilresponde a las actualizaciones del perfil del usuario y almacena la URL de la foto de perfil en el perfil del usuario. Esto garantiza una experiencia visual cohesiva y completa para los usuarios del sitio. - Agregar nueva columna en la página de usuarios:La función
agregar_columna_categoria_usuariomejora la administración de usuarios mediante la introducción de una nueva columna llamada «Categoría» en la página de administración de usuarios. Esto facilita la identificación y clasificación de usuarios según sus categorías. - Mostrar contenido en la nueva columna sin enlace de filtrado:La función
mostrar_contenido_columna_categoria_usuariopresenta el contenido de la nueva columna «Categoría» en la página de administración de usuarios. Este detalle informativo mejora la visualización y clasificación de usuarios sin comprometer la eficiencia. - Shortcode para mostrar usuarios por categoría:La función
mostrar_usuarios_por_categoria_shortcodeintroduce un shortcode que facilita la presentación de usuarios organizados por categoría. Este shortcode ofrece una herramienta interactiva y versátil para la visualización específica de grupos de usuarios. - Mostrar campos de redes sociales en el perfil de usuario:La función
mostrar_campos_redes_socialesagrega campos al perfil del usuario destinados a la inserción de URLs de redes sociales como WhatsApp, Facebook, Instagram y LinkedIn. Esto enriquece la identidad digital de cada usuario. - Guardar URLs de redes sociales al actualizar el perfil de usuario:La función
guardar_redes_socialesresponde a las actualizaciones del perfil del usuario y almacena las URLs de las redes sociales en el perfil del usuario. Esto proporciona información adicional sobre la presencia digital de cada usuario. - Definir una función para agregar estilos a la tabla de usuarios:La función
estilo_tabla_usuariosdefine estilos CSS que afectan la apariencia de la tabla de usuarios, mejorando la presentación visual de la información de los usuarios. Estos estilos se aplican de manera coherente a la interfaz de usuario. - Agregar estilos a la cabecera del sitio:La función
estilo_tabla_usuariosse vincula al eventowp_headpara agregar los estilos CSS a la cabecera del sitio WordPress. Esta integración asegura una presentación consistente en todas las páginas del sitio.
En resumen, este conjunto de funciones personalizadas enriquece la gestión de perfiles de usuario en WordPress, proporcionando una experiencia más robusta y personalizada tanto para administradores como para usuarios finales. La implementación de estas funciones permite una administración eficiente de usuarios y una presentación visual mejorada de la información del perfil.
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.




Deja tus opiniones o dudas en los comentarios.