La personnalisation

Elementum simplifie la création et la gestion des champs de personnalisation.

Avec une simple configuration YAML dans le dossier customize, vous pouvez définir des champs de personnalisation. Vous avez également la possibilité de créer facilement vos propres champs personnalisés.

Priorité des champs

Conçu pour fonctionner dans un écosystème, Elementum permet de surcharger la configuration des champs de personnalisation d'un autre plugin ou thème.

Pour ce faire, créez un fichier YAML dans le dossier customize portant le même nom que celui du plugin ou du thème que vous souhaitez surcharger.

L'ordre de priorité suit celui de WordPress : les champs des plugins sont chargés en premier, suivis de ceux du thème, puis du thème enfant (le plus prioritaire).

Créer un panel

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

Chaque panel est identifié par un ID unique et contient une clé sections pour organiser son contenu.

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 permet de regrouper des champs apparentés.

Identifiée par un ID unique, chaque section contient une clé fields qui liste ses champs de configuration.

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

La méthode getSection du service customize permet d'accéder aux valeurs des panneaux et des sections.

app/Controllers/MyController.php

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

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