TUTORIEL : Ajouter séance yoga en ligne site Atelier du Geste Juste

Tutoriel : comment ajouter une nouvelle séance de cours yoga en ligne ?

Patricia, voici un tutoriel vous expliquant comment ajouter une nouvelle séance de yoga sur la page https://www.latelierdugestejuste.com/cours-de-yoga-a-distance/.

NOTE : Ce tutoriel a été mis à jour le 4 avril 2020

ÉTAPE 1 – Préparez vos fichiers (son mp3 et PDF) à exporter sur le serveur

RAPPEL IMPORTANT : Un fichier média (son, image, pdf…) doit être adapté pour le web avant d’être importé. Concernant les extensions PDF et MP3 votre principale mission, outre de tenter d’avoir des fichiers les plus légers possibles, va consister à normaliser les noms des fichiers.

Pourquoi bien nommer les fichiers média avant de les importer dans votre WordPress ?

Pour éviter les erreurs 404 liées aux caractères spéciaux non lus par certains navigateurs
Afin d’optimiser le référencement avec des mots clés
Pour le confort de vos visiteurs qui auront une information précise
Pour vous aider à la gestion de vos images en les identifiant facilement

Comment renommer ses fichiers média ?

La règle la plus importante est de ne jamais utilisez d’espaces, d’accents ou de caractères spéciaux. Il est nécessaire de respecter cette règle pour tous les types de fichier utilisés sur le web : PDF, vidéo, ZIP… Le non respect de cette consigne peut provoquer des problèmes d’affichage de votre site sur certains navigateurs.
Il est préconisé de n’utiliser que des minuscules lorsque vous nommez vos fichiers afin d’avoir des url (adresse de l’image) propre mais aussi pour palier à certains problème que peuvent entrainer les majuscules lors des sauvegardes de votre site (perte de données).
Vos noms de fichiers ne doivent pas contenir d’espace, il est conseillé de les remplacer par des tirets hauts (-). Le fait de séparer vos mots plutôt que de les coller permet une meilleure identification des mots par les moteurs de recherche ce qui est un atout pour votre référencement.
Nommez vos fichiers en fonction de leur contenu pour améliorer votre référencent et vous aider lors de la manipulation de vos fichiers ; en lisant le nom du fichier, vous devez savoir de quelle image il s’agit.

ÉTAPE 2 – Installer et configurer FileZilla pour avoir accès au serveur où est hébergé votre site.

