看了佈景主題教學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網站囉