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就到這邊告一段落，大家趕緊動手吧。
Leave A Comment
下載最新的Wordpress
13 Comments
阿湯哥，我用您的原始模板建立，請問為什麼index.php和single.php一直載不進去....
[…] 來源： Wordperss佈景製作教學系列(三)：WordPress佈景index.php製作 | WordPress筆記本 […]
我喜歡^^ 讚！
阿湯站長的教學，真是一個踏入 WordPress 的好地方
不客氣，加油
讀取文章標題及內容
程式碼 第二行 最後 h2> 應該是吧
已修改
我加入這段程式碼後
1:
2: 分類：
3: 標籤：
4:
裡面的分類和標籤兩個字變成亂碼了，有沒有什麼解決的辦法?
編碼改成 UTF-8
檔案的編碼
嗯嗯我懂了 謝謝你
不客氣
可以請問阿湯哥一個問題嗎?
這一段程式碼難道不能直接寫這樣嗎?
我一直很好奇這個部分
如果寫
意思就是如果if的條件符合就執行while迴圈
可是while在執行時會再一次檢查have_posts()傳回值是否為true
如果為true再進行the_post()
這樣不是重覆兩次了嗎??
最近剛學php
不知道是不是我理解錯誤
如果是 還煩請阿湯哥指點迷津
其實是可以～我只是將能用的先都寫上去
一般來說，還可以拆成
if
XXX
while
XXX
else
XXX
end
這樣不知道你有沒看懂意思