> For the complete documentation index, see [llms.txt](https://akyos.gitbook.io/book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://akyos.gitbook.io/book/wordpress/guides/creer-un-component.md).
# Créer un component
Quand créer un component ?
On crée un component lorsqu'on a besoin de définir un groupe de balises / une strcuture HTML que l'on va réutiliser à plusieurs endroits dans le code et dont on souhaite formater l'affichage en fonction d'un ou plusieurs paramètres.
Ce**la va permettre de :**
* Réduire le code en le factorisant
* Gagner en lisibilité car le code du component est dans un fichier blade unique
* Réutiliser du code d'un projet à l'autre très facilement
* Gérer la logique d'affichage hors de la vue
**⚠ Ne pas créer un component si :**
* Le contenu est présent à un seul endroit
* Le contenu est statique et ne dépend d'aucun paramètre
Quelques exemples de component :
```php
```
* On a besoin d'afficher quelques actualités sur la page d'accueil, sur une single et sur la page archive.
* Le contenu est dynamique car il dépend de l'id du post
```php
```
* Partout sur les pages de la maquette, on a à chaque entête de section un titre avec un bouton à droite.
* Le contenu est dynamique car administré depuis le back-office
```php
{!! $reponse !!}
```
* On a besoin d'un accordéon pour un bloc gutenberg servant de FAQ sur une page. La page contient une dizaine de questions/réponses
* Le contenu est dynamique car administré depuis le back-office
* Le component "accordion" pourra être réutilisé dans un autre projet avec le JS associé
{% stepper %}
{% step %}
### Créer un fichier PHP dans app/View/Components
Les component se déclarent au niveau du dossier `/Components` dans `/app`
```
├── app
├── View
├── Components
├── Post.php
├── Titlebutton.php
├── Accordion.php
```
Utilisez la commande
`wp acorn make:component`
Dans la Classe, on définit les attributs qui serviront de paramètres au component :
```php
// Post.php
class Post extends Component {
public $post; // ID ou Object de type Post pour récupérer le contenu
}
```
On oublie pas de l'initialiser dans le constructeur :
```php
class Post extends Component
{
public $post; // ID ou Object de type Post pour récupérer le contenu
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($post = null)
{
$this->post = $post instanceof \WP_Post ? $post : get_post($post);
}
}
```
Enfin on lui dit quelle vue il doit retourner lorsque le component est appelé :
```php
class Post extends Component
{
public $post;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($post = null)
{
$this->post = $post instanceof \WP_Post ? $post : get_post($post);
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.post');
}
}
```
{% endstep %}
{% step %}
## Créer le template
Le template du component se trouve dans le dossier `/components` de `/resources`
```
├── resources
├── views
├── components
├── post.blade.php
├── titlebutton.blade.php
├── accordion.blade.php
```
{% hint style="danger" %}
Le nom de la vue doit être en MINUSCULE, sans TIRET
{% endhint %}
À l'intérieur du fichier blade, on a accès aux variables directement via leur slug, pas besoin de passer par `$this`
```php
merge(['class' => 'post']) }}>
```
{% endstep %}
{% step %}
### Utilisation du $slot
Au lieu de passer par un paramètre pour injecter du contenu à un component, on peut utiliser `$slot`
```html
// TEMPLATE DU COMPONENT
{!! $title !!} @icon('chevron')
{!! $slot !!}
```
```html
// APPEL DU COMPONENT
{{ $reponse }}
```
Tout ce qui est présent à l'intérieur des balises est injecté via la variable `$slot`
{% endstep %}
{% endstepper %}