Cómo incluir JavaScript con jQuery en el área de administración de WordPress

Question

Cómo incluir JavaScript con jQuery en el área de administración de WordPress

23 may 2012, 13:06:30

Vistas: 16.8K

Votos: 3

Intento esto:

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>';
 }

pero de esta manera no reconoce jQuery. Entonces obtengo Uncaught ReferenceError: jQuery is not defined.
Creo que es porque jQuery se carga después de mi script. Como veo en el código fuente 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>

¿Cómo puedo solucionarlo?

Shimon S

887

admin jquery javascript incluir

Todas las respuestas a la pregunta

Primero, vamos a incluirlos de manera adecuada.

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');
  }

}

Segundo, lee esto http://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes

Daniel

1.22K

23 may 2012 13:32:51

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

El problema es que estás cargando tu script antes de que jQuery se haya cargado.

No imprimas scripts directamente.

Deberías (registrar y luego) encolarlos usando la API proporcionada. jQuery ya es un script registrado, por lo que solo necesitas encolarlo (por ejemplo, en el hook admin_enqueue_scripts).

Sin embargo, solo necesitas cargar jQuery si estás cargando un script personalizado que lo requiera, en cuyo caso deberías encolar tu script personalizado y añadir jQuery como dependencia. WordPress entonces manejará la carga de los scripts en el orden correcto:

add_action('admin_enqueue_scripts','wptuts53021_load_admin_script');
function wptuts53021_load_admin_script( $hook ){
    wp_enqueue_script( 
        'wptuts53021_script', //identificador único
        get_template_directory_uri().'/admin-scripts.js', //ubicación
        array('jquery')  //dependencias
     );
}

Observaciones adicionales

Usa get_template_directory_uri() en lugar de get_bloginfo()
Utiliza el parámetro $hook pasado (que será edit.php, post.php, post-new.php, etc.) y get_current_screen() para determinar si estás en una página que requiera que tu script se cargue. Solo carga scripts cuando realmente los necesites.

Ejemplo (del Codex):

function my_enqueue($hook) {
    //Cargar solo en páginas edit.php
    //Puedes usar get_current_screen para verificar el tipo de post
    if( 'edit.php' != $hook )
        return;
    wp_enqueue_script( 'my_custom_script', plugins_url('/myscript.js', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );