¿Cómo encolar estilos / scripts en ciertas páginas / wp-admin?

45

Tengo dos funciones simples que cargan cosas 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('Page 1', 'bar', 'something', 'else', 'foo');
   add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo'); 
}
add_action('admin_menu', 'my_menu'); 

¿Cómo puedo cargar 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 cada página de administración, lo que no es agradable en absoluto.

¿Puedo hacer esto a través de una línea simple en functions.php o tengo que ponerlos en cola dentro de mis páginas por separado (prefiero la primera opción, ya que tendría que editar muchas funciones de creación de páginas de administrador)? .

¡Gracias!

    
pregunta Wordpressor 04.02.2012 - 20:56

8 respuestas

28

add_menu_page y add_submenu_page devuelven el "sufijo de enlace" de la página, que se puede usar para identificar la página con ciertos enlaces. Como tal, puedes usar ese sufijo en combinación con los ganchos variables admin_print_styles-{$hook_suffix} y admin_print_scripts-{$hook_suffix} para segmentar específicamente estas páginas.

function my_menu() {
   $menu = add_menu_page( 'Page 1', 'bar', 'something', 'else', 'foo' );
   $submenu = add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', '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 función. Si decide eliminar esta funcionalidad, simplemente elimine la llamada a una función.

    
respondido por el tollmanz 04.02.2012 - 23:51
52

El problema con la respuesta de @tollmanz es que, dado que se está desconectando de los ganchos -print-styles y -print-scripts, debe generar el HTML para cargar sus scripts manualmente. Esto no es óptimo, ya que no se obtiene la buena dependencia y las versiones que vienen con wp_enqueue_script() y wp_enqueue_style() . Tampoco te permite poner las cosas en el pie de página si ese es un lugar mejor para ellos.

Entonces, volvamos a la pregunta del OP: ¿cuál es la mejor manera de asegurar que pueda poner JS / CSS en cola solo en páginas de administración específicas?

  1. Desconecta la acción "cargar - {$ my_admin_page}" para hacer solo cosas cuando está cargada la página de administración de tu complemento específico, y luego

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

Parece un poco molesto, pero en realidad es muy fácil de implementar. Desde la parte superior:

    add_action( 'admin_menu', 'add_my_admin_menus' ); // hook so we can add menus to our admin left-hand menu

    /**
     * Create the administration menus in the left-hand nav and load the JavaScript conditionally only on that page
     */
    function add_my_admin_menus(){
        $my_page = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content' );

        // Load the JS conditionally
        add_action( 'load-' . $my_page, 'load_admin_js' );
    }

    // This function is only called when our plugin's page loads!
    function load_admin_js(){
        // Unfortunately we can't just enqueue our scripts here - it's too early. So register against the proper action hook to do it
        add_action( 'admin_enqueue_scripts', 'enqueue_admin_js' );
    }

    function enqueue_admin_js(){
        // Isn't it nice to use dependencies and the already registered core js files?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}
    
respondido por el Tom Auger 17.12.2012 - 21:43
14

Si usa get_current_screen() , puede detectar en qué página se encuentra. Hay un ejemplo en el artículo de códice que vinculé que muestra cómo usar get_current_screen() con add_options_page() , este método funcionará para cualquier página de administración.

    
respondido por el mor7ifer 04.02.2012 - 21:15
3

Puede tomar @tollmanz answer , y amplíelo ligeramente, permitiendo el uso condicional también ...

Ejemplo :

/* Add admin pages */   
function my_admin_pages(){
    $menu = array();
    $menu['main_page'] = add_menu_page('Page 1', 'bar', 'something', 'else', 'foo');
    $menu['sub_page'] = add_submenu_page('theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo');
    foreach($menu as $key => $value){
        if($key == 'main_page'){
            /* Print styles on only the main page. */
            add_action('admin_print_styles-'.$value, 'print_styles');
        }
        /* Print scripts on all of our admin pages. */
        add_action('admin_print_scripts-'.$value, 'print_scripts');
    }
}
add_action('admin_menu', 'my_admin_pages');
    
respondido por el Michael Ecklund 20.09.2012 - 23:17
2

Me estaba preguntando lo mismo. Hay una versión moderna que usa admin_enqueue_scripts :

add_action('admin_menu', function () {
  $settingsPage = add_options_page('Settings', 'Mortgage Calculator', 'manage_options', 'mortgagecalculator', function () {
    echo "<div id='app'></div>";
  });
  /**
   * Include the ember admin scripts only on pages where it's needed.
   */
  add_action("admin_enqueue_scripts", function ($hook) use ($settingsPage){
    if($hook !== $settingsPage){
      return;
    }
    // Remove default jQuery since Ember provides its own.
    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");
  });
});
    
respondido por el Kit Sunde 08.07.2015 - 10:58
1

Como @ mor7ifer mencionado anteriormente, puede usar la función nativa de WordPress get_current_screen () . Si recorres 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á una clave llamada base . Utilizo este detector para detectar en qué página estoy y encolado, dequeue así:

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

public function some_hook_function(){

    // # only register and queue scripts & styles on POST edit screen of 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 { // # if not on post page, deregister and dequeue styles & scripts

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

    }
}
    
respondido por el recurse 14.11.2016 - 22:24
0

De la documentación :

  

admin_print_scripts se usa principalmente para hacer eco de javascript en línea. admin_print_scripts no debe usarse para poner en cola estilos o scripts en las páginas de administración. Utilice admin_enqueue_scripts . "

Lo mismo ocurre con admin_print_styles .

    
respondido por el Tolea Bivol 05.07.2013 - 13:31
0
add_action( 'admin_menu', 'add_my_admin_menus' ); 

function add_my_admin_menus() {
    $GLOBALS['my_page'] = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content');
    add_action( 'admin_enqueue_scripts', 'enqueue_admin_js');
}

function enqueue_admin_js($hook) {
    if($GLOBALS['my_page'] === $hook) {
        wp_enqueue_script( 'jquery-ui-core' );
        wp_enqueue_script( 'jquery-ui-tabs' );
        // Isn't it nice to use dependencies and the already registered core js files?
        wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) );
    }
}
    
respondido por el Jashwant 11.01.2015 - 08:48

Lea otras preguntas en las etiquetas