Pour créer votre premier composant visuel Phoenix, commencez par un bloc existant dont le contrat est simple. about est un bon exercice : un titre, un texte, une image éventuelle et un bouton suffisent pour explorer le passage des données entre WordPress et Twig.
Le but de cet exercice est d’obtenir une section que l’on peut réellement modifier dans le backend.
Lire les noms des champs disponibles
Dans les ressources de référence, le layout about expose notamment title, description, photo, des options et un appel à l’action. Vérifiez ces noms dans le schéma de votre installation avant de développer.
Le libellé affiché dans l’éditeur aide l’utilisateur. La propriété technique name fournit la variable Twig. Une clé ACF de type field_... identifie le champ ; ce n’est pas la variable à inventer dans le modèle.
Pour commencer, ne présentez que les champs nécessaires. Vous pourrez ajouter une variante lorsque le premier rendu fonctionnera avec des contenus réels.
Construire une section minimale
Créez parts/about.twig dans le dossier du design. Le titre est un texte à échapper. La description WYSIWYG peut contenir du HTML éditorial maîtrisé.
<section class="md-about">
<div class="md-container">
{% if title is not empty %}
<h2>{{ title|e }}</h2>
{% endif %}
{% if description is not empty %}
<div class="md-rich">{{ description|raw }}</div>
{% endif %}
</div>
</section>
L’usage de raw suppose que la source est prévue pour du contenu HTML de confiance et soumise à une politique de publication adaptée. Une valeur issue directement d’une requête HTTP ne doit pas recevoir ce traitement par habitude.
Ajoutez une classe propre au design plutôt qu’une règle globale sur toutes les sections du site. Le guide des assets explique où déclarer cette feuille.
Introduire l’image sans la rendre obligatoire
Vérifiez d’abord que le champ contient un média et que sa résolution donne une URL. Avec le helper natif la_photo(), les exemples reçus utilisent un tableau contenant l’URL et les dimensions.
{% if photo is not empty %}
{% set image = la_photo(photo, 'large') %}
{% if image.0|default('') is not empty %}
<img src="{{ image.0|e('html_attr') }}"
width="{{ image.1 }}" height="{{ image.2 }}"
alt="" loading="lazy">
{% endif %}
{% endif %}
Ici, alt="" correspond à une image décorative accompagnant la présentation. Pour une photo informative, utilisez le texte alternatif du média ; le titre du fichier ou photo_title() ne remplace pas automatiquement cette description. Dans le design communautaire, un fragment PHP s’appuie sur wp_get_attachment_image() pour conserver les données natives du média.
Réutiliser le bouton commun
Le bouton doit disparaître si son libellé ou sa destination manque. Réutilisez le fragment du design pour les destinations internes et externes, plutôt que de fabriquer un lien vide.
{% include ['parts/ui/button.twig', 'ui/button.twig'] %}
Le kit contient un exemple complet de ce fragment avec un attribut title, un libellé visible et une URL échappée. Le guide des menus revient aussi sur les destinations administrables.
Tester les cas qui fragilisent une section
Créez une page de développement avec le bloc, puis essayez un titre court, un titre sur trois lignes, un texte très bref et plusieurs paragraphes. Retirez ensuite la photo et le bouton.
La section doit conserver une structure lisible dans chaque cas. Vérifiez également une image supprimée de la médiathèque et un affichage sur téléphone. Ces essais sont plus utiles qu’une seule capture avec un contenu parfaitement calibré.
Vérifier l’autonomie promise
Donnez la page à une personne qui n’a pas écrit le Twig. Demandez-lui de changer le titre, la photo et la destination du bouton. Elle doit identifier les champs correspondants sans éditer le code.
Votre premier bloc est prêt à être réutilisé lorsque ses champs, son rendu et ses comportements en cas de contenu absent sont compris. Vous pouvez alors composer une page entière.
