将 Twitter Bootstrap 与 Wordpress 一起使用答案

【问题标题】：Using Twitter Bootstrap together with Wordpress将 Twitter Bootstrap 与 Wordpress 一起使用
【发布时间】：2012-07-17 17:28:24
【问题描述】：

如何将 Wordpress 与 Twitter Bootstrap 一起使用？我知道如何设置 Wordpress 页面，并且我已经使用过 Bootstrap，但现在我想第一次将这两者结合使用。

对于我的 Wordpress 项目，我通常只是安装了 Wordpress，然后从头开始创建一个新主题。对于我的 Bootstrap 项目，我总是使用 Initializr 来构建模板。

现在使用 Google 我发现了各种“引导主题”和插件，我需要其中一个吗？我想用我自己的颜色等自定义引导外观，使用 LESS，这就是我问的原因。我只是很难理解这两者将如何协同工作，而且我还没有找到任何好的资源。

【问题讨论】：

我不认为这里有什么特别之处。你应该在引导 css 之上构建你的主题，它应该可以工作。此外，您可能对此plugin 感兴趣
谢谢 - 那么它就像我希望的那样简单。但是您确定要链接到一个名为“Facebook”的插件吗？ ;-)
这是一个附加信息，但这与 twitter bootstrap 无关

标签： wordpress twitter-bootstrap

【解决方案1】：

有几种方法可以解决这个问题，但这是我一直在做的......

复制您最喜欢的起点主题
下载完整的引导程序存储库（less 和所有内容）并将其弹出到您的主题文件夹中。
在 bootstrap 文件夹中创建一个名为“css”的文件夹，并将其设置为输出已编译的“bootstrap.css”文件的位置。
然后在主题根目录中，打开“styles.css”，更改主题名称等，就像创建新主题一样，删除所有样式并仅添加一行代码@import url("bootstrap/css/bootstrap.css");
您现在应该可以从“wp-admin”的“外观”菜单中选择这个新主题了。
它显然看起来很可怕，但是一旦您将一些主题类/ID 添加到“layout.less”中。然后运行 'variables.less' 来添加你将在某处获得的基本主题。
除此之外，您必须检查每个模板文件并考虑所有类/ID，有时编辑主题以更好地利用现有引导类，但有时您需要添加您自己的引导的自定义类。

这非常耗时，但一旦完成，它显然可以重复用于加快未来项目的速度。

顺便说一句，我也一直在使用同样的原则构建一个主题，但基于 http://stuffandnonsense.co.uk/projects/320andup/ 这两个伟大的项目。我建议您看看哪个最适合您。

【讨论】：

【解决方案2】：

您总是可以使用 Twitter Bootstrap WordPress 插件。它在 WordPress.org 上完全免费：http://wordpress.org/extend/plugins/wordpress-bootstrap-css/

还包含许多短代码，因此您可以在页面中包含 Bootstrap 元素并发布 - 这里有一个演示页面：http://worpit.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-shortcodes-demo/

希望能帮助您入门！

【讨论】：

【解决方案3】：

我之前在 stackoverflow 上回答了同样的问题。我觉得这有点晚了，但是对于那些正在寻找此类教程的人来说，只需单击给出的超链接标题：Using Twitter Bootstrap in Wordpress。

【讨论】：

【解决方案4】：

有一个快速的方法，在你的主题中使用 composer：

composer.json

{
        "config": {
                        "component-dir": "lib/composer",
                        "vendor-dir": "lib/composer",
                        "bin-dir" : "bin/composer",
                        "cache-dir" : "var/cache/composer"
        },
        "require": {
                        "twitter/bootstrap": "3"
        }
}

注意：我删除了其他作曲家的部分和要求以及 phing 集成以降低复杂性。

执行

 composer install

然后在你的主题中，添加 /lib/composer/twitter/bootstrap/dist/css/bootstrap.css 和这句话

    $bootUri = get_template_directory_uri() . '/lib/composer/twitter/bootstrap/dist/css/bootstrap.css';

    wp_enqueue_style('sindy_bootstrap', $bootsUri);

等等！ :)

【讨论】：