Как подключить JavaScript с использованием jQuery в админке WordPress

Question

Как подключить JavaScript с использованием jQuery в админке WordPress

23 мая 2012 г., 13:06:30

Просмотры: 16.8K

Голосов: 3

Я пробую так:

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>

Как это можно исправить?

Shimon S

887

админ панель jquery javascript include

Все ответы на вопрос

Сначала давайте правильно подключим скрипты.

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

Daniel

1.22K

23 мая 2012 г. 13:32:51

Stephen Harris 32.6K · Accepted Answer · 2012-05-23T13:25:54Z

Проблема в том, что вы загружаете свой скрипт до того, как загрузился jQuery.

Не выводите скрипты напрямую.

Вам следует (сначала зарегистрировать, а затем) добавить их в очередь с помощью предоставленного API. jQuery уже является зарегистрированным скриптом, поэтому вы можете просто добавить его в очередь (например, на хуке admin_enqueue_scripts).

Однако вам нужно загружать jQuery только если вы загружаете пользовательский скрипт, который зависит от него. В этом случае вам следует добавить в очередь ваш пользовательский скрипт и указать jQuery в качестве зависимости. WordPress затем сам обработает загрузку скриптов в правильном порядке:

add_action('admin_enqueue_scripts','wptuts53021_load_admin_script');
function wptuts53021_load_admin_script( $hook ){
    wp_enqueue_script( 
        'wptuts53021_script', //уникальный идентификатор
        get_template_directory_uri().'/admin-scripts.js', //путь к файлу
        array('jquery')  //зависимости
     );
}

Дополнительные замечания

Используйте get_template_directory_uri() вместо get_bloginfo()
Используйте переданный параметр $hook (который может быть edit.php, post.php, post-new.php и т.д.) и функцию get_current_screen() для определения, находитесь ли вы на странице, где требуется загрузка вашего скрипта. Загружайте скрипты только тогда, когда они действительно нужны.

Например (пример из Codex):

function my_enqueue($hook) {
    //Загружать только на страницах edit.php
    //Вы можете использовать get_current_screen для проверки типа записи
    if( 'edit.php' != $hook )
        return;
    wp_enqueue_script( 'my_custom_script', plugins_url('/myscript.js', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );