iDangerous Swiper 不适用于 Wordpress答案

【问题标题】：iDangerous Swiper not working with WordpressiDangerous Swiper 不适用于 Wordpress
【发布时间】：2013-06-18 06:02:13
【问题描述】：

第一次在这里问问题，所以我会尽量让礼仪正确:)

我无法让 iDangerous swiper 与我的 Wordpress 安装配合使用。目前它是在 BitNami 中运行的本地安装，所以我无法分享链接，但我会尽力解释情况。我最好的 Google-Fu 无法找到答案。

首先，根据http://www.idangero.us/sliders/swiper/api.php 的使用说明，我让 Swiper 在最小的 HTML 测试页面上运行良好。

头部示例

<link rel="stylesheet" href="idangerous-swiper.css">
<script defer src="idangerous-swiper-1-9-4-min.js"></script>
<script type="text/javascript">
window.onload = function() {
    var mySwiper = new Swiper('.swiper-container',{
        //Your options here:
        mode:'horizontal',
        loop: true
        //etc..
    });  
}
</script>

正文示例

<div class="swiper-container">
    <div class="swiper-wrapper">

        <!--First Slide-->
        <div class="swiper-slide">
        <p>Slide One</p>
        </div>

        <!--Second Slide-->
        <div class="swiper-slide">
        <p>Slide Two</p>
        </div>

        <!--Third Slide-->
        <div class="swiper-slide">
        <p>Slide Three</p>
        </div>

    </div>
</div>

上述功能在最小测试中符合预期，但如果我在我的 wordpress 站点的 header.php 中执行相同操作，则标记有适当类的 HTML（根据上面的正文示例）不会变成交互式的。脚本文件似乎已在 Firebug 中加载，但仍未生效。

我已经尝试按照 WordPress 法典的建议“加入”脚本：

// Adds swiper js
function MyTheme_swiper() {
wp_enqueue_script(
    'mtswiper',
    get_template_directory_uri() . '/../mychildtheme/js/idangerous-swiper194.js',
    array( 'jquery' )
);
}

add_action( 'wp_enqueue_scripts', 'MyTheme_swiper' );

但这具有相同的结果；该脚本在 Firebug 中加载，但不在页面上运行。

我还尝试将初始化 swiper 的小脚本从头部转移到单独的 JS 文件中，并将其加入队列。同样，新脚本出现在 Firebug 的网络监视器中，但没有运行。

怀疑 jQuery 可能是问题所在，我将所有 $ 快捷方式更改为 jQuery，这是来自 Worpress Codex 的另一个提示。

jQuery(function(){
var mySwiper = jQuery('.swiper-container').swiper({
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
});
})

但还是没有骰子。

不知道从这里可以去哪里。我可以很好地解决 HTML 和 CSS 问题，但 PHP 和 JS 仍然让我很头疼。

请注意，在早期，我将 Swiper CSS 从默认的 idangerous-swiper.css 转移到我的主样式表中。它的这一面按预期工作。

任何帮助将不胜感激。

皮特。

【问题讨论】：

乍一看，您的代码似乎一切正常。你能提供一个实时链接让我看看吗？
@VladimirKharlampidi 嗨，弗拉基米尔，我在这里 link 上放了一个测试 WordPress 网站。希望我已经在该页面上说明了一切。如果您有任何问题，请随时提问。感谢您的回复！铂。

标签： javascript wordpress swipe swiper

【解决方案1】：

抱歉这么晚才回复，才看到你的回复。问题很简单，在你的startswiper.js文件中，把$替换成jQuery，比如

jQuery(function(){
    var mySwiper = jQuery('.swiper-container').swiper({
        //Your options here:
        mode:'horizontal',
        loop: true
        //etc..
    });
})

【讨论】：

太棒了！谢谢 :) 该死，我发誓我最初就是这样，并根据 wordpress codex 的建议将快捷方式从“jQuery”更改为“$”。

【解决方案2】：

其实必须用这个

function MyTheme_swiper() {
wp_enqueue_script(
    'mtswiper', get_template_directory_uri() . '/../mychildtheme/js/idangerous-swiper194.js',
array( 'jquery' ), false, true
);
}
add_action( 'wp_enqueue_scripts', 'MyTheme_swiper' );

必须检查https://developer.wordpress.org/reference/functions/wp_enqueue_script/

这里的目标是将script 放入footer。默认情况下它转到header。

【讨论】：