我正在尝试让一个 jquery 插件在我的 wordpress 网站上工作
Posted
技术标签:
【中文标题】我正在尝试让一个 jquery 插件在我的 wordpress 网站上工作【英文标题】：I am trying to get a jquery plug in to work on my wordpress site 【发布时间】：2017-08-23 22:26:58 【问题描述】：我正在尝试让这个插件工作：https://gopalraju.github.io/gridtab/#features。这是我正在使用的测试站点：http://testing.bdanzer.com/。我通过functions.php 文件将文件排入队列，并在footer.php 中添加了脚本标签。他们出现在网站上排队但 jquery 插件不起作用？代码如下：
Functions.php 文件：
function bdanzer_scripts()
wp_enqueue_script( 'gridtabready.js', get_stylesheet_directory_uri() . '/bdanzer/gridtab/gridtabready.js', array( 'jquery' ), '1.0.0', false );
wp_enqueue_script( 'gridtab.js', get_stylesheet_directory_uri() . '/bdanzer/gridtab/gridtab.min.js', array( 'jquery' ), '1.0.0', true );
wp_enqueue_style( 'gridtab.css', get_template_directory_uri() . '/bdanzer/gridtab/gridtab.min.css' );
add_action( 'wp_enqueue_scripts', 'bdanzer_scripts', 11);
Footer.php 文件：
<script>
$(document).ready(function()
$('.gridtab-1').gridtab(
grid: 6,
tabPadding: 0,
borderWidth: 10,
contentPadding: 40,
responsive: [
breakpoint: 991,
settings:
grid: 4,
contentPadding: 30
,
breakpoint: 767,
settings:
grid: 3,
contentPadding: 20
,
breakpoint: 520,
settings:
grid: 2
]
);
$('.gridtab-2').gridtab(
grid: 4,
config:
layout: 'tab'
,
callbacks:
open: function()
console.log('open');
,
close: function()
console.log('close');
,
responsive: [
breakpoint: 991,
settings:
grid: 3,
,
breakpoint: 767,
settings:
grid: 2,
,
breakpoint: 520,
settings:
grid: 1,
]
);
$('.gridtab-3').gridtab(
grid: 3,
config:
layout:'tab',
activeTab:1,
showClose:true,
showArrows:true,
);
$('.gridtab-4').gridtab(
grid: 6,
tabPadding: 0,
borderWidth: 10,
contentPadding: 40,
config:
scrollToTab:true,
showClose:true,
showArrows:true
,
responsive: [
breakpoint: 991,
settings:
grid: 4,
contentPadding: 30
,
breakpoint: 767,
settings:
grid: 3,
,
breakpoint: 520,
settings:
grid: 2
]
);
$('.gridtab-5').gridtab(
grid: 3,
config:
layout:'tab',
activeTab:1,
keepOpen:true,
showClose:true,
showArrows:true,
scrollToTab:true,
);
$('.gridtab-6').gridtab(
grid: 3,
config:
layout:'tab',
activeTab:1,
showClose:true,
showArrows:true,
scrollToTab:true,
);
);
</script>
【问题讨论】：
【参考方案1】：gridtabready.js 有语法错误你没有关闭.ready 函数请替换这些js如下，它会正常工作
看看这个截图
jQuery(document).ready(function()
jQuery('.gridtab-1').gridtab(
grid: 4,
tabPadding: 0,
borderWidth: 10,
contentPadding: 40,
responsive: [
breakpoint: 767,
settings:
grid: 3,
contentPadding: 20
,
breakpoint: 520,
settings:
grid: 2,
]
);
jQuery('.gridtab-2').gridtab(
grid: 6,
layout: 'tab',
borderWidth: 3,
contentPadding: 40,
config:
layout: 'tab'
,
responsive: [
breakpoint: 1024,
settings:
grid: 4,
,
breakpoint: 767,
settings:
grid: 3,
contentPadding: 20
,
breakpoint: 520,
settings:
grid: 2
]
);
jQuery('.gridtab-3').gridtab(
grid: 4,
borderWidth: 3,
contentPadding: 40,
config:
layout: 'tab',
activeTab: 1
,
responsive: [
breakpoint: 600,
settings:
grid: 2,
contentPadding: 30
]
);
jQuery('.gridtab-4').gridtab(
grid: 6,
borderWidth: 3,
tabPadding: 0,
contentPadding: 40,
responsive: [
breakpoint: 767,
settings:
grid: 3,
contentPadding: 20
,
breakpoint: 520,
settings:
grid: 2
]
);
jQuery('.gridtab-5').gridtab(
grid: 4,
borderWidth: 3,
contentPadding: 40,
config:
layout: 'tab',
activeTab: 1,
keepOpen: true,
showClose: true,
showArrows: true,
scrollToTab: true
,
responsive: [
breakpoint: 600,
settings:
grid: 2,
contentPadding: 30
]
);
jQuery('.gridtab-6').gridtab(
grid: 3,
borderWidth: 3,
tabPadding: 10,
contentPadding: 40,
config:
showClose: true,
showArrows: true,
layout: 'tab'
,
selectors:
tab: '.readmore',
closeButton: '.closeBtn',
nextArrow: '.nextBtn',
prevArrow: '.prevBtn',
disabledArrow: '.disabledBtn'
,
responsive: [
breakpoint: 600,
settings:
grid: 2,
contentPadding: 20
,
breakpoint: 320,
settings:
grid: 1
]
);
jQuery('.gridtab-7').gridtab(
grid: 6,
borderWidth: 3,
contentPadding: 40,
config:
layout: 'tab',
activeTab: 1,
rtl: true,
showClose: true,
showArrows: true
,
responsive: [
breakpoint: 1024,
settings:
grid: 4,
,
breakpoint: 767,
settings:
grid: 3,
contentPadding: 20
,
breakpoint: 520,
settings:
grid: 2
]
);
);
【讨论】：
谢谢！我快把自己逼疯了，结果证明这只是一件非常简单的事情哈哈。 如果您觉得对您以后的参考有用，请标记为答案【参考方案2】：检查您的functions.php 文件，您似乎错误地将脚本排入队列。如果您查看测试页面的源代码（Chrome 中的 ctrl+u），您将看到以下脚本被排入队列：
<script type="text/rocketscript" data-rocketsrc='http://testing.bdanzer.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type="text/rocketscript" data-rocketsrc='http://testing.bdanzer.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type="text/rocketscript" data-rocketsrc='http://testing.bdanzer.com/wp-content/themes/popperscores-master/bdanzer/gridtab/gridtabready.js?ver=1.0.0'></script>
首先，您的脚本类型为 type="text/rocketscript" 而不是“text/javascript”。我不知道你打算这样做。
其次，从服务器调用脚本文件时出现语法错误。您通过 data-rocketsrc='...' 而不是 src='...' 引用您的脚本 你应该看看你以这种方式引用的所有脚本。也许这将有助于解决问题。
【讨论】：
这是因为我使用的是 CDN。 Cloudflare 对此有一个设置。以上是关于我正在尝试让一个 jquery 插件在我的 wordpress 网站上工作的主要内容，如果未能解决你的问题，请参考以下文章
Jquery 插件给出错误 $(...).ionRangeSlider 不是函数
jQuery插件可以在localhost上运行，但在我将它发布到服务器时则不行