你应该知道：

• 没有合适的方法在comments.php文件中放置评论模板
• 大部分的WordPress设计者都会使用WordPress默认主题Kubrick中的默认评论模板
• 有些设计者修改了默认的评论模板以适应自己的需求
• 你将会使用我对默认评论模板进行修改后的版本

第一步

• 新建文件：comments.php
• 将我的comments.txt中的内容复制黏贴到你的comments.php文件中
• 保存comments.php文件

第二步

• 将我的comments-template-css文件中的内容复制到你的style.css文件中
• 将它放在你的style.css文件的最后或者放在#footer的上面

第三步

在single.php文件的entry DIV的下面输入以下的代码：

<div class=”comments-template”>
     <?php comments_template(); ?>
</div>

comments_template()函数是用来调用comments.php文件中的评论模板的，comments.php文件根据模板（或者代码）来展示评论列表。列表中的每一项都是一个评论。

你也可以使用page.php文件中的comments_template()函数来允许读者给页面留言。做不做都由你而定，如果你想这样做的话，就对page.php文件重复步骤3.

第四步

步骤4是用来验证你的代码，但是也可以不进行这一步因为你正在使用的默认评论模板是我已经整理并且修改过的版本，我已经帮你验证过了。

验证你的代码：

• 点击浏览器的”查看” –> “页面源代码”。
• 复制所有的源码
• 转到验证页面
• 在Direct Input框内黏贴你的代码
• 点击Check

作为以后的参考（当你创建自己的主题和评论模板时），下面是需要验证的页面：

• 首页(Home page)
• 存档页(Archive pages)
• 分类页(Category pages)(如果你自定义了分类页)
• 搜索结果页(Search result pages)
• 静态页面(Pages)(例如：About页面)
• 单篇文章页面(Single post view page)
• 无评论的单篇文章页面(Single post with no comments)
• 有评论的单篇文章页面(Single post with comments)
• 含必须的登录信息的单篇文章页面(Single post with must login message)
• 不含需要的登录信息的单篇文章页面(Single post with no login required message)
• 有评论且有密码保护的单篇文章页面(Password protected single post with comments)

有关评论模板的进一步解释

• 评论模板从基本上说是一个有序列表，而不是无序列表，虽然它们的工作方式相同。无序列表是以圆点列表方式组织的，而有序列表则是以数字列表组织的（每个列表项都有一个数字，从1开始）。
• 在single.php文件中，你用一个class等于comments-template的DIV裹住comments_template()函数，现在你的评论模板就是一个DIV里的有序列表了。

如果你给你的文章设置了密码保护，你的评论选项也被密码保护了：

你正在使用的评论模板的修改版本有一个H2子标题写着Password Protected。默认的评论模板没有这个。

下面是评论列表的组成：

下面是上面的那些代码的作用：

comment_text()函数是用来调用每一个评论的。

评论模板里的CSS代码的意思我就不解释了，不像comments.php文件中的代码，你可以随意改动这些CSS代码而不会破坏评论模板。你自己研究这些CSS代码并且修改它们比从我这儿读那些解释要有用的多。

猜猜接下来还有什么？今天没有本节回顾了，你已经完成了主题教程的所有内容了。

返回WordPress主题系列教程的开始

既然昨天就已经将index.php文件拆分了，那今天的内容就变得更加简单了。

第一步

在进行这一步之前，先看一下的侧边栏，点击一下存档链接，跳转的页面应该跟你的首页没有任何不同吧？

• 新建一个新文件：archive.php
• 将index.php文件中的所有内容都复制黏贴到archive.php文件中
• 保存archive.php文件
• 在archive.php文件中，将the_content改为the_excerpt
• 再次保存archive.php文件

你通过新建archive.php文件并且改变它的内容使其与index.php文件不同来自定义存档页面的外观

现在，如果你刷新你的存档页面，你只会得到摘要而不是全部的文章内容。

