这不是仅仅做个主题就能总结出来的，而是学习Web标准和CSS这么长时间付逐于实际归纳而来的。那么让我们进入正题。。。

首先让我说两句题外话，你知道你为什么想制作一个WordPress主题的原因吗？

或许你是一个不甘平凡的人，厌倦了千篇一律的主题模板；或许你是想从制作的过程中学习到一些你想要的知识；也或许你是一个向往自由的人，你希望做一个自由的设计者，用你自己的双手去设计你的未来和生活。无论是怎么样，我想只要你决定了的事就用心坚持下去。

如果你也和我一样是个二十出头的人那么你应该明白一个道理：学习和做事儿是一样的，都要用心做才会有结果。”功到自然成“看似简单的道理有多少人真正明白？

进入正题…

如果你是个WordPress新手那么做主题是比较麻烦的。就像我刚接触WP一样，到处找资料还一无所获。不过还好网络是一个大家庭总有一些人肯出来帮助你，所以就新手而言我建议你去看看水煮鱼翻译过的一篇主题制作文章“那么你想创建一个WordPress主题吗？”

如果你对WordPress有一定的了解问题就很好解决了，比如你会一点html,CSS，或是了解一些PHP。那么做个主题对你来说决非难事。网上有很多网友说诸如html,css这种简单技术学一天就足够了，对于这样的一些看法我个人觉得是很片面的，如果你不能够正视一样东西那么你永远都只能停留在初级阶段。

如果你已经学完了水煮鱼的教程并且想进一步研究那么往下看。。。

1.选择一个合适自己的主题框架

也许你一听到框架这个词就觉得很深奥，事实并非你所想，一个好的框架可以让你的制作过程事半功倍。就像我前面讲到过的sandbox框架，他会动态生成元素的class属性来供你使用，主题的结构也很精简到位。hybrid这个框架感觉不适合新手虽然他也是基于sandbox改的但是他有更强大的功能，结构也会更加复杂。

2.熟悉框架的xhtml架构

熟悉xhtml的结构会给你后面的CSS代码编写提供一个清晰的思路，我通常是这样做的：扒下页面静态html代码放在DreamWeaver里面用它的代码折叠功能，逐级折起来然后给第个大框架加上结尾注释(注意#和*分别表示ID和class),如下图所示(sandbox1.6)：

看到这图的时候就很清楚了，大结构上没用到嵌套而是竖直排列，这就给我们一个启示主题大半是用的浮动布局。利用浮动布局的好处就是比较灵活，可控制性高。但同时也会有问题，比如在IE6中的一些bug会彻底毁掉你的布局。关于兼容性的解决方法我会在下面CSS中说到，接下来在PhotoShop或者是画图板中画出你想要的布局样式(时髦的叫法是“原型设计”)，下面我给出一个一般博客的大概的结构图形：

现在结构已经很清晰了吧！到这一步得澄清一个问题了：如果说你已经会做主题了但是没有别人做的漂亮个性那是因为你还牌代码阶段，想做出真正的属于自己我主题你还得会设计，说到这个我如果你对设计还很一知半解，我推荐一本书给你一定会受益匪浅,来自Adobe的资深设计师robin。绝对值得一看的书。如果你已经有一个像样的博客主题设计稿了，那么请继续往下看。(也许你已经想到了下一节与CSS有关，是的，不过不是急着编写而是规划…)

3.CSS样式表的规划

在初学样式表的时候感觉规划是很虚无的东西感觉没什么用，但当你的样式复杂了以后规划就会使你你代码更有条理。规划的项目主要包括以下几点：

• 页面的基本属性(固定长宽或是自适应)
• 布局DIV的基本属性。比如 嵌套，定位，合理清除浮动等
• 找出须要继承的一些属性统一在父级元素中设置
• 是否须分要块写样式(取决于自己，对WP而言代码够熟练的话一个够了)
• 确定代码编写格式

下面就上一节说到的结构图做个简单的规划：

#content,.sidebar采用固定宽度浮动布局(就像大家知道的一样浮动元素最好给它width属性)。#wrapper,#container固定宽度且居中。#header,#access标准流布局。#footer和.sidebar最后一项必须清楚浮动，主页字体12px,颜色#666,ul列表padding:5px无项目列表，h1字体大小18px，h2-16px，a标签的默认样式，正文p标签的行高……

声明一点：在具体的制作中肯定比现在的要复杂N倍，你可以不把这些规划写在纸上但是至少要想好大概的轮廓。

4.样式表的具体实现

到这一步我得分享一个主题制作并且是很重要的技巧了：真正做主题的时候往往情况是有所变化的，所以不要指望一口气写出一个像样的主题，因此我们要为主题建立一个版本信息，每次完成某个效果后把项目的所有文件(主题文件夹目录，PSD文件的修改等)打包然后给出一个版本号，最好是记录下来每个版本与上一版的不同。比如实现了什么功能，修复了什么bug。

接下来就上上节的结构写出主要的样式代码：

body, p, h1, h2, h3, ul, li, strong, form, input {/*根据自己情况reset你的CSS*/

margin:0;

padding:0;

}

body {/*设置62.5的原因是为了后面更好的运用em来定义长度*/

font:62.5% Verdana, Geneva, sans-serif;

text-align:center；/*为了解决IE6中的居中问题*/

}

#wrapper {

width:960px;

margin:0 auto;

text-align:left;

}

