Método correcto para incluir hojas de estilo en paneles de WordPress

Question

Método correcto para incluir hojas de estilo en paneles de WordPress

9 abr 2012, 17:36:14

Vistas: 303

Votos: 0

¿Cuál es la forma correcta de incluir una hoja de estilo con mis paneles de opciones en wp-admin para un plugin o tema dado? En otras palabras, la hoja de estilo que da formato a los paneles.

Me refiero a que, en mi código de plantilla de panel, estoy haciendo algo como...

<style type="text/css">
@import url("../wp-content/plugins/myplugin/panels/style.css");
</style>

...pero sospecho que esto no funcionará en algunas instalaciones de WordPress debido a las rutas y demás, y podría no funcionar en el futuro si WP decide cambiar wp-content por otro nombre.

Volomike

1.86K

desarrollo de plugins css

Comentarios

http://codex.wordpress.org/Function_Reference/wp_register_style http://codex.wordpress.org/Function_Reference/wp_enqueue_style también sigue los ejemplos en esas páginas.

Sisir

9 abr 2012 17:59:20

@Sisir por favor publica respuestas como respuestas, en lugar de como comentarios.

Chip Bennett

9 abr 2012 18:45:23

Todas las respuestas a la pregunta

function load_myplugin_wp_admin_style(){
        // Registrar y encolar el estilo CSS para el panel de administración
        wp_register_style( 'myplugin_wp_admin_css', plugins_url( '/myplugin/panels/style.css' ), false, '1.0.0' );
        wp_enqueue_style( 'myplugin_wp_admin_css' );
}
// Añadir la acción para cargar los estilos en el admin
add_action('admin_enqueue_scripts', 'load_myplugin_wp_admin_style');

Eugene Manuilov

11.4K

9 abr 2012 17:41:52

Comentarios

Si bien este método funciona, imprimirá tu hoja de estilos personalizada en cada página de administración. En el mejor de los casos, representa código redundante; en el peor de los casos, causará problemas de estilos para el núcleo y/u otros Plugins.

Chip Bennett

9 abr 2012 18:28:31

Comentarios

¿Qué debo hacer si estoy usando add_menu_page() y add_submenu_page() para agregar mis paneles de administración?

Volomike

13 abr 2012 21:39:13

"¿Qué debo hacer si estoy usando add_menu_page() y add_submenu_page() para agregar mis paneles de administración" - bueno, el mejor práctica como primer paso sería cambiar a add_theme_page() o add_settings_page(). (sonrisa). Pero, creo que para add_menu_page() o add_submenu_page(), deberías usar admin_page en lugar de appearance_page.

Chip Bennett

13 abr 2012 21:56:33

¡Descubrí que tienen unos ejemplos fantásticos al final de estas páginas para resolver mi problema, y ya funciona! ¡Hurra! Ve a http://codex.wordpress.org/Function_Reference/, luego busca "wp_enqueue_script" y "wp_enqueue_style".

Volomike

13 abr 2012 22:06:09

Por cierto, dijiste que esta era la mejor práctica, pero ¿sigue siendo la mejor práctica? Nota que acabo de descubrir esto: http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

Volomike

13 abr 2012 22:32:56

Sí, estoy seguro de que es la mejor práctica usar un submenú apropiado, en lugar de un menú de nivel superior, para las páginas de administración de Temas/Plugins.

Chip Bennett

13 abr 2012 22:42:12

Mostrar los 3 comentarios restantes

Chip Bennett 55.1K · Accepted Answer · 2012-04-09T18:27:50Z

El método de mejores prácticas para encolar hojas de estilo en el administrador es engancharse al hook específico de tu página de apariencia, usando admin_print_styles-{hook}, donde {hook} = {admin_page}-{menu_slug}.

Asumiré:

Esto es un Tema
Estás usando correctamente una página de apariencia, mediante add_appearance_page()
Tu $menu_slug es wpse48416-settings

El hook, entonces, es: admin_print_styles-appearance_page_wpse48416-settings:

<?php
function wpse48416_admin_style(){
        wp_register_style( 'wpse48416_admin_css', get_template_directory_uri() . '/css/admin.css' );
        wp_enqueue_style( 'wpse48416_admin_css' );
}
add_action( 'admin_print_styles-appearance_page_wpse48416-settings', 'wpse48416_admin_style' );
?>

Para un Plugin, simplemente necesitas usar el {page} correcto, dependiendo de qué función de menú de administración uses para registrar tu página de ajustes, por ejemplo settings_page para add_settings_page().