11.3 Bookdown dans Wordpress

Le format gitbook de bookdown qui est le format le plus utilisé pour les tutoriels, les cours et les manuels (type “textbook”) en ligne n’est pas prévu pour s’intégrer à Wordpress. Cependant, grâce à {learnitdown}, il est possible d’obtenir un résultat indiscernable visuellement d’un réelle intégration via l’inclusion du bookdown dans un iframe à l’intérieur d’une page Wordpress. De plus, {learnitdown} transfère des informations relatives à l’utilisateur Wordpress enregistré, et aux fonctions côté serveur pour l’enregistrement des données H5P. Ainsi, l’intégration est complète puisque les applications H5P incluses dans le bookdown bénéficient des mêmes fonctionnalités que si elles étaient directement affichées à l’intérieur d’une page Wordpress. Les mêmes fonctions de détection de l’utilisateur et d’enregistrement des évènements générés par les applications Shiny et learnr sont également implémentées dans {learnitdown}. La partie à modifier dans le bookdown pour réaliser cette intégration ayant été abordée ci-dessus, voyons maintenant ce que nous devons faire du côté du serveur Wordpress pour la finaliser.

  1. Inclusion des pages du bookdown dans le serveur Wordpress

Les pages du bookdown ont été générées dans un sous-dossier dans le dépôt git de votre dépoiement Wordpress. Vous devez maintenant effectuer un commit, un push sur Gandi.net, et enfin un deploy comme expliqué à la section précédente :

cd <path_to_site_folder>
git add .
git commit -m "New version of course-2023"
git push origin master
ssh <ID>@git.sd3.gpaas.net 'deploy <SITE>.git'
  1. Créer une page contenant uniquement un iframe dans Wordpress

Avec un compte ayant des droits en édition, aller dans le tableau de bord de Wordpress, ensuite dans Pages-> Ajouter. Dans l’éditeur, n’indiquez aucun titre, mais ajouter un bloc en dessous et sélectionner le type HTML personnalisé.

Collez-y le code ci-dessous après avoir modifié <SITE> et <URL> par l’URL de la page et adaptez le contenu de src en fonction de votre propre page, ainsi que la hauteur de la barre supérieure en pixels dans height="calc(100vh - 50px)" (ici, 50 pixels).

[advanced_iframe  id="bookdown" name="bookdown" src="https://<SITE>.org/<URL>"
width="100%" height="calc(100vh - 50px)" use_shortcode_attributes_only="true"
map_parameter_to_url="iframe" add_iframe_url_as_param="same" show_iframe_loader="true"
enable_responsive_iframe="true" hide_elements=".tg-site-footer-bar,.entry-footer"
additional_height="100" multi_domain_enabled="false" use_post_message="false"]

Appuyez sur le bouton Publier. Vous devez obtenir quelque chose qui se rapproche de ceci :

  1. Allez dans l’onglet Document, puis Permalien-> Slug d'URL et choisissez un nom de la page qui diffère de celui du dépôt GitHub (donc dans notre cas, pas sdd-umons3-2020). Par exemple, sdd3-2020.

  1. Enfin, allez tout en bas de l’éditeur dans Réglages de la page -> Général et sélectionnez la mise en page la plus simple en bas à droite et cochez également Supprimer la marge du contenu.

  2. Cliquez sur le bouton Mettre à jour. Visualisez votre page et naviguez dans la section Introduction du bookdown pour tester les différentes fonctionnalités.

  3. A partir d’un compte administrateur Wordpress, cliquez sur Personnaliser dans la barre noire supérieure. Ensuite, éditez le menu qui apparait à gauche pour y inclure un lien vers la page que nous venons de créer.

Au final, le bookdown se présente sous deux formes :

  • Les pages affichées telles quelles via une URL reprenant le nom du dépôt GitHub (il s’agit de https://<SITE>/<URL>/). Nous avons une présentation bookdown classique. Les informations de l’identité de l’étudiant sont transmise via localStorage, mais le bandeau supérieur du site et la barre noire supérieure de gestion Wordpress ne sont pas affichés. Le bookdown n’est pas vraiment intégré dans le site et les évènements xAPI de H5P ne sont pas renvoyés au serveur Wordpress. Cette représentation est utile pour l”utilisation du bookdown dans un contexte hors cours UMONS.

  • Les même page du bookdown, mais intégrées sous forme d’iframe dans une page de Wordpress dédiée à partir du lien de la page Wordpress (https://<SITE>/<URL_WORDPRESS>). La page conserve des éléments issus de Wordpress comme la barre d’outils supérieure (accès à Moodle, Discord, etc.) ainsi que la barre noire supérieure de contrôle Wordpress qui permet aussi de vérifier d’un coup d’œil que l’on est connecté, et sous quelle identité nous le sommes. S’il veut lire le contenu du bookdown sans voir la bannière haute, le lecteur peut faire coulisser la page jusque tout en bas et cette bannière viendra se cacher derrière la barre noire supérieure Wordpress (qui, elle, reste toujours visible tant que l’utilisateur est connecté au site).