WordPress的儀表盤小部件 - 使用wp_enqueue_style/wp_enqueue_script打破了儀表板

Question

我正在做一個WordPress的儀表板窗口小部件，我想用引導做的UI。

這是我的代碼：

<?php 


    add_action("wp_dashboard_setup","hlele_add_dashboard_widget"); 




    function hlele_enqueue_bootstrap(){ 
     // JS 
     wp_enqueue_script('hlele_bootstrap_js' , 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'); 

     // CSS 
     wp_enqueue_style('hlele_bootstrap_css' , 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 

    } 



    function hlele_add_dashboard_widget(){ 
     hlele_enqueue_bootstrap(); 
     wp_add_dashboard_widget("hlele_sysinfo_dashboard","System Information","hlele_setSysInfo"); 
    } 

    function hlele_setSysInfo(){ 
     echo '<a class="btn btn-danger">Test</a>'; 
    } 





?> 

當我運行此，儀表盤似乎是「破發」（不知道是怎麼回事......）

從儀表板文本更改字體默認字體爲引導程序的默認字體，屏幕選項和幫助按鈕似乎已停止工作。

Answer 1

當您創建新的窗口小部件不能使用

add_action 

您必須

public function __construct 

添加

wp_enqueue_style 

例如

public function __construct() { 
     $widget_id = 'contact_form'; 
     $widget_name = __('Formularz Kontaktowy', 'ContactForm'); 
     $widget_opt = array('description'=>'Ten widget wyświetla formularz kontaktowy.'); 

     parent::__construct($widget_id, $widget_name, $widget_opt); 

     wp_enqueue_style('contact-form-style', get_theme_file_uri('/widgets/css/contactform.css')); 
    } 

編輯： 我在WordPress的測試代碼，你的代碼工作 - Show me the result