Wordperss佈景製作教學系列(三)：WordPress佈景index.php製作

我相信很多人心裡都已經在譙阿湯，因為從上一篇後就已經中斷相當長的一段的時間，只能說聲抱歉，這次要介紹的是相關index.php的製作，先前如果已經看過基本格局及header.php的介紹，我想接下來這篇你應該也能馬上就得心應手，其實佈景的教學真的很難寫，因此阿湯都是以最入門及基礎方式教學，相關更進階深入的技術，你可能就得靠自己多多摸索囉。



如果你是突然看這篇的朋友，建議可以往前先回顧這系列的前文。

Wordperss佈景製作教學系列：

• (一)：WordPress佈景基本格局設置


• (二)：WordPress佈景header.php製作


• (三)：WordPress佈景index.php製作(本篇)


• (四)：WordPress佈景sidebar.php製作


• (五)：WordPress佈景footer.php製作


• (六)：WordPress佈景single.php製作


• (七)：WordPress佈景分頁導覽製作

設置index範圍：

如同先前在介紹header.php時一樣，我們先來設置內容的範圍，簡單的定義一下區塊，比如我將他的div id設置為content。

 1: <div id="content">

 2: </div>

在前一篇教學中，我們已經將header定義在980px的寬度，當然index的內容寬度最好也一樣，只不過這次我們在margin的部份可以將前面設為15px，表示上下間隔15px才不會太擠。



這時我們可以先隨意加一點內容到這個div區塊裡，檢視看看有沒有正常。



加上去之後，你會發現在文字亂跑了，我們不是把他定義在header下方嗎？這是因為沒有定義高度，導致區塊是浮動的，所以會有這樣重疊的現象，不過並不是header都適合定義高度，我們可以應用另一種做法，往下來看。



我們先在內容與header之間插入一個clear的class區塊。

 1: <div class="clear"></div>

然後在style.css裡增加一行clear的定義如下：

 1: .clear{clear:both;}

你會發現就正常了，那段css的作用是清除浮動，詳細用法及解說可以自行google，阿湯在這裡只是用了最簡單的方式來將區塊正常拼湊上去，往後各位在熟悉css後自行再修改相關內容。

設置文章區塊範圍：

剛剛我們的content設置的範圍是包含了文章內容及側邊欄的總寬度，所以我們必須再針對文章的部份再設定一次區塊，先加入文章的div區塊。

 1: <div id="post">

 2: </div>

然後再定義區塊的寬度，因為總寬度有980px，你可以自由分配文章區塊及側邊欄各要佔多少，比如阿湯要讓文章680px的寬度，然屆時側邊欄就是設定300px的寬度。

 1: #post{width:680px;float:left;}

設置文章循環：

在設置好文章區塊後，當然就是要讓文章可以顯示出來，而WordPress的作法就需要利用既有的語法產生迴圈讓文章顯示，所以我們要在post區塊裡再加入以下內容：

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

 2:

 3:

 4: <?php endwhile;?><?php else: ?>

 5: <?php endif; ?>

主要作用是判斷目前的頁面有沒有文章，如果有的話就會顯示相關內容，而這些相關內容包含文章標題、日期、作者、內容、分類及標籤等等，我們必須再各別設置他，往下我們繼續來看。

讀取文章標題及內容：

因為章是循環的，一頁裡可以顯示3篇、5篇或是10篇，所以當我們在定義區塊時必須使用「class」，這在之前已經有提過，所以我們先在迴圈加上區塊後，加入文章標題語法及內容的語法：

 1: <div class="article">

 2: <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

 3: <?php the_content( ) ;?>

 4: </div>

the_title是指讀取文章標題，the_content則是該文章內容，而在標題用a連結包覆的the_permalink是指該連結。



然後我們可以再簡單的定義一下文章部份的css，比如讓每篇文章間隔15px，再讓標題的文章大一點，設定為18px，並與內容間隔10px：

 1: .article {margin-bottom:15px;}

 2: .article h2{font-size:18px;margin-bottom:10px;}

完成後就像這樣。

加入作者與日期：

在經過前面的一些內容之後，相信你對於加入區塊已經愈來愈熟悉，沒錯，當我們需要一個新的內容時，基本上都會再去定義一個新的區塊，方便我們使用，這次我們是要加入作者與日期，比如我想加在標題底下，那我就在標題區塊下加入，比如我加入一個區塊是meta，然後再加入二個span分別是作者及時間的語法，div與span有何不同請參考：這裡

 1: <div class="meta">

 2: <span><?php the_author() ;?></span>

 3: <span><?php the_time('Y/m/d') ;?></span>

 4: </div>

然後我們一樣稍微定義一下meta及span的css語法，因為meta只是基本資訊，我們可以讓他字小一點點。

 1: .meta{margin-bottom:10px;}

 2: .meta span{font-size:13px;}

加入分類與標籤：

分類與標籤的區塊加入方式和前一個加入作者與日期是大同小異的，一樣先加入一個區塊後，在裡面應用分類及標籤的呼叫語法。

 1: <div class="meta2">

 2: <span>分類：<?php the_category(',') ?></span>

 3: <span>標籤：<?php the_tags('', ', ', '');?></span>

 4: </div>

然後一樣定義css，這就不再解說。



完成後就像這樣囉。



到這邊為止，index.php其實還沒有完成，因為還有側邊欄及底部，不過那是另外的教程，在下一次我們就會介紹到sidebar.php這一區塊，index.php就到這邊告一段落，大家趕緊動手吧。