欣益奇自媒体这次要介绍的是相关index.php的制作，先前如果已经看过基本格局及header.php的介绍，我想接下来这篇你应该也能马上就得心应手，其实布景的教学真的很难写，因此阿汤都是以最入门及基础方式教学，相关更进阶深入的技术，你可能就得靠自己多多摸索啰。
设置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就到这边告一段落，大家赶紧动手吧。
