将Gridster插入WordPress模板

时间:2016-01-04 14:00:53

标签: javascript php jquery wordpress gridster

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

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

1 个答案:

答案 0 :(得分:1)

迈克尔 - 再好的问题!

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

请注意,如果这对你不起作用,下一步是查看渲染的来源,看看发生了什么。如果您发现这不起作用,请告知:

  1. 您是尝试在前端,管理信息中心或两者上执行此操作吗?
  2. <head>代码中呈现的确切html是什么?
  3. 如果输出了网址但是不正确,那么我们会遇到不同的问题 - 所以请告知是否正确。请注意,当您“查看源”时,通常可以在“查看源”视图中单击脚本的链接,并且您可以立即查看脚本文件是否正在加载(因为当您单击链接时,你会看到脚本代码),或者没有(因为你会看到404错误页面的标记)。
  4. 最后,您可以尝试删除依赖项。我有时候使用它们会遇到一些有趣的问题,这将是我想要的东西。