将 Twitter Bootstrap 与 Wordpress 结合使用 [英] Using Twitter Bootstrap together with Wordpress

问题描述

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

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.

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

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.

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

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.

推荐答案

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

There will be a few ways to tackle this, but here's what I've been doing...

1. 复制您最喜欢的起点主题
2. 下载完整的 bootstrap 存储库(较少和所有内容)并将其弹出到您的主题文件夹中.
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，有时编辑主题以更好地利用现有引导类，但有时您需要添加您自己的用于引导的自定义类.

这很耗时，但一旦完成，显然可以重复使用以加快未来的项目.

It's quite time consuming, but once its done it can obviously be re-used to speed up future projects.

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

Incidentally, I've also been building a theme using this same principle but based on http://stuffandnonsense.co.uk/projects/320andup/ both great projects. I'd recommend seeing which best suits you.

这篇关于将 Twitter Bootstrap 与 Wordpress 结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！