Je veux mettre un fichier .js dans la file d'attente de mon thème enfant

Question

Je veux mettre un fichier .js dans la file d'attente de mon thème enfant

19

63125 2015-02-05

J'aiessayé demettreen file d'attente unfichier .jspersonnalisé dans le répertoire demonthèmeenfant.

Dans lefunctions.php demonthèmeenfant,je trouve le code suivant

 /* After this. you can override Accessible Zen's pluggable functions or add your own.
 * Remember, do your best to stay accessible! :)
 *
 */
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

où seule cettepartie a étéimplémentéeparmoiet est censée chargermon custom.script.js depuis le dossierjs/

 wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );

* Mise àjour 2

Le code ressemblemaintenant à ceciet çamarche,çan'apasfonctionné quandje viens d'ajouter lafonction à l'autre add_action. Merci àtouspour votre aide! Jeme demandetoujours s'iln'y apasmoyen de couper unpeu ce code.

 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

/*add my custom jquery script*/
add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom-script.js',
    array( 'jquery' )
);
        }

À quoi sert cette ligne?

 wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

Est-cenécessaire?

I tried to enqueue a custom .js file in my child theme directory.

In the functions.php of my child theme I find the following code

/* After this. you can override Accessible Zen's pluggable functions or add your own.
 * Remember, do your best to stay accessible! :)
 *
 */
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

where only this part was implemented by me and is supposed to load my custom.script.js from the js/ folder

wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );

Unfortunately it doesn't do so, can anybody help?

*Update 2

The Code looks now like this and it works, it did not work when I just added the function to the other add_action. Thanks everybody for the help! Still I wonder if there isnt a way to cut this code a little bit.

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

/*add my custom jquery script*/
add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom-script.js',
    array( 'jquery' )
);
        }

What is this line for ?

wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

Is it necessary?

- `wp_enqueue_script ('custom-script.js',get_stylesheet_directory_uri (). 'js/custom-script.js',array ('jquery'));`
  
  `wp_enqueue_script( 'custom-script.js', get_stylesheet_directory_uri() . 'js/custom-script.js', array('jquery') );`
  - 0
  - 2015-02-05
  - Pieter Goosen
- @Pieter J'ai adapté votre changementmais celane fonctionnetoujourspas. C'est ce quej'ai dansmonfichier .jset celafonctionne sije lemets directement danspage.phpparexemple:
  
  @Pieter I adapted your change but it is still not working. This is what I have in my .js file and it works if I put it directly in page.php for example:
  - 0
  - 2015-02-05
  - MrKainig
- @Pieter Ok,j'aimis le code dans la question
  
  @Pieter Okay I put the code in the question
  - 0
  - 2015-02-05
  - MrKainig
- Supprimez lesbalises de script de votrefichierjs
  
  Remove the script tags from your js file
  - 0
  - 2015-02-05
  - Pieter Goosen

2 réponses

votes

- 0
- 2020-06-03
Vérifiez vospoignées!Le chargement du scriptpeut échouer si vous choisissez unepoignée qui a été utilisée ailleurs.Sitout semble correct sanserreurmais sans chargement de script,vérifiez l'installationpour quelque chose d'autreen utilisant lamêmepoignée.

Dansmon cas,commej'étends unparent via unthèmeenfant,je suis (bêtement avec le recul!) collé avec lamême convention de dénomination duparent.Leçon apprise!

Check your handles! The script can fail to load if you pick a handle that has been used elsewhere. If all looks correct with no errors but no script load, check the installation for something else using the same handle.

In my case, as I'm extending a parent via a child theme, I (stupidly in hindsight!) stuck with the same naming convention of the parent. Lesson learnt!

Brad Dalton · Accepted Answer · 2015-02-05

35

2015-02-05

Voici unexemplefonctionnel:

 add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom_script.js',
    array( 'jquery' )
);
        }

Ou comme ça qui se charge apparemmentplus vite:

 function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Source http://codex.wordpress.org/Function_Reference/wp_enqueue_script

get_template_directory_uri() ne fonctionnera que dans unthèmeparent.

Here's a working example:

add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom_script.js',
    array( 'jquery' )
);
        }

Or like this which apparently loads faster:

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Source http://codex.wordpress.org/Function_Reference/wp_enqueue_script

get_template_directory_uri() will only work in a parent theme.

