在WordPress后台应用自定义CSS | CSS-Tricks

Ahmad Awais

# 2011年7月12日

它必须在主题的functions.php中吗？

Rajesh Namase

评论永久链接# 2011年7月19日

是的。

Azhar Kamar

# 2011年11月9日

太棒了！正是我需要的。;)

Richard

评论永久链接# 2016年2月12日

这是我的观点。

真是太酷了，而且很清楚

NicoGaudin

# 2012年2月23日

你好，

你尝试过使用外部CSS文件，例如

add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
  echo '<link rel="stylesheet" href="style.css" type="text/css" media="all" />';
}

也许会更实用。

感谢来自法国（抱歉我的英语不好）的优秀资源

Roberto

评论永久链接# 2014年9月18日

你好，我把这段代码放在哪里？function.php？但是哪个function.php？请发送此文件路径，谢谢

Sam Logan

# 2012年3月8日

我同意NicoGaudin的观点，最好知道这是否适用于外部样式表而不是嵌入样式。

Dhafian

# 2012年4月12日

是的！我会尝试的.. 这就是我需要的..

Blaine

# 2012年11月7日

有人发现这是否适用于外部样式表吗？

James

评论永久链接# 2012年12月7日

@Blaine。对于样式表，请使用wp_enqueue_style()。以上方法有效，但您对它在HTML中的显示位置的控制力较弱。

Colby

# 2014年7月21日

我刚刚用外部样式表试了一下。我在functions.php文件中使用以下代码使其工作

function registerCustomAdminCss(){
$src = "URL/custom-admin-css.css";
$handle = "customAdminCss";
wp_register_script($handle, $src);
wp_enqueue_style($handle, $src, array(), false, false);
    }
    add_action('admin_head', 'registerCustomAdminCss');

Valerie

# 2013年3月19日

优秀的代码片段！立即解决了我的问题（我只需要在我的管理CSS中添加一行，并且不想修改核心文件）。

一位朋友写了一篇关于自定义编辑器的不错的博文，如果您需要更高级的控制：如何使WordPress编辑器看起来像网站

Gurpreet Singh

评论永久链接# 2015年5月6日

将此代码写入您的functions.php文件，并在您的css文件夹中创建一个名为admin_section.css的新文件，并将规则添加到该文件，然后尽情享受。全部完成。

function my_custom_fonts() {
wp_enqueue_style(‘admin_styles’ , get_template_directory_uri().’/css/admin_section.css’);
}

add_action(‘admin_head’, ‘my_custom_fonts’);
ankush

评论永久链接# 2018年10月23日

function my_custom_fonts() {
wp_enqueue_style(‘admin_styles’ , get_template_directory_uri().’/css/style.css’);
}

add_action(‘admin_head’, ‘my_custom_fonts’);

Ian Applegate

# 2013年6月20日

外部引用完美工作，谢谢。

Sudip

# 2013年6月28日

我只是在寻找这种教程。我不喜欢WordPress仪表板的默认字体。

saaied

# 2013年9月1日

你好…
感谢这篇文章。我在WordPress中创建了一个新的不同的自定义仪表板管理页面，并通过更改和编辑sweet自定义仪表板插件来编辑它，但此页面仅为纯文本…
如何编写外部css并为此页面使用？
抱歉我的英语…
谢谢

CapitalH

# 2013年9月29日

这将是添加管理样式的更有效和标准的方法

如果你想使用functions.php，那就这样做

function my_admin_theme_style() {
    wp_enqueue_style('my-admin-style', get_template_directory_uri() . '/path/to/admin/style.css');
}
add_action('admin_enqueue_scripts', 'my_admin_theme_style');

如果你想使用插件，请使用这个

function my_admin_theme_style() {
    wp_enqueue_style('my-admin-theme', plugins_url('wp-admin.css', __FILE__));
}
    add_action('admin_enqueue_scripts', 'my_admin_theme_style');
    add_action('login_enqueue_scripts', 'my_admin_theme_style');

Francis

评论永久链接# 2014年3月27日

这是正确的方法.. 干得好先生
Valentin

评论永久链接# 2015年7月20日

感谢您的代码片段CapitalH。
Matt

评论永久链接# 2015年7月29日

如果它是子主题，请记住使用get_stylesheet_directory_uri()而不是get_template_directory_uri()。
Nik

评论永久链接# 2015年12月20日

谢谢CapitalH和Matt！
BackuPs

评论永久链接# 2015年12月20日

如果使用子主题，get_template_directory_uri() 将不起作用，您需要改用 get_stylesheet_directory_uri()

JerTurowetz

# 2016年1月15日

CaptainH 的示例很棒，但我认为我会为那些想要更多详细信息的人添加一些内容。

