WordPress佈景主題教學10-運用Bootstrap開發佈景

看了佈景主題教學1-9大家應該都有基礎概念了，可是可以發現，奇怪為什麼模版用手機看會有問題?要如何讓模版也可以變成手機可以觀看的呢!答案就是要做RWD(Responsive Website Design)，今天要跟大家分享如何運用Bootstrap讓模版可以有RWD的效果。
(可以參考1.Bootstrap介紹 2.Bootstrap應用)

步驟一:新增一個佈景資料夾 mybootstrap，下載Bootstrap並且放到佈景資料夾裡頭
(可以參考:Bootstrap介紹)

步驟二:新增index.php 、functions.php、style.css

index.php

<div class="container">

<div class="row">

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<div class="col-md-4">

<div class="thumbnail">

<?php echo get_the_post_thumbnail( $page->ID, 'thumbnail' ); ?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

</div>

</div>

<?php endwhile; ?>

<?php endif; ?>

</div>

</div>

<script src="<?php bloginfo('template_url'); ?>/js/bootstrap.min.js"></script>

 
functions.php (加入以下程式碼，啟動 特色圖片)

<?

if ( function_exists( 'add_theme_support' ) ) {

add_theme_support( 'post-thumbnails' );

}

?>

 
style.css

/*

Theme Name: myboostrap

Theme URI: http://www.raisedigi.com

Description: A Bootstrap Theme

Author: harry

Author URI: http://www.raisedigi.com

Version: 1.0

License:

License URI:

*/

 
現在來看看前台，就可以看到簡單的RWD網站囉