制作wordpress主题教程(8)：index.php首页文件

通过前面几章的制作，我们已经为wanlimm主题添加了header.php、sidebar.php、fooder.php文件，这几个都是一个网面中的几个部件，将它们拼起来就是一个完整的网页。今天，我们就将网页首页index.php制作起来。也许你要问了，我们前面不是已创建了index.php文件了吗？是的，我们是创建了，但是，它还是一个空白的文件，没有任何内容，也就是说我们的网站首页还是空白的，本章我们是要为它添加内容代码。

首先，通过dreamweaver打开index.php文件，然后在其中添加如下代码：

<?php get_header(); ?><!-- 加载头部文件 header.php文件-->
<!-- 首页文章列表开始 -->
-----------首页文章列表----------
<!-- 首页文章列表结束 -->
<?php get_sidebar(); ?><!-- 加载侧边栏 sidebar.php 文件 -->
<?php get_footer(); ?><!-- 加载底部  footer.php 文件-->

通过上面的代码，我们就通过前面我们创建的几个文件将首页找成，完成首页基本布局。

接下来，我们为首页添加首页文件列表代码，将上面的“   -----------首页文章列表---------- ”替换成下面的代码：

<div class="content"> <!-- #content -->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2><!-- 文章标题 -->
<div class="info">
<span class="categories"><?php the_category(','); ?></span><!-- 文章分类 -->
<span class="tags"><?php the_tags('', ', ', ''); ?></span><!-- 文章标签 -->
<span class="times"><?php the_time('Y年n月j日') ?> </span> <!-- 时间 -->
</div>
<div class="intro">
<?php echo dm_strimwidth(strip_tags($post->post_content),0,60,"..."); //文章摘要 ?>
</div>
</div>
<?php endwhile;else : ?>
<div class="errorbox">
目前没有文章。
</div>
<?php endif; ?>
</div><!-- #content -->

通过上面的代码就会在首页输出网站的文件列表。上面的代码中的文章摘要部分我们用到了dm_strimwidth()函数，这是一个截取字段函数，上面的那句代码意思是截取文章的60个字的摘要。这个函数要我们创建，我们在主题的functions.php文件中添加这个函数，代码如下：

//截字
function dm_strimwidth($str ,$start , $width ,$trimmarker ){$output = preg_replace('/^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$start.'}((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$width.'}).*/s','\1',$str); return $output.$trimmarker;};

当然，我们也可以用the_content()函数和the_excerpt()函数，但the_content()是输出文章全文，而the_excerpt()函数主要是针对英文的，而且是要在发表文章时添加摘要。这个根据自己的需要来使用吧。

好了，主题首页就制作好了。打开网站首页看一下它的效果吧，如下图：

因为还没有设置CSS样式，所以，现在的布局还是乱的，这人等我们设置好了CSS就会好的。这个放到模板完后我们再进行。