/**
    * Define a version number
    * This is optional but useful to circumvent caching issues
    * 
    * There are more creative ways to get the version
    * eg: if you get the version of the current theme and use that
    * you'll never have to update the enque stuff manually
    * so long as you update your theme version (but the version
    * might be wrong if you're using a js or css library)
    * 
    */
   
  $ver = '1.1.1';


  /**
    * Define the base url for the file
    * In the 'active example below, it's assumed the files are in
    * the child-theme folder
    *
    * Other examples:
    * 
    * $base_url = get_template_directory_uri();
    * If files are in the theme folder
    *
    * $base_url = plugin_dir_url( __FILE__ );
    * If you're loading the files in a plguin
    * I dont recommend you mess with plugin folders unless
    * it's one you built yourself
    * 
    */
  $base_url = get_stylesheet_directory_uri(); // 


  /**
    * Enqueue and register Admin JavaScript files here.
    * more at https://codex.wordpress.org/Function_Reference/wp_enqueue_script
    */
  $js_dependancies = array( 'jquery' ); // OPTIONAL - jquery is just an example of an average js library you might need
  function register_admin_scripts() {
      wp_enqueue_script( 'solution-hotspots', $base_url . '/your-path/your-js-file.js', $js_dependancies, $ver );
  }


  /**
   * Enqueue and register CSS files here.
   * more at https://codex.wordpress.org/Function_Reference/wp_enqueue_style
   */
  $css_dependancies = array();
  function register_admin_styles() {
      wp_enqueue_style( 'style-name', $base_url . '/your-path/your-css-file.css', $css_dependancies, $ver );
  }


  /**
    * Make sure to spit it out!
    */
  add_action( 'admin_enqueue_scripts', 'register_admin_scripts' );
  add_action( 'admin_enqueue_scripts', 'register_admin_styles' );

Chizzle

评论永久链接# 2017年5月30日

这是正确的方法。谢谢。

Alex

# 2013年12月13日

我尝试过这个，但它只在仪表板区域有效，而不是帖子区域。有什么想法吗？

BackuPs

# 2013年12月15日

嗨，Alex，

然后试试这个，它将在前端和后端都起作用。

function change_adminbar_css() {
    wp_register_style( 'add-admin-stylesheet', plugins_url( '/css/adminstyle.css', __FILE__ ) );
    wp_enqueue_style( 'add-admin-stylesheet' );
}
add_action( 'admin_enqueue_scripts', 'change_adminbar_css' ); 
if (is_admin) {
    add_action( 'wp_enqueue_scripts', 'change_adminbar_css' ); 
}

falah

评论永久链接# 2016年6月20日

它有效，谢谢BackuPs。

BackuPs

# 2013年12月18日

嗨，Alex，

我想我在粘贴代码时输入错误，if语句应该检查!is_admin()。所以像这样操作。

function change_adminbar_css() {
    wp_register_style( 'add-admin-stylesheet', plugins_url( '/css/adminstyle.css', __FILE__ ) );
    wp_enqueue_style( 'add-admin-stylesheet' );
}

add_action( 'admin_enqueue_scripts', 'change_adminbar_css' ); 

if (!is_admin) {
    add_action( 'wp_enqueue_scripts', 'change_adminbar_css' ); 
}

Jamil

# 2014年1月3日

感谢分享，这真的帮助了我，我一直在寻找它来更改管理面板中的某些内容。不错的代码片段

Ross

# 2014年3月19日

我使用的是多站点，这对主博客有效，但对子站点无效。有什么想法吗？

Francis

评论永久链接# 2014年3月27日

好吧，您必须在每个子站点的主题中定义它们，对吧？……除非所有子站点都具有相同的主题..

BackuPs

# 2014年3月19日

你好

我在插件中使用它（参见我的示例），它在wpms中的每个子站点上都起作用。样式从该插件文件夹中的名为css的子文件夹加载。

但是即使在functions.php中，当您使用正确的路径并在代码中进行更改（如此处响应中的示例所示）时，它也可以在每个子站点上工作。

此致，
BackuPs

Catatan Belajar

# 2014年3月26日

你好… 如何只为wp-admin/options-reading.php添加css？

Jatin

# 2014年6月15日

嗨，我在WordPress管理CSS中遇到问题，
我想根据用户角色加载wp-admin的自定义CSS（例如编辑器）
如果您能理解我的问题，请回复…

Stephen

# 2014年7月23日

Jatin，试试这个：http://docs.appthemes.com/tutorials/wordpress-check-user-role-function/

或者，Codex指示不要这样做，但角色可以在current_user_can中使用

http://codex.wordpress.org/Function_Reference/current_user_can

Alfredo

# 2014年8月12日

哇，谢谢！很高兴能够优化管理样式而无需更改核心文件。

