Création d'options

Les options sont les éléments configurables qui apparaissent dans le Customizer de WordPress. Chaque option doit être définie dans une section et peut être de différents types (texte, image, sélecteur, etc.).

Structure de base

Chaque option est définie par les paramètres suivants :

• label (string, requis)
  Le nom affiché dans l'interface d'administration.
  Exemple: "Couleur principale"

• type (string, requis)
  Le type de champ à utiliser.
  Valeurs possibles: text, image, post, etc.

• default (mixed, optionnel)
  Valeur par défaut de l'option.
  Doit correspondre au type de champ sélectionné.

• selector (string, optionnel)
  Sélecteur CSS pour afficher un marqueur qui relie visuellement l'option à un élément HTML dans la prévisualisation.

• registration_type (string, optionnel, défaut: theme_mod)
  Définit comment la valeur est stockée dans WordPress.
  Valeurs possibles: theme_mod ou option

• active (bool, optionnel, défaut: true)
  Permet d'activer/désactiver l'affichage du champ dans le Customizer.

• capability (string, optionnel)
  Capability WordPress requise pour afficher/modifier ce champ.
  Exemple: manage_options.

• sanitize_callback (callable string, optionnel)
  Fonction de sanitation appliquée à la sauvegarde. Si elle n'est pas fournie, Elementum applique une valeur par défaut selon le type du champ.

• description (string, optionnel)
  Texte d'aide affiché sous le champ dans l'interface d'administration.

• priority (int, optionnel, défaut: 10)
  Contrôle l'ordre d'affichage des options dans la section.

Types d'options disponibles

Elementum supporte plusieurs types de champs natifs :

• text : Champ texte simple
• textarea : Zone de texte multiligne
• number : Champ numérique
• email : Champ pour les adresses email
• url : Champ pour les URLs
• password : Champ de mot de passe
• image : Téléversement d'image
• range : Sélecteur de plage
• checkbox : Case à cocher

Exemples d'utilisation

Option de base

config/customize/theme-options.yaml

fields:
    site_logo:
        label: "Logo du site"
        type: "image"
        default: ""
        description: "Téléversez le logo principal de votre site"
        selector: ".site-logo"
        registration_type: "theme_mod"

Paramètres avancés

registration_type

Le paramètre registration_type détermine comment la valeur de l'option est stockée dans WordPress :

• theme_mod (par défaut) : La valeur est liée au thème actif et stockée dans la table wp_options avec la clé theme_mods_{slug_du_theme}.
• option : La valeur est stockée directement dans la table wp_options avec sa propre clé, ce qui permet de la conserver même lors d'un changement de thème.

Sanitation automatique

Par défaut, Elementum déduit sanitize_callback selon le type de champ :

• text (et fallback) : sanitize_text_field
• textarea : wp_kses_post
• image / cropped_image : esc_url_raw
• color / color_contrast : sanitize_hex_color

Vous pouvez surcharger ce comportement en définissant explicitement sanitize_callback.

Sélecteurs et marqueurs d'édition

Le paramètre selector permet d'ajouter un marqueur visuel (un crayon bleu) sur l'élément correspondant dans la prévisualisation. Ce marqueur permet d'identifier rapidement quels éléments de la page sont personnalisables.

Fonctionnalités :

• Affiche une icône de crayon bleu au survol de l'élément ciblé
• Permet de cliquer directement sur l'icône pour accéder à l'option correspondante dans le panneau de personnalisation
• Facilite la navigation entre la prévisualisation et les options

Exemple :

fields:
    logo:
        label: "Logo du site"
        type: "image"
        selector: ".site-logo" # Affichera un crayon sur l'élément .site-logo

Bonnes pratiques

1. Nommage: Utilisez des noms descriptifs et cohérents pour les IDs des options
2. Valeurs par défaut: Toujours définir une valeur par défaut pertinente
3. Organisation: Groupez les options connexes dans des sections dédiées