Javascript 将Gridster插入WordPress模板

我的WordPress插件有问题，我想将Gridster插入插件，但它不起作用

在这里，我加载的文件，这是正确的文件夹中

function add_my_stylesheet() 
{
    wp_enqueue_style( 'myCSS', plugins_url( '/css/bootstrap.css', __FILE__ ), false );
    wp_enqueue_style("gridster-style", plugins_url( '/css/jquery.gridster.min.css', __FILE__ ), false );
}
add_action('admin_print_styles', 'add_my_stylesheet');



function add_my_scripts()
{
    //I tried wp_register_script as well as wp_enqueue_script
    wp_register_script( "jquery-gridster", plugins_url( '/js/jquery.min.js', __FILE__ ) );
    wp_register_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__  ) );
    wp_register_script( "gridster-script-extra",  plugins_url(      '/js/jquery.  gridster.with-extras.min.js', __FILE__ ) );

}
add_action( 'wp_register_scripts', 'add_my_scripts' );

这是一个预期输出的代码示例，当然不起作用

echo'

<section class="demo">
        <div class="gridster">
            <ul>
                <li class="bg-blue" data-row="1" data-col="1" data-sizex="1" data-sizey="1">Box1</li>
                <li class="bg-pink" data-row="1" data-col="2" data-sizex="1" data-sizey="1">Box2</li>
                <li class="bg-pink" data-row="1" data-col="3" data-sizex="1" data-sizey="2">Box3</li>
            </ul>
        </div>
    </section>

    <script type="text/javascript">
  var gridster;

  $(function() {
      gridtster = $(".gridster > ul").gridster({
          widget_margins: [10, 10],
          widget_base_dimensions: [140, 140],
          min_cols: 6
      }).data("gridster");
  });
</script>';

echo'

框1
框2
Box3

var gridster；
$（函数（）{
gridtster=$（“.gridster>ul”）.gridster({
小部件_边距：[10,10]，
小部件基础尺寸：[140140]，
min_cols:6
}).数据（“gridster”）；
});
';

---

我尝试将其包含在模板的头文件和插件中，但它只显示文本，我无法拖放它们。

迈克尔-又是一个好问题

WordPress很棒，但它的工作原理有一些技巧/细微差别

首先，注册脚本很有用（例如，如果您想注册它，或者您可能（或可能不）想在页脚中输出它（使用单独的页脚），但它不会将脚本输出到标记上

此外，根据您注册它们的位置（在

wp\u register\u脚本

hook中），您可能还需要更改它们

如果您只想将脚本输出到页面标记，请按如下方式修改代码：

function add_my_scripts()
{
    // proper way to include jQuery that is packaged with WordPress
    wp_enqueue_script('jquery');
    // Do not EVER include your own jquery.  This will cause all sorts of problems for the users of your plugin!
    // wp_enqueue_script( "jquery-gridster", plugins_url( '/js/jquery.min.js', __FILE__ ) );
    // you need enqueue here.  ALSO note the use of the $dependencies parameter - this plugin relies on jquery, so be sure to include that as a dependency!
    wp_enqueue_script( "gridster-script", plugins_url( '/js/jquery.gridster.min.js', __FILE__  ), array('jquery') );
    wp_enqueue_script( "gridster-script-extra",  plugins_url(      '/js/jquery.  gridster.with-extras.min.js', __FILE__ ), array('gridster-script') );

}
// and you need to hook the enqueue action here...
add_action( 'wp_enqueue_scripts', 'add_my_scripts' );

请注意，如果这对您不起作用，下一步是查看渲染源并查看发生的情况。如果您发现这不起作用，请建议：

您是想在前端、管理仪表板上执行此操作，还是两者都执行

在

标记中呈现的确切html是什么

如果url是输出的，但它不正确，那么我们会遇到另一个问题-因此建议是否正确。请注意，当您“查看源代码”时，通常可以在“查看源代码”视图中单击指向脚本的链接，并且您可以立即查看脚本文件是否正在加载（因为当您单击链接时，您将看到脚本代码），或者不（因为您将看到404错误页面的标记）

最后，您可以尝试删除依赖项。我有时在使用它们时遇到了一些有趣的问题，这是我会处理的事情

---

您是否将这些脚本排入队列？看起来您只是在注册它们…是的，我是这样做的，这次我只是尝试注册它们，因为我认为这会有所帮助。注册脚本实际上不会将它们包含在您的页面中…您应该使用

wp\u enqueue\u script（）

和

wp\u排队\u脚本

操作挂钩只是一个注释…

wp\u排队\u脚本（'jquery'））；

是多余的，因为它作为一个依赖项包含在其他脚本中。@mevius-是的，但我正试图教Michael如何正确地将jQuery排队，所以我明确地将其作为一个示例/模型，供他将来使用。非常感谢，这对我有帮助：）现在我可以在我的前端和后端拖放框@cale_b你的答案总是很有帮助，很详细，很容易理解，谢谢你。Michael，如果你想让我帮你/看一个问题，只要在你的问题上发表评论，@cale_b me-我很乐意看一看。@cale_b我看到代码只适用于前端。我尝试了你能相信的一切，最后我试图输出一条简单的消息，以确保jQuery正常工作，但什么都没有发生，我不认为脚本没有加载，但还有什么问题？顺便问一下，你们有WhatsApp吗？