Pourquoi ajouter une FAQ à votre site WordPress

Une section FAQ bien conçue réduit votre charge de support client (moins d’appels et messages WhatsApp), améliore votre SEO (les FAQ ciblent des requêtes longue traîne), et augmente la confiance des visiteurs. Google affiche souvent les FAQ directement dans ses résultats de recherche sous forme de rich snippets, ce qui augmente votre visibilité.

Méthode 1 : FAQ avec le bloc natif « Détails » de Gutenberg

Depuis WordPress 6.3, le bloc Détails (accordéon) est intégré nativement. C’est la méthode la plus simple et la plus légère.

Comment l’utiliser

Dans l’éditeur, tapez /details ou cherchez « Détails » dans l’inserteur de blocs
Le résumé (summary) est la question visible
Le contenu caché est la réponse qui apparaît au clic
Ajoutez autant de blocs Détails que vous avez de questions

Le HTML généré utilise les balises natives <details> et <summary> — aucun JavaScript nécessaire, fonctionne partout, accessible, et ultra-léger.

Styliser les blocs Détails avec CSS

Ajoutez ce CSS dans Apparence → Personnaliser → CSS additionnel :

/* Style FAQ avec blocs Détails */
.wp-block-details {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.wp-block-details summary {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 1rem;
    color: #1F2937;
    cursor: pointer;
    list-style: none; /* Retire le triangle par défaut */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.wp-block-details summary:hover {
    background-color: #F9FAFB;
}

/* Flèche personnalisée */
.wp-block-details summary::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 700;
    color: #6B7280;
    transition: transform 0.2s;
}

.wp-block-details[open] summary::after {
    content: '−';
    color: #2563EB;
}

/* Contenu de la réponse */
.wp-block-details > *:not(summary) {
    padding: 0 20px 16px;
    color: #4B5563;
    line-height: 1.6;
}

/* Retirer le marker natif dans tous les navigateurs */
.wp-block-details summary::-webkit-details-marker {
    display: none;
}

/* État ouvert */
.wp-block-details[open] {
    border-color: #2563EB;
    box-shadow: 0 0 0 1px #2563EB;
}

.wp-block-details[open] summary {
    border-bottom: 1px solid #E5E7EB;
    color: #2563EB;
}

Méthode 2 : FAQ en HTML pur (sans plugin)

Si vous voulez un contrôle total ou si votre thème n’a pas le bloc Détails, créez votre propre accordéon :

HTML

<div class="faq-section">
  <h2>Questions fréquentes</h2>
  
  <details class="faq-item">
    <summary>Quels sont vos délais de livraison à Dakar ?</summary>
    <div class="faq-answer">
      <p>Nous livrons dans tout Dakar en 24-48h. Les zones de Plateau, 
      Almadies, Mermoz et Point E sont livrées le jour même pour les 
      commandes passées avant 14h. Les livraisons en banlieue 
      (Pikine, Guédiawaye, Parcelles) sont effectuées sous 48h.</p>
    </div>
  </details>
  
  <details class="faq-item">
    <summary>Quels moyens de paiement acceptez-vous ?</summary>
    <div class="faq-answer">
      <p>Nous acceptons Wave, Orange Money, Free Money, les cartes 
      bancaires (Visa/Mastercard) et le paiement à la livraison 
      pour Dakar uniquement.</p>
    </div>
  </details>
  
  <details class="faq-item">
    <summary>Puis-je retourner un produit ?</summary>
    <div class="faq-answer">
      <p>Oui, vous disposez de 7 jours après réception pour 
      retourner un produit non utilisé dans son emballage d'origine. 
      Les frais de retour sont à votre charge.</p>
    </div>
  </details>
</div>

CSS complet

.faq-section {
    max-width: 800px;
    margin: 48px auto;
    padding: 0 24px;
}

.faq-section h2 {
    text-align: center;
    margin-bottom: 32px;
    font-size: 2rem;
}

.faq-item {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    margin-bottom: 10px;
    background: white;
    transition: box-shadow 0.2s;
}

.faq-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.faq-item summary {
    padding: 18px 24px;
    font-weight: 600;
    font-size: 1rem;
    color: #1F2937;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '▸';
    font-size: 1.2rem;
    color: #9CA3AF;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item[open] summary::after {
    transform: rotate(90deg);
    color: #2563EB;
}

.faq-answer {
    padding: 0 24px 18px;
    color: #4B5563;
    line-height: 1.7;
    border-top: 1px solid #F3F4F6;
    margin-top: 0;
    padding-top: 16px;
}

/* Animation d'ouverture */
.faq-item[open] {
    border-color: #BFDBFE;
}

.faq-item[open] summary {
    color: #2563EB;
}

Méthode 3 : Plugin FAQ dédié

Pour un site avec beaucoup de FAQ et des besoins de SEO avancés :

Ultimate FAQ (gratuit)

Extensions → Ajouter → « Ultimate FAQ »
FAQ → Ajouter → Créez chaque question comme un « post » avec le titre = question et le contenu = réponse
Organisez par catégories FAQ
Insérez avec le shortcode [ultimate-faqs]

Avantages : Recherche dans les FAQ, catégorisation, compteur de vues, export.

Accordion FAQ (léger)

Plus simple, le plugin « Jejewe Starter Kit – FAQ Block » ou « Jejewe – FAQ Block » ajoute un bloc Gutenberg FAQ dédié avec accordéon intégré.

Schema FAQ : apparaître dans les rich snippets Google

Le Schema FAQ permet à Google d’afficher vos questions-réponses directement dans les résultats de recherche, avec des accordéons cliquables. Ça peut doubler votre taux de clic.

Ajouter le schema manuellement

Ajoutez ce code dans un bloc HTML personnalisé sur votre page FAQ, ou via functions.php :

function itsc_faq_schema() {
    if (is_page('faq')) { // Remplacez par le slug de votre page FAQ
        $faqs = array(
            array(
                'question' => 'Quels sont vos délais de livraison à Dakar ?',
                'answer'   => 'Nous livrons dans tout Dakar en 24-48h. Les zones centrales sont livrées le jour même pour les commandes avant 14h.'
            ),
            array(
                'question' => 'Quels moyens de paiement acceptez-vous ?',
                'answer'   => 'Nous acceptons Wave, Orange Money, Free Money, les cartes bancaires et le paiement à la livraison pour Dakar.'
            ),
            array(
                'question' => 'Puis-je retourner un produit ?',
                'answer'   => 'Oui, vous disposez de 7 jours après réception pour retourner un produit non utilisé dans son emballage d\'origine.'
            )
        );
        
        $schema = array(
            '@context'   => 'https://schema.org',
            '@type'      => 'FAQPage',
            'mainEntity' => array()
        );
        
        foreach ($faqs as $faq) {
            $schema['mainEntity'][] = array(
                '@type' => 'Question',
                'name'  => $faq['question'],
                'acceptedAnswer' => array(
                    '@type' => 'Answer',
                    'text'  => $faq['answer']
                )
            );
        }
        
        echo '<script type="application/ld+json">' 
             . wp_json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) 
             . '</script>';
    }
}
add_action('wp_head', 'itsc_faq_schema');

