在WordPress中使用Bootstrap开关

时间：2013-06-21 作者：William

我不知道怎么弄到这个Bootstrap Switch extension 使用WordPress安装。

当我从github下载示例并在本地机器上运行时，控件工作得很好。但他们似乎根本不在WordPress中工作。为了测试它，我设置了一个重写规则，以便www.url。com/测试点到沙箱。php。与sandbox位于同一目录中。php（在我的子主题文件夹中）我放置了以下文件：

引导开关。css查询。min.js启动开关。这是沙盒的内容。php：

<html>
    <head>
    </head>
    <body style="padding-top: 50px;">
        <link rel="stylesheet" href="bootstrapSwitch.css">
        <script src="jquery.min.js"></script>
        <script src="bootstrapSwitch.js"></script>
        <div class="switch" data-on="primary" data-off="info">
            <input type="checkbox" checked/>
        </div>
    </body>
</html>
只显示一个复选框。当我打开一个。php文件位于我桌面上的一个文件夹中，包含所有这些相同的文件，它工作得非常好。

这是怎么回事？

2 个回复
最合适的回答,由SO网友:RRikesh 整理而成

我试过了。你需要Twitter Bootstrap\'s CSS文件，Bootstrap Switch\'s CSS和JS文件。我把这三个文件都放在一个叫做assets.

functions.php:

<?php

add_action( \'wp_head\', \'rr_bootswitch_meta\' );
add_action( \'wp_enqueue_scripts\', \'rr_bootswitch_enqueue\' );

function rr_bootswitch_meta(){
    print \'<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />\';
}

function rr_bootswitch_enqueue(){
    wp_enqueue_style(\'bootstrap-css\', get_template_directory_uri() . \'/assets/bootstrap.min.css\' );
    wp_enqueue_style(\'switch-css\', get_template_directory_uri() . \'/assets/bootstrapSwitch.css\' );
    wp_enqueue_script( \'switch-js\', get_template_directory_uri() . \'/assets/bootstrapSwitch.js\', array( \'jquery\' ) );
}

The problem:

在…的结尾bootstrapSwitch.js, 有以下代码段：

$(function () {
  $(\'.switch\')[\'bootstrapSwitch\']();
});
如果您使用的是与WordPress捆绑的jQuery，那么由于jQuery已加载到noConflict mode. 您需要更改上述代码才能使用noConclict wrappers:

jQuery(document).ready(function($){
   $(\'.switch\')[\'bootstrapSwitch\']();
});
我上传了我的测试主题Github, 试试看。

SO网友:Krzysiek Dróżdż

在WordPress主题中使用JS时，有几件事你不应该忘记。

您应该使用wp_enqueue_script 若要包含脚本，可以手动创建JS冲突<head> 节（或在页脚中）如果使用wp_enqueue_script, 它将处理第2点和第3点。

最后一点：当你遇到JS问题时，你总是可以使用JS控制台（浏览器中的工具）来查看问题所在。

在您的情况下，我很确定，当您尝试获取JS文件时，JS控制台将显示404错误（未找到文件）。

结束
标签： jquery   twitter-bootstrap   小码农  

相关推荐

将WordPress博客名隐藏到JQuery中

以下是php中的blogname<?php $blog_title = get_bloginfo(\'name\'); ?>我想将其转换为javascript。我想要博客名的文件位于中。js文件，因此我无法使用php创建变量。