web-dev-qa-db-ja.com

Wordpress Enqueue Script Chaos（jQueryとFoundation.js）

私は過去数日間テーマを構築することに取り組んできました、そして私は壁にぶつかりました。もともとfoundation.jsをエンキューされたスクリプトとして含めましたが、なぜそれを追加したのか思い出せませんでした。今日、私は私のfunctions.phpファイルから（ページロード速度を向上させるために）それを削除しようとしたとき、それは私のjQueryプラグインのすべてを台無しにしました。

調査の結果、FoundationにはすでにjQueryが含まれていることがわかったので、一度に2つのインスタンスをロードしていました（私はテーマのjsフォルダからもロードしました）。そのため、基盤を削除したので、custom.jsファイルのコマンドは、単純な '$'の代わりに 'jQuery'を追加しないと機能しません。

私が以前に呼んだjQueryファイルで 'Foundation'という名前の参照を保持していたとしても、私がバグを作ったのは私のWordpressインストールのいくつかの部分があると思います。それはそれがその「財団」の名前を持っていなければならないようなものです。

この問題の診断に誰かが助けてくれることを願って、スクリプト呼び出しとカスタムjsファイルの両方を含めました。

リンク集

- Chromeコンソールのエラーメッセージ

- jQueryとプラグインのChromeコンソールへの読み込みが表示されます

SCRIPT CALLS：

function register_js() {
if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_deregister_script('foundation');
    wp_register_script('jquery', get_template_directory_uri() . '/js/libraries/jquery-1.7.1.min.js');
    wp_register_script('jquery-ui', get_template_directory_uri() . '/js/libraries/jquery-ui-1.8.16.min.js', 'jquery');
    wp_register_script('superfish', get_template_directory_uri() . '/js/plugins/jquery.superfish.js', 'jquery');
    wp_register_script('supersubs', get_template_directory_uri() . '/js/plugins/jquery.supersubs.js', 'jquery');
    //wp_register_script('foundation', get_template_directory_uri() . '/js/plugins/jquery.foundation.js', 'jquery');
    wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery','jquery-ui') );
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui');
    wp_enqueue_script('superfish');
    wp_enqueue_script('supersubs');
    //wp_enqueue_script('foundation');
    wp_enqueue_script('custom');
}
}
add_action('init', 'register_js');

カスタムJSファイル：

$(document).ready(function() {

/* Menu - Superfish */
$('ul.menu').supersubs({ 
    minWidth:    11,
    maxWidth:    30,
    extraWidth:  1    
}).superfish({ 
    hoverClass: "sfHover", 
    speed: 'fast', 
    dropShadows: false, 
    delay: 0,
    autoArrows: false,
    animation: {height:'show',opacity:'show'}
});

/* Blog Tabs */
$('#tab_controls').tabs({ fx: [ {opacity:'toggle', duration:'normal'},{opacity:'toggle', duration:'slow'}] }); 

});
pluginstheme-developmentjquerywp-enqueue-script
2
Matt

カスタムJSファイルの最初の行を変更してみてください。

jQuery(document).ready(function($) {

wordPress内で操作されるjQueryは互換モードで実行されるべきです。その行はここでポイント＃5 に従って これが起こることを可能にします。

9
dunc

まず、あなたのテーマが公に配布されることを意図しているなら、コアバンドルスクリプトを登録解除してそれらをあなた自身のものに置き換えないでください。これには、jQuery、jQuery UI、および 他のいくつかのスクリプト が含まれます。

第二に、はい：WordPressはjQueryの競合がない状態で実行されます。つまり、スクリプトの競合がないことを考慮する必要があります。 コーデックス推奨の方法はこちら ：

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

これら2つはおそらくあなたの問題とは無関係ですが、ベストプラクティスです。

  1. 同じコンテキスト/関数内でwp_register_script()とwp_enqueue_script()の両方を呼び出す場合は、単純にwp_register_script()を省略し、wp_enqueue_script()を使用してください。
  2. initではなくwp_enqueue_scriptsにフックします。
6
Chip Bennett