Voglio accodare un file .js al mio child theme

Question

Voglio accodare un file .js al mio child theme

19

63125 2015-02-05

Hoprovato ad accodare unfile .jspersonalizzatonella directory delmiotemafiglio.

Nelfunctions.php delmio childthemetrovoil seguente codice

 /* 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' ) );
}

dove solo questaparte è stataimplementata dame e dovrebbe caricareilmio custom.script.js dalla cartellajs/

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

Purtropponon lofa,qualcunopuò aiutare?

* Aggiorna 2

Il codice ora ha questo aspettoe funziona,non hafunzionato quando ho appena aggiunto lafunzione all'altra add_action. Grazie atuttiper l'aiuto! Tuttaviami chiedo senon ci sia unmodopertagliare unpo 'questo codice.

 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' )
);
        }

A cosa serve questa riga?

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

Ènecessario?

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 ho adattato latuamodificama ancoranonfunziona. Questo è quello che honelmiofile .jse funziona se lometto direttamentein page.php,adesempio:
  
  @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 Vabene,hoinseritoil codicenella domanda
  
  @Pieter Okay I put the code in the question
  - 0
  - 2015-02-05
  - MrKainig
- Rimuovii tag di script daltuofilejs
  
  Remove the script tags from your js file
  - 0
  - 2015-02-05
  - Pieter Goosen

2 risposta

voti

- 0
- 2020-06-03
Controlla letuemaniglie!Lo scriptpuònon riuscire a caricarsi se si sceglie un handle che è stato utilizzato altrove.Setutto sembra corretto senzaerrorima senza caricamento di script,controlla l'installazioneper qualcos'altro utilizzando lo stesso handle.

Nelmio caso,poiché stoestendendo ungenitoretramite un childtheme,io (stupidamente col senno dipoi!) sono rimastofedele alla stessa convenzione di denominazione delgenitore.Lezione appresa!

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

Ecco unesempiofunzionante:

 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' )
);
        }

O come questo che apparentemente si caricapiù velocemente:

 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' );

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

get_template_directory_uri() funzionerà soloin untemaprincipale.

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.

Perchénon usi `get_stylesheet_directory_uri ()`?

Why don't you use `get_stylesheet_directory_uri()`?
- 1
- 2015-02-05
- Pieter Goosen
Entrambifunzionanoin base aimiei test.

They both work based on my testing.
- 0
- 2015-02-05
- Brad Dalton
Hoprovatoilprimo,non hafunzionato.Puoiforsepubblicareil codice completo delblog (comprese lemie accodateesistentie funzionanti)?Perchénon so comeimplementare correttamenteiltuo codice con quello che ègiànelmiofunctions.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
Sì,ma `get_stylesheet_directory_uri ()` èpiù veloce :-)

Yes, they do, but `get_stylesheet_directory_uri()` is faster :-)
- 2
- 2015-02-05
- Pieter Goosen
È solo unesempiofunzionante.Ènecessario del lavoro dapartetuaperimparare comefunziona coniltuo codice.Orapuoi rielaborareiltuo codicein modo che carichii tuoi scriptneltuotema.

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 Beh,l'hoprovatomanon hafunzionatoperme.Devo aggiungere una seconda "aggiungi azione" o aggiungere una seconda "funzione" o configurare l '"aggiunta azione" o configurare la "funzione" Ci sono cosìtantepossibilità.Se qualcunopotesse spiegarmibrevemente qual è lamigliorepratica - o cosafunzionaeffettivamente -mostrandomi comeimplementare quell'esempiofunzionantenelmio codiceesistente.Sarebbe davverofantasticoe mi risparmierebbe unmal ditesta

@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
Cosa haitestatofinora?Gliesempiprecedenti sonoentrambitestatie funzionano.

What have you tested so far? The above examples are both tested and work.
- 0
- 2015-02-05
- Brad Dalton
@MrKainig controllanella console delbrowser seiltuo script si sta caricandoe se ricevierrorijquery.Hai rimossoi tag scriptneltuofilejs,poichénon dovrebberoessere lì.Non riesco a vedere cheil codicein questa rispostanonfunzionaperte.Iltuo script dovrebbe caricarsi.

@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 ho aggiunto lafunzione all'interno delmio add_actionesistente,manon hafunzionato.Quando ho copiato l'esempio di lavoro 1: 1 sotto lamia azione di aggiuntaesistente,hafunzionatoperfettamente. Ilpost è stato aggiornato ancora una volta.Grazie ragazzi :)

@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
Grazieper laparte "get_template_directory_uri ()funzionerà soloin untemaprincipale."Mifa venireilmal ditestaper unpaio digiorni

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
il secondometodofunzionaperfettamenteperme semplicemente cambiando `custom-script`in`parent-script`.

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