Tutoriel : Le Customizer WordPress — personnaliser votre thème

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)

2. Identité du site : logo et favicon

Ajouter votre logo

1. Ouvrez Personnaliser → Identité du site
2. Cliquez « Sélectionner un logo »
3. Uploadez votre logo (format recommandé : PNG transparent ou SVG, 300×80px max)
4. 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 :

1. Dans Identité du site, descendez jusqu’à « Icône du site »
2. Uploadez une image carrée de 512×512 pixels
3. 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 :

1. Cliquez « Créer un nouveau menu »
2. Donnez un nom (ex: « Menu principal »)
3. Cochez « Menu principal » comme emplacement
4. Ajoutez vos pages en cliquant « Ajouter des éléments »
5. Réorganisez par glisser-déposer
6. 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

1. Dans le Customizer, ouvrez l’élément « Contact » du menu
2. Dans « Classes CSS » (activez-les dans Options de l’écran si invisible), ajoutez : menu-cta
3. 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

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 :

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 :

1. Installez le plugin
2. Personnaliser → Exporter/Importer apparaît en bas du Customizer
3. Cliquez « Exporter » pour télécharger un fichier .dat avec tous vos réglages
4. 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.