Mostrar un listado de lecciones mediante un archivo de plantilla de WordPress

Aprende en este tutorial cómo enseñar un listado de lecciones pertenecientes a un curso al final de una de estas lecciones en WordPress mediante código, sin plugins.

Varios de los suscriptores de Código Génesis venden su propios cursos online y una de las preguntas que más se repite entre ellos es cómo gestionar las lecciones de los cursos.

¿Por ejemplo?

A raíz del tutorial sobre cómo mostrar un listado con cursos y lecciones, Damián me preguntó si se puede insertar el listado de todas las lecciones al final de una lección.

Así que me puse manos a obra. 😉

Aquí tienes un tutorial para introducir un listado de lecciones creando un archivo de plantilla de WordPress.

De esta forma, cuando generas una lección nueva, insertas de forma automática el resto de lecciones de ese curso al final de la misma.

Este sería el resultado final:

Ejemplo de lección mostrando todas las lecciones del curso.

¿Te interesa? Pues sigue leyendo:

Pasos para añadir un listado con las lecciones de un curso en WordPress dentro de una lección

1. Crea el/los CPTs

Tienes dos opciones para estructurar cursos y lecciones:

Crear un CPT jerárquico, de forma que los cursos sean los «padres» y las lecciones los «hijos».
Generar dos CPTs, uno para «cursos» y otro para «lecciones» para luego relacionarlos entre ellos de forma jerárquica mediante un metabox.

Ambas opciones te permiten conseguir el resultado final. Lo único que cambia es cómo llamas al fichero de la plantilla.

2. Crea un fichero single-cpt.php

Dependiendo de qué estrategia hayas usado para crear tus CPTs, tendrás que crear un archivo de plantilla con un nombre u otro.

En concreto, el nombre será single-cpt-php, donde debes sustituir «cpt» por la denominación con la que has registrado dicho CTP.

Siguiendo los ejemplos anteriores:

Opción 1: el nombre del fichero será single-course.php.
Opción 2: el nombre del fichero será single-lesson.php.

Crea un archivo con este nombre en la raíz del child theme y añade el siguiente código:

Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.

Con este fragmento introduces una lista con todas la lecciones de un mismo curso al final de cada lección.

En concreto, utilizas $post->post_parent para identificar el curso padre y que muestre así a sus «hermanos».

Además, enganchas la función en el hook genesis_entry_footer para que se visualicen al final del contenido de la lección.

Actualización: A petición de un suscriptor he creado una versión donde puedes cambiar el color de la lección que se está visitando. Este sería el resultado:

Ejemplo mostrando la lección actual de otro color.

Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.

Con esta variación se añade la clase current-lesson cuando detecta que el post en el que está ($current-post) coincide con el ID de la entrada del elemento del listado de lecciones que crea.

Gracias a esto puedes personalizar el color con un simple snippet de CSS que puedes colocar al final del style.css del tema:

.current-lesson a {
     color: #000;
     text-decoration-line: none;
 }

En este caso la lección se mostrará en negro y sin subrayado, pero puedes personalizarlo a tu gusto.

Ya lo tienes.

¿La ventaja de utilizar un archivo de plantilla en lugar de un shortcode?

Pues que, cuando añadas una nueva lección, aparecerá el listado de todas las lecciones de ese curso de forma automática, sin que tengas que hacer nada más.

Interesante, ¿verdad?

Si a pesar de todo prefieres que el código esté en formato de shortcode, puedes adaptar este snippet para ello.

Y si tienes alguna duda sobre cómo hacerlo, dímelo y preparo un tutorial a medida.

Conclusiones

Si quieres mostrar un listado de la lecciones que incluye un curso dentro de una lección, sin tener que añadirlas a mano ni recurrir a un plugin, ahora ya sabes cómo hacerlo mediante código.

¿Tienes alguna pregunta o quieres darme una sugerencia para próximos tutoriales? Déjala en los comentarios.

Así es, ventajas de suscriptor. 😉

Mostrar un listado de lecciones creando un archivo de plantilla de WordPress

Pasos para añadir un listado con las lecciones de un curso en WordPress dentro de una lección

1. Crea el/los CPTs

2. Crea un fichero single-cpt.php

Conclusiones

Tutoriales relacionados

Pasos para añadir un listado con las lecciones de un curso en WordPress dentro de una lección

1. Crea el/los CPTs

2. Crea un fichero single-cpt.php

Conclusiones

Tutoriales relacionados

Nahuai Badiola