[AUTOMATIQUE] Cet article a plus de 5 ans.
Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.

Voilà un problème auquel nous sommes souvent confronté. Il s’agit de surcharger un thème avec du JS ou du CSS.

Pour le faire de manière proprement wp_enqueue_script est la méthode qu’il faut utiliser. Elle permet d’ajouter des fichiers de style CSS ou Javascript.

Le problème avec cette méthode, c’est qu’il n’est pas toujours possible d’avoir la main sur l’ordre de déclaration de ces fichiers.

Une autre méthode pour résoudre ce problème est wp_enqueue_scripts (avec un S), car contrairement wp_enqueue_script (sans S) , cette fonction est « hookée » et a donc un paramètre de priorité (le dernier paramètre de la fonction add_action. On utilise donc cette seconde fonction pour appeler la première… vous suivez ?

Il est ainsi possible de demander à WordPress de charger ses scripts personnels après ceux du thème ou d’un plugin.

function custom_enqueue_scripts() {
	if(!is_admin()){ //pour ne pas appliquer les styles et charger inutillement du style dans le BO
	//Ajout des JS (appelés dans le footer)
		wp_enqueue_script('scripts', get_template_directory_uri() . '/monfichier.js', array( 'jquery' ),  NULL, true);
		
	//Ajout des CSS
		wp_enqueue_style( 'custom', get_template_directory_uri() . '/monfichier.css', array(), NULL, NULL);
	}
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts', 101);

Autre hook intéressant pour désactiver le style d’un plugin : wp_dequeue_style

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

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

Afficher les 9 commentaires

9 commentaires

  1. Bonjour Brice,
    Merci pour cette bonne explication qui, je l’esperais, allait me sortir d’affaires, en vain 🙁
    En effet cela fait 3 jours que je cherche a faire demarrer mon script js, il ne veut rien savoir.
    Ci-dessous ce que j’ai ajoute a mon fichier functions php :
    function carousel_scripts() {

    wp_enqueue_script(‘carousel_script’,’ /js/mon_script_carousel.js’, array(),  », true );
    } // fin de la fonction carousel_scripts
    add_action(‘wp_enqueue_scripts’, ‘carousel_scripts’);

    mon_script_carousel.js se trouve bien dans le dossier js dans mon dossier enfant theme.
    Je ne sais quelles autres infos vous donner ?

  2. Bonjour Julia,
    Pouvez-vous partager ici ce que vous avez ajouté à votre fichier functions.php ?
    Sans plus d’information je ne peux vous aider.

  3. Bonjour Brice,
    tout d’abord bravo pour ce site et toutes les solutions que tu apportes.
    J’ai un souci avec mon site, enfaite il m’indique ce message :
    Cette page ne fonctionne pas

    Impossible de traiter cette demande via (mon site à local) à l’heure actuelle.
    HTTP ERROR 500
    Et je ne peux plus me connecter à l’administration de mon site.

    J’ai donc essayé de regardé si ce n’était pas les plugins et ajouté le fichier repertoire : pluginsxxx à la place mais bon ça n’a pas l’air d’être ça en faisant des recherches je suis allé dans le fichier : wp config et mis true au lieu de define(‘WP_DEBUG’, true); et là il m’indique :
    Notice: wp_enqueue_script est appelée de la mauvaise manière. Les scripts et les styles ne peuvent pas être enregistrés ou ajoutés avant le déclenchement des crochets wp_enqueue_scripts, admin_enqueue_scripts ou login_enqueue_scripts. Veuillez lire Débugger dans WordPress (en) pour plus d’informations. (Ce message a été ajouté à la version 3.3.0.) in C:\wamp64\www\juliavilrdtest\wp-includes\functions.php on line 4153
    et là même en allant sur le codex, je suis perdu.
    Et je ne suis même pas sur que mon probleme soit ça… enfin voila si tu pouvais m’aider ou au moins m’indiquer si mon probleme d’admin vient d’une surcharge de script et css ça serait déja ça…
    Merci par avance,

  4. Merci pour cet article, de mon côté impossible de faire fonctionner, j’ai le souci depuis presque une année … le css de mon plugin modifie tout le back office et tous les plugins …

    function carla_stylesheet() {

    wp_enqueue_style( ‘carla-style’, plugins_url(‘css/bootstrap.min.css’, __FILE__) );
    wp_enqueue_style( ‘carla-style2’, plugins_url(‘css/stylesheet.css’, __FILE__) );

    }

    J’ai essayé tout ce qui est proposé dans la documentation, j’ai vu TOUT les sites sur google en rapport avec ça, j’ai posté un nombre incalculable de post sur stack et personne n’a jamais réussi à faire fonctionner correctement mes scripts. ( environ 50 personne y ont mis la main sans succès)

    • Bonjour,
      J’ai du mal à comprendre le soucis et encore plus à croire que 50 personnes n’ont pas pu t’aider là dessus.
      Si je comprends tu appelles tes styles depuis ton plugin. OK, donc les enqueues me semble correctes.
      En revanche, l’important est plutôt le hook (action) qui permet d’éxécuter ta fonction carla_stylesheet.
      Il faudrait que ça soit :
      pour l’afficher en front : add_action( ‘wp_enqueue_scripts’, ‘carla_stylesheet’ );
      pour l’afficher en back (partout) : add_action( ‘admin_enqueue_scripts’, ‘carla_stylesheet’ );
      pour l’afficher uniquement sur les pages de ton plugin : il faut que tu récupères la valeur de création de ta page d’admin comme ceci (exemple d’un de mes plugins).
      function wppic_create_menu() {

      $admin_page = add_options_page( WPPIC_NAME_FULL, WPPIC_NAME, ‘manage_options’, WPPIC_ID, ‘wppic_settings_page’ );

      //Enqueue sripts and style
      add_action( ‘admin_print_scripts-‘ . $admin_page, ‘wppic_admin_scripts’ );
      add_action( ‘admin_print_styles-‘ . $admin_page, ‘wppic_admin_css’ );

      }
      add_action( ‘admin_menu’, ‘wppic_create_menu’ );

  5. Bonjour,
    Pour « coller » quelques lignes de CSS dans le footer, tu peux utiliser le hook wp_footer.
    Ex : add_action( ‘wp_footer’, ‘fonction_qui_print_ton_CSS’ );

  6. bonjour svp j’ai un souci. je suis pas doué en programmation web ni ne maîtrise aucun langage à part html et le css ou j’ai un niveau de débutant.
    j’ai un site wordpress en ligne et on m’a dire de faire un formulaire un formulaire en ligne. les plugins proposés comme contact form7 etc. ne me donne pas le style voulue et n’étant pas codeur. j’ai trouvé une application en ligne « formoid » qui permet de faire un formulaire à mon goût etça m’a généré un code html avec un tas de fichier css, javascript et php le tout dans un dossier. Seulement voilà je sais pas comment importer ces fichiers sur le site. j’ai testé le formulaire ça marche il me fait un retour sur mon mail.
    JE SAIS VRAIMENT PAS COMMENT FAIRE POUR L’IMPORTER SUR MON SITE SVP AIDEZ MOI