Los 6 shortcodes del plugin
Cómo crear shortcodes propios que se pueden usar en cualquier página, post o módulo de Divi.
includes/class-shortcodes.php
con tres shortcodes listos para usar. No se modifica ningún otro archivo.
¿Qué es un shortcode?
Un shortcode es un código corto entre corchetes que WordPress reemplaza automáticamente por HTML cuando carga la página. Es como un comando que le das a WordPress.
Los shortcodes son muy útiles porque:
- Se pueden usar en cualquier lugar: páginas, entradas, widgets, y módulos de Divi.
- El diseñador puede poner el shortcode sin tocar PHP — WordPress hace el resto.
- Cuando actualizás el código del shortcode, todas las páginas que lo usan se actualizan solas.
Los tres shortcodes del Plugin Helper
En esta lección creamos tres shortcodes. Cada uno resuelve una necesidad concreta del LMS:
Busca todos los cursos del tipo lp_course en WordPress y los muestra con imagen y título. Cada tarjeta tiene un enlace a la página del curso.
limit="6" — cuántos cursos mostrar (por defecto: 6)
columns="3" — cuántas columnas en la cuadrícula (por defecto: 3, el CSS lo aplica en la lección 5.6)
Ejemplo: [dlms_courses limit="3" columns="3"]
Genera un botón con enlace directo a la página de un curso. Usa la clase et_pb_button de Divi para heredar automáticamente el estilo del botón del tema.
course_id="123" — ID del curso (requerido, sin esto no muestra nada)
label="Inscribirme" — texto del botón (por defecto: «Inscribirme al curso»)
Ejemplo: [dlms_enroll_btn course_id="5" label="Quiero inscribirme"]
Lee el nombre del usuario que tiene sesión activa y lo muestra envuelto en un <span>. Si nadie está conectado, muestra el texto de fallback.
fallback="Estudiante" — texto que aparece si no hay sesión activa
Ejemplo: Bienvenido, [dlms_student_name fallback="visitante"]
Archivo que se completa hoy
├── divi-lms-helper.php
└── includes/
├── class-wizard.php
├── class-shortcodes.php <– ESTA LECCIÓN
├── class-admin-page.php <– Lección 5.5
└── class-assets.php <– Lección 5.4
El código: la clase DLMS_Shortcodes
Igual que el wizard, todos los shortcodes viven dentro de una clase PHP. El constructor registra los tres shortcodes con add_shortcode(), y cada método se encarga de generar el HTML de uno de ellos:
/**
* Divi LMS Helper — Shortcodes
*/
if ( ! defined( ‘ABSPATH’ ) ) { exit; }
class DLMS_Shortcodes {
// ── Constructor: registrar los shortcodes ──────────────────────
public function __construct() {
add_shortcode( ‘dlms_courses’, [ $this, ‘render_courses’ ] );
add_shortcode( ‘dlms_enroll_btn’, [ $this, ‘render_enroll_btn’ ] );
add_shortcode( ‘dlms_student_name’, [ $this, ‘render_student_name’ ] );
}
// [dlms_courses limit=»6″ columns=»3″]
public function render_courses( $atts ) {
$atts = shortcode_atts(
[ ‘limit’ => 6, ‘columns’ => 3 ],
$atts, ‘dlms_courses’
);
$courses = get_posts( [
‘post_type’ => ‘lp_course’,
‘posts_per_page’ => absint( $atts[‘limit’] ),
‘post_status’ => ‘publish’,
] );
if ( empty( $courses ) ) {
return ‘<p class=»dlms-no-courses»>No hay cursos disponibles.</p>’;
}
$cols = absint( $atts[‘columns’] );
$output = ‘<div class=»dlms-courses-grid dlms-cols-‘ . $cols . ‘»>’;
foreach ( $courses as $course ) {
$url = get_permalink( $course->ID );
$title = esc_html( $course->post_title );
$thumb_url = get_the_post_thumbnail_url( $course->ID, ‘medium’ );
$thumb = $thumb_url
? ‘<img src=»‘ . esc_url( $thumb_url ) . ‘» alt=»‘ . $title . ‘»>’
: ‘<div class=»dlms-course-no-thumb»></div>’;
$output .= ‘<div class=»dlms-course-card»>’;
$output .= ‘<a href=»‘ . esc_url( $url ) . ‘» class=»dlms-course-thumb»>’ . $thumb . ‘</a>’;
$output .= ‘<div class=»dlms-course-info»><h3 class=»dlms-course-title»><a href=»‘
. esc_url( $url ) . ‘»>’ . $title . ‘</a></h3></div>’;
$output .= ‘</div>’;
}
$output .= ‘</div>’;
return $output;
}
// [dlms_enroll_btn course_id=»123″ label=»Inscribirme»]
public function render_enroll_btn( $atts ) {
$atts = shortcode_atts(
[ ‘course_id’ => 0, ‘label’ => ‘Inscribirme al curso’ ],
$atts, ‘dlms_enroll_btn’
);
$course_id = absint( $atts[‘course_id’] );
if ( ! $course_id ) { return »; }
return ‘<a href=»‘ . esc_url( get_permalink( $course_id ) )
. ‘» class=»dlms-enroll-btn et_pb_button»>’
. esc_html( $atts[‘label’] ) . ‘</a>’;
}
// [dlms_student_name fallback=»Estudiante»]
public function render_student_name( $atts ) {
$atts = shortcode_atts(
[ ‘fallback’ => ‘Estudiante’ ],
$atts, ‘dlms_student_name’
);
if ( ! is_user_logged_in() ) {
return esc_html( $atts[‘fallback’] );
}
$user = wp_get_current_user();
return ‘<span class=»dlms-student-name»>’ . esc_html( $user->display_name ) . ‘</span>’;
}
}
new DLMS_Shortcodes();
Cómo se registra un shortcode en WordPress
La función que conecta el shortcode con su función de renderizado es add_shortcode(). Recibe dos parámetros:
| Parámetro | Ejemplo | ¿Qué es? |
|---|---|---|
| Nombre del shortcode | 'dlms_courses' |
El texto que va entre corchetes. Define cómo se escribe en la página. |
| Función de renderizado | [ $this, 'render_courses' ] |
La función PHP que genera el HTML. Puede ser una función suelta o un método de clase (como aquí). |
Cuando WordPress encuentra [dlms_courses] en el contenido de una página, llama automáticamente a render_courses() y reemplaza el shortcode con el HTML que devuelve esa función.
return, nunca echo. Si usaras echo, el HTML aparecería en el lugar equivocado de la página.
Usar shortcodes en Divi Divi 5
Los shortcodes funcionan en cualquier módulo de Divi que tenga un campo de texto. El más común es el módulo Texto. Simplemente escribís el shortcode en el campo de contenido:
Una nota sobre seguridad: esc_html y esc_url
En el código del shortcode vas a ver que siempre usamos funciones de escape antes de imprimir cualquier valor:
| Función | ¿Cuándo se usa? | ¿Para qué sirve? |
|---|---|---|
esc_html() |
Al imprimir texto | Convierte caracteres como < y > en entidades HTML. Evita que un título con código malicioso se ejecute. |
esc_url() |
Al imprimir URLs | Limpia la URL y elimina protocolos peligrosos como javascript:. |
absint() |
Al leer números | Convierte el valor a entero positivo. Ideal para IDs y cantidades. |
Esta es una de las reglas de oro del desarrollo WordPress: nunca imprimir datos sin escaparlos primero, aunque sean datos que vienen de la propia base de datos del sitio.
Verificacion de la leccion
Pasos para verificar que los shortcodes funcionan
- En WP Admin, ve a Páginas → Añadir nueva.
- Escribí
[dlms_student_name]en el contenido y publicá la página. - Visitá la página — debe aparecer tu nombre de usuario de WordPress.
- Agregá
[dlms_courses]en el contenido y guardá. - Visitá la página — deben aparecer los cursos de LearnPress con imagen y título (sin cuadrícula, eso viene en la lección 5.6).
- Hacé clic en la imagen de un curso — debe llevar a la página del curso en LearnPress.
- Bonus Divi: abrí una página con el Divi Builder, insertá un módulo Texto y escribí
[dlms_courses]— el Visual Builder debe mostrar el curso en tiempo real.