WPCode Lite — Snippets propres (header/footer, hooks)

📋 Sommaire

1) Pourquoi WPCode Lite

2) Installation & principes

1. WordPress → Extensions → Ajouter → « WPCode » → Installer → Activer.
2. Créez un snippet → choisissez le type (PHP/HTML/JS/CSS/Shortcode).
3. Définissez l'Auto Insert : Header, Body (début/fin), Footer ou Shortcode.
4. Appliquez des conditions (site‑wide, archives, singular, ID, rôle…).
5. Activez et testez sur une page de staging si possible.

Astuce : nommez vos snippets « catégorie — objectif » (ex. Analytics — GA4 gtag).

3) Types de snippets

4) Auto Insert : Header / Body / Footer

• Header : meta, preconnect, JSON‑LD, balises nécessaires avant le rendu.
• Body (start) : bannières consentement, pixels essentiels.
• Footer : JS non critique, init des composants, analytics déféré.
• Shortcode : rendre un snippet dans un article/page via .

5) Conditions & portée

• Site‑wide, ou ciblage fin : types de contenu, catégories, ID, modèles, rôle utilisateur.
• Front office seulement (!is_admin()) ou admin‑only.
• URL contient / commence par, expression régulière (Pro pour options avancées).

6) Priorités & ordre de chargement

Pour les hooks (add_action / add_filter), utilisez la priorité (par défaut 10). Exemple : charger vos styles après le thème :

add_action('wp_enqueue_scripts', function(){
  wp_enqueue_style('custom-overrides', get_stylesheet_directory_uri().'/overrides.css', ['theme-handle'], '1.0');
}, 20); // priorité 20 > 10

7) Sécurité : sanitization & nonces

• Échapper en sortie : esc_html(), esc_url(), wp_kses().
• Assainir en entrée : sanitize_text_field(), absint().
• Nonces pour les formulaires/JS : wp_create_nonce() + wp_verify_nonce().

8) Performance (défer, preload, preconnect)

<!-- Header HTML -->
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
<link rel="dns-prefetch" href="//www.googletagmanager.com">

// JS (Footer) — marquer un script comme defer
add_action('wp_enqueue_scripts', function(){
  wp_enqueue_script('my-lib', 'https://cdn.example.com/lib.js', [], null, true);
  add_filter('script_loader_tag', function($tag, $handle){
    if('my-lib' === $handle){ $tag = str_replace(' src', ' defer src', $tag); }
    return $tag;
  }, 10, 2);
});

9) Mes recettes prêtes à coller

<script>window.__consent=window.__consent||{analytics:false};</script>
<script> if(window.__consent.analytics){
  var s=document.createElement('script'); s.async=1; s.src='https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX';
  document.head.appendChild(s); window.dataLayer=window.dataLayer||[]; function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date()); gtag('config', 'G-XXXXXXX'); }
</script>

add_action('init', function(){
  remove_action('wp_head','print_emoji_detection_script',7);
  remove_action('wp_print_styles','print_emoji_styles');
  remove_action('wp_head','wp_oembed_add_discovery_links');
  remove_action('wp_head','rest_output_link_wp_head');
});

<script type="application/ld+json">{
 "@context":"https://schema.org","@type":"Article",
 "headline":"{title}","datePublished":"{date}","author":{"@type":"Person","name":"{author}"}
}</script>

add_filter('upload_mimes', function($m){ $m['svg']='image/svg+xml'; return $m; });

add_filter('the_content', function($c){
  if(is_singular('post')){
    $parts = preg_split('/(<\/p>)/i', $c, -1, PREG_SPLIT_DELIM_CAPTURE);
    if(count($parts) > 6){
      $cta = '<div class="cta"><a class="btn" href="/go/outil">Voir l\'outil</a></div>';
      array_splice($parts, 6, 0, $cta);
      return join('', $parts);
    }
  } return $c;
});

<link rel="preload" as="font" href="/fonts/Inter-Var.woff2" type="font/woff2" crossorigin>

10) Shortcodes utiles

// [annee]
add_shortcode('annee', fn()=> date('Y'));
// [site_name]
add_shortcode('site_name', fn()=> get_bloginfo('name'));
// [cta slug="wp-rocket"]
add_shortcode('cta', function($a){ $a=shortcode_atts(['slug'=>''], $a); return 'Essayer'; });

11) Hooks pratiques

• wp_head : metas, JSON‑LD, preconnect.
• wp_footer : scripts non critiques.
• template_redirect : redirections simples (attention aux boucles).
• the_content : inserts CTA/notes (avec parcimonie).

12) Consentement & RGPD

Chargez Analytics/pixels après consentement. Centralisez la variable window.__consent (ou votre CMP) et entourez vos scripts.

13) Versionning & export/import

• Nommez et taggez vos snippets.
• Exportez en JSON et conservez une copie Git/Drive.
• Notez la date et l'impact attendu dans la description.

14) Débogage & conflits

• Activez un à un. Si écran blanc : désactivez le snippet via la base (ou SSH) et corrigez la syntaxe.
• Console navigateur : F12 → Console pour JS.
• Surveillez les doublons avec Site Kit, WP Rocket, thèmes.

15) Checklist express

• Nom clair + tags (catégorie, objectif).
• Auto Insert adapté (Header/Body/Footer/Shortcode).
• Conditions précises (évitez site‑wide par défaut).
• Test staging → prod. Rollback prêt.
• Pas de doublons avec d'autres plugins.

Témoignages

FAQ