javascript - 无法将我的 JavaScript 加载到 WordPress 插件中

标签 javascript php wordpress plugins

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

主要问题是我在我的plugin.php中调用panel.js,但什么也没发生。

之前:

面板.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 中给我带来了一些问题,这里主要的问题是我似乎无法加载 javacript。

面板.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() 中的最后一个代码块,就会发现这是我被推荐的在 WordPress 页面渲染后将我的 javascript 放入 WordPress 页面的方法。

该插件还有更多功能,例如图像和 css,问题是,所有这些都有效,css 工作正常,只是 javascript 无法工作。

凯特之后的建议:

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

插件.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>';
}

面板.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');

关于javascript - 无法将我的 JavaScript 加载到 WordPress 插件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25483595/

相关文章:

javascript - 调用API直到有特定响应

php - Mysqli 在多个字段中搜索值

php - 如何从 MySQL 中调用 PHP 中的 SELECTED 选项?

php - 使用 ajax 向数据库添加恰好 100 个值

php - 获取 Woocommerce 订阅开始日期

wordpress - 重定向子域并保留 url 结构

javascript - Calypso、Jetpack 和 Wordpress 博客的技术架构

javascript - Jquery - 在滚动到 50% 时将 DIV 旋转 X 度

javascript - 谷歌地理编码 API

javascript - Summernote 它可能已被移动或删除(无法粘贴视频)