为什么你想这么做？为了避免因为你的博客有重复内容而受到Google的不利对待。如果一个存档页面和首页显示的内容相同，那么这就是重复内容。

如果你的博客是私有的呢？那么就没有必要将存档页面和首页分开了，但是这也并不是说摘要对于私有博客没有什么用处。

同样的，默认情况下，你的分类页面也会从archive.php文件中寻找信息来展示它的内容，如果你没有archive.php文件，分类页面就会找index.php文件中的信息。

如果你想让你的分类页面看起来和首页还有存档页面不同，那么就新建一个category.php文件并且自定义它。

第二步

• 新建文件：search.php
• 将archive.php文件中的所有内容都复制黏贴到search.php文件中
• 保存你刚刚做的修改

现在，所有的搜索结果都会以摘要的形式展示了，如果没有search.php模板文件，搜索选项就会在index.php寻找怎样展示搜索结果的信息。

（可选的）你也可以到第一节去回顾一下层次结构。

第三步

• 新建两个文件：page.php和single.php
• 将index.php文件中的所有内容都复制黏贴到page.php文件和single.php文件中。（此时，page和single应该是相同的）
• 保存page.php和single.php，关闭index.php文件和single.php文件

第四步

还记得Page和page是不同的吧？page.php模板就是用来自定义那么特殊的Pages(单个独立的页面，就像你的“关于”页面)的外观的。

首先，在page.php文件中的<?php the_content(); ?>的下面输入以下代码：
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
和
<?php edit_post_link(‘Edit’, ‘<p>’, ‘</p>’); ?>

其次，从page.php文件中删除postmetadata代码，下面是没有postmetadata后的代码的样子：

最后，从page.php中删除posts_nav_link()或者导航模块的内容。

刚刚发生了什么事情？

第一行代码是用来显示子页面的链接的。

例如，编辑你的“关于”页面。根据我下面的截图来看要加什么。

当你不得不将你的一个很长的页面拆分为很多页面的时候，这就非常有用了。

对于第二行代码，它是只针对管理员的编辑链接。

你的页面是没有分类的，同时你也不想显示它们的时间戳（页面创建时间等信息），所以你将postmetadata删除了。同时你也把posts_nav_link()删除了，是因为Page页面不用显示下一页和前一页链接。

保存page.php文件然后关闭 。

第五步

点击一篇文章的标题来查看剩下的文章内容就会跳转到单篇文章的页面。Single.php模板就是用来处理特定某篇文章的外观的。

在single.php文件中的<?php the_content() ?>下面输入以下代码：
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

对，这和子页面链接的代码是一样的。你知道其实你也可以将文章拆分为很多个子文章吗？

然后，在postmetadata模块，删除<?php comments_popup_link(); ?>函数和它前面的<br />标签，但是不要将整个postmetadata都删除了。

你删除了评论链接函数因为在单篇文章中它没有用了，所以在single.php文件中不没有必要留着它。在BR标签后只有管理员能看到的编辑链接了，你不想给只有你能看到的链接换行吧？所以你把BR标签删除了。

最后，用下面的代码替换<?php posts_nav_link(); ?>：
<?php previous_post_link(‘&laquo; %link’) ?> <?php next_post_link(‘ %link &raquo;’) ?>

在首页、存档页、分类页面和搜索页面，你用posts_nav_link()函数来调用下一页和前一页链接，在单篇文章页面，没有下一页和前一页链接，你通过previous_post_link()和next_post_link()函数来调用前一篇文章链接和下一篇文章链接。

保存single.php文件，到单篇文章页面的导航区去看一下有什么不同了。

本节回顾

• 你新建了四个文件或者说子模板：archive.php、search.php、page.php和single.php文件
• archive.php模板和search.php的内容是一样的
• 独立的页面(Pages)没有分类（和文章不同）。它们也没有下一页和前一页链接
• ingle.php不会显示评论的数量（通过comments_popup_link()函数调用）也不是通过posts_nav_link()调用导航链接的。

