如何将 CSS 样式加载到 WordPress 管理区域？

问题描述

我正在为我的 WordPress 文章区域加载一个 CSS 文件，但没有运气。我已经阅读了 wp_enqueue_style 功能，并提出了下面的代码，但它没有加载。我的代码中是否缺少标签或字符。当我想要使用 CSS 文件进行风格的用户发布时，我有一个自定义的写入面板。任何帮助都会很棒。

这里是我在主题 functions.php 文件中：

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

最佳解决方案

将您的回调挂钩到 admin_print_styles，即：

add_action( 'admin_print_styles', 'mytheme_add_init' );

或者，您可以在回调中添加一个 is_admin()条件包装，并挂接到 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' );

但绝对最好的方法是通过 admin_print_styles-appearance_page_{pagename}钩入主题的管理页面：

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

这是一个专门为您的外观页面定制的钩子，通过您的 add_theme_page()调用定义。

次佳解决方案

迟到的答案：由于以前的答案显示出旧的，不完整的或复杂的方式，这里是一个更新的版本，以 v3.5 +的方式工作。

有什么不同

这是列表

我们做的第一件事是使用 admin_enqueue_scripts 钩子。这个钩子
wp_enqueue_style()的最后一个参数是目标媒体，它已经默认设置为 all 。不需要添加它。
我们使用 get_template_directory_uri()函数来检索样式表的 URl 。无需在此处查看 template_directory 的选项值。
然后，我们使用 get_template_directory()的返回值来检索路径并将其包装到 filemtime()调用中，以获得编辑样式表的最后一次。这样，我们附加一个新版本号作为查询参数，并强制浏览器重新加载样式表，如果有新版本。不需要用 Ctrl + F5 强制重新加载。
一个重要的事情是添加正确的依赖关系，因为您不想用 wp-admin.css(即更糟糕) 或配色方案更高的特性覆盖您的样式。真正困难的部分是检查配色方案，因为该文件包含管理 UI 中的大部分样式，并且是用户设置。我们想添加它作为依赖。
我们做的最后一件事是打包调用，将钩子添加到挂钩到上下文 admin_head-*钩子的另一个函数中，其中*是 pageslug 。我们勾引两次，考虑新的和编辑的帖子。

以下是您的 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"
    );
}

备择方案？

如果您只想添加 TinyMCE WYSIWYG 编辑器的样式，您可以使用 add_editor_style()在管理区域文本编辑器中注册主题样式表。添加为参数的路径是相对于您的主题根。在您的 functions.php 文件中：

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

就这么简单。

参考文献

How do I load a CSS style into WordPress admin area only?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何将 CSS 样式加载到 WordPress 管理区域？