首页 » WordPress 主题 » WP Theme 教程 #14:底部和拆分 Index

WP Theme 教程 #14:底部和拆分 Index

July 9th, 2007 at 10:57pm 雪山飞猪 浏览: 4,498

这篇,我们完成样式化和开始把 index.php 文件分成多个小文件。在这篇中,你可能先需要 style.css 文件,然后你将把 index.php 分成一些新的文件。

打开 Xampp,主题文件夹,Firefox,IE,index.php 和 style.css。

第1步

footer DIV 增加 10px 顶部填充。你还记得如何增加填充?我这次不给你代码了.

第2步

给 footer 里的所有的 P 标签 18px 行距。那是 #footer p{}.。(今天关于 CSS 的就这么多。)

第3步

  • 创建一个新文件,把它命名为 header.php。确认是 PHP 文件而不是文本文档。
  • index.php 文件中,把 header DIV 上面所有东西都拷贝到 header.php 文件中。

create-headerphp.gif

copy-header.gif

这是我的 header.php 文件。不要从我的这里拷贝,从你自己的 index.php 文件拷贝。

第4步

为了使所有的东西从 index.php 中拷出的东西依然在 index.php 文件中,输入以下代码:

<?php get_header(); ?>

get-header.gif

这是个 WordPress 主题系统特别用来包含 header.php 文件的函数,而不用使用:<?php include (TEMPLATEPATH . ‘/header.php’); ?>.

保存并刷新浏览器,你应该看到没有变化。如果你的改变破坏了主题,那么肯定有错误。

第4步

  • 和第4步一样,更多相同的事情。这次,创建 sidebar.php 文件。
  • index.php 文件中的 Sidebar DIV 开始到结尾都拷贝到 sidebar.php 文件中。
  • 那么,在 index.php 文件,取代为:<?php get_sidebar(); ?>.
  • 保存并刷新浏览器,再一次,你应该看到没有变化。
  • 这是我的 sidebar.php 文件。

get-sidebar.gif

第5步

  • footer.php 重复上面的步骤。
  • 这是我的 footer.php 文件。

get-footer.gif

教程回顾

  • 你创建了三个新文件:header.phpsidebar.phpfooter.php
  • 你学到了三个新的函数:get_header()get_sidebar()get_footer()
  • 下面是这节课结束之后的文件:indexstyleheadersidebarfooter。不要拷贝并使用它们取代你自己打。如果有错误或者你的主题没有显示正确,在和我的代码对照检查下。

下一篇:WP Theme 教程 #15:子模板文件

请查看教程目录:WordPress 主题教程系列

翻译自:WP Theme Lesson #14: Footer and Dividing Index

创建 WordPress 主题系列教程均为本站翻译,如要转载,请注明:转载自我爱水煮鱼和本文地址。

作者:雪山飞猪
原文链接:WP Theme 教程 #14:底部和拆分 Index
我爱水煮鱼版权所有,转载时必须以链接形式注明作者和原始出处及本声明。

标签:

17fav 收藏本文

PR: 0 / del.ici.ous it / Technorati: 2

19 条评论 添加你的评论

  • 1. kendy  |  July 19th, 2007 at 11:23 am

    终于快看完了,休息一下
    现在对wp模版有点印象了
    继续学习。。。。

    [回复该留言]

  • 2. 雪山飞猪  |  July 19th, 2007 at 11:32 am

    呵呵,加油,我还在修正中,你发现有什么问题给我留言

    [回复该留言]

  • 3. noir  |  September 1st, 2007 at 9:07 pm

    翻译这么多内容辛苦了。
    但是这句:
    (You’re done with style.css for today.)
    (你已经在 style.css 中完成它。)

    感觉这句应该翻译为今天关于css的就这么多。意思是今天接下来的内容不再有涉及css的了。

    [回复该留言]

  • 4. 雪山飞猪  |  September 1st, 2007 at 9:28 pm

    @ noir,谢谢,确实你的翻译好很多,按照你的翻译修改了,哈哈

    [回复该留言]

  • 5. paopao  |  September 2nd, 2007 at 1:05 am

    怪不得在饭否上看到New Blog Post: WP Theme 教程 #14,原来修改了日志fanfou-tool也会在饭否上发出来的

    [回复该留言]

  • 6. 世纪大厦  |  September 10th, 2007 at 2:18 am

    很好的教程,我收藏了,准备这两天搞定:)
    多谢“鱼兄”。

    在此节,我认为把“拷贝”翻译为“剪切”可能更合适:)

    [回复该留言]

  • 7. 黑色饼干  |  December 7th, 2007 at 10:21 pm

    header部份放在index.php里没问题,放到header.php,再用调用到index.php到时出现页面错乱:container的内容跑到右边,sider跑到左边了…

    [回复该留言]

    JxmoonBlog reply on April 5, 2008:

    你是不是加了这个
    table #wp-calendar{
    width: 100%;
    }

    请注意到table和#必须要一个空格,否则在IE会错位.

    [回复该留言]

  • 8. Js  |  January 4th, 2008 at 9:32 pm

    和楼上的问题一样,页面错位了.

    [回复该留言]

    雪山飞猪 reply on January 4, 2008:

    修改下CSS。

    [回复该留言]

  • 9. Js  |  January 5th, 2008 at 2:19 pm

    谢谢飞猪.
    把侧栏改小了,就不会错位了.但不知为何原因.
    对了.这篇文章重复了一个”第4步”…

    [回复该留言]

    雪山飞猪 reply on January 7, 2008:

    好像是的,算了不改了!

    [回复该留言]

  • 10. cadmuxe  |  January 19th, 2008 at 7:53 pm

    飞猪我想问一下,把内容分开后,还用在其它文件中加入其它东西么?比如”
    “之类的东西?
    我看到的workpress的默认主题的各种文件中都有这些东西

    [回复该留言]

  • 11. cadmuxe  |  January 19th, 2008 at 7:54 pm

    怎么打的东西没显示阿。。
    我打得是所有网页开头的那些东西

    [回复该留言]

  • 12. cadmuxe  |  January 19th, 2008 at 7:59 pm

    不好意思,看明白了,现在清楚怎么弄了。。。。

    [回复该留言]

  • 13. bill  |  January 28th, 2008 at 11:31 am

    鱼老大,图片显示不了了哦……
    还在努力学习中,不错的教程。

    [回复该留言]

  • 14. bill  |  January 28th, 2008 at 11:32 am

    哇哈哈,飞猪老大,一不小心叫错了,成了鱼老大,不要介意……嘻嘻

    [回复该留言]

  • 15. 胡戈戈  |  January 31st, 2008 at 11:37 am

    图片看不到了

    [回复该留言]

  • 16. Lean  |  June 13th, 2008 at 6:54 am

    谢谢你的教程!
    阁下请看,时至今日,依然有很多人从这里受益匪浅!

    [回复该留言]

发表评论

必须

必填,打死不公开

:mrgreen: :neutral: :twisted: :arrow: :shock: :smile: :???: :cool: :evil: :grin: :idea: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: :!: :?:

10 个步骤把 WordPress 打造成 Web 2.0 门户 海盗电影的巅峰之作 - 加勒比海盗


强烈推荐

PureCSS WordPress Theme 长期承接 WordPress 项目

订阅

本站推荐

分类

赞助商