4

How do I use Wordpress together with Twitter Bootstrap? I know how to set up a Wordpress page and I've already worked with Bootstrap, but now I want to use these two together for the first time.

For my Wordpress projects I normally just installed Wordpress and started from scratch with creating a new theme. For my Bootstrap projects I always used Initializr to build a template.

Now using Google I found various "Bootstrap themes" and plugins , do I need one of those? I want to customize the bootstrap look with my own colors etc. using LESS, that's why I am asking. I am just having trouble to understand how these two will work together and I haven't found any good resource for it.

4

4 回答 4

10

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

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

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

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

于 2012-07-18T14:18:19.087 回答
4

你总是可以使用 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 -演示/

希望能帮助您入门！

于 2013-02-11T17:16:54.733 回答
1

我之前在stackoverflow上回答了同样的问题。我觉得这是一种迟到的分享，但对于那些正在寻找此类教程的人来说，只需单击给出的超链接标题：在 Wordpress 中使用 Twitter Bootstrap。

于 2013-10-26T07:12:03.880 回答
0

有一种快速的方法可以做到这一点，在你的主题中使用作曲家：

作曲家.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);

等等！:)

于 2014-01-18T11:19:44.970 回答