Apprendre à créer et gérer un site devient plus motivant lorsque chaque étape produit un résultat visible. Avec Phoenix, vous pouvez commencer par les contenus et les blocs, puis explorer progressivement le design et le code.
Ce parcours DIY propose des exercices courts. Il suppose une installation de développement fonctionnelle ; il ne remplace pas la mise en place du thème et des composants nécessaires.
Commencer par une page que vous comprenez
Créez une page de test avec un titre, un paragraphe et une action. Définissez ce qu’une personne doit y comprendre. Cette intention vous aidera à évaluer les changements au lieu de modifier les réglages au hasard.
Apprenez d’abord à retrouver la page dans WordPress, à enregistrer un brouillon, à utiliser la prévisualisation et à reconnaître sa version publique. Vérifiez aussi la différence entre une page et un article.
Le guide pour comprendre Phoenix explique la relation entre plateforme, composants et design.
Premier exercice : changer un contenu
Dans un bloc hero, modifiez le titre et la description. Observez leur emplacement sur la page. Changez ensuite le libellé du bouton et sa destination.
Votre critère de réussite est simple : retrouver le champ qui correspond à chaque élément visible et vérifier le lien public. Si une valeur ne change pas, recherchez sa source avant de recommencer plusieurs fois.
Conservez une petite note avec le nom de la page, le bloc utilisé et les champs modifiés. Cette trace vous évitera de réapprendre le même chemin la semaine suivante.
Deuxième exercice : gérer une image et un menu
Ajoutez une image depuis la médiathèque, vérifiez son cadrage et renseignez son texte alternatif lorsqu’elle apporte une information. Retirez-la ensuite pour voir comment le bloc se comporte sans média.
Modifiez un lien dans un menu WordPress et contrôlez sa place dans l’en-tête ou le pied de page. Vous découvrirez ainsi la différence entre un contenu local à une page et un élément commun à plusieurs pages.
Le guide des images et celui des menus dynamiques fournissent les repères utiles.
Troisième exercice : composer une petite page
Réunissez hero, about, features, faq et cta. Chaque section doit apporter une information différente. Écrivez d’abord les contenus, puis choisissez les variantes visuelles prévues.
Essayez un texte plus long et retirez un bouton. Le design doit supporter ces changements sans vous obliger à ajuster les fichiers pour chaque phrase.
Demandez à une personne de lire la page et de trouver l’action principale. Son retour vous aidera à distinguer un problème de présentation d’un message encore imprécis.
Quatrième exercice : explorer un fichier Twig
Lorsque vous êtes à l’aise avec les contenus, ouvrez un fichier simple comme about.twig dans le design d’exemple. Repérez le titre, la description et les conditions qui contrôlent les éléments facultatifs.
{% if title is not empty %}
<h2>{{ title|e }}</h2>
{% endif %}
Changez une classe ou un espacement sur votre copie de développement. Évitez de modifier le cœur ou les dépendances pour cet exercice. La création d’un premier bloc propose une suite progressive.
Utiliser l’IA comme aide à l’apprentissage
Demandez une explication sur un petit extrait, puis vérifiez-la avec les sources et le résultat dans le navigateur. Une réponse convaincante peut néanmoins supposer un champ ou une fonction qui n’existe pas dans votre installation.
Formulez une question précise : « Pourquoi ce bouton disparaît-il lorsque son texte est vide ? » est plus facile à vérifier que « Améliore tout mon site ».
Les ateliers du jeudi, de 15 h à 17 h à l’heure de Montréal, permettent de pratiquer avec d’autres participants. Consultez la fiche de la prochaine séance pour ses modalités et son programme.
