¿Cómo Encolar estilos/scripts en Ciertas Páginas de /wp-admin?

4 feb 2012, 21:56:16
Vistas: 76.1K
Votos: 72

Tengo dos funciones simples que cargan recursos usando wp_enqueue_style() y wp_enqueue_script(), algo como esto:

function admin_custom_css()
{ wp_enqueue_style( 'stylesheet_name', 'stylesheet.css') }; 

function admin_custom_js 
{ wp_enqueue_script( 'javascript_file', 'script.js') };

... y algunas páginas de administración, creadas con add_menu_page() y add_submenu_page()

function my_menu() {
   add_menu_page('Página 1', 'barra', 'algo', 'otro', 'foo');
   add_submenu_page( 'theme_menu', 'Subpágina 1', 'Subpágina', 'algo', 'otro', 'foo'); 
}
add_action('admin_menu', 'my_menu'); 

¿Cómo cargo mis dos funciones solo en estas páginas?

Ahora mismo estoy usando:

add_action('admin_init', 'admin_custom_css' ); 
add_action('admin_init', 'admin_custom_js' );  

Pero carga mis archivos en todas las páginas de administración, lo cual no es nada bueno.

¿Puedo hacer esto mediante una simple línea en functions.php o tengo que encolarlos dentro de mis páginas por separado (prefiero fuertemente la primera opción, ya que tendría que editar muchas funciones de creación de páginas de administración).

¡Gracias!

1
Todas las respuestas a la pregunta 9
7
90

El problema con la respuesta de @tollmanz es que, al engancharse a los hooks -print-styles y -print-scripts, debes generar manualmente el HTML para cargar tus scripts. Esto no es óptimo, ya que no aprovechas las ventajas de dependencia y versionado que ofrecen wp_enqueue_script() y wp_enqueue_style(). Tampoco te permite colocar elementos en el footer si ese es un lugar más adecuado para ellos.

Así que, volviendo a la pregunta original: ¿cuál es la mejor manera de asegurarse de que puedo encolar JS/CSS solo en páginas de administración específicas?

  1. Engancharte a la acción "load-{$mi_pagina_admin}" para realizar acciones solo cuando se carga la página de administración específica de tu plugin, y luego

  2. Engancharte a la acción "admin_enqueue_scripts" para agregar correctamente tus llamadas a wp_enqueue_script.