返回WordPress主题系列教程的开始

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

第一步

给footer DIV添加一个10像素的顶部内边距，还记得怎样添加内边距吧？这次我不会给你代码了哦。

第二步

给页脚(footer)中的P标签添加一个18像素的行高，就是#footer p{}。(今天有关style.css文件的内容就结束了。)

第三步

• 新建一个名为header.php的文件，要确保新建的是php文件而不是文本文档。
• 将index.php文件中的header DIV结束的</div>以上的所有的内容复制黏贴到header.php文件中。

链接里是我的header.php文件，不要复制黏贴我的文件，要从你的index.php文件中复制黏贴。

第四步

将刚才你在index.php文件中复制的那些内容用<?php get_header(); ?>代替。

<?php get_header(); ?>是WordPress主题系统中包含header.php文件的一个函数，而不需要使用<?php include (TEMPLATEPATH . ‘/header.php’); ?>了。

保存文件然后刷新浏览器，你不会看到任何变化，如果你的主题看起来不完整了那就说明中间出现错误了。

第四步

• 第四步和第三步很相似，这次新建的是sidebar.php文件。
• 将Sidebar DIV里的所有内容都复制黏贴到sidebar.php文件中。
• 然后在index.php文件中将上面复制的内容替换为<?php get_sidebar(); ?>
• 保存文件然后刷新页面，这次你也不会看到任何变化。
• 链接里是我的sidebar.php文件。

第五步

• 对于footer.php文件也重复上面的步骤。
• 链接里是我的footer.php文件。

本节回顾

• 你新建了三个新文件：header.php、sidebar.php和footer.php。
• 你学到了三个新的函数：get_header()、get_sidebar()和get_footer()。
• 在本节的结束部分，我链接上我的所有的文件：index、style、header、sidebar和footer。

不要复制我的代码也不要用我的文件替代你的文件，如果你的主题出现错误或者主题没有正确的显示，你可以对照我的文件来检查你的代码。

返回WordPress主题系列教程的开始

今天你也不需要index.php文件，打开Xampp、主题文件夹、Firefox、IE和style.css文件。

第一步

在.sidebar{}下面输入下面的代码：

.sidebar ul{
       list-style-type:none;
       margin:0;
       padding:0 10px 0 10px;
}

现在你已经样式化Sidebar的父无序列表(UL)了，所有的子UL都会继承这样的样式。在本例中，样式是列表类型为无，外边距为0，左右两边各有10像素的内边距。
例如：

第二级的UL继承了第一级UL的样式，如果你给第一级的UL加上边框，那么第二级的UL也会有一个边框。

保存文件然后刷新页面，你会发现列表项前面的黑点不见了。

注意你是怎样给顶部和底部添加内边距的。

第二步

在.sidebar ul{}的下面输入下面的代码：

.sidebar ul li{
       padding:10px 0 10px 0;
}

现在的内边距如下图所示：

为什么不在.sidebar ul{}里加上10像素的上下内边距呢？你需要区分开每一个LI，在没有给.sidebar ul li{}添加内边距之前，搜索表单和日历之间没有任何间距，日历和页面链接之间也没有任何间距，.sidebar ul li{}里面的10像素上下内边距就是给两块之间加上一个间距。如果UL标签有四个方向的内边距而不是只有左右两内边距的话，最后的结果就是UL里的LI被一个20像素的上下内边距区分开了，知道我想表达的意思了吗？

如果你还没有理解，那么就去.sidebar ul{}里加上10像素的上下内边距看一下最终的结果跟不加有什么区别吧。

第三步

在sidebar ul li{}下面输入以下代码：

.sidebar ul li h2{
       font-family:Georgia,Sans-serif;
       font-size:14px;
}

记住，样式化.post{}的子标题并不会有什么影响，因为它只在.post{}里才会起作用。现在，你样式化Sidebar的子标题也不会对其他块造成影响，下面是显示效果：

