将Gridster插入WordPress模板

我的WordPress插件存在问题，我想将Gridster插入插件，但不起作用。将Gridster插入WordPress模板

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

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

我试图把它放置在模板头文件，以及在该插件，但它只能说明我的文字，我不能拖放他们。

来源

2016-01-04 Michael

你有没有排队这些脚本？它看起来像你只是注册他们... – rnevius

是的，我这样做，我只是试图注册他们，因为我认为它会帮助。 – Michael

注册脚本实际上不会包含在你的页面中......你应该使用'wp_enqueue_script（）'和'wp_enqueue_scripts'动作钩子 – rnevius

迈克尔 - 再次提问！

WordPress是伟大的，但它有一些技巧/细微差别，它如何工作。

首先，注册一个脚本很有用（例如，如果你想要localize它，或者你可能（或不可能）想在脚注中输出它（带有单独的print_scripts），但是，它确实不输出脚本到的标记。

此外，根据你到哪儿去注册它们（在wp_register_script钩），你可能想改变这一点。

如果你想要的是你的脚本输出到页面标记，然后修改您的代码，如下所示：

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

请注意，如果这不适用于您，下一步是查看呈现的源并查看发生了什么。如果您发现这种方式无效，请告知：

您是否试图在前端，管理控制台或两者上执行此操作？
什么是在<head>标记内呈现的确切HTML？
如果URL是输出，但它不正确，那么我们有一个不同的问题 - 所以建议如果这是正确的。请注意，当您查看源代码时，通常可以在“查看源代码”视图中单击链接到脚本，并且可以立即查看脚本文件是否正在加载（因为当您单击该链接时，你会看到脚本代码），或者不会（因为你会看到404错误页面的标记）。
最后，您可以尝试删除的依赖关系。我有时会遇到一些有趣的问题，而这些我都会捣鼓。

来源

2016-01-04 15:09:37

只需要注意......'wp_enqueue_script（'jquery'）;'是多余的，因为它被包含在其他脚本中的依赖项中。 – rnevius

@mevius - 的确如此，但我试图教导迈克尔如何排队jQuery的正确方法，所以我明确地将其作为他将来使用的示例/模型。 –

非常感谢，这对我有帮助:)现在我可以在我的前端以及后端拖放盒子。@cale_b你的回答总是有帮助，并且足够详细以便于理解，谢谢你。 – Michael

将Gridster插入WordPress模板

回答

相关问题