Tutoriel : Créer un espace membre avec WordPress

Créer un espace membre avec WordPress

Un espace membre permet de restreindre l’accès à certains contenus de votre site aux utilisateurs inscrits ou payants. C’est le modèle derrière les sites d’abonnement, les plateformes de formation en ligne et les communautés privées. Au Sénégal, ce modèle se développe rapidement : formations en ligne, contenus premium, réseaux professionnels. Voici comment le mettre en place concrètement.

1. Choisir le bon plugin de membership

Recommandation : Paid Memberships Pro (PMPro) en gratuit pour démarrer — il gère les niveaux, les paiements et la restriction de contenu. Si votre budget le permet, MemberPress est le plus complet.

2. Configuration avec Paid Memberships Pro

Installation et assistant

1. Installez Paid Memberships Pro depuis Extensions → Ajouter
2. Activez le plugin et suivez l’assistant de configuration
3. L’assistant crée automatiquement les pages nécessaires :
   • Page de tarification : présente les formules d’abonnement
   • Page de paiement : formulaire d’inscription + paiement
   • Page de confirmation : message après inscription
   • Page de compte : tableau de bord du membre
   • Page de connexion : login personnalisé

Créer les niveaux de membership

Allez dans Memberships → Réglages → Niveaux et créez vos formules :

3. Restreindre l’accès au contenu

Par article/page

Avec PMPro, une metabox « Require Membership » apparaît dans l’éditeur de chaque article. Cochez les niveaux qui ont accès :

• Article public : aucune case cochée
• Article pour membres Standard et Premium : cochez Standard + Premium
• Article Premium exclusif : cochez uniquement Premium

Par catégorie (plus efficace)

Dans Memberships → Réglages → Content Settings, configurez la restriction par catégorie :

• Catégorie « Blog » → Accès public
• Catégorie « Tutoriels » → Niveau Standard minimum
• Catégorie « Formations » → Niveau Premium minimum

Restriction manuelle dans le contenu

<!-- Contenu visible par tous -->
<p>Voici l'introduction de cet article sur le SEO avancé...</p>

<!-- Contenu réservé aux membres (shortcode PMPro) -->
[membership level="2,3"]
<h2>Technique avancée : le cocon sémantique</h2>
<p>Le cocon sémantique est une méthode de maillage interne...</p>
[/membership]

<!-- Message pour les non-membres -->
[membership level="-2,-3"]
<div class="content-locked">
  <h3>Contenu réservé aux membres</h3>
  <p>Accédez à cette section et à toutes nos formations en devenant membre.</p>
  <a href="/tarifs" class="btn-primary">Voir les formules →</a>
</div>
[/membership]

CSS pour la section verrouillée

/* Style du bloc de contenu verrouillé */
.content-locked {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px dashed #dee2e6;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  margin: 30px 0;
  position: relative;
}

.content-locked::before {
  content: "🔒";
  font-size: 40px;
  display: block;
  margin-bottom: 15px;
}

.content-locked h3 {
  margin: 0 0 10px;
  font-size: 22px;
}

.content-locked p {
  color: #666;
  margin-bottom: 20px;
}

/* Effet de flou sur le contenu juste avant le bloc */
.content-teaser {
  position: relative;
}
.content-teaser::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(transparent, #fff);
  pointer-events: none;
}

4. Page de tarification attrayante

<section class="pricing-section">
  <h2 style="text-align:center;">Choisissez votre formule</h2>
  <p style="text-align:center; color:#666;">Annulez à tout moment. Paiement par Wave ou Orange Money.</p>
  
  <div class="pricing-grid">
    <!-- Formule Gratuite -->
    <div class="pricing-card">
      <h3>Gratuit</h3>
      <div class="pricing-card__price">
        <span class="price-amount">0</span>
        <span class="price-period">FCFA</span>
      </div>
      <ul class="pricing-card__features">
        <li class="included">Articles de blog</li>
        <li class="included">Newsletter hebdomadaire</li>
        <li class="excluded">Tutoriels vidéo</li>
        <li class="excluded">Formations complètes</li>
        <li class="excluded">Support WhatsApp</li>
      </ul>
      <a href="/membership-checkout/?level=1" class="pricing-card__btn">S'inscrire</a>
    </div>
    
    <!-- Formule Standard -->
    <div class="pricing-card pricing-card--popular">
      <span class="pricing-card__badge">Populaire</span>
      <h3>Standard</h3>
      <div class="pricing-card__price">
        <span class="price-amount">5 000</span>
        <span class="price-period">FCFA / mois</span>
      </div>
      <ul class="pricing-card__features">
        <li class="included">Tout du niveau Gratuit</li>
        <li class="included">Tutoriels vidéo</li>
        <li class="included">Fichiers sources téléchargeables</li>
        <li class="excluded">Formations complètes</li>
        <li class="excluded">Support WhatsApp</li>
      </ul>
      <a href="/membership-checkout/?level=2" class="pricing-card__btn pricing-card__btn--primary">Commencer</a>
    </div>
    
    <!-- Formule Premium -->
    <div class="pricing-card">
      <h3>Premium</h3>
      <div class="pricing-card__price">
        <span class="price-amount">15 000</span>
        <span class="price-period">FCFA / mois</span>
      </div>
      <ul class="pricing-card__features">
        <li class="included">Tout du niveau Standard</li>
        <li class="included">Formations complètes</li>
        <li class="included">Support WhatsApp dédié</li>
        <li class="included">Certificats de formation</li>
        <li class="included">Accès communauté privée</li>
      </ul>
      <a href="/membership-checkout/?level=3" class="pricing-card__btn">Commencer</a>
    </div>
  </div>