上面是我的页面链接列表的样子，你很有可能只有一个“关于”链接，我在本地WordPress里添加了很多链接和不同的页面级别来测试每一级链接的样子。注意一下页面底部我圈出来的不必要的额外的内边距，这是个样式继承很好的例子，它的内边距是20像素而不是10像素了。

第四步

在.sidebar ul li h2{}下面输入以下代码：

.sidebar ul ul li{
       padding:0;
}

.sidebar ul ul li{}中两个连续的UL意味着你正在定位最里层的LI。如果所有的值都是0的话，就不需要px后缀了。

下面是显示结果：

上面的行间距太小了，所以我们可以设置一个24px的行高。

在.sidebar ul ul li{}中加入：line-height:24px;

顺便说一下，如果在IE浏览器中你的搜索表单下面多出了额外的空间，你可以在

body,h1,h2,h3,h4,h5,h6,address,blockquote,dd,dl,hr,p{
       margin:0;
       padding:0;
}

中再加上一个form，如下所示：

body,h1,h2,h3,h4,h5,h6,address,blockquote,dd,dl,hr,p,form{
       margin:0;
       padding:0;
}

第五步（可选）

如果你想要你的日历中的日期可伸展并且占据整个侧边栏的宽度，那么就做这一步。现在你的日历的样子应该如下所示：

为了样式化日历，你需要找到它放在哪个标签里并且找出这个标签的name或者id是什么，你可以在页面源代码里找，你的侧边栏在最下面，所以去源代码文件的最下面找日历。

现在你知道日历是放在TABLE标签里，并且id是wp-calendar，那么你怎么在style.css文件中定位这个id为wp-calendar的table呢？

答案是：table#wp-calendar{}。为什么？很简单，你已经知道通过英镑符号来样式化以id命名的DIV了，本例中，用到的是id等于wp-calendar的table而不是DIV。

#wp-calendar{}是可行的，因为它是唯一的，WordPress里也没有这个专用的标签。不过你应该尽可能的让它非常的具体，如果你想让它更加具体的话就用.sidebar ul li table#wap-calendar{}。还要更加具体吗？好吧，用.sidebar ul li#calendar table#wp-calendar{}。因为列表项(LI)包括日历子标题和id等于calendar的日历TABLE。

既然你已经知道用什么定位了，那么你怎么让这个table伸展呢？给这个table加上width:100%;。

在.sidebar ul ul li{}后面输入下面的代码：

table#wp-calendar{
        width:100%;
}

保存文件并刷新页面，下面是显示效果：

width:100%;是为了让你的日历table会自动调整宽度来适应侧边栏的宽度，这样如果侧边栏多宽，日历都会占满整个侧边栏。

日历现在看起来也不是特别好看，但是你已经知道如果根据自己的需求来实现它了，这个日历还需要更多的样式来让它看起来很好。提示：再到源代码里去找TABLE的下一级标签，你还可以给它添加样式。

今天的教程就到此为止了。

返回WordPress主题系列教程的开始

第一步

在style.css文件中的body{}上面输入下面的代码来去掉大部分的外边距(margins)和内边距(paddings)：

body,h1,h2,h3,h4,h5,h6,blockquote,p{
        margin:0;
        padding:0;
}

• 注意到上面代码中的margin:0;而不是margin:0 0 0 0;了吧，如果你的四个值都相同，就可以只写一个上去就行了，同样对padding也适用。
• 保存文件，然后刷新Firefox和IE。别担心，你将会在需要的地方加上外边距(margins)和内边距(paddings)而不是浏览器默认要加的地方。

顺便说一下，一会我会让你把代码放在这里或者那里，但是你要知道那些都是可选的，你可以把你的代码放在style.css文件里的任何地方，我告诉你的只是我组织代码的方式。

第二步

给H1标题添加样式，在body{}下面输入下面的代码：