对于某些项目，我编辑了管理员文件，然后在每次 WordPress 更新后重新更新了更改！！！

马特·史密斯

# 2014年9月30日

非常棒的小技巧！

普拉迪普

# 2014年10月13日

我想在管理员面板的 edit.php 页面菜单中添加我的自定义 CSS。有人能告诉我如何使用这段代码吗……

function registerCustomAdminCss(){
$src = “custom_css.css”;
$handle = “customAdminCss”;
wp_register_script($handle, $src);
wp_enqueue_style($handle, $src, array(), false, false);
}
add_action(‘admin_head’, ‘registerCustomAdminCss’);

威廉

# 2015年1月2日

你好，我是一个非常新的新手，如果可以的话我想问一个问题，什么是代码片段，它有什么作用？

梅丽莎

# 2015年1月14日

科尔比，你太棒了！！！

埃尔文

# 2015年1月26日

不错，这很有帮助！

谢谢！

米安·拉希德

# 2015年3月29日

我使用了这段代码并进行了一些补充，因为我的场景有点不同……我只想将此 CSS 输出到其他用户级别，所以这是我的代码，它对我有用……

add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
global $user_level;
    if ($user_level != '10' ) {
  echo '
    /* Styles here! */
  ';
}}

乌格尔

评论永久链接# 2015年4月15日

嗨，米安，
如果您只想在管理员端为“shop_manager”用户角色输出 CSS，能否分享一下代码？

谢谢。
迈克尔·库恩科

评论永久链接# 2015年10月30日

米安，

我也需要使用 WooCommerce 插件定位 shop-manager。

希望您能提供帮助。

尼奥

# 2015年10月31日

你好

试试这个，

function my_custom_css( ){


global $user;

if (isset($user->roles)  && is_array( $user->roles ) ) {

    if( $user->roles[0] == 'administrator' ) {
        //Do something
    } elseif ( $user->roles[0] == 'shop-manager' ) {
        //Do something
    } elseif ( $user->roles[0] == 'editor' ) {
        //Do something
    } elseif ( $user->roles[0] == 'author' ) {
        //Do something
    } elseif ( $user->roles[0] == 'customer' || $user->roles[0] == 'subscriber' ) {
        //Do something
    } elseif ( $user->roles[0] == 'contributor') {
        //Do something
    } else {
        //Do something
    }
}

}

祝您有愉快的一天。

JerTurowetz

评论永久链接# 2016年1月15日

尼奥，太棒了，感谢您抽出时间。

米安，请查看上面的某些评论，因为使用以下方法是更好的实践
add_action( 'admin_enqueue_scripts', 'my_custom_fonts' );

而不是
add_action('admin_head', 'my_custom_fonts');

Domylook

# 2015年5月6日

你好，

如果我在帖子中应用外部 CSS，在视觉视图中查看时一切看起来都很好且完美。但是，如果我点击“预览”，则不会显示任何自定义内容，只会显示简单的文本。

请访问以下链接。

http://domylook.com/uncategorized/test/

如果我在帖子中检查“视觉视图”，它可以正常工作。所有 CSS 在那里都可以正常工作。
我在 function.php 文件中写了以下行来包含三个 CSS 文件。

add_editor_style( ‘skel.css’ );
add_editor_style( ‘style_new.css’ );
add_editor_style( ‘style-desktop.css’ );

请帮我解决这个问题。

谢谢
尼哈

陈玉端

# 2015年5月17日

我刚刚发现了一个插件添加管理员 CSS，它非常适合此目的。

蒂克

# 2015年6月24日

我使用了一个名为 AdminMate 的免费插件。只需在 WordPress 网站的“添加新插件”页面搜索“AdminMate”，或在 google.com 上搜索关键词“AdminMate”。试试看，我认为您会喜欢的。

林素杰

# 2015年8月18日

谢谢，它对我有用。

巴顿

# 2015年11月2日

这非常方便！

如果我可以隐藏一些部分，这将减少客户的困惑（以及他们搞砸事情的可能性）！

非常感谢！

埃里卡

# 2016年1月4日

这太完美了！非常感谢。CSS-Tricks 从未让人失望。

阿比奥敦·阿德托纳

# 2016年2月12日

您好，我可以将其转换为插件而不是将其放入 function.php 中，或者它必须放在那里？

备份

评论永久链接# 2016年2月13日

通过创建文件（例如）创建一个插件

wploadadminstyle.php，其中包含以下代码

创建一个文件夹
1) wploadadminstyle
2) wploadadminstyle/css
3) 在 css 文件夹中创建一个名为 adminstyle.css 的 CSS 文件，其中包含您的 CSS。
4) 如果您想根据用户角色加载样式表，请更改代码。

上传插件并激活。

