web-dev-qa-db-ja.com

管理者側でjQueryを使用するJavaScriptを含めるにはどうすればよいですか

私はこれを試します:

add_action('admin_print_scripts', 'custom_admin_scripts' ); 
function custom_admin_scripts() {   
    echo '<script type="text/javascript" src="' . get_bloginfo('stylesheet_directory') . /admin-scripts.js"></script>';
 }

しかしこの方法ではjQueryを認識しません。だから私はUncaught ReferenceError: jQuery is not definedを得ます。
jQueryは私のスクリプトの後にリンクされているためだと思います。 HTMLソースで見たように:

<script type="text/javascript" src="http://localhost:8080/wp-test/wp-content/themes/test/admin-scripts.js"></script>
<script type="text/javascript" src="http://localhost:8080/wp-test/wp-admin/load-scripts.php?c=1&amp;load=jquery,utils&amp;ver=edec3fab0cb6297ea474806db1895fa7"></script>

どうすれば修正できますか?

2
s976

問題は、jQueryがロードされる前にスクリプトをロードしているということです。

スクリプトを直接印刷しません

提供されたAPIを使用して(登録してから)それらをエンキューする必要があります。 jQueryは既に登録されたスクリプトなので、それをエンキューすることができます(admin_enqueue_scriptsフックで言うと)。

ただし、jQueryを必要とするカスタムスクリプトをロードする場合にのみjQueryをロードする必要があります。その場合は、カスタムスクリプトをエンキューしてjQueryを依存関係として追加する必要があります。 WordPressはスクリプトのロードを正しい順序で処理します。

add_action('admin_enqueue_scripts','wptuts53021_load_admin_script');
function wptuts53021_load_admin_script( $hook ){
    wp_enqueue_script( 
        'wptuts53021_script', //unique handle
        get_template_directory_uri().'/admin-scripts.js', //location
        array('jquery')  //dependencies
     );
}

サイド備考

  • get_template_directory_uri()ではなくget_bloginfo()を使う
  • 渡された$hookedit.phppost.phppost-new.phpなど)および get_current_screen() を使用して、スクリプトのロードが必要なページにいるかどうかを判断します。実際に必要なときにだけスクリプトをロードしてください。

例:(コーデックスの例)

function my_enqueue($hook) {
    //Load only on edit.php pages
    //You can use get_current_screen to check post type
    if( 'edit.php' != $hook )
        return;
    wp_enqueue_script( 'my_custom_script', plugins_url('/myscript.js', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
7
Stephen Harris

まず、それらを適切な方法で含めましょう。

add_action( 'wp_enqueue_scripts', 'custom_admin_scripts' );

function custom_admin_scripts() {

  wp_register_script( 'admin-scripts', get_template_directory_uri() . '/js/admin-scripts.js', array('jquery'), '1.0', true );

  if ( is_admin() ) {
    wp_enqueue_script('admin-scripts');
  }

}

第二に、ここを読んでください http://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes

0
Daniel