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

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

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

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

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

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

  1. <?php get_header(); ?>
  2. 页面内容
  3. <?php get_sidebar(); ?>
  4. <?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. <?php $my_query = new WP_Query('showposts=1');
  2.   while ($my_query->have_posts()) : $my_query->the_post();
  3.   $do_not_duplicate = $post->ID;?>
  4. 第一篇日志调用(标题,时间,内容等)
  5. <?php endwhile; ?>
  6. <?php query_posts('showposts=6'); ?>
  7. <?php while (have_posts()) : the_post(); if( $post->ID == $do_not_duplicate )  continue;  ?>
  8. 其中的6目的为显示6-1=5,即最近的5篇日志调用(标题,时间,摘要等)
  9. <?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的技巧了。请继续关注教程(三)导航菜单

  • 2007.01.31 01:55, sunny said:

    我也要升级,然后根据教程来折腾下博客,哈哈。。。还有哦,订阅还会让人变懒,只看不留言。。我好像说过一次了,^_^

    [Reply]

    • 2007.01.31 09:25, hhalloyy said:

      谨慎升级!

      [Reply]

      • 2007.02.01 02:10, sunny said:

        试下,你也用了嵌套评论?

        [Reply]

        • 2007.02.01 02:12, sunny said:

          hiahia,果然:)我最开始也选择了这个。后来又觉得嵌套的不好玩,换成现在的了。现在的可以在后台设置回复层级,我设了2层,基本就我自己回复了。

          [Reply]

          • 2008.05.14 10:16, 不好玩 said:

            不好玩

            [Reply]

            • 2008.06.07 13:07, asfsf said:

              你好!

    • 2007.04.01 05:29, 大象 said:

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

      但是我在Front page中找不到这个Home,请问是啥问题啊?

      [Reply]

  • 2007.02.03 05:29, 不让误会 said:

    我想做这样的尝试,自觉对wordpress的积累不够,还没开始!
    关注!

    [Reply]

    • 2007.02.03 09:31, hhalloyy said:

      最好先在本地测试好,调试起来挺麻烦的。

      [Reply]

      • 2007.02.25 17:55, Jaff said:

        我的成功了!谢谢

        [Reply]

  • […] Designing a WordPress Theme From Scratch(想学习 WordPress 主题设计的朋友们必备的教程,最近 E-Space 正在更新 WordPress打造CMS内容管理系统教程 系列文章[1]、[2]、[3]、[4]) […]

    [Reply]

    • 2008.05.14 10:17, 不好玩 said:

      好玩吧

      [Reply]

  • 2007.03.06 02:39, Ed said:

    這個抓取單篇文章,其他五篇文章只列出 title 的作法,我在電腦上 test 正常,但是上傳至 server 就失效了 XD
    正在協尋解決之道…

    [Reply]

    • 2007.03.06 10:07, hhalloyy said:

      失效是显示语法错误,还是只是没有显示应有的内容?
      如果是前者,可能是字符转化的问题,linux下好像是区分大小写什么的,注意下。
      后者的话则检查代码是否正确了。

      [Reply]

  • 2007.03.06 12:26, Ed said:

    自己電腦上測試正常,丟到 server 就沒有顯示內容。不過我已經用另外的 plugin 做出一樣的效果了 @_@

    [Reply]

    • 2007.03.07 01:20, hhalloyy said:

      还有插件?是什么啊?

      [Reply]

  • 2007.03.07 03:17, Ed said:

    前面抓取第一則的方法是用您的,再來抓取後五篇文章 title 我是用 Customizable Post Listings 這 plugin,在裡面設定第一篇略過,就可以做出一樣的效果 @_@

    [Reply]

    • 2007.03.07 13:53, hhalloyy said:

      我以前也用过这个插件,原来是可以设置略过的啊,不错。

      [Reply]

  • 2007.03.12 02:51, Ed said:

    感謝 hhalloyy,的CMS教程,終於製作完畢了,剩下一些小地方要調整而已。

    [Reply]

  • […] WordPress打造CMS教程 (tags: WordPress CMS) […]

    [Reply]

  • 2007.04.01 05:33, 大象 said:

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

    但是我在Front page中找不到这个Home,请问是啥问题啊?(HomeTemp.php 我放在主题的文件夹里面)

    [Reply]

    • 2007.04.01 10:23, hhalloyy said:

      你需要写一个标题为“Home”的Page,内容为空,在右侧页面模板PageTemplate中选择你自己建立的HomeTemp那个。

      [Reply]

      • 2007.04.01 11:18, 大象 said:

        都做了,但是在下拉列表中没有看见 home选项!

        [Reply]

      • 2007.04.01 11:22, 大象 said:

        OK ,有了真是奇怪了。重启了下机器就出现了

        [Reply]

  • […] 原文地址:http://e-spacy.com/blog/973.html […]

    [Reply]

  • […] WordPress打造CMS教程(二):首页模板 […]

    [Reply]

  • 2007.05.02 12:11, 杜罗华 said:

    看了你的Loop代码,我又去Codex上看了看,我不明白的问题是:为什么你把调用的两个Loop写在了一起,是否在一个页面只能调用一次Loop啊?

    [Reply]

    • 2007.05.02 12:41, hhalloyy said:

      我第一个loop是调用最新的一篇日志。第二个loop是调用最近发表的其它5篇日志。如我的Home页面所示。

      可以在一个页面里使用多个Loop调用的。

      [Reply]

  • 2007.05.10 08:32, Smartr.cn said:

    WordPress在CMS中的首页实现…

    在WordPress 2.1后,我们可以方便的利用WordPress自带的功能指定随意的页面作为网站的首页,把自己喜欢的内容或者重要的文章列表什么的放在首页中,方便访客集中浏览。说这就是CMS,内容管…..

    [Reply]

  • 2007.05.10 11:28, 颜色工具大汇集 said:

    […] WordPress打造CMS教程(二):首页模板 at E-space  […]

    [Reply]

  • […] 有两个方法可以解决这个烦人的问题(感觉WordPress团队在WP2.1版本中经常耍小聪明 XD): 一、使用一个独立的首页,只在这个页面中添加“index”,不使用is_home()。具体方法可以参考E-Space的打造CMS教程。 二、使用is_frontpage这个插件,这样就可以准确地取到首页,那一页。 […]

    [Reply]

  • 2007.11.30 13:54, leo said:

    我用的是yo2,上传的是自己下的模板。为什么我在homepage.php里加不上 ,先是自己在机子上修改好,传上去。打开就发现 没有了 template name 这句,传上去后,在线编辑,已更新就又没了。不知道为什么?帮忙解答一下。

    leo’s last blog post..myGOYA:在线桌面

    [Reply]

    • 2007.11.30 14:31, hhalloyy said:

      应该是你没有这个文件的权限,或者说yo2方面有了限制。你问下他们管理员吧。

      [Reply]

  • 2007.12.06 17:01, 黑色饼干 said:

    首页调用的代码还是没搞定,用您的那段代码会提示错误,不知道是不是不能用到2.3.1上

    黑色饼干’s last blog post..深圳各银行年底限制提现!

    [Reply]

    • 2007.12.06 21:00, hhalloyy said:

      当然能用,我现在的wp版本就是2.3.1。是不是复制的代码在引号上有问题?
      寄信给你我的原码看看吧。

      [Reply]

  • 2008.01.23 11:08, moongirl said:

    不错!收藏了!

    moongirl’s last blog post..以往收藏的哲理图片

    [Reply]

  • 2008.02.28 13:40, escapell said:

    写的不错 不过我倒想这样 建立一个模板然后像日志的 index 一样显示最新日志,但是不是所有日志上的都调用光调用一个,比如我建一个english的页面和分类 ,那么这个English的页面只显示English的分类,其他都不显示,而且显示的像日志的index一样 如何调用?

    escapell’s last blog post..小小的梦(关于国旗)

    [Reply]

  • […] 如果在一个页面上显示最近的一篇日志全文和最近的5篇日志摘要也是能做到的,e-spacy写的很详细 代码如下: […]

    [Reply]

  • 2008.03.01 17:07, zEUS. said:

    非常好的方法,谢谢!
    有些问题想请教一下 $my_query 是新建的一个函数?

    [Reply]

  • 2008.03.10 03:10, 黑色饼干 said:

    您好,按您的方法实现了,后5篇摘要,但翻页不起作用了(地址栏显示的页面地址正确,但内容只显示首页的),我用的主题是的Illacrimo,地址http://wp-themes.designdisease.com/free-wordpress-themes/

    黑色饼干’s last blog post..WordPress模板技术手册

    [Reply]

  • 2008.05.14 10:16, 不好玩 said:

    回复一下

    [Reply]

  • 2008.05.14 12:15, ray said:

    [Reply]

  • 2008.05.17 11:12, v.v said:

    用了,分页不起作用,怎么解决啊??

    [Reply]

  • 2008.05.24 15:50, 创业中国 said:

    谢谢。对于新手,不知道修改主题的话有什么好方法没有?还请指教。

    [Reply]

  • […] WordPress打造CMS教程(一):方案设计(续) WordPress打造CMS教程(二):首页模板 WordPress打造CMS教程(三):导航菜单 […]

    [Reply]

  • 2008.07.10 08:00, 快客刷词 said:

    fgh048
    路过看看,不错
    http://www.quicko.cn

    [Reply]

  • 2008.08.06 03:31, qiaoqiao said:

    你好

    [Reply]

  • 2008.08.06 03:31, qiaoqiao said:

    你好!aaa

    [Reply]




*You must say some Chinese, or just copy 你好! as begin.


This blog uses the CommentLuv plugin which will try and parse your sites feed and display a link to your last post, please be patient while it tries to find it for you.
2007-01-30
Home Loans