无法将javascript加载到wordpress插件中


Cannot load my javascript into wordpress plugin

我有一个javascript函数响应点击事件

主要的问题是,我调用面板。js在我的plugin.php和什么都没有发生。

:

panel.js

$(document).ready(function(){
    $(".next_panel").click(function(){
        //Do something here
        return false;
    });
}

这是我变成插件之前的网页(main.html),注意我是如何加载JS的,这在我的实际开发中是有效的。

<head>
    <script src="js/panel.js"></script>
</head>
<body>
    <a href="#" class="next_panel">
        <div class="block"></div>
    </a>
</body>

:

现在这是一个正常的网站,但是加载到wordpress作为一个插件给我带来了一些问题,这里的主要问题是,我似乎无法加载javascript。

panel.js

function panel(){
    $(".next_panel").click(function(){
        //Do something here
        return false;
    });
}

这是plugin.php中的代码,一旦我把它变成wordpress的插件,我可以确认wp_head正在被调用。

wp_enqueue_script('panel', VS_PATH.'js/panel.js', array('jquery'));
//This will run our function when wp_head is called.
add_action('wp_head', 'vs_script');
function vs_get_panel()
{
    $panels = '
    <body>
        <a href="#" class="next_panel">
            <div class="block"></div>
        </a>
    </body>';
    return $panels;
}
function vs_insert_panel($atts, $content=null)
{
    $panel = vs_get_panel();
    return $panel;
}
add_shortcode('v_panel', 'vs_insert_panel');
function vs_script()
{
    print '<script type="text/javascript" charset="utf-8">
                jQuery(document).ready(function($)
                {
                        $(''.panel'').panel();//This is where my problem is
                });
    </script>';
}

如果你看一下函数vs_script()中的最后一块代码,这就是我被推荐的方式,一旦它呈现,我的javascript就会进入wordpress页面。

插件也有更多的,例如图像和css,事情是,所有的工作,css工作得很好,只是javascript,我不能得到工作。

After Kats advice:

我仍然没有javascript加载,我的点击事件没有被执行。

plugin.php

function my_js()
{
    wp_enqueue_script('panel', VS_PATH.'js/panel.js', array('jquery'));
}
add_action('admin_enqueue_scripts', 'my_js');
add_action('login_enqueue_scripts', 'my_js');
//This will run our function when wp_head is called.
add_action('wp_head', 'vs_script');
function vs_get_panel()
{
    $panels = '
    <body>
        <a href="#" class="next_panel">
            <div class="block"></div>
        </a>
    </body>';
    return $panels;
}
function vs_insert_panel($atts, $content=null)
{
    $panel = vs_get_panel();
    return $panel;
}
add_shortcode('v_panel', 'vs_insert_panel');
function vs_script()
{
    print '<script type="text/javascript" charset="utf-8">
                jQuery(document).ready(function($)
                {
                        $(''.panel'').panel();//This is where my problem is
                });
    </script>';
}

panel.js

function panel(){
    $(".next_panel").click(function(){
        //Do something here
        return false;
    });
}

这个wp_enqueue_script('panels', VS_PATH.'js/panels.js', array('jquery'));不能单独工作。

通常被封装在函数中:

function my_js() {
    wp_enqueue_script('panels', VS_PATH.'js/panels.js', array('jquery'));
}

:

add_action('admin_enqueue_scripts', 'my_js');
add_action('login_enqueue_scripts', 'my_js');