Aller au contenu

Démarrer avec Phoenix

Comprendre Phoenix : design, composants et contenus WordPress

Comprendre les trois couches de Phoenix, composer ses pages avec les blocs existants et choisir un premier exercice concret.

Phoenix est le socle de composants développé par Prositeweb pour réutiliser des fondations d’un projet à l’autre. Dans WordPress, son intérêt se voit surtout après la création du site : une personne peut modifier les contenus et réorganiser les sections prévues, tandis que le développeur conserve un design isolé et maîtrisé.

Ce guide donne les repères nécessaires avant d’ouvrir un fichier Twig. L’objectif est de comprendre ce que vous pouvez changer dans l’administration, ce qui relève du design et ce qui dépend des composants installés.

Trois couches à distinguer

WordPress gère les contenus. Une page, un article, un média ou un menu reste un objet WordPress. Les textes et les images ne devraient pas être dispersés dans les fichiers du design lorsqu’ils doivent être modifiés régulièrement.

Les composants Phoenix exposent une structure. Un bloc hero peut proposer un titre, une description, un média et des boutons. Un bloc faq contient une liste de questions et de réponses. Les noms précis de ces champs viennent du schéma installé, notamment DefaultValues.php dans les ressources de référence.

Le design décide de la présentation. Les fichiers Twig construisent le HTML. Les feuilles CSS définissent l’identité et les espacements. Le JavaScript apporte les interactions nécessaires. Un même contrat de contenu peut ainsi prendre plusieurs apparences.

wp-content/themes/phoenix/designs/mon-design/
    parts/hero.twig
    parts/about.twig
    parts/footer.twig
    php/part/
    assets/styles.json
    assets/css/design.css
    assets/js/navigation.js

Ce dossier ne constitue pas à lui seul un thème WordPress autonome. Il s’insère dans une installation Phoenix qui sait charger ses fichiers et fournir le contexte attendu.

Comment une page prend forme

Prenons une page qui présente un atelier. Son introduction utilise hero, sa méthode about, ses bénéfices features, ses réponses pratiques faq et son inscription cta. Le responsable du contenu complète les champs de ces sections dans WordPress.

Le développeur prépare les variantes et les limites : une image peut être facultative, un bouton peut disparaître lorsque sa destination manque, et des cartes peuvent conserver une hauteur cohérente malgré des textes différents. Ces décisions donnent de l’autonomie à l’éditeur sans lui demander de recomposer toute la mise en page.

Une page courante se construit donc avec les blocs existants. Une logique particulière, par exemple un configurateur de projet, peut justifier un modèle PHP spécifique. Ce choix doit répondre au besoin réel de la page.

Ce que le backend doit pouvoir modifier

Une première vérification consiste à dresser la liste des contenus qui évolueront : titre d’accueil, photos, présentation, coordonnées, liens des réseaux sociaux, menus et boutons. Vérifiez ensuite que chaque élément possède une source administrable.

Dans les designs de référence, settings.post_id identifie la page courante. Les fonctions Twig comme field(), menu(), url() ou latest() donnent accès à des informations et à des rendus existants. Leur contrat doit être lu dans la version de Phoenix utilisée ; un nom de fonction ne suffit pas à deviner tous ses paramètres.

Le guide des menus dynamiques explique comment garder l’en-tête et le pied de page administrables. Pour la structure des fichiers, poursuivez avec l’organisation d’un design.

Un premier exercice pour vérifier votre compréhension

Créez une page de test contenant seulement hero, about et cta. Changez ensuite le titre du hero dans WordPress, puis la couleur du bouton dans le CSS du design.

Observez la différence : la première opération modifie les données d’une page, la seconde son apparence. Ajoutez une deuxième page avec les mêmes blocs. Elle doit conserver ses propres textes tout en partageant la présentation.

Demandez enfin à une autre personne de changer le bouton et sa destination. Si elle doit ouvrir un fichier PHP pour une modification de contenu courante, le raccordement mérite d’être revu.

Avant de télécharger les exemples

Les archives proposées ici contiennent des designs d’exemple, des fragments et des exercices. Le cœur Phoenix, WordPress et ACF ne sont pas inclus. L’accès aux composants et les conditions de licence se vérifient auprès de Prositeweb pour votre projet.

Commencez sur un environnement de développement, avec une sauvegarde. Les exemples doivent être confrontés aux champs et au chargeur réellement présents dans votre installation.

RESSOURCE PHOENIX · ZIPExplorer le guide et les exemples Phoenix95,0 Ko · Fichiers à explorer et à adapter

Vous souhaitez avancer avec d’autres créateurs ? Consultez les ateliers du jeudi et rejoignez la communauté Phoenix. Le meilleur premier résultat reste une petite page que vous savez ensuite modifier vous-même.

Continuer à apprendre

D’autres pistes à explorer.

Gérer les cookies