web-dev-qa-db-ja.com

子テーマでJavaScriptファイルをオーバーライドする方法

私はいくつかのJavaScriptファイルを親テーマにロードしています。親テーマのパスは次のとおりです。

scripts > custom.js

子テーマでは、同じパス（scripts > custom.js）を作成し、custom.jsファイル内のいくつかのjQueryを変更します。

問題は、変更が適用されていないことです。これは、子テーマのこれらのファイルに変更を加えるための間違った方法ですか？

child-themewp-enqueue-script
34
Chris Molitor

子テーマは、get_template_partやget_headerなどの関数に含まれるphpファイル（header.phpなど）のみをオーバーライドします。

WordPressにスクリプトを追加する正しい方法は wp_enqueue_script を使うことです。あなたの親テーマがこれを使用している場合、 wp_dequeue_script を使用してあなた自身のものをエンキューすることによってJSファイルをオーバーライドすることができます。

そのようです...

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

親テーマがwp_enqueue_scriptを使用していない場合は、おそらくそこにあるスクリプトをエコーアウトするためにwp_head（またはwp_footer）にフックします。そのため、 remove_action を使用してスクリプトをエコーアウトする関数を削除してから、独自のスクリプトをエンキューします。

スクリプトがテンプレートファイルにハードコードされている場合は、scriptタグを使用せずに、子テーマ内のそのテンプレートファイルを置き換えるだけで済みます。

彼らが get_stylesheet_directory_uri を利用するwp_enqueue_script呼び出しを使用した場合は、何もする必要はありません。これは起こっていないので、あなたはただ振り返ってテーマ作者が何をしたのかを見なければならないでしょう。

45
chrisguitarguy
// 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 );
1
Zabid Ahmed

場合によっては、add_actionとwp_enqueue_scriptの両方の呼び出しを優先させることが重要です。

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

この場合、wp_enqueue_scriptsは、20120206（日付）の優先順位で親によって呼び出されたため、このアクションはすぐにデキューされるように、わずかに高い優先順位で追加されます。その後は、その後に続くエンキュー文が実際に優先されて、古いエンキューがデキューされた後にロードされます。この場合は、それがフッターにエンキューされることを指定しているので、これも重要です。つまり、親スクリプトが最初にエンキューされた場所です。

また、完全に説明することはできませんが、最初のスクリプトをエンキューした直後にデキューすることに注意している場合は、最初のスクリプトが実際にロードされないようにすることができます。

1
damiankaelgreen

自分のバージョンを登録する前に wp_deregister_script を呼び出してください。

1
Mohamed Abo Badawy