¿Cómo cargar un estilo CSS solo en el área de administración de WordPress?

Question

¿Cómo cargar un estilo CSS solo en el área de administración de WordPress?

2 mar 2012, 01:32:38

Vistas: 18.9K

Votos: 8

Estoy intentando cargar un archivo CSS para el área de entradas de WordPress, pero no lo consigo. He leído sobre la función wp_enqueue_style y llegué al siguiente código, pero no se carga. ¿Falta alguna etiqueta o carácter en mi código? Tengo un panel de escritura personalizado cuando un usuario publica y quiero darle estilo con el archivo CSS. Cualquier ayuda sería genial.

Esto es lo que tengo en el archivo functions.php de mi tema:

function mytheme_add_init() {
    $file_dir = get_bloginfo('template_directory');
    wp_enqueue_style("functions", $file_dir."/scripts/custom.css", false, "1.0", "all");
    wp_enqueue_script("rm_script", $file_dir."/scripts/custom.js", false, "1.0");
}

Kurt Bunch

83

admin css

Todas las respuestas a la pregunta

Respuesta tardía: Dado que las respuestas anteriores mostraban formas antiguas, incompletas o complicadas, aquí hay una versión actualizada que funciona con WordPress 3.5+.

¿Qué tiene de diferente?

Aquí está la lista

Lo primero que hacemos es usar el hook admin_enqueue_scripts. Este hook
El último argumento de wp_enqueue_style() es el medio objetivo y ya está configurado como all por defecto. No es necesario agregarlo.
Usamos la función get_template_directory_uri() para obtener la URL de nuestra hoja de estilos. No es necesario verificar el valor de la opción template_directory aquí.
Luego usamos el valor de retorno de get_template_directory() para obtener la ruta y la envolvemos en una llamada a filemtime() para obtener la última vez que se editó la hoja de estilos. De esta manera, agregamos un nuevo número de versión como argumento de consulta y forzamos al navegador a recargar la hoja de estilos si hay una nueva versión. No es necesario forzar recargas duras con Ctrl + F5.
Una cosa importante es agregar las dependencias correctas, ya que no quieres que tus estilos sean sobrescritos con una especificidad mayor por wp-admin.css, ie (aún peor) o el esquema de colores. La parte realmente difícil es verificar el esquema de colores, ya que este archivo contiene la mayor parte de lo que está estilizado en la interfaz de administración y es una configuración de usuario. Queremos agregar esto como dependencia también.
Lo último que hacemos es envolver la llamada para agregar el hook en otra función que está enganchada al hook contextual admin_head-*, donde * es el slug de la página. Lo enganchamos dos veces para tener en cuenta tanto las publicaciones nuevas como las editadas.

Aquí está el código para tu archivo functions.php.

add_action( 'admin_head-post.php', 'wpse44135AttachAdminStyle' );
add_action( 'admin_head-post-new.php', 'wpse44135AttachAdminStyle' );
function wpse44135AttachAdminStyle()
{
    add_action( 'admin_enqueue_scripts', 'wpse44135EnqueueAdminStyle' );
}
function wpse44135EnqueueAdminStyle()
{
    $scheme = get_user_meta(
        get_current_user_id(),
        'admin_color',
        true
    );

    wp_enqueue_style(
        "admin_style",
        get_template_directory_uri()."/scripts/custom.css",
        array( 'wp-admin', 'ie', "colors-{$scheme}" ),
        filemtime( get_template_directory()."/scripts/custom.css" ),
        "all"
    );
}

¿Alternativas?

En caso de que solo quieras agregar estilos al editor WYSIWYG TinyMCE, puedes usar add_editor_style() para registrar la hoja de estilos de tu tema en el editor de texto del área de administración también. La ruta que agregues como argumento es relativa a la raíz de tu tema. En tu archivo functions.php:

add_editor_style( '/scripts/custom.css' );

Es así de simple.

kaiser

50.8K

13 feb 2013 10:56:01

Comentarios

Recibo un "Fatal error: Cannot redeclare wpse44135_enqueue_admin_style() (previously declared " al intentar esto.

markratledge

9 dic 2013 21:12:14

@songdogtech "Cannot redeclare" explica que una función, método, etc. ya fue declarado/establecido. El problema era que usé el mismo nombre de función dos veces. Para el futuro: Por favor solo busca en Google los errores PHP simples y archivo y [edita]. Gracias.

kaiser

9 dic 2013 21:25:37

No sabía cómo solucionar el error, por eso lo comenté.

markratledge

9 dic 2013 22:04:01

Aquí hay una forma rápida de agregar estilo en el encabezado del administrador. Espero que esto ayude:

add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
  echo '<style>
    body, td, textarea, input, select {
    font-family: "Lucida Grande";
    font-size: 12px;
  } 
</style>';
}

Chandan Kumar Thakur

183

24 may 2019 09:07:43

Chip Bennett 55.1K · Accepted Answer · 2012-03-02T01:45:27Z

Simplemente engancha tu callback en admin_print_styles, por ejemplo:

add_action( 'admin_print_styles', 'mytheme_add_init' );

Alternativamente, podrías agregar un condicional is_admin() dentro de tu callback y engancharlo a wp_enqueue_scripts:

function mytheme_add_init() {
    if ( is_admin() ) {
        $file_dir=get_bloginfo('template_directory');
        wp_enqueue_style("functions", $file_dir."/scripts/custom.css", false, "1.0", "all");
        wp_enqueue_script("rm_script", $file_dir."/scripts/custom.js", false, "1.0");
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_add_init' );

Pero el enfoque absolutamente mejor es enganchar a la página de administración de tu Tema, mediante admin_print_styles-appearance_page_{pagename}:

add_action( 'admin_print_styles-appearance_page_{pagename}', 'mytheme_add_init', 11 );

Este es un hook personalizado específicamente para tu página de apariencia, como se define en tu llamada a add_theme_page().