Skip to main content

Partials du thème

Dans le cadre de notre thème WordPress, le dossier /partials joue un rôle clé dans la structure et l'organisation de notre code. Les partials sont des fragments de code réutilisables écrits en Twig qui permettent une inclusion cohérente et modulaire de certaines parties de notre site.

Structure du Dossier /partials​

Le dossier /partials est divisé en sous-dossiers, chacun représentant une catégorie spécifique de partials:

Architecture Partials
themes/
└── <votre-projet>/
    └── partials/
        ├── assets/
        │   ├── _button.twig
        │   ├── _img.twig
        │   ├── _link.twig
        │   ├── _select.twig
        │   └── _tag.twig
        └── global/
            ├── _card.twig
            ├── _componentContainer.twig
            ├── _componentContainerClose.twig
            ├── _formRechercheAvancee.twig
            ├── _pagination.twig
            ├── _title.twig
            └── _wysiwyg.twig

Chaque sous-dossier et fichier représente une composante spécifique, telle qu'un bouton, un lien, ou une carte, qui peut être facilement insérée et réutilisée dans différentes parties du site.

Utilisation des Partials​

Les partials sont utilisés pour incorporer des éléments récurrents dans le thème, en passant des données dynamiques ou des classes spécifiques. Voici quelques exemples de comment inclure des partials dans vos templates Twig:

Exemple : Titre Global​

Pour inclure un titre avec des classes personnalisées et du contenu dynamique :

Utilisation du partial 
{% include '/Partials/global/_title.twig' ignore missing with {
  'classes': 'titre-habille',
  'options': options,
  'title': title 
} only %}
  • classes : Permet de passer des classes CSS optionnelles pour le style du titre.
  • options : Un tableau d'options pour la personnalisation avancée (onglet ACF "Options" sur les composants).
  • title : Le contenu textuel du titre.

Style SCSS​

En complément de ces partials Twig, le style de chaque partial est géré par des fichiers SCSS correspondants situés dans le dossier /assets/partials/ (plus d'infos).

note

Contrairement aux composants, pour lesquels leur style (.scss) sera dans le même dossier que leur template (.twig).