#header {/*设置相对定位作用于嵌套其中的#access*/

position:relative;

height:100px;

}

#access {/*相对于#header进行定位*/

position:absolute;

right:10px;

bottom:0;

height:25px;

}

#content, #sidebar {

float:left;

}

#container {/*相当于clear掉sidebar后面的浮动使其高度自适应*/

height:1%;

overflow:hidden;

}

#content {

width:660px;

}

#sidebar {

width:300px

}

#meta {/*sidebar中最后一个div*/

clear:left;

}

#footer {

height:30px;

}

第一个版本就好了，保存好他然后copy一份进入下一节。

5.解决浏览器的兼容问题

我想你做的主题肯定是想让更多人看见最好的效果吧。终于到了这个大多数人都头疼的地方了，其实让我告诉你解决兼容性问题甚至比实现CSS更简单。原因很简单：bug就像是英语单词—》就那几个背掉一个少一个。所以解决兼容问题的核心不在技术而在人的耐性上面，你可以大骂fuck IE6。但是骂过后请回来，它等着你去征服…

下面是我总结出来的经验：

首先明白兼容性的问题就像是软件测试一样在项目开始的时候就应该开始了，本来这一点应该是在上一节讲到的，但我怕太多讲乱了，比如代码第一行的reset就是解决兼容性的方法之一。

通常我会用IE6和FireFox两个浏览器来测试，而且两个浏览器必须高度同步–也就是说完成一点效果后都要在两个浏览器中测试是否一致，然后找出原因(我假设这里出现的都是bug而不是下面的人为因素)逐一解决，Google，baidu，请教高手都可以，用任何方法修复它并记下来防止以后发生。

解决的方法有很多，各有利弊。比如：IE条件注释，CSS hack，运用高级过滤器。我个人不怎么喜欢IE条件注释(增加多余的代码)，虽然它符合标准。记住

符合标准的东西不一定全是好的，Web标准不可以被大家教条

所以我做出了选择：多用高级选择器实在不行再加hack，

在调试方法上我偏向于：尽量按标准写代码然后让它兼容IE6最后用高级选择器来设置标准浏览器中的效果，这一点是很重要的如果你不会用高级选择器的话兼容将是一个比较难的问题 。

下面说点看似不重要却真的很重要的东西

就是上面的提到的“人为因素”。先描述几个现象，你可以看看自己有没有遇到过：

你用尽了所有方法都没能使效果兼容各浏览器，最后才发现只是自己html的某个标签没关闭或者没正确嵌套或者是CSS的属性名写错，忘了加分号…

对于这种情况我有两下建议：
1.对于xhtml最好你先确定他的格式是否良好，可以用DreamWeaver里面验证功能，或者上W3C官网。因为非标准浏览器出的问题大多是潜在的，一个遵循标准的xhtml会减少这种潜在的因素。

2.写主题的每个阶段不要超过二个小时，超过后你会发现什么都很容易乱，我在上次做主题的经历中就尝到了这样滋味儿。两天写好的样式表就因为一个兼容问题脑了重写CSS。所以我建议大家不要用过长的时间去写代码，有时候时间可以解决许多问题。

6.发布维护你的作品

这一步应该来说是最轻松的了，让尽可能多的人给你的主题提出建议并虚心接受然后在实际中。因为网上会有很多高手等着你去请教呢^!^要学会提问，在自己实在没办法的时候再求助会更有效。

终于结束了–哈哈。一口气写完有什么不对的地方请大家留言告诉我。最后强调一点：以上都是个人经验总结所得，文章只能起到引导作用，关键还是取决于自己。。。