h1{
       font-family:Georgia,Sans-ferif;
       font-size:24px;
       padding:0 0 10px 0;
}

• font-family:Georgia,Sans-serif;将H1标题的字体由Arial改为Georgia，如果没有Georgia字体，网页就会找Sans-serif字体来替代。
• font-size:24px;意思很明显，但是值得注意的是，你已经在body{}设置了字体大小为12px，但是H1和H2标签不会遵守这个规则，因为标题标签只遵守它们自己的规则，如果想控制它们的显示方式，你需要单独给它们添加样式。
• padding:0 0 10px 0;的意思是距底部有10像素的内边距，这是为了在你博客的标题和描述之间增加一些间距。

保存文件然后刷新页面，下面是显示效果：

第三步

将下面的代码输入到#container{}的下面：

.post{
       padding:10px 0 10px 0;
}

(你给每个class等于post的DIV加了10像素的距顶部的外边距和10像素的距底部的外边距)

.post h2{
      font-family:Georgia,Sans-serif;
      font-size:18px;
}

(.post h2并不是一个通用规则，它只对class等于post的DIV中的H2子标题起作用，Sidebar里的H2子标题并不会受到影响。)

.entry{
       line-height:18px;
}

(增加entry DIV里的行高。)

第四步

在a:hover{}下面输入下面的代码：

p{
      padding:10px 0 0 0;
}

(给每个段落加上10像素的距顶部的内边距。)

第五步

在.entry{}下面输入下面代码：

p.postmetadata{
       border-top:1px solid #ccc;
       margin:10px 0 0 0;
}

还记得那个class等于postmetadata的段落标签吗？样式化一个特殊的段落标签和样式化DIV是很相近的，你可以给它们俩添加border、margin、padding和background等属性。

对于postmetadata段落标签，你给它加了一个灰色的边框和一个距顶部10像素的外边距。

border-top是只有顶部边框，border-left是只有左边框，等等。不加-top、-right、-bottom和-left，仅有border表示有所有的边框。例如border:1px solid #ccc;表示四个边都有1像素的灰色边框。

第六步

在p.postmetadata{}下面输入下面的代码：

.navigation{
       padding:10px 0 0 0;
       font-size:14px;
       font-weight:bold;
       line-height:18px;
}

对于包裹在下一页和前一页链接两边的navigation DIV，你刚刚做了如下的事情：

• 加了一个10像素的距顶部的内边距
• 将它的字体大小改为14px
• 将它的字体粗细改为加粗
• 将它的行高改为18px

今天的教程就这么多了。

返回WordPress主题系列教程的开始

在开始前，还是要先打开Xampp控制台、主题文件夹、Firefox浏览器、IE浏览器、index.php文件以及style.css文件。

第一步

你应该考虑的第一件事是你主题的总宽度应该是多少。我们将使用750px(750像素)，100像素是1英寸。你主题的宽度应该由你大部分的访问者的视图规格来决定，你应该尽量避免下面的情况出现：你主题的宽度900px而你的访问者却使用800px×600px分辨率的屏幕，这就意味着呢的900px宽度的主题将会有100像素超出他们的屏幕了，这是一个禁忌。

那么你怎么将你的总宽度设置为750px呢？

你需要将所有的内容都放在一个750px宽度的DIV中，这里提到的所有内容包括：header、container、sidebar和footer。

在<body>后面加上：<div id=”wrapper”>，然后在</body>前面加上：</div>。
在style.css文件中输入下面的代码：

#wrapper{
       margin: 0 auto 0 auto;
       width: 750px;
       text-align: left;
}

在CSS中，尤其是再style.css文件中，英镑符号#是用来通过id定位DIV的方法，句点(.)是用来通过class定位DIV的方法。拿class来说吧，如果你的代码是<div class=”wrapper”>，那么就用.wrapper代替#wrapper来定位wrapper DIV。

