2,304 人查看过本文  1 条留言  发布日期:2007年07月20日   文章位于: WP相关  

wordpress主题模版制作教程(一)

本教程学习于我爱水煮鱼的翻译文章,经过整理而成。经作者同意,发表在我的网站上,供热爱制作WP模版的朋友们参考。

学习本教程,需要:

  1. 对PHP,WP,CSS,PS有一定的基础,懂得初步的应用。
  2. 你是一个想要表现自己的家伙,并且不想再使用别人制作的主题。
  3. 你要有耐心,细心,细心,耐心

WP 主题简介

在详细分解代码之前,我们还是要先了解一下WP主题的大致情况。一个 WP 的主题是由几个 templates 文件组成的,每一个主题必有的二个文件是:index.php 和 style.css,除此之外还有一些其它的文件(不是必须),它们和 index.php 文件间存在优先级关系,如果它们存在,WP 模板系统就会调用它们显示相应的页面,否则模板系统会调用 index.php 来显示。

它们有可能是以下文件:

  • single.php – 单一日志文件,用于显示单一日志
  • page.php — 页面模板文件,用于显示静态页面
  • archive.php — 存档文件,用于显示存档页面
  • category.php — 类别文件,用于显示类别页面
  • search.php — 搜索文件,用于显示搜索结果
  • 404.php — 错误文件,用于显示404页面
  • comments.php — 评论文件,用于显示评论和评论框

index.php

首先制作index.php,我们知道在一个网页中,代码主要分为二部分,一个是页头信息,一个是页面内容。
<html>
<head>
………页头信息
</head>
<body>
………页面内容
</body>
</html>
每个主题的页头信息都是几乎一样,具体可以查看默认模板的 header.php 文件(为保证所有页面的页头信息的一致性,所有页头信息都放在 header.php 文件)。


接下来我们谈下一话题,关于母猪的产后护理……(我学的太杂了,都弄混了)
我们来谈一下body中的内容。它包含四个部分,每一部分都可以叫做一个集成模块,其实一个主题就是由不同的模块构成,模块又是由不同的模块构成。

  • header  WP 的顶部,显示博客的名字与描述,放置导航栏,搜索栏等等。 
  • content  WP 的正文部分,显示贴子的内容,作者,时间,分类,评论,编辑等等。
  • sidebar  WP 的侧边栏部分。
  • footer   WP 的尾部,这部分只有很少的内容,通常是版权信息。

对于每一个集成模块中的内容,理论上是可以随意放置的,比如我们可以把header模块中的搜索栏放在sidebar模块中去。那如何区分这四个集成模块呢?看以下代码。
<div id=”header”>
 这是我的博客名字
</div>
<div id=”content”>
 这是我写的贴子
</div>
<div id=”sidebar”>
 友情链接,搜索栏
</div>
<div id=”footer”>
 版权所有:我是二道
</div> 
通过div标签,我们可以把这些个模块分隔开来。
现在开始我们第一部分的代码块,不过在写代码之前我还得要啰嗦一句,这不是我说的,是我爱水煮鱼说的,写代码要有层次感,要记得使用缩进,缩进不是空格,不是用你键盘上最长的那个键,而是TAB这个键。

header

<div id=”header”>
         <h1><a href=”<?php bloginfo(‘url’);?>”><?php bloginfo(‘name’);?></a></h1>
         <?php bloginfo(‘description’);?>
</div> 
id是div的一个属性,为id赋于不同的值,这样就可以区分每一个div代码段。 
bloginfo()是WP中定义好的函数,参数url代表网址,参数name代表网站的名字,参数description代表对网站的自我描述。
在上面的代码中,就是为网站的名字加上一个超链接,并且显示描述。
这一部份代码也是存放于header.php文件中,在index.php文件中只要用一行代码就可以调用到
<?php get_header(); ?>
这样的好处是,你只要修改一下header.php文件,所有调用这个文件的页面都会跟随改变,而不用一个一个地去修改了。

相关文章

此文章有 1 条留言

  1. [...] erdaoo 学习本站的 WP Theme 教程之后的学习笔记整理,经本站整理,erdaoo 本人同意之后在本站发表,以便给更多学习 WP Theme [...]

发表评论

(例如:http://erdaoo.cn)