如何將 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 管理區域？