</section>

<style>
.pricing-section { padding: 60px 20px; max-width: 1000px; margin: 0 auto; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  margin-top: 30px;
}
.pricing-card {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 16px;
  padding: 35px 25px;
  text-align: center;
  position: relative;
  transition: transform 0.3s;
}
.pricing-card:hover { transform: translateY(-5px); }
.pricing-card--popular {
  border-color: #e94560;
  box-shadow: 0 8px 30px rgba(233, 69, 96, 0.15);
}
.pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #e94560;
  color: #fff;
  padding: 5px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.pricing-card h3 { font-size: 22px; margin: 0 0 15px; }
.price-amount { font-size: 42px; font-weight: 800; color: #1a1a2e; }
.price-period { font-size: 14px; color: #888; display: block; }
.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 25px 0;
  text-align: left;
}
.pricing-card__features li {
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid #f5f5f5;
}
.pricing-card__features li.included::before { content: "✓ "; color: #25D366; font-weight: bold; }
.pricing-card__features li.excluded { color: #ccc; }
.pricing-card__features li.excluded::before { content: "✗ "; }
.pricing-card__btn {
  display: block;
  padding: 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid #e94560;
  color: #e94560;
  transition: all 0.3s;
}
.pricing-card__btn:hover { background: #e94560; color: #fff; }
.pricing-card__btn--primary { background: #e94560; color: #fff; }
.pricing-card__btn--primary:hover { background: #c73550; }
</style>

5. Intégrer le paiement mobile money

PayDunya avec Paid Memberships Pro

// Plugin ou code personnalisé pour PayDunya + PMPro
// Ajoutez comme gateway personnalisée dans functions.php

add_filter('pmpro_gateways', function($gateways) {
    $gateways['paydunya'] = 'PayDunya (Wave / Orange Money)';
    return $gateways;
});

// Implémenter la classé de gateway
class PMProGateway_paydunya extends PMProGateway {
    function __construct($gateway = null) {
        $this->gateway = $gateway;
        return $this->gateway;
    }
    
    static function process(&$order) {
        // Créer une facture PayDunya
        $amount = $order->total;
        $description = 'Abonnement ' . $order->membership_level->name;
        
        // Appel API PayDunya pour créer le checkout
        $response = wp_remote_post('https://app.paydunya.com/api/v1/checkout-invoice/create', [
            'headers' => [
                'Content-Type' => 'application/json',
                'PAYDUNYA-MASTER-KEY' => 'VOTRE_MASTER_KEY',
                'PAYDUNYA-PRIVATE-KEY' => 'VOTRE_PRIVATE_KEY',
                'PAYDUNYA-TOKEN' => 'VOTRE_TOKEN',
            ],
            'body' => json_encode([
                'invoice' => [
                    'total_amount' => intval($amount),
                    'description' => $description,
                ],
                'store' => [
                    'name' => get_bloginfo('name'),
                ],
                'actions' => [
                    'callback_url' => home_url('/paydunya-ipn/'),
                    'return_url' => pmpro_url('confirmation', '?level=' . $order->membership_level->id),
                    'cancel_url' => pmpro_url('levels'),
                ],
                'custom_data' => [
                    'order_id' => $order->id,
                    'user_id' => $order->user_id,
                    'level_id' => $order->membership_level->id,
                ],
            ]),
        ]);
        
        $body = json_decode(wp_remote_retrieve_body($response), true);
        
        if ($body['response_code'] === '00') {
            // Rediriger vers la page de paiement PayDunya
            wp_redirect($body['response_text']);
            exit;
        }
        
        $order->error = 'Erreur de paiement. Veuillez réessayer.';
        return false;
    }
}

6. Tableau de bord du membre

// Shortcode [dashboard_membre] pour la page Mon compte
add_shortcode('dashboard_membre', function() {
    if (!is_user_logged_in()) {
        return '<p><a href="' . wp_login_url(get_permalink()) . '">Connectez-vous</a> pour accéder à votre espace.</p>';
    }
    
    $user = wp_get_current_user();
    $level = pmpro_getMembershipLevelForUser($user->ID);
    
    ob_start();
    ?>
    <div class="member-dashboard">
      <div class="member-dashboard__header">
        <div class="member-avatar">
          <?php echo get_avatar($user->ID, 80); ?>
        </div>
        <div>
          <h2>Bienvenue, <?php echo esc_html($user->display_name); ?></h2>
          <p class="member-level">
            Formule : <strong><?php echo $level ? esc_html($level->name) : 'Gratuit'; ?></strong>
            <?php if ($level && $level->enddate) : ?>
              — Expire le <?php echo date('d/m/Y', $level->enddate); ?>
            <?php endif; ?>
          </p>
        </div>
      </div>
      
      <div class="member-dashboard__grid">
        <a href="/formations" class="dashboard-card">
          <span class="dashboard-card__icon">📚</span>
          <h3>Mes formations</h3>
          <p>Accéder aux cours et tutoriels</p>
        </a>
        
        <a href="/membership-account/" class="dashboard-card">
          <span class="dashboard-card__icon">⚙️</span>
          <h3>Mon compte</h3>
          <p>Gérer mon profil et abonnement</p>
        </a>
        
        <a href="/membership-invoice/" class="dashboard-card">
          <span class="dashboard-card__icon">📄</span>
          <h3>Factures</h3>
          <p>Historique de paiements</p>
        </a>
        
        <a href="https://wa.me/221XXXXXXXXX" class="dashboard-card">
          <span class="dashboard-card__icon">💬</span>
          <h3>Support WhatsApp</h3>
          <p>Poser une question</p>
        </a>
      </div>
    </div>
    <?php
    return ob_get_clean();
});

/* CSS du dashboard membre */
.member-dashboard { max-width: 900px; margin: 0 auto; }
.member-dashboard__header {
  display: flex; align-items: center; gap: 20px;
  padding: 25px; background: #f8f9fa; border-radius: 12px;
  margin-bottom: 25px;
}
.member-avatar img { border-radius: 50%; }
.member-level { color: #666; font-size: 15px; }
.member-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}
.dashboard-card {
  background: #fff; padding: 25px; border-radius: 12px;
  border: 2px solid #eee; text-decoration: none; color: #333;
  text-align: center; transition: border-color 0.3s, transform 0.3s;
}
.dashboard-card:hover { border-color: #e94560; transform: translateY(-3px); }
.dashboard-card__icon { font-size: 30px; display: block; margin-bottom: 10px; }
.dashboard-card h3 { font-size: 16px; margin: 0 0 5px; }
.dashboard-card p { font-size: 13px; color: #888; margin: 0; }

7. Contenu goutte-à-goutte (drip content)

Le drip content débloque progressivement le contenu après l’inscription, au lieu de tout donner d’un coup :

// Restriction par ancienneté du membre
add_shortcode('drip_content', function($atts, $content) {
    $atts = shortcode_atts(['jours' => 0, 'level' => ''], $atts);
    
    if (!is_user_logged_in()) return '';
    
    $user_id = get_current_user_id();
    $level = pmpro_getMembershipLevelForUser($user_id);
    
    if (!$level) return '';
    
    // Calculer l'ancienneté en jours
    $start = strtotime($level->startdate);
    $days_member = floor((time() - $start) / 86400);
    
    if ($days_member >= intval($atts['jours'])) {
        return do_shortcode($content);
    }
    
    $remaining = intval($atts['jours']) - $days_member;
    return '<div class="drip-locked">
      🔒 Ce contenu sera débloqué dans ' . $remaining . ' jours.
    </div>';
});

// Usage : [drip_content jours="7"]Contenu débloqué après 7 jours[/drip_content]

8. Bonnes pratiques

• Offrez de la valeur gratuite d’abord : un espace membre qui cache tout derrière un paywall ne convertit pas. Montrez la qualité de votre contenu gratuit pour convaincre les visiteurs de payer
• WhatsApp comme levier : offrez le support WhatsApp aux membres payants — c’est un argument de vente très efficace au Sénégal
• Paiement mensuel : les paiements mensuels (5 000-15 000 FCFA) sont mieux acceptés que les paiements annuels au Sénégal
• Communauté : créez un groupe WhatsApp ou Telegram privé pour les membres premium — la communauté renforce la rétention
• Email d’onboarding : envoyez une séquence de 3-5 emails automatiques après l’inscription pour guider le nouveau membre
• Rétention : publiez du contenu frais régulièrement (minimum 2 fois par semaine) pour que les membres restent abonnés

Un espace membre bien géré peut générer des revenus récurrents prévisibles. Commencez avec PMPro gratuit et 2-3 niveaux d’abonnement, puis ajoutez des fonctionnalités au fur et à mesure que votre communauté grandit.