文章/答案/技术大牛

发布

社区首页 >问答首页 >将Gridster插入WordPress模板

问将Gridster插入WordPress模板
EN

Stack Overflow用户

提问于 2016-01-04 14:00:53

回答 1查看 181关注 0票数 5

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

我试着把它包括在模板的头文件中以及插件中，但是它只显示了文本，我无法拖放它们。

javascript

php

jquery

wordpress

gridster

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-04 15:09:37

迈克尔-又问了个好问题！

WordPress很棒，但是它的工作方式有一些技巧/细微之处。

首先，注册一个脚本是有用的(例如，如果您想要局部化脚本，或者在您可能(或不)希望在页脚中输出它(带有单独的脚本)时)，但是它不会将脚本输出到标记上。

此外，根据您注册它们的位置(在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错误页的标记)。
最后，您可以尝试删除依赖项的。我有时会遇到一些有趣的问题，而这将是我会摆弄的事情。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34592846

复制

相似问题

问将Gridster插入WordPress模板
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将Gridster插入WordPress模板EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将Gridster插入WordPress模板
EN