Añadir una hoja de estilos personalizada a wp-admin

Question

Añadir una hoja de estilos personalizada a wp-admin

20 ago 2013, 17:59:24

Vistas: 117K

Votos: 41

Estoy teniendo problemas para hacer funcionar mi hoja de estilos personalizada en el área de WP-ADMIN. plugins_url('style.css', __FILE__) ¿tengo que crear una carpeta en mis plugins llamada css o simplemente copiar mi .css al directorio wp-admin/css?

He probado ambas opciones y no parece funcionar.

¿y qué valores deben reemplazar a __FILE__?

disculpen, soy algo nuevo en estas cosas.

/*AÑADE HOJA DE ESTILOS EN WP-ADMIN*/
add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' );
    function safely_add_stylesheet_to_admin() {
        wp_enqueue_style( 'prefix-style', plugins_url('style.css', __FILE__) );
    }


/*AÑADE MI BARRA DE NAVEGACIÓN PERSONALIZADA EN WP-ADMIN*/
add_action('admin_head', 'custom_nav');
function custom_nav(){
    include('custom_nav.html');

}

user1933824

711

wp admin css

Todas las respuestas a la pregunta

Comentarios

solo quería preguntar, si quiero importar 3 hojas de estilo más. ¿simplemente agrego (x3) esta parte wp_register_style( 'admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' ); o una función separada?

user1933824

20 ago 2013 18:50:14

wp_register_style seguido inmediatamente por el wp_enqueue_style relacionado (como en la 'Primera solución') es absolutamente innecesario y no hace nada más/diferente que simplemente usar wp_enqueue_style con todos los parámetros pasados a wp_register_style.

gmazzap

2 sept 2013 07:16:49

Como estoy usando un tema hijo, cambié la función de ruta a get_stylesheet_directory_uri()

Cazuma Nii Cavalcanti

19 jun 2017 18:21:08

Si deseas realizar cambios CSS para el panel de administración, pega el siguiente código en el functions.php de tu tema hijo

add_action('admin_head', 'my_custom_fonts'); // admin_head es un hook, my_custom_fonts es una función que estamos añadiendo al hook

function my_custom_fonts() {
  echo '<style>
    #posts-filter table.posts{
        table-layout:auto;   
    }
  </style>';
}

Mohammed Muzammil

271

12 feb 2019 09:45:26

Comentarios

¡Gracias por esa solución rápida!

NSukonny

10 ene 2020 07:15:19

Para aquellos que deseen agregar un archivo CSS en el área de administración desde un plugin personalizado (o la carpeta del plugin):

if (is_admin()) {

Obtener la ruta si el archivo está en una carpeta: (..myPluginFolder/myfolder/css/my.css)

$myCssFileSrc = plugins_url( '/myfolder/css/my.css', __FILE__ );

Obtener la ruta si el archivo está en la carpeta raíz del plugin: (..myPluginFolder/my.css)

$myCssFileSrc = plugins_url( 'my.css', __FILE__ );

Encolar (activar) el archivo de hoja de estilos:

wp_enqueue_style( 'my-css', $myCssFileSrc );
} //endif;

Todas las manipulaciones en el archivo principal del plugin (myplugin.php)

tagformat.com

121

25 oct 2020 13:02:47

Comentarios

¿No es ese el mismo enfoque que tenía OP en la pregunta, que aparentemente no le estaba funcionando?

Rup

25 oct 2020 14:38:42

El enfoque utilizado en la pregunta no es correcto. He presentado un código completamente probado personalmente y funcional para conectar un archivo CSS a la parte de administración del sitio. Esta es exactamente la forma recomendada de hacerlo en la documentación para la creación de plugins: https://developer.wordpress.org/plugins/plugin-basics/determining-plugin-and-content-directories/

tagformat.com

25 oct 2020 18:29:03

Puedo confirmar que el código proporcionado por @tagformat.com es funcional y es el método recomendado por el codex de WordPress, siempre que esté envuelto en una función y enlaces esa función a tu acción de encolado objetivo. De lo contrario, el archivo CSS (o JS si estás usando scripts) se encolará demasiado pronto.

BillieM

23 ene 2023 23:58:16

iEmanuele 1.62K · Accepted Answer · 2013-08-20T18:21:28Z

Según el Codex de WordPress (aquí):

admin_enqueue_scripts es la primera acción enganchada en las acciones de scripts del administrador.

Ejemplo

Cargar archivos CSS o JS para toda el área de administración:

//desde functions.php

//Primera solución: un archivo
//Si estás usando un child theme podrías usar:
// get_stylesheet_directory_uri() en lugar de get_template_directory_uri()
add_action( 'admin_enqueue_scripts', 'load_admin_style' );
function load_admin_style() {
    wp_register_style( 'admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
    //O
    wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
}

//Segunda solución: dos o más archivos.
//Si estás usando un child theme podrías usar:
// get_stylesheet_directory_uri() en lugar de get_template_directory_uri()
add_action( 'admin_enqueue_scripts', 'load_admin_styles' );
function load_admin_styles() {
    wp_enqueue_style( 'admin_css_foo', get_template_directory_uri() . '/admin-style-foo.css', false, '1.0.0' );
    wp_enqueue_style( 'admin_css_bar', get_template_directory_uri() . '/admin-style-bar.css', false, '1.0.0' );
}

¿Tengo que crear una carpeta en mis plugins llamada css o simplemente copio mi .css al directorio wp-admin/css?

No, coloca tu archivo CSS junto con los demás, en el directorio de tu tema, luego especifica la ruta con:

get_template_directory_uri() . '/RUTA_A_TU_ARCHIVO'

Por ejemplo, si mi archivo se llama admin-style.css y lo coloco en una carpeta llamada css, mi ruta se verá así:

get_template_directory_uri() . '/css/admin-style.css'

¡Espero que ayude!