如何将自己的 javascript/css 文件添加到 wordpress 插件菜单页面？

Posted 2023-03-06

【中文标题】如何将自己的 javascript/css 文件添加到 wordpress 插件菜单页面？

【英文标题】：How to add own javascript/css file to wordpress plugin menu page?

【发布时间】：2014-01-06 16:38:02

【问题描述】：

我想编写我的第一个 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
*/

第二步： 使用此功能，我在仪表板菜单的底部添加了我的插件名称（***菜单项名称）。我什至不知道为什么名称和蛞蝓名称被列出两次。我从：here 获得该代码。我也不知道“mt-top-level-handle”是做什么的。它没有任何功能，它仍然有效。 “manage_options”是定义此页面上的用户权限的能力变量。 （任何人都知道如何使此页面仅供管理员（作者）访问？）

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');

那没用。那么怎么做才对呢？ :)

【问题讨论】：

查看这个答案***.com/a/38050537/1153703

【参考方案1】：

add_menu_page() 成功时返回钩子名称。您可以利用它在动态 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

【讨论】：

谢谢！很高兴知道！我会试试的:)

【参考方案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' );

【讨论】：

这会将您的脚本加载到所有管理页面，而不仅仅是您的插件页面