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