Parece un poco engorroso, pero en realidad es muy fácil de implementar. Desde el principio:

    add_action( 'admin_menu', 'add_my_admin_menus' ); // hook para agregar menús al menú izquierdo de administración

    /**
     * Crear los menús de administración en la navegación izquierda y cargar el JavaScript condicionalmente solo en esa página
     */
    function add_my_admin_menus(){
        $my_page = add_menu_page( 'Título de la página', 'Título del menú', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content' );

        // Cargar el JS condicionalmente
        add_action( 'load-' . $my_page, 'load_admin_js' );
    }

    // ¡Esta función solo se llama cuando se carga la página de nuestro plugin!
    function load_admin_js(){
        // Lamentablemente no podemos simplemente encolar nuestros scripts aquí - es demasiado pronto. Así que nos registramos al hook de acción adecuado para hacerlo
        add_action( 'admin_enqueue_scripts', 'enqueue_admin_js' );
    }

    function enqueue_admin_js(){
        // ¿No es agradable usar dependencias y los archivos js del núcleo ya registrados?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}
17 dic 2012 22:43:04
Comentarios

+1 - Esta es la forma de hacerlo en mi opinión. Los hooks individuales con espacio de nombres (algunaacción-$hook) son útiles para 1 o 2 acciones, pero si estás desarrollando un plugin, puede que necesites hacer muchas cosas diferentes solo en tus páginas de opciones, lo que hace que este método sea realmente conveniente. Normalmente solo añado 1 acción al hook load-$hook que dispara mi función option_page_actions a la que puedo añadir muchos otros hooks/filtros etc. Como esas acciones solo se llaman en la página elegida, los hooks más allá de ese punto no necesitan usar hooks con espacio de nombres (como has mostrado), lo que es mucho más eficiente e intuitivo.

Evan Mattson Evan Mattson
2 jun 2013 19:34:36

Hola, ¿esta forma todavía está soportada? load_admin_js nunca se llama

IAmJulianAcosta IAmJulianAcosta
23 mar 2014 21:53:07

Claro que todavía está soportado. Línea 206 de admin.php. Ha estado ahí desde la versión 2.6, y es poco probable que desaparezca en un futuro cercano (o nunca).

Tom Auger Tom Auger
24 mar 2014 16:01:50

Mirando mi respuesta ahora, creo que encolar explícitamente jquery-ui-core y jquery-ui-tabs es completamente superfluo, ya que esos scripts ya están registrados. Solo necesitas llamarlos en la dependencia. Actualizaré mi respuesta en consecuencia.

Tom Auger Tom Auger
26 abr 2015 04:17:57

Funciona perfectamente con WordPress 4.9.6

ethmz ethmz
18 jun 2018 04:45:46

Lo usé dentro de WPPB (en una clase) + WP 5.4 y todavía funciona.

alexwc_ alexwc_
25 abr 2020 08:44:57

Es una solución linda, pero también puedes usar el parámetro $hook_suffix de la acción admin_enqueue_scripts. Aunque me gusta más esta, no sé por qué. Puedes usar callbacks anónimos para hacerlo más limpio.

DrLightman DrLightman
4 oct 2023 18:52:06
Mostrar los 2 comentarios restantes
4
48

add_menu_page y add_submenu_page devuelven el "sufijo de hook" de la página, que puede utilizarse para identificar la página con ciertos hooks. Por lo tanto, puedes usar ese sufijo en combinación con los hooks variables admin_print_styles-{$hook_suffix} y admin_print_scripts-{$hook_suffix} para apuntar específicamente a estas páginas.

function my_menu() {
   $menu = add_menu_page( 'Página 1', 'bar', 'something', 'else', 'foo' );
   $submenu = add_submenu_page( 'theme_menu', 'Subpágina 1', 'Subpágina', 'something', 'else', 'foo' );

   add_action( 'admin_print_styles-' . $menu, 'admin_custom_css' );
   add_action( 'admin_print_styles-' . $submenu, 'admin_custom_css' );

   add_action( 'admin_print_scripts-' . $menu, 'admin_custom_js' );
   add_action( 'admin_print_scripts-' . $submenu, 'admin_custom_js' );
}

Considero que este es un método limpio para agregar todo esto porque todo se maneja dentro de una sola función. Si decides eliminar esta funcionalidad, simplemente elimina la llamada a la única función.

5 feb 2012 00:51:28
Comentarios

Esta respuesta no es técnicamente correcta. El Codex para admin_print_scripts() establece que "admin_print_scripts no debería usarse para encolar estilos o scripts." La respuesta de @TomAuger es en realidad la correcta, aunque no óptima. Sería beneficioso si el equipo de WP añadiera un hook admin_enqueue_scripts-(nombre_del_hook)...

David Gard David Gard
2 may 2014 18:15:33

Me tomó 3 días encontrar esta respuesta que fue realmente útil para mí :) Gracias :)

Asfandyar Khan Asfandyar Khan
24 nov 2016 08:43:50

@hkchakladar Mi comentario tiene casi cuatro años... Si ya no es relevante, por supuesto puedes agregar un comentario más actualizado que explique por qué.

David Gard David Gard
24 feb 2018 20:38:39
0
17

Si usas get_current_screen(), puedes detectar en qué página te encuentras. Hay un ejemplo en el artículo del codex que enlacé que muestra cómo usar get_current_screen() con add_options_page(), este método funcionará para cualquier página de administración.

4 feb 2012 22:15:23
0

Como mencionó @mor7ifer anteriormente, puedes usar la función nativa de WordPress get_current_screen(). Si iteras a través de la salida de esta función, por ejemplo:

$current_screen = get_current_screen();
foreach($current_screen as $key => $value) {
    error_log(print_r($key,1));
}

... notarás una clave llamada base. Yo uso esto para detectar en qué página estoy y encolar o desencolar scripts así:

add_action('admin_enqueue_scripts', 'some_hook_function')* ):

public function some_hook_function(){

    // # solo registrar y encolar scripts & estilos en la pantalla de edición de POST del admin
    $current_page = get_current_screen()->base;
    if($current_page == 'post' || $current_page == 'page') {

        wp_enqueue_script('datetimepicker', plugins_url('assets/jquery-ui-timepicker-addon.min.js', __FILE__), array('jquery', 'jquery-ui-datepicker', 'jquery-ui-slider'), '1.9.1', true);

        wp_enqueue_style( 'jquery-ui-datepicker', plugins_url('assets/jquery-ui.min.css', __FILE__), array(), '1.11.2', 'all');


    } else { // # si no está en la página de post, desregistrar y desencolar estilos & scripts

        wp_dequeue_script('datetimepicker');
        wp_dequeue_style('jquery-ui-datepicker');

    }
}
14 nov 2016 23:24:02
0

