欣益奇自媒体一个专
做自媒体运营赚钱的博客

【免费资源】Wordperss布景制作教学系列(三):WordPress布景index.php制作

这次要介绍的是相关index.php的制作,先前如果已经看过基本格局及header.php的介绍,我想接下来这篇你应该也能马上就得心应手,其实布景的教学真的很难写,因此阿汤都是以最入门及基础方式教学,相关更进阶深入的技术,你可能就得靠自己多多摸索啰。

设置index范围:

如同先前在介绍header.php时一样,我们先来设置内容的范围,简单的定义一下区块,比如我将他的div id设置为content。

1: <div id= "content" >
2: </div>

01

在前一篇教学中,我们已经将header定义在980px的宽度,当然index的内容宽度最好也一样,只不过这次我们在margin的部份可以将前面设为15px,表示上下间隔15px才不会太挤。

02

这时我们可以先随意加一点内容到这个div区块里,检视看看有没有正常。

03

加上去之后,你会发现在文字乱跑了,我们不是把他定义在header下方吗?这是因为没有定义高度,导致区块是浮动的,所以会有这样重叠的现象,不过并不是header都适合定义高度,我们可以应用另一种做法,往下来看。

04

我们先在内容与header之间插入一个clear的class区块。

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

05

然后在style.css里增加一行clear的定义如下:

1: .clear{clear:both;}

06

你会发现就正常了,那段css的作用是清除浮动,详细用法及解说可以自行google,阿汤在这里只是用了最简单的方式来将区块正常拼凑上去,往后各位在熟悉css后自行再修改相关内容。

07

设置文章区块范围:

刚刚我们的content设置的范围是包含了文章内容及侧边栏的总宽度,所以我们必须再针对文章的部份再设定一次区块,先加入文章的div区块。

1: <div id= "post" >
2: </div>

08

然后再定义区块的宽度,因为总宽度有980px,你可以自由分配文章区块及侧边栏各要占多少,比如阿汤要让文章680px的宽度,然届时侧边栏就是设定300px的宽度。

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

09

设置文章循环:

在设置好文章区块后,当然就是要让文章可以显示出来,而WordPress的作法就需要利用既有的语法产生回圈让文章显示,所以我们要在post区块里再加入以下内容:

1: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 2:
 3:
4: <?php endwhile;?><?php else : ?>
5: <?php endif; ?>

主要作用是判断目前的页面有没有文章,如果有的话就会显示相关内容,而这些相关内容包含文章标题、日期、作者、内容、分类及标签等等,我们必须再各别设置他,往下我们继续来看。

10

读取文章标题及内容:

因为章是循环的,一页里可以显示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是指该连结。

11

然后我们可以再简单的定义一下文章部份的css,比如让每篇文章间隔15px,再让标题的文章大一点,设定为18px,并与内容间隔10px:

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

12

完成后就像这样。

13

加入作者与日期:

在经过前面的一些内容之后,相信你对于加入区块已经愈来愈熟悉,没错,当我们需要一个新的内容时,基本上都会再去定义一个新的区块,方便我们使用,这次我们是要加入作者与日期,比如我想加在标题底下,那我就在标题区块下加入,比如我加入一个区块是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>

14

然后我们一样稍微定义一下meta及span的css语法,因为meta只是基本资讯,我们可以让他字小一点点。

1: .meta{margin-bottom:10px;}
2: .meta span{font-size:13px;}

15

加入分类与标签:

分类与标签的区块加入方式和前一个加入作者与日期是大同小异的,一样先加入一个区块后,在里面应用分类及标签的呼叫语法。

1: <div class = "meta2" >
2: <span>分类:<?php the_category( ',' ) ?></span>
3: <span>标签:<?php the_tags( '' , ', ' , '' );?></span>
4: </div>

16

然后一样定义css,这就不再解说。

17

完成后就像这样啰。

18

到这边为止,index.php其实还没有完成,因为还有侧边栏及底部,不过那是另外的教程,在下一次我们就会介绍到sidebar.php这一区块,index.php就到这边告一段落,大家赶紧动手吧。

赞(0) 打赏
本文由欣益奇自媒体整理来源于网络,版权归原作者所有,若有不妥之处请联系处理。!欣益奇自媒体 » 【免费资源】Wordperss布景制作教学系列(三):WordPress布景index.php制作
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

欣益奇自媒体|一个专做自媒体运营赚钱的博客

欣益奇自媒体

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