web-dev-qa-db-ja.com

JQueryとJavaScriptファイルを正しくインクルードする方法

私は今、次のコードでそれをやっています：

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

これはうまくいきますが、このように、または管理者以外のすべての人にこれを実行する必要があります（バックエンドがWordPressバージョンを使用するようにするには）

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

このバージョンは実際にはまったく機能しません。Googleのバージョンではなく、WordPressのjQueryバージョンを入手します。

したがって、WordPressに含まれているjQueryの登録を解除するべきですか？

また、自分のスクリプト（スライダースクリプト、modernizr、および自分のcustom.js）を正しい方法で追加する方法を教えてください。私は今やっているようなヘッダではなく、functions.phpを通してこれをやるべきだと思います、しかし私はそれをどうするかわからないです。

plugin-developmenttheme-developmentjqueryjavascriptwp-enqueue-script
15
Johan Dahl

最初の経験則：コアバンドルスクリプトの登録を解除して他のバージョンに置き換えることはしないでください、テーマ、プラグイン、またはコア自体がバージョンの変更によって壊れないことが確実でない限り。本当に、あなたが絶対に必要コアバンドルスクリプトの代替バージョンでない限り、単にcoreにバンドルされているものを使ってください。

次に、initではなく、スクリプトの登録とエンキューのためにwp_enqueue_scriptsにフックすることを強くお勧めします。 （worksはinitで動作しますが、他人との相性が良いの観点から見ると、意味的に正しいフックを使用するのが最善です））

3番目に、独自のカスタムスクリプトをエンキューするには、上記と同じ方法を使用します。

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

エンキューする必要があるスクリプトをすべて追加するだけです。

19
Chip Bennett

これがお役に立てば幸いです。詳細については、 wp_enqueue_scripts のコーデックスをご覧ください。

  1. initをenqueueに使用しないでください。フロントエンドの場合はwp_enqueue_scriptsを、管理側の場合はadmin_enqueue_scriptsを使用します。ただし、initを使用してregisterスクリプトに使用できます。
  2. フックwp_enqueue_scriptsはフロントエンドでのみ起動し（ログインページでは起動しません）-is_admin()を確認する必要はありません。

  3. 特別な理由がない限り、themesまたはプラグインでfunctions.phpを使用してスクリプトを登録およびキューイングすることをお勧めします。あなたは単に置く：

     function myprefix_load_scripts() {
   // Load scripts here
 }
 add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );

  4. ショートコードが使用されているときにスクリプトをキューに入れることが目的の場合、必要な場合にのみショートコードコールバックでwp_enqueue_scriptを使用してキューに入れたい場合があります（これはフッターから3.3）。

  5. 管理者側で既存のjQueryを再登録しないでください。あなたは何かを壊すかもしれない：D。

  6. プラグインは既存のjQueryを再登録しないでください。

  7. JQueryを再登録することの長所と短所を比較検討する必要があります。たとえば、古いバージョンを登録すると、一部のプラグインが破損する場合があります（現在ではなく、将来的に...）

4
Stephen Harris

公正な警告：自分のためにWPのパッケージバージョンのjQueryを登録解除すると問題が発生する可能性があります。特に[WPがバージョンを更新するたびに、対象のバージョンを変更するように注意する必要がある場合。これは、WPバージョンのjQueryとの最大限の互換性のためにプラグインを書くことが多い（または少なくともそうあるべきです）プラグインにも二重に当てはまります。

それは言った、あなたの最初のバージョンは正しいです - それはwp_enqueue_scriptsに夢中です。 2番目の関数はinitにフックされているため、正しく機能していない可能性があります。

同様の方法で独自のスクリプトを追加してください。

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

現在のテーマディレクトリのjsディレクトリからスクリプトを読み込んでいると仮定します。そうでない場合は、URIパラメータを変更します。 3番目のパラメータarray( 'jquery' )は、bbg-scriptsはjqueryに依存しているので、後でロードする必要があることを示しています。詳細は https://codex.wordpress.org/Function_Reference/wp_enqueue_script を参照してください。

2
Boone Gorges
if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

これは何もするつもりはない...私はあなたが言うことを疑う

if (!function_exists('load_my_scripts')) {

あなたの例では、関数load_my_scriptsが既に存在する場合にのみロードします（そうでない場合、そうしないとエラーが発生します）。

1
Adam

パフォーマンス上の理由からjqueryやその他のコアjsファイルをCDNからロードする場合は、コアとプラグインの機能で厄介なことが起こらないように、必ず同じバージョンをロードしてください。このような：

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');
0
cjbj