保存index.php文件和style.css文件，刷新Firefox浏览器和IE浏览器来看看发生了什么变化。

进一步解释：

• margin:0 auto 0 auto;的意思是（顺序不能出错）顶部外边距为0、右边外边距是自动、底部外边距为0，左边的外边距是自动。记住如果将左右外边距都设置为自动的话就是居中的意思。
• width:750px;意思很明显吧。
• text-align:left;是将wrapper DIV中的文本左对齐，因为你马上要将body{text-align:left;}改为text-align:center;

第二步

将body{}中的text-align:left;改为text-align:center;

为什么要这么做？（我是假设你现在正在用Firefox浏览器和IE6浏览器。）也许你查看自己的布局显示是正确的，但是对于那些使用低版本IE的用户就不一定正确了。还记得将左右外边距设为自动就是居中吗？然后这并不是对所有的IE浏览器都起作用的，所以设置body{text-align:center;}是用来修复老版本IE无法居中wrapper DIV的bug的。
（顺便说一下，现在Firefox和IE中文本的大小已经不同了，我们稍后会修复它。）

第三步

使Header向左浮动，并且设置其宽度为750px：

#header{
       float: left;
       width: 750px;
}

第四步

使Container向左浮动，并且将其宽度设置为500px：

#container{
      float: left;
      width: 500px;
}

第五步

使Sidebar向左浮动，并且将其宽度设置为240px，背景色设为灰色（丢失了10px是吧）：

.sidebar{
      float: left;
      width: 240px;
      background: #eeeeee;
}

注意，你没有使用英镑符号(#)来定位Sidebar DIV，你使用的是句点(.)。还记得#ffffff是白色吗？background:#eeeeee;是很浅的灰色。你给Sidebar添加一个背景色是为了当你将剩下的10像素加上时能看出来区别。

第六步

使Footer向左浮动、清除两边的浮动并给其一个750px的宽度：

#footer{
       clear: both;
       float: left;
       width: 750px;
}

Header和Footer的样式有什么不同？答案是footer{}中clear:both;的出现。这是为了确保Footer不依附它上面的任何东西，像Sidebar和Container。
保存style.css文件，刷新浏览器。

第七步

通过外边距将剩下的10像素添加给Sidebar，现在你sidebar的样式代码如下：

.sidebar{
      float: left;
      width: 240px;
      background: #eeeeee;
      margin: 0 0 0 10px;
}

保存文件然后刷新页面，这时就可以看到给Sidebar的左边添加的10像素间距了。margin:0 0 0 10px;的意思是顶部的外边距是0，右边是0，下边是0，左边的外边距是10像素。当像素大小为0时，px就可以省略了。

第八步（额外的步骤）

这步是以防你给Sidebar设置了20px的左外边距而不是10px。20px的外边距将会打破你的布局并且将sidebar挤到页面的底部去了，因为20px的外边距就使Container和Sidebar的总宽度变成760px而不是750px了。这额外的一步都是IE的错因为只有IE才会有加倍外边距的bug。

为了修复这个bug，在Sidebar里添加display:inline;。现在你的Sidebar就变成：

.sidebar{
      float: left;
      width: 240px;
      background: #eeeeee;
      margin: 0 0 0 10px;
      display: inline;
}

今天的内容就到这了。如果有问题，请随时问我问题，我可以随时给你帮助而不是仅仅告诉你这些敲门。

链接里是我的index和style文件的内容。

返回WordPress主题系列教程的开始

