Layouts dynamiques Avada avec Fusion Builder

Si vous avez déjà publié un article et découvert après coup que votre header, votre sidebar ou votre bloc “inscription newsletter” devait changer selon la catégorie, vous avez déjà touché du doigt le vrai intérêt des layouts dynamiques d’Avada.

Ce qu'on va construire

Vous allez mettre en place un système de layouts dynamiques avec Avada (Fusion Builder) basé sur des conditions d’affichage solides, sans bricolage, compatible WordPress 6.9.4 et PHP 8.1+.

Résultat final :

Un header et un footer gérés via Avada Layouts, réutilisables et faciles à maintenir.
Un layout d’article (single post) dynamique : titre, image mise en avant, meta, contenu, bloc auteur, et un CTA conditionnel.
Un layout d’archives (catégories/tags/CPT) dynamique avec liste d’articles et pagination.
Un CTA conditionnel (ex : “Télécharger le guide”) affiché uniquement sur certaines catégories, sans plugin tiers, via un shortcode sécurisé.

À la fin, vous saurez :

Créer des layouts Avada propres et éviter les collisions de conditions (le piège n°1).
Structurer un design system simple : global → spécifique → exception.
Ajouter une couche “logique métier” (CTA conditionnel) sans casser l’éditeur et sans dépendre d’un plugin de snippets fragile.

Résumé rapide

Créez d’abord vos layouts globaux (header/footer), puis vos layouts spécifiques (single, archives).
Traitez les conditions d’affichage comme des règles de routage : la règle la plus spécifique doit gagner.
Évitez de multiplier les layouts “presque identiques” : factorisez via éléments globaux et blocs réutilisables.
Ajoutez votre logique conditionnelle “business” via un shortcode sécurisé (capabilities, échappement, cache).
Testez avec une matrice de pages (home, article, catégorie A, catégorie B, recherche, 404) avant de publier.

Quand utiliser cette solution

Vous avez un blog, un magazine, un site de niche avec plusieurs catégories et des besoins d’affichage différents (CTA, navigation, éléments de réassurance).
Vous voulez sortir du modèle “un template pour tout” et passer à une logique par intent (ex : articles “débutant” vs “pro”).
Vous maintenez un site Avada sur la durée : les layouts Avada évitent les modifications directes de fichiers et limitent les régressions.
Vous travaillez en équipe : les conditions rendent la structure lisible (quand elles sont bien nommées).

Quand ne PAS utiliser cette solution

Votre site est un “one-page” ou un site vitrine très simple : un header/footer global suffit, les conditions ajoutent de la complexité.
Vous avez déjà un thème enfant très custom (templates PHP spécifiques) et un pipeline de déploiement : Avada Layouts peut devenir une couche en plus à synchroniser.
Vous devez gérer des règles ultra complexes (par exemple par utilisateur, par abonnement, par A/B test) : vous finirez souvent par coder une logique serveur plus robuste (ou un plugin dédié).

Avant de commencer (prérequis)

Je vous recommande de faire ça sur une copie de staging. J’ai souvent vu des sites casser “juste” parce qu’un layout global a été publié avec une condition trop large.

Pré-requis techniques

WordPress 6.9.4 (avril 2026) ou plus récent.
PHP 8.1+ (8.2/8.3 recommandé si votre hébergeur le propose).
Thème Avada + Fusion Builder à jour.

Sauvegarde et environnement

Faites une sauvegarde complète (fichiers + base de données).
Activez un environnement de staging si possible.
Assurez-vous d’avoir accès à votre FTP/SSH en cas d’erreur fatale.

Outils utiles

Un plugin de gestion de snippets peut aider, mais ici je vous montre une méthode sans dépendance (code dans un mini-plugin).
Un plugin de debug de requêtes peut être utile si vous suspectez un conflit de conditions.

Références officielles (pour cadrer le code)

Étape 1 : Préparer la structure “Layouts” et vos données

Avant de toucher aux conditions, préparez vos contenus “variables”. Sinon, vous allez construire des layouts dynamiques… avec des champs vides.

1) Vérifier que les contenus “dynamiques” existent

Au moins 6 articles avec : titre, extrait, image mise en avant, catégories, tags.
Au moins 2 catégories “significatives” (ex : Débuter et Avancé).
Optionnel : une page “Téléchargement” ou “Newsletter” pour votre CTA.