Télécharger FileZilla sur votre ordinateur et le configurer grâce au tutoriel du développeur.
Démarrer le logiciel et le configurer avec les codes suivants (Hôte: ftp.latelierdugestejuste.com – Login : latelierst – PW : envoyés par email
Une fois connectée se rendre dans le dossier où sont hébergé vos fichiers mp3 > /www/wp-content/uploads/mp3 (voir copie écran)
Placer vos fichiers mp3 et PDF (le nom du fichier doit être optimisé – voir ci-dessus) à mettre en ligne sur votre site dans le dossier /www/wp-content/uploads/mp3
Pour copier un fichier de son ordinateur vers le serveur il faut le glisser de la fenêtre gauche vers celle de droite. Une fois le transfert terminé le fichier apparaitra à droite (et à gauche).

RAPPEL : La fenêtre de droite correspond au serveur où est hébergé votre site et celle de gauche à votre ordinateur. Vous devez chercher à gauche le dossier où vous avez préparé votre fichier son mp3 et votre PDF et à droite l’endroit où vous allez le déposer sur le serveur (dans le dossier mp3).

ÉTAPE 3 – Éditer la page des séances en ligne dans l’administration WordPress

Se rendre sur la page à éditer

Se connecter à son WordPress
Cliquer sur l’onglet PAGES
Modifier la page « Cours de yoga à distance » qui se trouve en fin de liste
Vous êtes maintenant prête à ajouter des blocs pour les mettre à jour.

Dupliquer le bloc d’une séance à distance

Une fois dans l’édition de la page, repérer les blocs d’une séance (titre + texte présentation + numéro de la séance + lecteur mp3 + bouton pdf), qui représente en fait deux ensembles de blocs distincts. Ce sont ces blocs qu’il va falloir « dupliquer » et mettre à jour
Pour insérer des copies de ces blocs et préparer leur mise à jour, repérer le petit « + » (ajouter un bloc) sous le diviseur (barre horizontale) de la dernière séance et cliquer dessus (voir copie écran ci-dessous).
Une fenêtre s’ouvre avec les différents blocs disponibles. Scroller vers le bas dans la fenêtre pour arriver au dernier onglet qui s’appelle « Réutilisables ». Déployer l’onglet, vous verrez alors apparaitre les deux blocs nommés « Bloc séance – Niveau 1 » et « Bloc séance – Niveau 2 ». Cliquer sur le premier afin de l’intégrer sur la page (voir les copies d’écrans ci-dessous).

1 – En bas à droite cliquer sur le dernier « + » pour afficher le menu d’intégration de blocs

2 – Scroller vers le bas pour chercher l’onglet « Réutilisables »

3 – Choisir le module réutilisable à intégrer « Bloc séance – Niveau 1 »

Éditer le bloc d’une séance à distance

Maintenant que le bloc est copié dans votre espace d’édition vous devez le transformer en « Bloc Gutemberg normal » pour pouvoir mettre à jour son contenu. Cliquer sur le bloc puis sur le picto avec les trois petits points verticaux en haut à droite. Dans le menu déroulant choisissez l’option « Convertir en blocs Gutemberg normal ».

Cliquer sur « Convertir en bloc Gutemberg normal » avant d’éditer les blocs

NOTE : Si vous ne convertissez pas les blocs en « Blocs Gutemberg normal » vous transformerez le modèle même du bloc réutilisable.

Éditer le deuxième bloc (niveau 2) en y intégrant le lien vers les fichiers mp3 et PDF

Le premier niveau d’un bloc séance étant édité vous pouvez maintenant éditer le second niveau. La duplication se passe de la même manière que ce que nous venons de voir ci-dessus.

DUPLIQUER L’ENSEMBLE DE BLOCS COMPRENANT LE LECTEUR SON ET LE BOUTON PDF

Cliquer sur le dernier « + » de la page et chercher le « Bloc séance – Niveau 2 » dans les blocs réutilisables
Transformer le bloc en « bloc Gutemberg normal »
Voir ci-dessus si la duplication pose problème.

METTRE À JOUR LE LIEN MP3

Cliquer sur le lecteur et sur « Remplacer » dans le menu qui apparait.
Cliquer sur « Insérer à partir d’une adresse web » puis sur le petit crayon pour changer l’adresse du fichier son
Remplacer le lien présent par le nouveau lien de votre fichier qui ressemblera à https://www.latelierdugestejuste.com//wp-content/uploads/mp3/nom-de-votre-fichier.mp3
Appliquer le changement en cliquant sur la flèche à droite du lien

METTRE À JOUR LE LIEN PDF

Cliquer sur le module avec le boutons du PDF
Cliquer sur l’icône d’ajout d’un lien (icône maillon)
Remplacer le lien par le nouveau lien de votre fichier qui ressemblera à https://www.latelierdugestejuste.com//wp-content/uploads/mp3/nom-de-votre-fichier.pdf
Appliquer le changement en cliquant sur la flèche à droite du lien
Penser à enregistrer l’ensemble de la page

ÉTAPE 4 – Test et astuces

Une fois que vos modifications sont enregistrées pensez à bien vérifier votre page côté site pour être certaine que vous n’avez pas commis d’erreurs.

Si vous repérez des erreurs tentez de les corriger. Si les corrections sont trop complexes vous pouvez supprimer les blocs (voir copie écran ci-dessous) et recommencer au début. de ce tutoriel.

Pour voir des exemples de blog WordPress rendez-vous sur la page des créations de la bécane WEB – voir des exemples