Le Customizer WordPress : personnaliser votre thème en temps réel

Le Customizer (Personnaliseur) est l’outil natif de WordPress pour modifier l’apparence de votre site avec un aperçu en direct. Accessible via Apparence → Personnaliser, il vous permet de changer les couleurs, les polices, le logo, les menus et la mise en page sans toucher au code. Depuis WordPress 5.9 et le Full Site Editing (FSE), le Customizer coexiste avec l’éditeur de site — voici comment tirer le meilleur de chaque outil.

1. Accéder et naviguer dans le Customizer

Deux façons d’y accéder :

Depuis le back-office : Apparence → Personnaliser
Depuis le front-end : cliquez « Personnaliser » dans la barre d’administration en haut (visible quand vous êtes connecté)

Sections disponibles (varient selon le thème)

Section	Ce qu’elle contrôle	Thèmes compatibles
Identité du site	Logo, titre, favicon	Tous les thèmes
Couleurs	Couleurs principales, arrière-plan	La plupart
Typographie	Polices, tailles de texte	Astra, GeneratePress, Flavor flavor
En-tête	Structure du header, menu	Astra, flavor flavor flavor
Menus	Navigation principale et secondaire	Tous les thèmes
Widgets	Zones de widgets (sidebar, footer)	Thèmes classiques
Page d’accueil	Page statique ou derniers articles	Tous les thèmes
CSS additionnel	CSS personnalisé avec aperçu live	Tous les thèmes

2. Identité du site : logo et favicon

Ajouter votre logo

Ouvrez Personnaliser → Identité du site
Cliquez « Sélectionner un logo »
Uploadez votre logo (format recommandé : PNG transparent ou SVG, 300×80px max)
Si votre thème le permet, décochez « Afficher le titre et le slogan du site » pour n’afficher que le logo

Ajouter le favicon

Le favicon est la petite icône dans l’onglet du navigateur :

Dans Identité du site, descendez jusqu’à « Icône du site »
Uploadez une image carrée de 512×512 pixels
WordPress génère automatiquement toutes les tailles nécessaires

Optimiser le logo pour la performance

/* Limiter la taille d'affichage du logo */
.custom-logo {
  max-height: 50px;
  width: auto;
}

/* Logo rétina : servir une image 2x */
.custom-logo-link img {
  image-rendering: -webkit-optimize-contrast;
}

3. Couleurs et typographie

Palette de couleurs cohérente

Avec un thème comme Astra, vous pouvez définir une palette globale dans le Customizer. Voici une palette professionnelle adaptée :

/* Variables CSS globales — ajoutez dans CSS additionnel */
:root {
  --couleur-principale: #e94560;    /* Rouge — CTA, liens */
  --couleur-secondaire: #1a1a2e;   /* Bleu foncé — headers, texte */
  --couleur-accent: #0f3460;       /* Bleu moyen — sous-titres */
  --couleur-fond: #f8f9fa;         /* Gris clair — arrière-plan */
  --couleur-texte: #333333;        /* Texte principal */
  --couleur-texte-clair: #666666;  /* Texte secondaire */
}

/* Appliquer la palette */
body { color: var(--couleur-texte); background: var(--couleur-fond); }
h1, h2, h3 { color: var(--couleur-secondaire); }
a { color: var(--couleur-principale); }
a:hover { color: var(--couleur-accent); }
.site-header { background: var(--couleur-secondaire); }
.btn, .button, input[type="submit"] {
  background: var(--couleur-principale);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}
.btn:hover { background: #c73550; }

Typographie lisible

/* Typographie optimisée pour la lecture */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.7;
}

h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }
h2 { font-size: clamp(22px, 3vw, 32px); line-height: 1.3; margin-top: 40px; }
h3 { font-size: clamp(18px, 2.5vw, 24px); }

/* Charger Inter depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* Limiter la largeur de lecture pour le confort */
.entry-content, .post-content {
  max-width: 720px;
  margin: 0 auto;
}

4. Menus de navigation

Créer et organiser les menus

Dans Personnaliser → Menus :

Cliquez « Créer un nouveau menu »
Donnez un nom (ex: « Menu principal »)
Cochez « Menu principal » comme emplacement
Ajoutez vos pages en cliquant « Ajouter des éléments »
Réorganisez par glisser-déposer
Pour créer un sous-menu : glissez un élément légèrement vers la droite sous son parent

Structure de menu recommandée

Menu principal recommandé :
├── Accueil
├── Services ▼
│   ├── Création de sites
│   ├── E-commerce
│   └── SEO
├── Réalisations
├── Blog
├── À propos
└── Contact (bouton CTA)

Styliser un élément de menu en bouton CTA

Dans le Customizer, ouvrez l’élément « Contact » du menu
Dans « Classes CSS » (activez-les dans Options de l’écran si invisible), ajoutez : menu-cta
Ajoutez ce CSS :

/* Transformer un lien du menu en bouton */
.menu-cta a {
  background: var(--couleur-principale, #e94560) !important;
  color: #fff !important;
  padding: 10px 22px !important;
  border-radius: 6px !important;
  font-weight: 600;
  transition: background 0.3s;
}
.menu-cta a:hover {
  background: #c73550 !important;
}

5. CSS additionnel : personnalisations avancées

La section CSS additionnel du Customizer est l’endroit idéal pour des personnalisations qui ne justifient pas un thème enfant :

Exemples utiles

/* --- Header sticky au scroll --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.3s;
}
.site-header.scrolled {
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

/* --- Masquer la barre latérale sur mobile --- */
@media (max-width: 768px) {
  .sidebar, #secondary {
    display: none;
  }
  .content-area, #primary {
    width: 100% !important;
  }
}