2) Repérer où Avada gère les Layouts

Dans l’admin WordPress :

Allez dans Avada → Layouts (selon votre version, cela peut être sous Avada → Layout Builder).
Vérifiez que vous pouvez créer un nouveau layout.

3) Décider d’une convention de nommage (critique)

Ça paraît secondaire, mais c’est ce qui vous évite de publier “Header 2 (test)” en prod.

Global : GLB - Header, GLB - Footer
Single : SNG - Post (par défaut), SNG - Post (Cat: Avancé)
Archives : ARC - Category, ARC - Tag

Résultat attendu

Vous avez une base de contenus prête, et un plan de layouts lisible. Vous évitez déjà 50% des erreurs de conditions que je vois sur des sites Avada.

On commence par le global. Si votre header est géré à moitié par un layout et à moitié par les options du thème, vous allez courir après des incohérences.

2.1 Créer le layout “GLB - Header”

Admin → Avada → Layouts → Add New.
Nom : GLB - Header.
Type : Header (ou “Header Section” selon l’UI).
Éditez avec Fusion Builder.

Structure recommandée

Une section principale (container) avec 2 colonnes : logo à gauche, menu à droite.
Un second container “barre info” optionnel (ex : message promo), que vous pourrez masquer via conditions ou CSS.

Dans Fusion Builder, utilisez les éléments “Logo”, “Menu”, “Button” si besoin. Le point clé : ne codez pas le menu en dur, utilisez le menu WordPress.

2.2 Créer le layout “GLB - Footer”

Avada → Layouts → Add New.
Nom : GLB - Footer.
Type : Footer.
Fusion Builder : ajoutez 3 colonnes (À propos, Liens, Newsletter) + une barre de copyright.

2.3 Publier avec des conditions globales

Dans le panneau de conditions :

Affichage : Entire Site (site entier).
Exclusions : gardez vide au début.

Résultat attendu

Votre header/footer s’affichent partout. Si vous ne voyez rien, c’est souvent parce qu’un header “classique” Avada est encore activé dans les options du thème, ou qu’un autre layout header a une condition plus spécifique.

Étape 3 : Maîtriser les conditions d’affichage (et éviter les collisions)

Les conditions Avada sont puissantes, mais elles se comportent comme un système de règles. Le problème vient rarement de “ça ne marche pas”, mais de “deux règles se battent”.

3.1 Modèle mental : global → spécifique → exception

Global : s’applique partout (fallback).
Spécifique : s’applique à un type de page (single post, archive, page X).
Exception : s’applique à une sous-partie (catégorie “Avancé”, tag “promo”).

3.2 Règles pratiques que j’applique en production

Un seul layout “fallback” par type (un header global, un footer global, un single post par défaut).
Si vous créez un layout plus spécifique, ajoutez une exclusion sur le layout par défaut si Avada ne résout pas correctement la priorité dans votre configuration.
Évitez 10 layouts “single post” quasi identiques. Factorisez : un layout + un bloc conditionnel (CTA) + éventuellement un style par catégorie.

3.3 Tableau de diagnostic (conditions)

Symptôme	Cause probable	Vérification	Solution
Le mauvais header s’affiche	Deux headers ont des conditions qui matchent	Listez tous les layouts “Header” et leurs conditions	Désactivez un layout, ou rendez les conditions exclusives (include/exclude)
Le layout ne s’affiche nulle part	Condition trop restrictive	Testez sur une page qui devrait matcher (single post, catégorie précise)	Commencez large puis resserrez
Ça marche pour vous mais pas pour un autre utilisateur	Cache (page cache / CDN) renvoie une version	Test en navigation privée + purge cache	Purge Avada cache + plugin cache + CDN
Le layout s’affiche mais sans styles	CSS/JS minifiés non régénérés	Regardez la console + purge assets	Regénérez les fichiers CSS/JS dans Avada Performance

Résultat attendu

Vous êtes capable d’expliquer pourquoi un layout s’applique à une page donnée. Si vous ne pouvez pas, vous allez déboguer à l’aveugle.

Étape 4 : Construire un layout d’article dynamique (titre, meta, image, contenu, auteur)

Objectif : un template “single post” propre, où les éléments sont dynamiques et où vous n’avez plus besoin de bricoler chaque article.

