Using Twitter Bootstrap together with Wordpress

问题:

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.

回答1:

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

1. Take a copy of your favorite starting point theme
2. Download the full bootstrap repo (less and everything) and pop it into your theme folder.
3. Create a folder called 'css' inside the bootstrap folder and set this as your location to output your compiled 'bootstrap.css' file.
4. Then up in the theme root, open 'styles.css', change the theme name etc as you would if you were creating a new theme, delete all the styles and add just one line of code @import url("bootstrap/css/bootstrap.css");
5. You should now be able to select this new theme from your 'appearances' menu in 'wp-admin'.
6. It'll obviously look horrific, but once you add a few of your theme classes/IDs into 'layout.less'. Then run through 'variables.less' to add you base theme you'll be getting somewhere.
7. Other than that you'll have to go through each template file and consider all the classes/IDs, sometimes edit the theme to make better use of existing bootstrap classes, but other times you'll need to add you're own custom classes to bootstrap.

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

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.

回答2:

You could always us the Twitter Bootstrap WordPress plugin. It's completely free on WordPress.org here: http://wordpress.org/extend/plugins/wordpress-bootstrap-css/

There's also lots of shortcodes included so you can include Bootstrap elements within your pages and post - there's a demo page of it all here: http://worpit.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-shortcodes-demo/

Hope that helps you get started!

回答3:

I answered the same question before here at stackoverflow. I feel like it's kind of late sharing but for those who are looking for such tutorial just click the hyperlinked title given: Using Twitter Bootstrap in Wordpress.

回答4:

There is a quick way to do it, using composer in your theme:

composer.json

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

Note: I removed the other composer's section and requirements and phing integration to reduce complexity.

Execute

 composer install

And then in your theme, add /lib/composer/twitter/bootstrap/dist/css/bootstrap.css with this sentences

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

    wp_enqueue_style('sindy_bootstrap', $bootsUri); 

et voilà! :)