Overrides del perfil: navegación, avatar y estadísticas
Agregamos clases CSS a 3 partes del perfil del estudiante — y descubrimos
en vivo por qué LP 4.x abandonó los archivos de template para el avatar.
Esta lección crea código nuevo. Agregamos clases CSS a 3 zonas
del perfil del estudiante: la navegación lateral, el
avatar y las estadísticas de cursos.
Además, vamos a ver en vivo cómo detectar que un archivo template ya no funciona
en LP 4.x y cómo encontrar el filtro correcto.
Perfil del estudiante — las 3 zonas que vamos a marcar
.lms-perfil-avatar
| Clase CSS nueva | Zona del perfil | Cómo se agrega |
|---|---|---|
.lms-perfil-navegacion |
El menú lateral de pestañas | Archivo override |
.lms-perfil-avatar |
La foto de perfil del estudiante | Filtro add_filter() |
.lms-estadisticas-perfil |
Las tarjetas de estadísticas | Filtro add_filter() |
El avatar y las estadísticas usan un sistema nuevo de LP 4.x donde el HTML
se genera desde clases PHP con arrays filtrables. El menú de navegación
todavía tiene un archivo template, así que ese sí se puede sobreescribir.
Veremos en detalle cómo descubrimos esto para el avatar.
Override de la navegación — profile/tabs.php
Archivo nuevo
El menú lateral del perfil viene de un archivo llamado tabs.php.
Este template todavía existe como archivo en LP 4.x, así que podemos copiarlo
al child theme y agregarle nuestra clase.
Original del plugin
<div id="profile-nav" class="profile-nav">
Solo tiene las clases originales de LP.
Nuestro override
<div id="profile-nav" class="profile-nav <strong>lms-perfil-navegacion</strong>">
Podemos estilizar el menú desde lms-styles.css.
/**
* Override: Pestañas de navegación del perfil de usuario.
*
* ORIGINAL: wp-content/plugins/learnpress/templates/profile/tabs.php
* OVERRIDE: wp-content/themes/divi-lms-child/learnpress/profile/tabs.php
*
* Agregamos .lms-perfil-navegacion al div wrapper #profile-nav.
*/
defined( ‘ABSPATH’ ) || exit();
if ( ! isset( $user ) || ! isset( $profile ) ) {
return;
}
?>
<div id=«profile-nav» class=«profile-nav lms-perfil-navegacion«>
<?php do_action( ‘learn-press/before-profile-nav’, $profile ); ?>
<ul class=«lp-profile-nav-tabs»>
<?php
foreach ( $profile->get_tabs()->tabs() as $tab_key => $profile_tab ) {
/* … resto idéntico al plugin original … */
}
?>
</ul>
</div>
Solo modificamos el
class del primer <div>.El bucle que genera las pestañas queda exactamente igual que en el plugin.
El caso del avatar — por qué el archivo no funciona
Descubrimiento LP 4.x
Al principio intentamos crear un archivo override para el avatar, igual que hicimos
con las pestañas. El archivo existía en el plugin en
templates/profile/avatar.php, así que lo copiamos y le agregamos
nuestra clase. Pero al verificar en F12 buscando lms-perfil-avatar…
el resultado fue 0 de 0.
Al buscar dónde se llama a
avatar.php dentro del plugin, encontramosesto en
inc/templates/class-lp-template-profile.php:
$lp_profile = LP_Profile::instance();
$user = $lp_profile->get_user();
$userModel = UserModel::find( $user->get_id(), true );
$userTemplate = new UserTemplate();
echo $userTemplate->html_avatar_edit( $userModel );
// learn_press_get_template( ‘profile/avatar.php’ ); ← comentado!
}
La línea que cargaba el archivo template está comentada con //.
En LP 4.x el avatar ya no se carga como un archivo PHP — ahora lo genera
directamente la clase UserTemplate usando un método PHP.
Nuestro archivo profile/avatar.php nunca llegó a ejecutarse.
Pero mirá bien el código: la clase UserTemplate usa internamente
un apply_filters() para generar su HTML:
‘learn-press/user/html-avatar-edit’, ← este es nuestro punto de entrada
[
‘wrapper’ => sprintf( ‘<div class=»%s-avatar»>’, $this->class_name ),
‘avatar’ => $img_avatar,
‘btn_edit’ => $html_btn_to_edit_avatar,
‘wrapper_end’ => ‘</div>’,
],
$user
);
LP 4.x construye el HTML con un array PHP y lo expone a través de
apply_filters(). Nosotros nos enganchamos con add_filter()y modificamos la clave
'wrapper' para agregarle nuestra clase.El
class_name del template es 'user', entoncesel div original es
<div class="user-avatar">.
La solución entonces no es un archivo — es un filtro en
functions.php:
if ( isset( $section[‘wrapper’] ) ) {
$section[‘wrapper’] = ‘<div class=»user-avatar lms-perfil-avatar«>’;
}
return $section;
}, 10, 2 );
Intentamos el override de archivo → falló → leímos el código fuente del plugin →
encontramos el filtro → lo usamos. Así se trabaja con LP 4.x.
Filtro de estadísticas — functions.php
add_filter()
El bloque de tarjetas de estadísticas también usa un array filtrable,
igual que el avatar. El hook se llama
learn-press/profile/layout/student-statistics/wrapper.
// 6. CORRECCIONES LP 4.x — PERFIL: AVATAR Y ESTADÍSTICAS (LECCIÓN 4.10)
// ──────────────────────────────────────────────────────────────
// Filtro 1: Estadísticas del estudiante
add_filter( ‘learn-press/profile/layout/student-statistics/wrapper’, function( $html_wrapper ) {
return [
‘<div id=»dashboard-statistic» class=»lms-estadisticas-perfil«>’ => ‘</div>’,
‘<div class=»dashboard-statistic__row lms-estadisticas-fila«>’ => ‘</div>’,
];
} );
// Filtro 2: Avatar del perfil
add_filter( ‘learn-press/user/html-avatar-edit’, function( $section, $user ) {
if ( isset( $section[‘wrapper’] ) ) {
$section[‘wrapper’] = ‘<div class=»user-avatar lms-perfil-avatar«>’;
}
return $section;
}, 10, 2 );
Verificar en el navegador con F12
Entrá al perfil del estudiante (/lp-profile/daniel) y buscá
las 3 clases con Ctrl+F en F12:
lms-perfil-navegacion → 1 of 1
lms-perfil-avatar → 1 of 1
lms-estadisticas-perfil → 1 of 1
Resumen de la lección 4.10
.lms-perfil-navegacionen el menú lateral. Funciona como archivo porque LP 4.x todavía usa templates para la navegación.
learn-press/user/html-avatar-edit que inyecta.lms-perfil-avatar. El archivo avatar.php estabacomentado en LP 4.x y nunca se ejecutaba.
learn-press/profile/layout/student-statistics/wrapperque inyecta
.lms-estadisticas-perfil.
hay que leer el código fuente del plugin y buscar si la llamada al template
fue reemplazada o comentada. LP 4.x migró varias partes del perfil a clases PHP
con
apply_filters() — y eso es nuestra puerta de entrada.