背景属性是用来给所有的非文本内容着色的，它后面也是跟着一个十六进制代码。例如body{background:#ffffff;}的意思就是body的背景是白色的。

十六进制代码

• 以一个英镑符号(#)开始，每个十六进制代码都有六位，它们的范围从#ffffff(白色)到#000000(黑色)。
• #ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333. #222222, #111111
• 前两位代表红色，第三和第四位代表绿色，后两位代表蓝色。#ff0000是红色，#550000是深红色，#220000是更深的红色（好纠结啊），#00ff00是绿色，#0000ff是蓝色。等等，黄色不是主要的颜色吗？黄色的十六进制代码是什么呢？#ffff00是黄色，#ff00ff是紫色。

第一步

在body{}选择器的下面输入下面的代码：

a:link,a:visited{
        text-decoration:underline;
        color:#336699;
}

• 上面的代码是干什么用的？你给你的链接加上了下划线(text-decoration:underline)并且将它的颜色设置为蓝色(color:#336699)。这是一种不同色调的蓝色，说它是蓝色是因为最后两个代表蓝色的数字比其它数字都大。
• a:link是用来样式化链接。当你想把一个单词变成链接时，你将会怎么做？你会使用 <a> </a>标签，因此样式化链接就是给 <a>标签添加样式。
• a:visited是用来样式化被点击过的链接。
• 你可以通过下面这种方式给a:link和a:visited添加样式：

  a:link{
  	text-decoration:underline;
  	color:#336699;
  }
  
  a:visited{
        text-decoration:underline;
        color:#336699;
  }
  

• 在之前的代码中，你在给a:link和a:visited两个选择器添加样式text-decoration:underline和color:#336699时，你用逗号将它们俩隔开，这样就可以同时给它们两个添加相同的样式了。

第二步

在a:link,a:visited{}的下面输入下面的代码：

a:hover{
        text-decoration:none;
}

上面的代码是干什么的？当你将鼠标停留在链接上时，链接的下划线将会消失。

如果你想当鼠标停留在链接上才显示出下划线而不是默认情况下显示下划线，就请交换一下a:link和a:hover的text-decoration值。

如果你想改变鼠标停留在链接上时链接的颜色，那就就给a:hover加上color:属性，并且赋一个你想要的颜色的十六进制代码。例如：

a:hover{
       text-decoration:none;
       color:#ff0000;
}

返回WordPress主题系列教程的开始

在我们开始之前，你的style.css文件里应该已经有了一些信息了吧，让我们来看一下每个模块都代表什么意思。

• 第一行很明显就是主题的名字。
• 第二行是你主题的下载地址，如果你正在制作一个自己用的主题就不用管这行了。
• 第三行是主题的描述。
• 第四行是版本号，这个很重要尤其是当你的主题是供大家使用的并且发布了更新版本。
• 第五行和第六行是你的名字和主页。

你主题信息两边的/*和*/符号是为了防止你的主题信息影响到文件的其他内容，这是CSS的注释。当你通过CSS代码来给你的网页添加样式时，你可能想在很多地方添加注释来记录一些信息，但是你并不想添加的注释影响到其他的代码，这时候你就可以通过/*和*/符号来将你的注释隐藏起来。
下面就是处理过的主题的信息：

第一步：

• 打开Xampp控制台、主题文件夹、一个Firefox浏览器、一个IE浏览器和style.css文件。
• 在两个浏览器里都打开http://localhost/wordpress页面。

这里真的需要Firefox和IE来同时测试你的主题，不同的系统对CSS的解释也不同，在越多的浏览器和系统(Safari,Opera,Linux,Netscape等)上测试你的主题就越好。如果你跟我一样懒的话，就只在Firefox和IE上测试吧。

第二步：

在你的style.css文件里输入下面的代码：

body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}

就像处理XHTML或者PHP代码一样，用tab键来增加缩进以便于代码组织：

保存style.css文件然后刷新Firefox和IE页面来看有什么变化。（从现在起你将一直和这两个浏览器打交道了。）

可以把body{}当成一个标签，里面的所有的内容都是这个标签的属性以及属性的值，就像XHTML一样，{是开始标签，}是结束标签，{和}里面的内容，冒号是开始标志，分号是结束标志。(当涉及XHTML、PHP和CSS时，简单起见，我用了标签、属性和值这些术语，实际上，PHP和CSS的代码有不同的术语，例如参数(parameters)、选择器(selector)和属性(property)。)

在我们继续下面的内容之前，我要解释一下为什么你需要使用body{}(CSS选择器)，这是因为你正在给页面最基本的部分(<body>标签)添加样式。你没有给<header> 标签添加样式是因为它没有什么可以添加的样式。你网站上显示的所有的内容都是在<body>和</body>标签里的。

然而，稍后你将要给一个ID为header的DIV添加样式。

进一步解释：

margin:0;去掉body标签默认的外边距。如果你需要一个外边距或者更大的外边距，可以把0改为10px、20px等等。PX是像素的意思，一个像素就是你电脑屏幕的一个点。如果外边距是0的话就不用加px了。

在下面的图片中，红色加亮的空间是body标签默认的外边距。

当把它改为margin:0;之后，下面就是该页没有外边距的样子：

font-family:Arial,Helvetica,Georgia,Sans-serif;选择你网站使用的字体。跟在第一个字体(Arial)后面的都是用来替换的，如果用户电脑里没有安装Arial字体，style.css文件就会查找Helvetica，然后是Georgia，接着是Sans-serif。你可以在”我的电脑” > “本地磁盘(C)” > “Windows”文件夹里的” Fonts”文件夹里看到所有的字体列表。

font-size:12px;作用很明显吧，改变字体的大小来看有什么变化。

text-align:left;将你的文本左对齐，把它改为text-align:right来看有什么不同。

vertical-align:top;确保所有的内容都是从页面的最上面开始显示。如果你将对齐方式改为middle或者right，所有的内容都会下推。

background:#ffffff;将背景设为白色的，#ffffff是白色的十六进制代码，#000000是黑色的十六进制代码。

color:#000000;的意思是文本的颜色将会是黑色。

如果你想自学CSS的话，w3schools.com将会是最好的网站。

返回WordPress主题系列教程的开始

本节内容会非常的短并且很简单因为你需要时间来理解你学过的关于XHTML和PHP的知识。不要一直紧跟着我的教程往前走，花点时间来整理理解学过的代码。怎样开始一个不可见框？ID和Class的区别是什么？哪个PHP函数是用来调用博客的标题？哪个是用来调用博客的描述？你能回想的越多，你记住的也就越多。

今天过后，你最好准备好，我们将学习CSS的相关知识，我将深入讨论它因为你要花百分之八十的时间来和style.css文件打交道。

对于今天这节，你仅仅需要打开Xampp控制台和浏览器（转向http://localhost/wordpress）。点击浏览器的“查看”—> “页面源代码”。全选(你可以用鼠标点击拖拉选中所有的代码或者直接Ctrl+a)复制所有的代码(通过右键选择复制或者直接Ctrl+c)。打开一个新的标签页或者新的窗口，转到XHTML Validator。到页面的底部，在“Validate by Direct Input”的框里黏贴刚才复制的代码：通过右键选择黏贴或者直接Ctrl+v。

当你点击Check之后，验证程序将会检查你的代码，然后转到结果页面，如果结果的信息是绿色的，就说明你的代码里没有错误。

返回WordPress主题系列教程的开始

第一步：添加一个DIV

在侧边栏的DIV下面输入下面的代码：
<div id=”footer”></div>

第二步：在段落标签（P标签）里加入页脚文本，你可以输入任何你想输的东西，下面是我的信息：
<p>Copyright &#169; 2007 <?php bloginfo(‘name’); ?></p>

保存文件然后刷新页面，下面是显示效果：

在上面的代码中，&#169;是显示版权符号的代码。还记得我们在页头（header）里用来调用博客信息的bloginfo()函数吗？在页脚我又用到它了。’name’调用的是博客的标题信息，’url’调用的是博客的地址。

如果你想将页脚里的博客标题变成一个链接，那么到教程#4：Header模板里看一下之前你是怎么做的。

返回WordPress主题系列教程的开始