4.1 Créer le layout “SNG - Post (par défaut)”

Avada → Layouts → Add New.
Nom : SNG - Post (par défaut).
Type : Single Post (ou “Content Layout” ciblant les posts).
Éditez avec Fusion Builder.

4.2 Construire la structure Fusion Builder

Structure recommandée (simple et robuste) :

Container 1 : “Hero” (titre + meta + image mise en avant)
Container 2 : contenu (le contenu WordPress)
Container 3 : bloc auteur + posts liés
Container 4 : CTA (on le rendra conditionnel à l’étape 6)

Éléments dynamiques à utiliser

Selon votre version d’Avada, les noms exacts varient, mais vous cherchez les éléments qui “tirent” leur contenu du post courant :

Post Title (titre)
Post Meta (date, auteur, catégories)
Featured Image
Post Content
Author Box

Si vous ne trouvez pas un élément, cherchez l’option “Dynamic Content” dans l’élément texte/bouton, qui permet souvent d’insérer des tokens dynamiques.

4.3 Conditions d’affichage

Include : All Posts
Exclude : rien pour l’instant

4.4 Vérification rapide

Ouvrez un article au hasard.
Vérifiez : titre correct, image correcte, catégories correctes, contenu affiché, auteur affiché.

Si le contenu n’apparaît pas, j’ai souvent vu deux causes :

Vous avez inséré un “Text Block” à la place de “Post Content”.
Vous éditez un layout de type “Section” au lieu de “Single Post / Content Layout”.

Étape 5 : Construire un layout d’archives dynamique (catégories, tags, CPT)

Les archives sont le point faible de beaucoup de blogs Avada : soit elles sont trop génériques, soit elles sont surchargées. Ici on fait un layout lisible, avec un listing et une pagination fiable.

5.1 Créer le layout “ARC - Category”

Avada → Layouts → Add New.
Nom : ARC - Category.
Type : Archive (ou “Content Layout” ciblant les archives).
Fusion Builder.

5.2 Structure recommandée

Container 1 : titre d’archive + description (si elle existe)
Container 2 : boucle d’articles (cards) + pagination
Container 3 : sidebar optionnelle (facultatif)

Éléments à viser :

Archive Title / “Page Title” dynamique
Archive Description (si disponible)
Posts / Blog element (listing)
Pagination

5.3 Réglages du listing (les détails qui changent tout)

Affichage : image + titre + extrait + meta minimal.
Nombre d’articles : laissez WordPress gérer (Réglages → Lecture) sauf besoin spécifique.
Pagination : privilégiez une pagination numérotée si Avada le propose.

5.4 Conditions d’affichage

Include : All Categories (ou “Category Archives”).
Optionnel : créez un second layout “ARC - Tag” si vous voulez un rendu différent pour les tags.

5.5 Test “permalinks” (ne le sautez pas)

Quand une archive affiche un listing bizarre (ou pas de pagination), le coupable est souvent une réécriture d’URL cassée.

Admin → Réglages → Permaliens.
Cliquez Enregistrer les modifications (sans rien changer).

Étape 6 : Ajouter un CTA conditionnel (sans plugin) via un shortcode propre

Avada gère très bien les conditions “de page”. Mais dès que vous voulez une condition “métier” (catégorie, tag, type de post, connecté/pas connecté), un petit shortcode vous simplifie la vie. Et vous le placez n’importe où dans Fusion Builder.

6.1 Créer un mini-plugin (recommandé)

Évitez de coller ça dans functions.php si vous changez souvent de thème enfant, ou si vous utilisez un plugin de snippets instable. Un mini-plugin est plus robuste.

Créez le fichier :

wp-content/plugins/avada-conditional-cta/avada-conditional-cta.php

Collez ce code complet :

<?php
/**
 * Plugin Name: Avada Conditional CTA (Shortcode)
 * Description: Shortcode sécurisé pour afficher un CTA selon des conditions (catégorie, tag, connexion).
 * Version: 1.0.0
 * Requires at least: 6.9
 * Requires PHP: 8.1
 * Author: Votre Nom
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Shortcode [bpcab_cta] : affiche un bloc HTML si conditions OK.
 *
 * Exemples:
 * [bpcab_cta cat="avance" url="/newsletter/" label="Recevoir les nouveautés"]
 * [bpcab_cta tag="promo" url="https://exemple.com/guide.pdf" label="Télécharger le guide" newtab="1"]
 * [bpcab_cta logged_in="1" url="/compte/" label="Accéder à votre espace"]
 */
