WordPress : Comment accrocher le fichier CSS en fonction de la sélection du thème dans la section de personnalisation

Publié par Jean-Michel le

J’ai ajouté une nouvelle zone dans la section Customizer qui permet à un utilisateur de choisir les couleurs de thème qu’il souhaite :

Nouvelle zone de personnalisation

Mais je ne sais pas comment activer/ajouter des fichiers CSS en fonction de la sélection.

c’est-à-dire ajouter green.csssi la couleur du thème vert est sélectionnée

ou ajouter blue.csssi la couleur du thème bleu est sélectionnée.

Solution n°1 trouvée

Vous pouvez accéder aux valeurs de Customizer avec get_theme_mod(), il vous suffit donc de vérifier la valeur de votre paramètre avant de mettre les feuilles de style en file d’attente de la manière habituelle :

function wpse_310123_enqueue_scheme_css() {
    $scheme = get_theme_mod( 'theme_scheme' );

    if ( $scheme === 'green' ) {
        wp_enqueue_style( 'theme-green', get_theme_file_uri( 'green.css' ) );
    } elseif ( $scheme === 'blue') {
        wp_enqueue_style( 'theme-blue', get_theme_file_uri( 'blue.css' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse_310123_enqueue_scheme_css' );

Notez que le code ci-dessus suppose :

  • Le nom de votre paramètre de personnalisation est theme_scheme. Si ce n’est pas le cas, changez-le en fonction de votre réglage actuel.
  • Les valeurs possibles sont greenou blue. S’il s’agit d’autre chose, comme green-theme, assurez-vous de les modifier.
  • Vos fichiers blue.css et green.css se trouvent dans le dossier racine de votre thème. Si ce n’est pas le cas, ajoutez les répertoires au nom du fichier, par exemple. get_theme_file_uri( 'assets/css/green.css' ).

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *