【設計篇】WordPress 雙欄式 Blog 版型建構方法

WordPress 通常作為Blog 來設計的會以兩欄設計，這是最基礎的 Blog 版型結構模式，做為這種規劃時左欄做為文章內容欄，右欄則為側邊欄，以這樣的基礎規劃作為本次的版型設計教學。

首先，如果首頁 index.php 要以不同的樣貌呈現，可以不考慮用兩欄的形式作為基底，只需要考慮內頁 single.php （或者其他頁面）的呈現，如果真的很懶得用的話，可以考慮所有頁面都一致為同樣兩欄設計，在此先用 single.php 教學。

先在 single.php 內加入 CSS 類別 <article> ，分別建立一個名為 container 最外層為 100% 大小的版面，為了版型底色、留白所以必需要加入寬度 100% 這項類別，再加入一個 content 控制雙欄版面大小，我們先設為 1200px

<article id="container">
<article id="content">

....

</article>
</article>

在 style.css 內加入語法。

#container {
width:100%;
}

#content{
width:1200px;
margin:0px auto;
}

完整語法：

<?php get_header(); ?>
<article id="container">
<article id="content">
<?php the_title(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php get_sidebar(); ?>
</article>
</article>
<?php get_footer(); ?>

然後再加入左欄及右欄的的語法。

<article class="article">
.... 左欄
</article>

<aside class="sidebar">
.... 右欄
</aside>

在 style.css 內加入語法。

.article {
	float: left;
	width: 69%;
	max-width: 730px;
}

.sidebar {
	float: right;
	width: 31%;
	max-width: 315px;
}

完整語法：

<?php get_header(); ?>
<article id="container">
<article id="content">
<article class="article">
<?php the_title(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php comments_template(); ?>
<?php endwhile; ?>
</article>
<aside class="sidebar">
<?php get_sidebar(); ?>
</aside>
</article>
</article>
<?php get_footer(); ?>