WordPress打造CMS教程(二):首页模板

转自E-space

教程(一)中讲述了首页和Blog页面的区别和重要性,那么对于大多数的Blog需要自己设计一个包含指定内容的首页,下面来讲述这个首页的制做方法。

WordPress2.1中可以选择一个指定的Page页面来做为wp的首页,这时便需要使用者来自定义一个页面模板。当然如果你选择使用在页面中运行php代码的插件runphp来直接写到Page也可以,不过无故多添一个插件没有什么必要。

首先建立一个php文件,比如起名叫HomeTemp.php,意为首页模板。然后在文件的顶部写上如下代码,其中的Homepage为Page模板的名称,你也可以换成其它名字。

1
2
3
<?php /*
    Template Name: Homepage
*/
?>

之后添加的内容便和你的wp模板中的index.php内容差不多了,格式如下:

1
2
3
4
<?php get_header(); ?>
页面内容
<?php get_sidebar(); ?>
<?php get_footer(); ?>


调用了wp模板的HeaderFooter,来保持样式一致,同时如果是自己定义了和Blog页面不同的边栏则更换sidebar的名称和内容。我的做法是没有调用sidebar,而是直接把内容代码用CSS定义到了边栏。

其中的页面内容则需要按自己的设计来添加了。我的选择是显示最新一片日志和最近5篇日志的摘要,也就是需要两个Loop循环体来调用日志。参考WordPress的支持文档中主循环The Loo的说明,在最下方的Multiple Loops in Action便是如何使用多重循环了。不过在使用这些代码的时候出现了问题,能顺利调用最新的日志,但在最近5篇日志中只显示了第一篇标题,里面也没有内容。看来应该是WordPress2.1的缘故。

无奈下我只能按自己的方法让它显示最新一篇日志,并且在最近的5篇中还重复了那一篇,很不爽,因为同一日志显示了两次。在和Michael探讨后,一致认为很邪门儿,我放弃去做Logo了,他却在坚持不懈,最后告诉我搞定了,在这里万分感谢。(同时我的Logo设计方案也让Since1984给否了,然后我按其意见做了修改,但还是不甚满意,最后还是84亲手给我定制了Log,也万分感谢!!)代码如下:

1
2
3
4
5
6
7
8
9
<?php $my_query = new WP_Query('showposts=1');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID;?>
第一篇日志调用(标题,时间,内容等)
<?php endwhile; ?>
<?php query_posts('showposts=6'); ?>
<?php while (have_posts()) : the_post(); if( $post->ID == $do_not_duplicate )  continue;  ?>
其中的6目的为显示615,即最近的5篇日志调用(标题,时间,摘要等)
<?php endwhile; ?>

现在已经显示了最新一篇日志和5篇日志的摘要了,关于如何显示全文和摘要请参考此文,那么你需要规划你的CSS来配合显示方式,样式,位置,字体等等。在我的首页中还加入了热门日志,这个是在使用WP-PostViews插件后调用的显示次数最多的日志列表。

边栏的About等内容我就是直接把加入了CSS定义的代码写在这个模板文件中,其中的Tag云输出请参考此文:Ultimate Tag Warrior-Tag输出展示简介

如此已经成功做好了自己的首页home页面模板。然后进入WordPress的后台,建立新的Page,在右面的模板选项Page Template里选择刚建立好的“Homepage”,Page Slug填写home好了,然后不用输入任何内容,发布即可。

之后再建立一个新的Page,模板不用换使用默认Template即可,内容为空,Page Slug填写blog,发布。

再来到Options的Reading下,在Front Page的选项里,选择A static Page,在Front page中选择Home,在Posts page中选择blog即可。

现在再回来你的Blog主页,是不是已经显示了你自己定义的home首页了呢?在你的域名后面加上/blog(这里的blog即为上面自己定义的Page Slug),回车后便是你原来的Blog页面了。如此便已经大功告成了!

当然现在你可以需要顶部的导航菜单,或者是想像我一样在首页中同样显示出每篇日志的comment回复数量等等,这些便是wp的技巧了。请继续关注教程(三)导航菜单