wordpress CMS主题 微信
Home > 网站建设 > WordPress主题index.php制作

WordPress主题index.php制作

高时银博客 网站建设 点击: 911 次 0 0

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

如果你是突然看这篇的朋友,建议可以往前先回顾这系列的前文。

设置index范围:

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

 1: <div id="content">

 2: </div>

WordPress主题index.php制作

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

WordPress主题index.php制作

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

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

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

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

WordPress主题index.php制作

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

 1: .clear{clear:both;}

WordPress主题index.php制作

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

设置文章区块範围:

WordPress主题index.php制作

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

 1: <div id="post">

 2: </div>

WordPress主题index.php制作

然后再定义区块的宽度,因为总宽度有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;}

WordPress主题index.php制作

加入作者与日期:

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

WordPress主题index.php制作

然后我们一样稍微定义一下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,这就不再解说。
WordPress主题index.php制作

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


文章作者:高时银博客
本文地址:http://wanlimm.com/77201505143831.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

目前还没有评论。赶快来坐沙发吧。

发表评论