Personnaliser

La création des champs de personnalisation sont simplifiées avec Elementum.

Par un simple fichier YAML dans le dossier customize, vous pouvez créer des champs de personnalisation. De plus, vous pouvez aussi créer facilement vos propres champs personnalisés.

Priorité des champs

Elementum étant fait pour créer un écosystème, il est possible de réécrire une configuration des champs de personnalisation depuis un autre plugin ou thème.

Pour cela, il suffit de créer un fichier YAML dans le dossier customize avec le même nom que le fichier YAML de l'autre plugin ou thème.

Dans le même ordre d'execution de Wordpress, le plugin, le thème puis le thème enfant sera prioritaire.

Créer un panel

Un panel est une collection de sections contenant un ou plusieurs champs.

Un panel est identifié par un ID unique et présente la clé sections pour contenir les sections.

customize/colors.yaml

my_colors: # ID du panel
    title: "Mes couleurs"
    description: "Personnalisation des couleurs du thème"
    priority: 10 # Position dans la liste des panels et sections
    sections: # Liste des sections
        palette: # ID de la section
            title: "Palette de couleur"
            fields: # Liste des champs de la section
                elementum_primary:
                    label: "Couleur principale"
                    type: "color_contrast"
                    default: "#ECD4A7"
        typography: # ID de la section
            title: "Typographie"
            fields: # Liste des champs de la section
                elementum_font_family:
                    label: "Police de caractère"
                    type: "font"
                    default: "Arial, sans-serif"

Créer une section

Une section est une collection de champs.

Une section est identifiée par un ID unique et présente la clé fields pour contenir les champs.

customize/logotype.yaml

logotype: # ID de la section
    title: "Logo"
    description: "Logo et options associées"
    priority: 15
    fields: # Liste des champs de la section
        url:
            label: "Logo"
            type: "image"
            default: "https://via.placeholder.com/150"

        alt:
            label: "Texte alternatif"
            type: "text"
            default: "Logo du site"

        logo_max_width:
            label: "Largeur maximale du logo"
            type: "number"
            default: "150"

Récupérer les valeurs

Grâce à la méthode getSection du service customize, vous pouvez récupérer les valeurs des panels et sections.

app/Controllers/MyController.php

#[Template('home')]
public function frontPage()
{
    $frontpage = $this->customize->getSection('logotype');

    return $this->render('home.html.twig', [
        'frontpage' => $frontpage,
    ]);
}