如何將自己的javascript/css文件添加到wordpress插件菜單頁面？

Question

我想寫我的第一個WordPress插件，可能需要一些幫助。當我點擊我的插件的菜單項時，我不知道如何將我的JavaScript文件添加到儀表板區域的頭部。這是我迄今所做的：

第一步： 創建的目錄，在目錄wp-content/plugins一個php文件，添加插件這樣的頭：

/* Plugin Name: Test Plugin 
Plugin URI: http://my-plugin.com/ 
Description: test test test 
Version: 1.0 
Author: me 
Author URI: http://my-plugin.com/ 
License: GPLv2 or later 
*/ 

第2步： 使用此功能，我可以在儀表板菜單底部添加我的插件名稱（頂級菜單項名稱）。我甚至不知道名字和slu name名稱爲什麼被列出兩次。我從：here得到了該代碼。我也不知道「mt-top-level-handle」在做什麼。它沒有功能，它仍然有效。 「manage_options」是定義此頁面上用戶權限的能力變量。 （任何人都知道如何使管理員此頁面accessable，（作家）只？）

add_action('admin_menu', 'register_my_menu_item'); 
function register_my_menu_item() { 
    add_menu_page(__('top level menu item name','slug-name'), __('top level menu item name','slug-name'), 'manage_options', 'mt-top-level-handle', 'my_plugins_page'); 
} 

第三步： 插件頁面這個簡單的功能顯示「Hello World」。

function edit_table_page() { 
?> 
    <h2>Hello World</h2> 
<?php 
} 

現在我想知道如何在該插件頁面上使用我的JavaScript文件。我需要在jquery文件加載後添加它。

所有我發現有關添加腳本是這樣的：

add_action('wp_enqueue_scripts', 'my_scripts'); 
function my_scripts() { 
    wp_enqueue_script('jquery'); 
    wp_register_script('my_script', plugins_url('js/my_script.js', __FILE__),array("jquery")); 
    wp_enqueue_script('my_script'); 
} 

這沒有奏效。那麼如何做到這一點？ :)

Answer 1

​​成功，則返回hookname。您可以利用，要排隊腳本的動態load-{$hookname}鉤：

add_action('admin_menu', 'register_my_menu_item'); 
function register_my_menu_item() 
{ 
    $my_plugins_page = add_menu_page(
     __('top level menu item name','my_plugin_textdomain'), 
     __('top level menu item name', 'my_plugin_textdomain'), 
     'manage_options', 
     'mt-top-level-handle', 
     'my_plugins_page' 
    ); 
    add_action('load-' . $my_plugins_page, 'so20659191_enqueue'); 
} 

function so20659191_enqueue() 
{ 
    wp_enqueue_script('my_script', plugins_url('js/my_script.js', __FILE__), array('jquery'), null, true); 
} 

function my_plugins_page() { 
?> 
    <h2>Hello World</h2> 
<?php 
} 

Answer 2

找到解決方案！ 加入JS-文件：

add_action('admin_enqueue_scripts', 'my_scripts'); // add scripts to dashboard head 
function my_scripts() { 
    wp_enqueue_script('jquery'); 
    wp_register_script('my_script', plugins_url('js/my_script.js', __FILE__),array("jquery")); 
    wp_enqueue_script('my_script');  
} 

添加CSS文件：

add_action('admin_enqueue_scripts', 'my_styles'); 
function my_styles() { 
    wp_register_style('custom_wp_admin_css', plugins_url('my-plugin/css/style.css')); 
    wp_enqueue_style('custom_wp_admin_css'); 
}