Pourquoin'utilisez-vouspas `get_stylesheet_directory_uri ()`?

Why don't you use `get_stylesheet_directory_uri()`?
- 1
- 2015-02-05
- Pieter Goosen
Ilsfonctionnenttous les deux sur labase demestests.

They both work based on my testing.
- 0
- 2015-02-05
- Brad Dalton
J'aiessayé lepremier,celan'apasfonctionné.Pouvez-vouspeut-êtrepublier leblog de code complet (y comprismesfiles d'attenteexistanteset actives)?Parce queje ne saispas commentimplémenter correctement votre code avec celui quiest déjà dansmesfonctions.php

I tried the first one, it didn't work. Can you maybe post the full code blog (including my existing & working enqueues)? Because I don't know how to properly implement your code with the one that's already in my functions.php
- 0
- 2015-02-05
- MrKainig
Oui,ils lefont,mais `get_stylesheet_directory_uri ()`estplus rapide :-)

Yes, they do, but `get_stylesheet_directory_uri()` is faster :-)
- 2
- 2015-02-05
- Pieter Goosen
Cen'est qu'unexemple detravail.Certainstravaux sontnécessairesen votrenompour savoir comment celafonctionne avec votre code.Vouspouvezmaintenant retravailler votre codepour qu'il charge vos scripts dans votrethème.

Its only a working example. Some work is required on your behalf to learn how it works with your code. You can now rework your code so it loads your scripts in your theme.
- 0
- 2015-02-05
- Brad Dalton
@BradDalton Ehbien,j'aiessayémais celan'apasfonctionnépourmoi.Dois-je ajouter une deuxième "action d'ajout" ou ajouter une deuxième "fonction" ou configurer "l'action d'ajout" ou configurer la "fonction" Il y atellement depossibilités.Si quelqu'unpouvaitm'expliquerbrièvement quelleest lameilleurepratique - ou ce quifonctionne réellement -en memontrant commentimplémenter cetexemplefonctionnel dansmon codeexistant.Ce serait vraimentgénialet me sauverait unmal detête

@BradDalton Well I tried that but it didn't work for me. Do I have to add a second "add action" or add a second "function" or configure the "add action" or configure the "function" There are so many possibilities. If someone could briefly explain me whats best practice - or what actually works - by showing me how to implement that working example in my existing code. That would be really awesome and save me a headache
- 0
- 2015-02-05
- MrKainig
Qu'avez-voustestéjusqu'àprésent?Lesexemples ci-dessus sont à lafoistestéset fonctionnent.

What have you tested so far? The above examples are both tested and work.
- 0
- 2015-02-05
- Brad Dalton
@MrKainig vérifie dans la console de votrenavigateur si votre scriptesten cours de chargementet si vous obtenez deserreursjquery.Avez-vous supprimé lesbalises de script dans votrefichierjs,carellesne devraientpas yfigurer.Jene voispas que le code de cette réponsene fonctionnepaspour vous.Votre script devrait se charger.

@MrKainig check in your browser console if your script is loading and if you get any jquery errors. Did you remove the script tags in your js file, as they should not be there. I cannot see that the code in this answer is not working for you. Your script should load.
- 0
- 2015-02-05
- Pieter Goosen
@BradDalton J'ai ajouté lafonction dansmon add_actionexistant,mais celan'apasfonctionné.Lorsquej'ai copié l'exemple detravail 1: 1 sousmon action d'ajoutexistante,cela afonctionné sansfaille. Lemessage a denouveau étémis àjour.Merci lesgars :)

@BradDalton I added the function inside my existing add_action, but that did not work. When I copied the working example 1:1 beneath my existing add action it worked flawless. The post was updated once again. Thanks guys :)
- 0
- 2015-02-06
- MrKainig
Mercipour lapartie "get_template_directory_uri ()ne fonctionnera que dans unthèmeparent."Çame donnemal à latêtependant quelquesjours

Thanks for the part "get_template_directory_uri() will only work in a parent theme." It gives me headache for a couple of days
- 0
- 2016-12-18
- Hoang Trinh
la deuxièmeméthodefonctionneparfaitementpourmoien changeant simplement `custom-script`en`parent-script`.

the second method perfectly works for me by just changing `custom-script` to `parent-script`.
- 0
- 2019-09-20
- NomanJaved