¿Cómo Encolar estilos/scripts en Ciertas Páginas de /wp-admin?
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!

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

+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.

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

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).

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.

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.

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)
...

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

@DavidGard, probablemente deberías mirar estos https://developer.wordpress.org/reference/hooks/admin_print_styles-hook_suffix/ , https://developer.wordpress.org/reference/hooks/admin_print_scripts-hook_suffix/

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.

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

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

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

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

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

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, usaadmin_enqueue_scripts
.
Lo mismo aplica para admin_print_styles
.

Mira estos https://developer.wordpress.org/reference/hooks/admin_print_scripts-hook_suffix/ , https://developer.wordpress.org/reference/hooks/admin_print_styles-hook_suffix/

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