Avec un plugin SEO

Les plugins SEO comme Yoast SEO et Rank Math proposent des blocs FAQ Gutenberg avec schema intégré automatiquement :

Rank Math → Ajoutez le bloc « FAQ by Rank Math » dans votre article
Remplissez les questions et réponses
Le schema est généré automatiquement — pas de code à écrire

C’est la méthode la plus simple pour les non-développeurs.

Bonnes pratiques pour vos FAQ

Rédaction

Questions réelles : Utilisez les vraies questions de vos clients (WhatsApp, email, commentaires). Pas de questions inventées que personne ne pose
Langage naturel : Formulez comme les gens parlent : « Est-ce que vous livrez à Thiès ? » plutôt que « Couverture géographique de la livraison »
Réponses concises : 2-3 phrases maximum par réponse. Si la réponse est longue, faites un lien vers un article dédié
Réponses directes : Commencez par la réponse, pas par le contexte. « Oui, nous livrons à Thiès sous 72h » est mieux que « Notre politique de livraison couvre plusieurs régions… »

Organisation

Catégorisez : Si vous avez plus de 10 questions, groupez-les : Livraison, Paiement, Retours, Compte, etc.
Ordre logique : Les questions les plus fréquentes en premier
Limite : 15-20 questions maximum par page. Au-delà, les visiteurs ne lisent plus

Placement

Page dédiée /faq : Pour les FAQ générales du site
En bas de page produit : FAQ spécifiques au produit (WooCommerce)
Page de service : FAQ sur le processus, les prix, les délais
Dans les articles : 3-5 questions en fin d’article pour cibler des requêtes longue traîne

FAQ dynamique avec recherche

Pour les sites avec beaucoup de FAQ, ajoutez un champ de recherche filtrant :

<input type="text" id="faq-search" placeholder="Chercher dans les FAQ..." 
       style="width:100%; padding:14px 20px; border:1px solid #D1D5DB; 
              border-radius:10px; font-size:1rem; margin-bottom:24px;">

<div id="faq-list">
  <!-- Vos blocs details ici -->
</div>

<p id="faq-no-result" style="display:none; text-align:center; color:#6B7280; padding:24px;">
  Aucune question ne correspond à votre recherche. 
  <a href="https://wa.me/221770000000">Contactez-nous sur WhatsApp</a>.
</p>

<script>
document.getElementById('faq-search').addEventListener('input', function() {
    const query = this.value.toLowerCase();
    const items = document.querySelectorAll('#faq-list .faq-item');
    let visible = 0;
    
    items.forEach(function(item) {
        const text = item.textContent.toLowerCase();
        const match = text.includes(query);
        item.style.display = match ? '' : 'none';
        if (match) visible++;
    });
    
    document.getElementById('faq-no-result').style.display = 
        visible === 0 && query.length > 0 ? '' : 'none';
});
</script>

La recherche filtre instantanément les questions au fur et à mesure que le visiteur tape. Si aucune question ne correspond, un lien WhatsApp s’affiche pour le contact direct — très pertinent pour le contexte sénégalais.

Mesurer l’efficacité de votre FAQ

Google Analytics : Suivez les pages vues de votre page FAQ et le taux de rebond
Search Console : Vérifiez si vos FAQ apparaissent dans les rich snippets (rapport « Améliorations »)
Volume de support : Si votre FAQ est efficace, le nombre de questions par WhatsApp/email devrait diminuer
Questions manquantes : Les questions que vous recevez encore malgré la FAQ doivent être ajoutées

Comment créer un système de FAQ avec WordPress