插件-确保jQuery已加载到我的设置页面和我的JS文件中

时间：2011-04-12 作者：Scott

我正在创建我的第一个wordpress插件，我正在努力找到正确和最好的方法来确保jquery和我自己的JS文件包含在插件的设置页面中。

我不需要将它们加载到其他任何地方，除非在我的设置页面上。

什么代码，我应该把它放在插件的什么地方？

这是我目前为止创建设置页面的方法：

add_action("admin_menu", "create_admin_pages");

function create_admin_pages() {
    add_submenu_page(\'options-general.php\', "MYPLUGIN", "MYPLUGIN", 10, "my-plugin", \'settings_page\');
}
functions settings_page() {
    // Settings form is here and I need Jquery and my script loaded for this
}
编辑：上面的代码被简化了，所以在插件发布之前不要透露插件的功能。我正在编写的插件被封装在一个类中，因此函数名可以是泛型的。

3 个回复
最合适的回答,由SO网友:Rarst 整理而成

首次使用add_options_page() - 包装纸越短，练习效果越好。

其次，您需要将其返回保存在某个（全局或静态）变量中。在文档中，这经常被不同的名称所使用和混淆。全球的$hook_suffix 保存当前页的此类值。

function create_admin_pages() {

   global $my_page;

   $my_page = add_options_page(...
从这里可以看出：

add_action(\'admin_enqueue_scripts\', \'enqueue_script\');

function enqueue_script($hook_suffix) {

    global $my_page;

    if ($my_page == $hook_suffix)
        wp_enqueue_script(\'my_script\', plugins_url(\'my_script.js\', __FILE__), array(\'jquery\'));
}

SO网友:Bainternet

你可以admin_print_scripts-{$page} 钩住以仅在页面上包含或排队脚本，类似于：

$page = add_management_page( \'myplugin\', \'myplugin\', 9, __FILE__, \'myplugin_admin_page\' );
add_action( "admin_print_scripts-$page", \'myplugin_plugin_add_scripts\' );

function myplugin_plugin_add_scripts(){
  wp_enqueue_script(\'myscript\', \'/wp-content/plugins/myplugin/myscript.js\'); 
}
同样，您也可以使用admin_print_styles-$page 包含css样式。

SO网友:t31os

如果您的代码被包装在一个类中，那么使用一个类变量来存储插件的页面挂钩，这将便于参考，并且基本上可以做Rarst正在做的事情，但不需要全局语句。。。

class WPSE_Example_Code {
    private $hook;
    function __construct() {
        add_action( \'admin_menu\', array( $this, \'on_admin_menu\' ) );
    }
    function on_admin_menu() {
        $this->hook = add_options_page( .. your params .. );
        add_action( \'admin_enqueue_scripts\', array( $this, \'on_admin_enqueue_scripts\' ) );
        // OR (you\'d not need the conditional statement in the function below if using this method)
        // add_action( \'admin_print_scripts-\' . $this->hook , array( $this, \'on_admin_enqueue_scripts\' ) );
    }
    function on_admin_enqueue_scripts( $hook_suffix ) {
        if( $this->hook != $hook_suffix )
            return;
        wp_enqueue_script( \'your-script-handle\', plugins_url( \'/yourfilename.js\', __FILE__ ), array( \'jquery\' ), \'1.0\', true );
    }
}
从技术上来说admin_print_scripts-$hook 或admin_enqueue_scripts 两者都适合你的使用，你使用哪一种确实是一个偏好的问题。我倾向于使用admin_print_scripts-$hook 我自己（因为我通常只需要一个页面的脚本，所以根据我的示例，它避免了在回调中编写条件逻辑的需要）。

结束
标签： plugin-development   jquery   javascript   小码农  

相关推荐

在WordPress中加载较新版本的jQuery

我已经了解了WP enqueue\\u script（）函数，但是如果我想使用比WP安装使用的jQuery版本更新的jQuery，我可以通过以下方式加载它（&；WP将使用最新版本？或者它会同时加载这两者？或者会发生什么？谢谢