Bagaimana cara mengganti file JavaScript dalam tema anak?

35

Saya memuat beberapa file JavaScript dalam tema induk. Jalur dalam tema induk adalah:

scripts > custom.js

Dalam tema anak, saya membuat jalur yang sama ( scripts > custom.js) dan mengubah beberapa jQuery di dalam custom.jsfile.

Masalahnya adalah bahwa perubahan tidak diterapkan. Apakah ini cara yang salah untuk membuat perubahan pada file-file ini dalam tema anak?

child-theme wp-enqueue-script

— Chris Molitor
sumber

1

Apa itu Tema induk? Bagaimana skrip dipanggil oleh Tema induk?

— Chip Bennett

51

Tema anak hanya menimpa file php (seperti header.php) yang disertakan dengan fungsi seperti get_template_part atau get_header, dll.

Cara yang benar untuk menambahkan skrip ke WordPress adalah dengan wp_enqueue_script . Jika tema orang tua Anda menggunakan ini, Anda dapat mengganti file JS dengan menggunakan wp_dequeue_script dan membuat sendiri milik Anda.

Seperti ...

<?php
// hook in late to make sure the parent theme's registration 
// has fired so you can undo it. Otherwise the parent will simply
// enqueue its script anyway.
add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 100);
function wpse26822_script_fix()
{
    wp_dequeue_script('parent_theme_script_handle');
    wp_enqueue_script('child_theme_script_handle', get_stylesheet_directory_uri().'/scripts/yourjs.js', array('jquery'));
}

Jika tema induk tidak menggunakan wp_enqueue_script, itu mungkin menghubungkan ke wp_head (atau wp_footer) untuk mengulangi skrip di sana. Jadi, Anda akan menggunakan remove_action untuk menyingkirkan fungsi-fungsi yang menyuarakan skrip, dan kemudian enqueue skrip Anda sendiri.

Jika skrip dikodekan ke dalam file templat, Anda hanya perlu mengganti file templat itu di tema anak Anda tanpa tag skrip.

Jika mereka menggunakan panggilan wp_enqueue_script yang memanfaatkan get_stylesheet_directory_uri , maka Anda tidak perlu melakukan apa-apa. Karena ini tidak terjadi, Anda hanya perlu melihat-lihat dan melihat apa yang dilakukan oleh pembuat tema.

— chrisguitarguy
sumber

2

jika tema induk menggunakan get_stylesheet_directory_uri untuk membuat enqueue skrip, maka tema anak harus menduplikasi semua skrip yang enqueued, karena kalau tidak mereka tidak akan ditemukan. Tidak ada mekanisme fallback di get_stylesheet_directory_uri untuk memeriksa apakah ada file individual dalam tema anak dan kembali ke file tema induk jika perlu.

Dari Codex: “wp_print_scripts tidak boleh digunakan untuk enqueue styles atau skrip di halaman depan. Gunakan skrip wp_enqueue_sebagai gantinya. ” Codex.wordpress.org/Plugin_API/Action_Reference/…

— Christian Lescuyer

Perlu diingat ketika ini ditulis: dua tahun lalu. Sebelumnya wp_enqueue_scriptshanya dapat digunakan untuk skrip enqueue di ujung depan. Diperbarui. Jika Anda melihat sesuatu yang kedaluwarsa, silakan edit.

— chrisguitarguy

4

Harap dicatat bahwa Anda mungkin harus menetapkan prioritas yang terlambat (misalnya 100) untuk memastikan dequeue Anda terjadi setelah enqueue tema induk. add_action( 'wp_enqueue_scripts', 'wpse26822_script_fix', 100 ); dari codex.wordpress.org/Function_Reference/wp_dequeue_script

— Spone

4

Pembaruan untuk 2016: sesuai dengan stackoverflow.com/questions/23507179/... kita juga harus menggunakan wp_deregister_script('parent-script-handle');untuk menghapus skrip induk sepenuhnya. Memang, itu tidak berhasil bagi saya tanpa itu. WP 4.6.1

— PhiLho

1

Dalam beberapa kasus, penting untuk memprioritaskan fungsi add_action dan wp_enqueue_script seperti:

add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 20120207);
function wpse26822_script_fix()
{
    wp_dequeue_script('storefront-navigation');
    wp_enqueue_script('my_storefront-navigation', get_stylesheet_directory_uri().'/js/navigation.min.js', array('jquery'),20151110,true);
}

Dalam hal ini, wp_enqueue_scripts dipanggil oleh induk dengan prioritas 20120206 (tanggal) dan karenanya tindakan ini ditambahkan dengan prioritas hanya sedikit lebih besar sehingga akan segera keluar. Kemudian, pernyataan enqueue yang mengikuti berikut ini sebenarnya diprioritaskan setelah itu untuk memastikan bahwa itu memuat setelah yang lama dequeued. Yang benar, dalam hal ini juga penting karena yang menentukan bahwa itu harus di enqueued di footer, yang merupakan tempat naskah induk pertama kali enqueued.

Juga, saya tidak bisa menjelaskannya sepenuhnya, tetapi saya perhatikan bahwa jika Anda berhati-hati dengan mengeluarkan skrip awal segera setelah enqueued, tampaknya Anda dapat secara efektif mencegahnya memuat di tempat pertama.

— damiankaelgreen
sumber

1

Fungsi wp_enqueue_scripttidak memiliki parameter prioritas, itu hanya nomor versi yang digabungkan ke ujung jalan sebagai string kueri. Parameter ini digunakan untuk memastikan bahwa versi yang benar dikirim ke klien terlepas dari caching [...]

— Emile Bergeron

1

panggil wp_deregister_script sebelum mendaftarkan versi Anda sendiri

— Mohamed Abo Badawy
sumber

1

Mengapa? Ini hanya diperlukan saat Anda menggunakan pegangan yang sama - sesuatu yang tidak harus Anda lakukan. Anda bahkan mungkin tidak boleh, karena lebih mudah untuk men-debug kode yang sumbernya jelas.

— fuxia

1

// enqueue your required script file
add_action('wp_enqueue_scripts', 'your_child_theme_js_file_override');
function your_child_theme_js_file_override(){
    wp_enqueue_script( 'child_theme_script_handle', get_stylesheet_directory_uri() . '/assets/js/your-file.js', array('jquery' ) );
}

// dequeue your required script file
function your_child_theme_js_file_dequeue() {
   wp_dequeue_script( 'parent_theme_script_handle' );
}
add_action( 'wp_print_scripts', 'your_child_theme_js_file_dequeue', 100 );

— Zabid Ahmed
sumber