Me preguntaba lo mismo. Hay una versión moderna que utiliza admin_enqueue_scripts:

add_action('admin_menu', function () {
  $settingsPage = add_options_page('Configuración', 'Calculadora de Hipotecas', 'manage_options', 'mortgagecalculator', function () {
    echo "<div id='app'></div>";
  });
  /**
   * Incluir los scripts de administración de Ember solo en las páginas donde se necesitan.
   */
  add_action("admin_enqueue_scripts", function ($hook) use ($settingsPage){
    if($hook !== $settingsPage){
      return;
    }
    // Eliminar jQuery por defecto ya que Ember proporciona el suyo.
    wp_dequeue_script('jquery');
    wp_enqueue_script('ember-vendor', plugins_url("admin/assets/vendor.js", __FILE__));
    wp_enqueue_script('ember-project', plugins_url("admin/assets/mortgage-plugin-ember-admin.js", __FILE__), ['ember-vendor']);
    wp_enqueue_script('ember-live-reload', "http://localhost:4200/ember-cli-live-reload.js");
  });
});
8 jul 2015 11:58:43
2

Para hacerlo, primero debes encontrar el nombre de la página de administración. Añade admin_enqueue_scripts con wp_die($hook) y ve a la página específica de tu plugin, verás el nombre de la página.

function my_plugin_scripts($hook) {
    wp_die($hook);
}
add_action( 'admin_enqueue_scripts', 'my_plugin_scripts' );

settings_page_plugging_info

Ahora copia el nombre de la página y úsalo en una condición para cargar los scripts solo en esa página específica.

function my_plugin_scripts($hook) {
    if ( 'settings_page_plugging_info' != $hook ) {
        return;
    }

    wp_enqueue_script( 'my_custom_script', plugins_url('js/file.js', __FILE__));
}
add_action( 'admin_enqueue_scripts', 'my_plugin_scripts' );
18 feb 2019 07:42:17
Comentarios

Este es el enfoque correcto. Todas las respuestas anteriores a esta publicación son excesivamente complicadas y/o simplemente incorrectas.

Miqi180 Miqi180
4 mar 2022 02:06:07

Esto funcionó para mí en WordPress 6.5.5. Es una solución sólida. Una forma más fácil ahora de simplemente encontrar el nombre de la página de opciones del plugin en la que estás, es simplemente hacer echo de $hook en ella.

klewis klewis
12 jul 2024 01:05:24
0

Podrías tomar la @tollmanz respuesta y ampliarla ligeramente, permitiendo también un uso condicional...

Ejemplo:

/* Añadir páginas de administración */
function my_admin_pages(){
    $menu = array();
    $menu['main_page'] = add_menu_page('Página 1', 'bar', 'something', 'else', 'foo');
    $menu['sub_page'] = add_submenu_page('theme_menu', 'Subpágina 1', 'Subpágina', 'something', 'else', 'foo');
    foreach($menu as $key => $value){
        if($key == 'main_page'){
            /* Imprimir estilos solo en la página principal. */
            add_action('admin_print_styles-'.$value, 'print_styles');
        }
        /* Imprimir scripts en todas nuestras páginas de administración. */
        add_action('admin_print_scripts-'.$value, 'print_scripts');
    }
}
add_action('admin_menu', 'my_admin_pages');
21 sept 2012 00:17:32
1

De la documentación:

admin_print_scripts se usa principalmente para mostrar javascript en línea. admin_print_scripts no debe usarse para encolar estilos o scripts en las páginas de administración. En su lugar, usa admin_enqueue_scripts.

Lo mismo aplica para admin_print_styles.

5 jul 2013 14:31:03
0
// Agregar acción para los menús de administración
add_action( 'admin_menu', 'add_my_admin_menus' ); 

// Función para agregar menús personalizados en el admin
function add_my_admin_menus() {
    $GLOBALS['my_page'] = add_menu_page( 'Título de Página', 'Título de Menú', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content');
    add_action( 'admin_enqueue_scripts', 'enqueue_admin_js');
}

// Función para cargar scripts JS en el admin
function enqueue_admin_js($hook) {
    if($GLOBALS['my_page'] === $hook) {
        wp_enqueue_script( 'jquery-ui-core' );
        wp_enqueue_script( 'jquery-ui-tabs' );
        // ¿No es genial poder usar dependencias y los archivos JS del core ya registrados?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}
11 ene 2015 09:48:40