/* --- Images arrondies dans les articles --- */
.entry-content img {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* --- Espacement des paragraphes --- */
.entry-content p {
  margin-bottom: 1.5em;
}

/* --- Style des blockquotes --- */
blockquote {
  border-left: 4px solid var(--couleur-principale, #e94560);
  padding: 15px 20px;
  margin: 20px 0;
  background: #f8f9fa;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

/* --- Masquer le texte "Propulsé par WordPress" dans le footer --- */
.site-info a[href*="wordpress.org"] {
  display: none;
}

/* --- Smooth scroll --- */
html {
  scroll-behavior: smooth;
}

/* --- Sélection de texte personnalisée --- */
::selection {
  background: var(--couleur-principale, #e94560);
  color: #fff;
}

6. Widgets dans le Customizer

Les widgets (zones de contenu dans la sidebar et le footer) se gèrent aussi dans le Customizer pour un aperçu en direct :

Widgets recommandés par zone

Zone	Widgets utiles
Sidebar blog	Recherche, Catégories, Articles récents, Widget HTML (WhatsApp, bannière)
Footer colonne 1	À propos (texte), Logo
Footer colonne 2	Menu de navigation (liens utiles)
Footer colonne 3	Horaires, Adresse, Contact
Footer colonne 4	Newsletter (formulaire Brevo/Mailchimp)

7. Customizer vs Full Site Editing (FSE)

Depuis WordPress 5.9, les thèmes « block » (Twenty Twenty-Three, flavor flavor flavor, flavor flavor) utilisent l’éditeur de site au lieu du Customizer :

Fonctionnalité	Customizer	Éditeur de site (FSE)
Thèmes compatibles	Thèmes classiques (Astra, GeneratePress)	Thèmes block (Twenty Twenty-Four)
Modifier le header	Options du thème	Glisser-déposer de blocs
Modifier le footer	Widgets	Blocs dans le template
CSS personnalisé	CSS additionnel	Styles globaux + CSS
Menus	Section Menus	Bloc Navigation
Facilité	Simple, panneau latéral	Plus puissant mais plus complexe

Recommandation : si vous débutez et utilisez Astra ou GeneratePress, restez avec le Customizer. Si vous êtes à l’aise et voulez un contrôle total, passez à un thème FSE comme Flavor flavor avec l’éditeur de site.

8. Exporter/importer les réglages du Customizer

Le plugin Customizer Export/Import (gratuit) permet de sauvegarder vos réglages et de les réappliquer sur un autre site :

Installez le plugin
Personnaliser → Exporter/Importer apparaît en bas du Customizer
Cliquez « Exporter » pour télécharger un fichier .dat avec tous vos réglages
Sur le nouveau site : importez ce fichier pour appliquer les mêmes personnalisations

Très utile pour les agences qui déploient le même design sur plusieurs sites clients.

9. Étendre le Customizer (développeurs)

Vous pouvez ajouter vos propres options au Customizer via l’API PHP :

// Ajouter une section et un réglage personnalisé
add_action('customize_register', function($wp_customize) {
    // Section
    $wp_customize->add_section('mon_theme_options', [
        'title' => 'Options du thème',
        'priority' => 30,
    ]);
    
    // Réglage : Numéro WhatsApp
    $wp_customize->add_setting('whatsapp_number', [
        'default' => '+221770000000',
        'sanitize_callback' => 'sanitize_text_field',
    ]);
    
    $wp_customize->add_control('whatsapp_number', [
        'label' => 'Numéro WhatsApp',
        'section' => 'mon_theme_options',
        'type' => 'text',
        'description' => 'Format international : +221XXXXXXXXX',
    ]);
    
    // Réglage : Afficher le bouton WhatsApp flottant
    $wp_customize->add_setting('show_whatsapp_btn', [
        'default' => true,
        'sanitize_callback' => 'wp_validate_boolean',
    ]);
    
    $wp_customize->add_control('show_whatsapp_btn', [
        'label' => 'Afficher le bouton WhatsApp flottant',
        'section' => 'mon_theme_options',
        'type' => 'checkbox',
    ]);
    
    // Réglage : Couleur du bouton CTA
    $wp_customize->add_setting('cta_color', [
        'default' => '#e94560',
        'sanitize_callback' => 'sanitize_hex_color',
    ]);
    
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'cta_color', [
        'label' => 'Couleur du bouton CTA',
        'section' => 'mon_theme_options',
    ]));
});

// Utiliser le réglage dans le thème
if (get_theme_mod('show_whatsapp_btn', true)) {
    $number = get_theme_mod('whatsapp_number', '+221770000000');
    echo '<a href="https://wa.me/' . esc_attr(preg_replace('/[^0-9]/', '', $number)) . '" 
      class="whatsapp-float">WhatsApp</a>';
}

Le Customizer reste l’outil le plus accessible pour personnaliser l’apparence d’un site WordPress sans code. Maîtrisez d’abord les sections CSS additionnel et Menus, puis explorez les options spécifiques de votre thème pour affiner chaque détail de votre design.

Tutoriel : Le Customizer WordPress — personnaliser votre thème