function bpcab_shortcode_cta( $atts, $content = null ) : string {
	$atts = shortcode_atts(
		array(
			'cat'       => '',  // Slug de catégorie
			'tag'       => '',  // Slug de tag
			'logged_in' => '',  // "1" pour n'afficher que si connecté, "0" que si non connecté
			'url'       => '',
			'label'     => '',
			'newtab'    => '0', // "1" pour target=_blank
			'class'     => 'bpcab-cta',
		),
		(array) $atts,
		'bpcab_cta'
	);

	// Ne rien afficher si on n'a pas un minimum d'infos.
	if ( empty( $atts['url'] ) || empty( $atts['label'] ) ) {
		return '';
	}

	// Condition connexion.
	if ( $atts['logged_in'] !== '' ) {
		$must_be_logged_in = ( $atts['logged_in'] === '1' );
		if ( $must_be_logged_in !== is_user_logged_in() ) {
			return '';
		}
	}

	// Conditions de taxonomie : on ne les évalue que sur une singular (post/page/CPT).
	// Sur une archive, is_singular() est false, donc on sort si une condition cat/tag est demandée.
	if ( ( ! empty( $atts['cat'] ) || ! empty( $atts['tag'] ) ) && ! is_singular() ) {
		return '';
	}

	if ( ! empty( $atts['cat'] ) ) {
		$cat_slug = sanitize_title( (string) $atts['cat'] );
		if ( ! has_category( $cat_slug, get_queried_object_id() ) ) {
			return '';
		}
	}

	if ( ! empty( $atts['tag'] ) ) {
		$tag_slug = sanitize_title( (string) $atts['tag'] );
		if ( ! has_tag( $tag_slug, get_queried_object_id() ) ) {
			return '';
		}
	}

	$url   = esc_url( (string) $atts['url'] );
	$label = esc_html( (string) $atts['label'] );
	$class = sanitize_html_class( (string) $atts['class'] );

	$target = '';
	$rel    = '';
	if ( $atts['newtab'] === '1' ) {
		$target = ' target="_blank"';
		$rel    = ' rel="noopener noreferrer"';
	}

	// HTML volontairement simple pour s'intégrer dans Avada (styling via CSS/Avada options).
	$html  = '<div class="' . $class . '">';
	$html .= '<a class="' . $class . '__link" href="' . $url . '"' . $target . $rel . '>' . $label . '</a>';
	$html .= '</div>';

	return $html;
}
add_shortcode( 'bpcab_cta', 'bpcab_shortcode_cta' );

/**
 * Charge un CSS minimal (optionnel) côté front.
 * Vous pouvez aussi faire le style dans Avada Global Options, mais ici c'est portable.
 */
function bpcab_cta_enqueue_assets() : void {
	if ( is_admin() ) {
		return;
	}

	$css = '
	.bpcab-cta{margin:24px 0;padding:16px;border:1px solid rgba(0,0,0,.08);border-radius:12px}
	.bpcab-cta__link{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none}
	';

	// Ajout inline sur un handle existant (front). On utilise wp_register_style pour être sûr d'avoir un handle.
	wp_register_style( 'bpcab-cta', false, array(), '1.0.0' );
	wp_enqueue_style( 'bpcab-cta' );
	wp_add_inline_style( 'bpcab-cta', $css );
}
add_action( 'wp_enqueue_scripts', 'bpcab_cta_enqueue_assets', 20 );

6.2 Activer le plugin

Admin → Extensions → Extensions installées.
Activez Avada Conditional CTA (Shortcode).

6.3 Insérer le CTA dans votre layout “SNG - Post (par défaut)”

Dans Fusion Builder (dans le layout single) :

Ajoutez un élément “Text Block” (ou “Code Block” si vous préférez, mais “Text Block” suffit).
Collez le shortcode :

[bpcab_cta cat="avance" url="/newsletter/" label="Recevoir les nouveautés" newtab="0"]

Résultat attendu :

Sur un article dans la catégorie “avance” (slug), le CTA s’affiche.
Sur les autres articles, il n’apparaît pas.

