将 Gridster 插入 WordPress 模板
Insert Gridster into WordPress template
我的 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>';
我尝试将它包含在模板的头文件和插件中,但它只显示文本,我无法拖放它们。
Michael - 又是好问题!
WordPress 很棒,但它的工作方式有一些技巧/细微差别。
首先,注册脚本很有用(例如,如果您想 localize it, or in cases when you may (or may not) want to output it in the footer (with a separate 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' );
请注意,如果这对您不起作用,下一步是查看呈现的源代码并查看发生了什么。如果您发现这不起作用,请指教:
- 您是否尝试在 front-end、管理仪表板或两者上执行此操作?
- 在
<head>
标签内呈现的确切 html 是什么?
- 如果输出了 url,但它不正确,那么我们遇到了不同的问题 - 如果正确,请告知。请注意,当您 "view source" 时,通常可以在 "view source" 视图中单击脚本的 link(s),并且您可以立即查看脚本文件是否正在加载(因为当您单击 link 时,您会看到脚本代码),或者不会(因为您会看到 404 错误页面的标记)。
- 最后,您可以尝试删除 依赖项。有时我在使用它们时遇到了有趣的问题,这就是我会 fiddle 的问题。
我的 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>';
我尝试将它包含在模板的头文件和插件中,但它只显示文本,我无法拖放它们。
Michael - 又是好问题!
WordPress 很棒,但它的工作方式有一些技巧/细微差别。
首先,注册脚本很有用(例如,如果您想 localize it, or in cases when you may (or may not) want to output it in the footer (with a separate 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' );
请注意,如果这对您不起作用,下一步是查看呈现的源代码并查看发生了什么。如果您发现这不起作用,请指教:
- 您是否尝试在 front-end、管理仪表板或两者上执行此操作?
- 在
<head>
标签内呈现的确切 html 是什么? - 如果输出了 url,但它不正确,那么我们遇到了不同的问题 - 如果正确,请告知。请注意,当您 "view source" 时,通常可以在 "view source" 视图中单击脚本的 link(s),并且您可以立即查看脚本文件是否正在加载(因为当您单击 link 时,您会看到脚本代码),或者不会(因为您会看到 404 错误页面的标记)。
- 最后,您可以尝试删除 依赖项。有时我在使用它们时遇到了有趣的问题,这就是我会 fiddle 的问题。