- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
通过前面几章的制作,我们已经为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就会好的。这个放到模板完后我们再进行。