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


35

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

scripts > custom.js

子テーマでは、同じパス(scripts > custom.js)を作成し、custom.jsファイル内のjQueryの一部を変更しています。

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


1
親テーマとは何ですか?親テーマによってスクリプトはどのように呼び出されますか?
チップベネット

回答:


51

子テーマは、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を使用して、スクリプトをエコー出力する関数を削除し、独自のスクリプトをキューに登録します。

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

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


2
親テーマが使用するエンキュースクリプトにget_stylesheet_directory_uri場合、子テーマがします持っているそうでなければ、彼らは見つけることがwoun'tので、これエンキューすべてのスクリプトを複製します。get_stylesheet_directory_uriには、個々のファイルが子テーマに存在するかどうかを確認し、必要に応じて親テーマのファイルにフォールバックするフォールバックメカニズムはありません。

Codexより:「wp_print_scriptsを使用して、フロントページのスタイルやスクリプトをエンキューしないでください。代わりにwp_enqueue_scriptsを使用してください。」codex.wordpress.org/Plugin_API/Action_Reference/...
クリスチャンLescuyer

これが書かれたときを覚えておいてください:2年前。before wp_enqueue_scriptsは、フロントエンドのスクリプトのみをキューに入れるために使用できます。更新しました。古くなったものがあれば、お気軽に編集してください。
chrisguitarguy

4
親テーマのエンキュー後にデキューが行われるように、レイトプライオリティ(100など)を設定する必要がある場合があることに注意してください。 codex.wordpress.org/Function_Reference/wp_dequeue_scriptadd_action( 'wp_enqueue_scripts', 'wpse26822_script_fix', 100 );
Spone

4
2016年の更新:stackoverflow.com/questions/23507179/…によるとwp_deregister_script('parent-script-handle');、親スクリプトを完全に削除するためにも使用する必要があります。実際、それなしでは機能しませんでした。WP 4.6.1
フィロ

1

場合によっては、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
この関数にwp_enqueue_scriptは優先度パラメーターはありません。これは、クエリ文字列としてパスの末尾に連結されるバージョン番号のみです。このパラメーターは、キャッシュに関係なく正しいバージョンがクライアントに送信されることを保証するために使用されます[...]
エミールベルジェロン

1

独自のバージョンを登録する前にwp_deregister_scriptを呼び出します


1
どうして?これは、同じハンドルを使用している場合にのみ必要です-する必要はありません。ソースが明確なコードをデバッグする方が簡単なので、おそらくそうすべきではないでしょう。
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 );
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.