6.4 Points de vigilance (réalistes)

Si vous copiez le code du plugin dans le mauvais fichier (par exemple dans un template Avada), vous risquez une erreur fatale ou un code non chargé.
Si vous oubliez un point-virgule, WordPress peut afficher une erreur critique. Gardez un accès FTP.
Si votre slug de catégorie est “avancé” avec accent dans l’admin, WordPress l’a probablement converti en avance ou avance-2. Vérifiez dans Articles → Catégories.

Le résultat complet

Si vous voulez tout copier d’un bloc, voici le code complet du mini-plugin (identique à l’étape 6). Personnalisation conseillée : adaptez le CSS, et ajoutez des attributs (ex : role, icône, texte secondaire) si votre design le demande.

<?php
/**
 * Plugin Name: Avada Conditional CTA (Shortcode)
 * Description: Shortcode sécurisé pour afficher un CTA selon des conditions (catégorie, tag, connexion).
 * Version: 1.0.0
 * Requires at least: 6.9
 * Requires PHP: 8.1
 * Author: Votre Nom
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

function bpcab_shortcode_cta( $atts, $content = null ) : string {
	$atts = shortcode_atts(
		array(
			'cat'       => '',
			'tag'       => '',
			'logged_in' => '',
			'url'       => '',
			'label'     => '',
			'newtab'    => '0',
			'class'     => 'bpcab-cta',
		),
		(array) $atts,
		'bpcab_cta'
	);

	if ( empty( $atts['url'] ) || empty( $atts['label'] ) ) {
		return '';
	}

	if ( $atts['logged_in'] !== '' ) {
		$must_be_logged_in = ( $atts['logged_in'] === '1' );
		if ( $must_be_logged_in !== is_user_logged_in() ) {
			return '';
		}
	}

	if ( ( ! empty( $atts['cat'] ) || ! empty( $atts['tag'] ) ) && ! is_singular() ) {
		return '';
	}

	if ( ! empty( $atts['cat'] ) ) {
		$cat_slug = sanitize_title( (string) $atts['cat'] );
		if ( ! has_category( $cat_slug, get_queried_object_id() ) ) {
			return '';
		}
	}

	if ( ! empty( $atts['tag'] ) ) {
		$tag_slug = sanitize_title( (string) $atts['tag'] );
		if ( ! has_tag( $tag_slug, get_queried_object_id() ) ) {
			return '';
		}
	}

	$url   = esc_url( (string) $atts['url'] );
	$label = esc_html( (string) $atts['label'] );
	$class = sanitize_html_class( (string) $atts['class'] );

	$target = '';
	$rel    = '';
	if ( $atts['newtab'] === '1' ) {
		$target = ' target="_blank"';
		$rel    = ' rel="noopener noreferrer"';
	}

	$html  = '<div class="' . $class . '">';
	$html .= '<a class="' . $class . '__link" href="' . $url . '"' . $target . $rel . '>' . $label . '</a>';
	$html .= '</div>';

	return $html;
}
add_shortcode( 'bpcab_cta', 'bpcab_shortcode_cta' );

function bpcab_cta_enqueue_assets() : void {
	if ( is_admin() ) {
		return;
	}

	$css = '
	.bpcab-cta{margin:24px 0;padding:16px;border:1px solid rgba(0,0,0,.08);border-radius:12px}
	.bpcab-cta__link{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none}
	';

	wp_register_style( 'bpcab-cta', false, array(), '1.0.0' );
	wp_enqueue_style( 'bpcab-cta' );
	wp_add_inline_style( 'bpcab-cta', $css );
}
add_action( 'wp_enqueue_scripts', 'bpcab_cta_enqueue_assets', 20 );

Personnalisations rapides

Pour cibler plusieurs catégories : créez deux shortcodes, ou étendez le code pour accepter une liste séparée par virgule.
Pour un CTA différent selon catégorie : placez plusieurs shortcodes dans le layout, chacun avec sa condition cat=....
Pour styliser via Avada : donnez une classe class="bpcab-cta bpcab-cta--avance" et gérez le CSS côté Avada (Custom CSS).

Adapter pour Divi 5 / Elementor / Avada

Avada (Fusion Builder)

Vous êtes déjà dans le bon outil : le shortcode s’insère dans un “Text Block”. Pour rendre le CTA plus “builder-friendly”, vous pouvez aussi :

Créer un Avada Global Element “CTA Newsletter” et y mettre le shortcode.
Réutiliser cet élément global dans plusieurs layouts (single + page + archive).

Divi 5

Divi 5 peut afficher des shortcodes dans un module Texte. La logique reste identique :

Insérez [bpcab_cta ...] dans un module Texte.
Gérez l’affichage conditionnel via les conditions Divi si vous en avez, ou laissez le shortcode décider.

Dans mon expérience, le piège côté Divi est le cache statique : testez en navigation privée après purge.

Elementor

Elementor affiche les shortcodes via le widget “Shortcode” ou “Texte”. Même approche :

Ajoutez le widget “Shortcode”.
Collez [bpcab_cta ...].

Attention : si vous utilisez des templates Elementor + Avada Layouts en parallèle, vous pouvez créer des doublons (deux “single” actifs). Choisissez un seul système de templating.

Vérification finale

Je teste toujours avec une petite matrice. Faites pareil, ça évite les surprises.

Page d’accueil : header/footer OK, pas de CTA “cat=...”.
Article (cat=avance) : layout single OK + CTA visible.
Article (autre catégorie) : layout single OK + CTA absent.
Archive catégorie : layout archive OK + pagination OK.
Recherche : vérifiez quel layout s’applique (souvent archive/search).
404 : vérifiez que votre header/footer global s’affiche.

Si vous avez un cache (plugin, serveur, CDN) :

Purge cache Avada (si activé).
Purge plugin cache.
Purge CDN.
Hard refresh navigateur.

Si le résultat n'est pas celui attendu

1) Le shortcode s’affiche en texte brut

Cause : l’élément Fusion Builder n’exécute pas les shortcodes (rare), ou vous êtes dans un champ qui échappe le contenu.
Vérification : testez le shortcode dans le contenu d’un article (éditeur WordPress).
Solution : utilisez un “Text Block” standard, ou un élément dédié “Shortcode” si Avada en propose un.

2) Le CTA ne s’affiche jamais

Cause : slug incorrect, ou condition évaluée hors singular.
Vérification : vérifiez le slug catégorie/tag, et testez sur un article (pas sur une archive).
Solution : corrigez cat/tag, ou retirez la condition si vous êtes sur une page non singular.

3) Le “mauvais” layout s’affiche

Cause : collision de conditions entre deux layouts du même type.
Vérification : désactivez temporairement un layout (brouillon) et retestez.
Solution : rendez les conditions exclusives (include/exclude), et gardez un fallback unique.

4) Erreur critique après activation du plugin

Cause : faute de syntaxe (parenthèse, point-virgule), ou fichier encodé bizarrement.
Vérification : consultez les logs PHP, ou activez WP_DEBUG sur staging.
Solution : corrigez, puis réactivez. Gardez PHP 8.1+ (un PHP trop ancien peut casser les types de retour).

5) Le style du CTA ne charge pas

Cause : optimisation/minification qui retire le style inline, ou conflit de priorité CSS.
Vérification : inspectez l’élément et cherchez les règles .bpcab-cta.
Solution : déplacez le CSS dans Avada Custom CSS, ou augmentez la spécificité.

Pièges et erreurs courantes

Erreur	Cause	Solution
Coller le code dans `functions.php` du thème parent	Perdu à la prochaine mise à jour	Utilisez un thème enfant ou un mini-plugin (recommandé)
Deux layouts “Single Post” actifs	Conditions trop larges (ex : “All Posts” sur deux layouts)	Gardez 1 fallback, rendez l’autre plus spécifique, ou excluez explicitement
Slug de catégorie mal saisi	Confusion nom vs slug	Utilisez le slug exact (Articles → Catégories)
Tester sur production sans purge cache	Le CDN sert une ancienne version	Purge Avada + plugin cache + CDN + navigateur
Utiliser un hook inadapté pour charger le CSS	CSS en admin, ou chargé trop tôt	Utilisez `wp_enqueue_scripts` côté front (comme dans le plugin)
Snippet cassé par un plugin de snippets	Ordre de chargement ou snippet désactivé	Mini-plugin dédié + contrôle de version
Code d’un vieux tutoriel incompatible	PHP 8.1+ plus strict, ou fonctions dépréciées	Adaptez au contexte WordPress 6.9.4 + PHP 8.1+ et testez sur staging

Variante / alternative

Alternative sans code : conditions Avada uniquement

Si votre besoin est “CTA différent selon catégorie”, vous pouvez parfois éviter le shortcode :

Créez un layout single spécifique pour la catégorie (ex : “SNG - Post (Cat: Avancé)”).
Dans ce layout, ajoutez le CTA directement (bouton Avada).
Condition : inclure uniquement la catégorie “Avancé”.
Gardez “SNG - Post (par défaut)” comme fallback.

Inconvénient : vous multipliez les layouts. Sur un gros blog, ça devient vite pénible.

Alternative plus avancée : bloc conditionnel par meta de post

Si vous voulez piloter le CTA article par article, ajoutez une meta (ACF ou meta native) et adaptez le shortcode pour lire cette meta. Là, vous passez d’une règle “catégorie” à une règle éditoriale “par post”.

Conseils sécurité, performance et maintenance

Sécurité : n’acceptez jamais du HTML brut non filtré en attribut de shortcode. Ici, on échappe l’URL et le label. Si vous ajoutez du contenu riche, passez par wp_kses_post() (doc officielle).
Performance : le shortcode appelle has_category()/has_tag() sur la page courante. C’est léger, mais évitez d’en mettre 30 par page. Factorisez.
Cache : si vous utilisez logged_in, un cache page agressif peut servir la version “connecté” à un visiteur. Dans ce cas, évitez les CTA dépendants de la session, ou configurez le cache pour varier.
Maintenance : versionnez le mini-plugin (Git). Sur des sites clients, c’est ce qui évite les “on ne sait plus où c’est”.

Pour aller plus loin

Ajouter un attribut cats="a,b,c" et parser une liste, plutôt qu’un seul slug.
Ajouter une condition sur un Custom Post Type (ex : afficher un CTA différent sur podcasts).
Ajouter une intégration avec un événement Avada (si vous avez une logique d’assets conditionnels plus poussée) : charger le CSS uniquement si le shortcode est présent (via détection dans the_content ou dans le layout).
Créer une variante “renderless” : le shortcode renvoie uniquement des classes, et Avada gère le rendu via un élément bouton.

Ressources

FAQ

Est-ce que ça marche avec WordPress 6.9.4 et PHP 8.1 ?

Oui. Le code utilise des APIs stables (shortcodes, enqueue) et des fonctions courantes. Le type de retour : string suppose PHP 7+ et ne pose aucun souci en 8.1+.

Pourquoi un mini-plugin plutôt que `functions.php` ?

Parce que vous pouvez changer de thème enfant sans perdre la fonctionnalité, et vous évitez d’empiler des snippets dans un fichier déjà chargé. C’est aussi plus simple à versionner.

Le shortcode fonctionne-t-il dans un layout Avada, pas seulement dans `the_content` ?

Dans la majorité des cas, oui, via un “Text Block”. Si votre élément n’exécute pas les shortcodes, utilisez un élément “Shortcode” (si disponible) ou testez dans un autre élément qui rend du contenu WordPress.

Comment trouver le slug exact d’une catégorie ?

Admin → Articles → Catégories. Le slug est la valeur “Identifiant URL”. Ne confondez pas avec le nom affiché.

Je veux afficher le CTA sur plusieurs catégories, comment faire ?

Le plus simple : dupliquer le shortcode (un par catégorie). Si vous voulez un seul shortcode, étendez-le pour accepter une liste (séparée par virgule) et bouclez sur les slugs.

Ça ne marche pas sur les pages d’archives, c’est normal ?

Oui dans cette version : si vous passez cat ou tag, le shortcode exige is_singular(). Sur une archive, il ne peut pas “tester” les catégories d’un post unique. Si vous voulez un CTA sur une archive, utilisez plutôt une condition Avada (layout archive) ou étendez le shortcode avec is_category()/is_tag() selon le besoin.

Est-ce que le cache peut casser l’affichage conditionnel ?

Oui, surtout si vous conditionnez sur logged_in. Un cache page peut servir une version déjà rendue. Dans ce cas, désactivez le cache pour les pages concernées, ou évitez les conditions dépendantes de l’utilisateur.

Comment déboguer une collision de layouts Avada ?

Mettez temporairement en brouillon un layout suspect, ou restreignez ses conditions. Travaillez par élimination. C’est plus rapide que de “deviner” la priorité.

Puis-je utiliser ce shortcode dans Divi/Elementor ?

Oui. Les builders affichent généralement les shortcodes via un widget/module dédié. Le shortcode reste côté WordPress, donc il est portable.

Est-ce sécurisé d’autoriser une URL externe dans le shortcode ?

Oui si vous échappez correctement l’URL (ici esc_url()) et si vous contrôlez qui peut éditer les layouts. Le risque principal est éditorial : un utilisateur avec accès aux layouts pourrait injecter un lien indésirable. Gérez les rôles/capabilities proprement.

Layouts dynamiques Avada avec Fusion Builder

Ce qu'on va construire

Résumé rapide

Quand utiliser cette solution

Quand ne PAS utiliser cette solution

Avant de commencer (prérequis)

Pré-requis techniques

Sauvegarde et environnement

Outils utiles

Références officielles (pour cadrer le code)

Étape 1 : Préparer la structure “Layouts” et vos données

1) Vérifier que les contenus “dynamiques” existent

2) Repérer où Avada gère les Layouts

3) Décider d’une convention de nommage (critique)

Résultat attendu

Étape 2 : Créer un Header/Footer dynamiques dans Avada Layouts

2.1 Créer le layout “GLB - Header”

Structure recommandée

2.2 Créer le layout “GLB - Footer”

2.3 Publier avec des conditions globales

Résultat attendu

Étape 3 : Maîtriser les conditions d’affichage (et éviter les collisions)

3.1 Modèle mental : global → spécifique → exception

3.2 Règles pratiques que j’applique en production

3.3 Tableau de diagnostic (conditions)

Résultat attendu

Étape 4 : Construire un layout d’article dynamique (titre, meta, image, contenu, auteur)

4.1 Créer le layout “SNG - Post (par défaut)”

4.2 Construire la structure Fusion Builder

Éléments dynamiques à utiliser

4.3 Conditions d’affichage

4.4 Vérification rapide

Étape 5 : Construire un layout d’archives dynamique (catégories, tags, CPT)

5.1 Créer le layout “ARC - Category”

5.2 Structure recommandée

5.3 Réglages du listing (les détails qui changent tout)

5.4 Conditions d’affichage

5.5 Test “permalinks” (ne le sautez pas)

Étape 6 : Ajouter un CTA conditionnel (sans plugin) via un shortcode propre

6.1 Créer un mini-plugin (recommandé)

6.2 Activer le plugin

6.3 Insérer le CTA dans votre layout “SNG - Post (par défaut)”

6.4 Points de vigilance (réalistes)

Le résultat complet

Personnalisations rapides

Adapter pour Divi 5 / Elementor / Avada

Avada (Fusion Builder)

Divi 5

Elementor

Vérification finale

Si le résultat n'est pas celui attendu

1) Le shortcode s’affiche en texte brut

2) Le CTA ne s’affiche jamais

3) Le “mauvais” layout s’affiche

4) Erreur critique après activation du plugin

5) Le style du CTA ne charge pas

Pièges et erreurs courantes

Variante / alternative

Alternative sans code : conditions Avada uniquement

Alternative plus avancée : bloc conditionnel par meta de post

Conseils sécurité, performance et maintenance

Pour aller plus loin

Ressources

FAQ

Est-ce que ça marche avec WordPress 6.9.4 et PHP 8.1 ?

Pourquoi un mini-plugin plutôt que functions.php ?

Le shortcode fonctionne-t-il dans un layout Avada, pas seulement dans the_content ?

Comment trouver le slug exact d’une catégorie ?

Je veux afficher le CTA sur plusieurs catégories, comment faire ?

Ça ne marche pas sur les pages d’archives, c’est normal ?

Est-ce que le cache peut casser l’affichage conditionnel ?

Comment déboguer une collision de layouts Avada ?

Puis-je utiliser ce shortcode dans Divi/Elementor ?

Est-ce sécurisé d’autoriser une URL externe dans le shortcode ?

Articles connexes

Envoyer Un Commentaire Annuler la réponse

Pourquoi un mini-plugin plutôt que `functions.php` ?

Le shortcode fonctionne-t-il dans un layout Avada, pas seulement dans `the_content` ?