<?php
/*
插件名称：WP 加载管理员 CSS
插件 URI：http://yourdomain.com/
描述：加载管理员 CSS。
版本：1.00
作者：作者
作者 URI：http://yourdomain.com/
许可证：GPL2
*/
// 初始化函数

// 让我们首先正确地注册我们的样式

if ( ! defined( ‘ABSPATH’ ) ) {
exit; // 如果直接访问则退出。
}

function change_admin_css() {
wp_register_style( ‘add-extra-admin-stylesheet’, plugins_url( ‘/css/adminstyle.css’, FILE ) );
wp_enqueue_style( ‘add-extra-admin-stylesheet’ );
}

if (is_admin()) {
add_action( ‘admin_enqueue_scripts’, ‘change_admin_css’ );
}

阿比奥敦·阿德托纳

# 2016年2月13日

嗨，备份，

我正在使用 WordPress 多站点，希望更改将对我的网络中的所有站点生效。

谢谢

备份

评论永久链接# 2016年2月13日

不会，它只会对您激活插件的网站生效。或者，如果您希望所有网站都使用相同的 CSS 调整，则会对所有网站生效。

如果您希望在 wpms 中的每个网站使用不同的 CSS，则需要按 blog_ID 加载 CSS 样式。

请查看 wordpress.org 上关于如何在多站点中获取当前 blog_ID 的内容。这样，您可以网络范围地激活插件，并通过使用 php switch case 编程代码应用不同的 CSS。
备份

评论永久链接# 2016年2月14日

注意：如果您网络激活插件，它将在每个网站中以相同的方式工作。

希希尔

# 2016年3月5日

真的，内容丰富，很棒的评论，感谢大家。

迪普蒂·贾恩

# 2016年6月11日

在您的自定义插件“function.php”文件中使用此代码

add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
 wp_enqueue_style('style-admin' ,plugin_dir_url(<strong>FILE</strong>) .'css/style-admin.css');
}

大卫

# 2016年7月8日

它有效，天才！谢谢！

BackuPs

# 2016年10月15日

如果您想在后端和前端加载不同的 CSS，也可以使用此技巧

        if (is_admin()) add_action('admin_head', 'load_backend_css');
        if (!is_admin()) add_action('wp_head', 'load_frontend_css');

        function load_backend_css() {
        echo '<style>YOUR CSS GOES HERE</style>';
        }
        function load_frontend_css() {
        echo '<style>YOUR CSS GOES HERE</style>';
        }

BackuPs

# 2016年10月15日

您还可以仅在用户登录时应用前端 CSS，方法是稍微更改一下代码。这样，您就可以只使用样式来定位例如管理栏。

    if (is_admin()) add_action('admin_head', 'load_backend_css');
    if (!is_admin() && is_user_logged_in()) add_action('wp_head', 'load_frontend_css');

    function load_backend_css() {
      echo '<style>Your CSS goes here</style>';
    }
    function load_frontend_css() {
      echo '<style>Your CSS goes here</style>';
    }

马修

# 2017年9月4日

您还可以使用自定义 CSS 注入器插件（https://wordpress.org/plugins/css-injector/）仅向管理员区域添加自定义 CSS。

安德烈

# 2017年10月31日

太棒了！正是我想要的。谢谢！

韦尔迪

# 2018年1月25日

效果很好，非常感谢！这个小小的调整使我的客户的管理员界面稍微好了一点

add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
  echo '<style>
#wpadminbar {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
#wpfooter {background-color: #fafafa; border-top-style: solid; border-width: 1px; border-color: #c6c6c6;}
.wp-menu-name {background-color: #444;
    } 
  </style>';
}

我希望有一个像这样的“管理员主题调整”网站。遗憾的是我找不到。如果有人知道，请发送邮件至：heinz AT verdi DOT link

干杯！

人才

# 2018年2月10日

大家好，我正在尝试创建 4 个这样的按钮

 <a href="" rel="nofollow">Some Text</a>

在管理员区域。但我想让它们具有不同的颜色，有什么建议吗？

提前感谢

奎

# 2019年9月12日

非常感谢 :))

奎

# 2019年12月19日

太棒了……
感谢分享这种简单有效的方法。
祝您有愉快的一天！

史蒂芬·萨巴蒂尼

# 2020年5月28日

好技巧。非常感谢分享！我觉得值得一提的是，总的来说，这是一种更好的实践，但 David Walsh 也发布了一种为管理员注册样式表的方法。

// Update CSS within in Admin
function admin_style() {
  wp_enqueue_style( 'admin-styles', get_template_directory_uri() . '/admin.css' );
}
add_action( 'admin_enqueue_scripts', 'admin_style' );

**链接：**添加 WordPress 管理员自定义 CSS

评论

发表评论 取消回复

发表评论取消回复