How to Simply Make a Blog Theme
有人问我我做一个皮肤一般都需要哪几个步骤，没有专业系统的学网页设计，可能并不是专业的，依据个人习惯可能多少有些差异，就拿 CF0V11 主题 在这里简述一下：
- 界面构思
- 绘制草图
- 制作 .psd 文件
- 通过 .psd 输出静态页面
- 将静态页面代码应用到 .php 模板
- Debug
- 发布
界面构思
构思这步很简单，可能一个简单的想法就会产生一连串联想，抓住它，尽快进入下一步：
绘制草图
草图可简可详，简单的可以只画出一个主框架，简单描述细节；详细的可以画出子页面的不同样式，比如 blog 中的单独文章页面下评论部分，Archive 下的归档列表部分等等，最主要能大致表达所想即可，甚至只有自己能明白也行：
制作 .psd 文件
.psd 文件的制作要尽可能的详细，它基本是我做完后的最终效果，做的时候要注意分层，和写 html 一样。分好 header？content 和 footer，这样通过 .psd 输出静态页面会容易许多：
一个 blog 皮肤肯定会有不同样式的特殊页面/元素，比如 Logo、按钮、归档页面、单独文章页面，其中的元素（评论部分，回复表格，归档列表等等）都最好在不同的 .psd 中表现出来：
通过 .psd 输出静态页面
以上的三步，最好在一天内连续的完成，以免灵感消失
有了完整的 .psd 文件后，就可以整体的制出静态页面，可以先用自己习惯的、支持 html 语法高亮的编辑器，写出大致的页面结构，并按需要写出对应的标签 id 或 class：
<html>
<head>
<title>Sparanoid</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="header">
<h1><a href="#">Sparanoid</a></h1>
<div id="nav">
<ul>
<li class="page_item"><a href="#">About</a></li>
<li class="page_item"><a href="#">Archive</a></li>
<li class="page_item"><a href="#">Donate</a></li>
</ul>
</div>
</div>
<div class="post">
<div class="title">
<h2><a href="#">Sparanoid's Test post "test"</a></h2>
<p><!-- [metas here] --></p>
</div>
<div class="content">
<p>texts</p>
<p><!-- [padding] --></p>
</div><!-- for 'content' tag -->
</div><!-- for 'post' tag -->
<div id="recent">
<div id="more"></div>
<ul>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">Post</a></li>
</ul>
</div>
<div id="info">
</div>
<div id="footer">
</div>
</body>
</html>
然后，可以参考现有的 blog 皮肤，填充上适当文字内容，让它更像是一个真正的 blog。之后，就可以参考 .psd 文件，根据 id 和 class 来写 CSS，先写纯 CSS，不将图片元素引入，然后再从 .psd 中导出图片元素，将其引入，并制作出含有特殊元素的页面。并慢慢的完善代码，引入辅助内容，比如 meta、CSS 的调用、链接提示 (title, alt) 等等
将静态页面代码应用到 .php 模板
完成了以上几步，也差不多完成 60% 了，现在从静态页面代码应用到 .php 模板，也很简单，但，如果静态页面制作的详细的话，这一步会十分顺利的完成。不过制作 php 时除了涉及“样式”，还要考虑“功能”，这时 WordPress 的 Template_Tags 就很有用处了，手头最好再备一个 PHP 文档以供参考
Debug
在本机的服务器上进行测试和除错，包括代码除错和界面应用上的除错，代码除错包括 html、css 标准、php 代码正确性，并用多浏览器浏览测试浏览器的兼容性；至于界面应用上的除错，我会先做一个混排文章，包含各种会出现的格式，比如超长的连续字母、超出层宽度的图片等等。评论部分也是一样，甚至可以把测试的文章代码整个放到评论里看效果
发布
取个好名字，选个协议，发布就行了
10052006 / CF0V11 / TB / Commt
Just 24 Comments?
Trackbacks & Pingbacks
-
自然的簫聲
Trackback / 11212006
唉，不懂美术还真不好办。
还得会用PS，真是麻烦。
如果是做一个简单无图的,也不一定非要用ps啊,呵呵
小s境界太高了!
寒 好复杂，一点也不Simply。。。
看了下代码，思路挺清晰的！还做了很多注解，是个好习惯！
很有意义的post，可惜太懒了，把别人的改改用吧。
不错啊!
少有人写这样的东西. 但对入门者实在是很重要的. 知道了步骤才知道怎么入手.
支持!
那张草图很有意思，什么叫草图，这就是定义。
中秋快乐！
电离方程式,汗~~
嗯 我的感觉也是，觉得有点复杂了点啊 草图没必要画那么详细的啊 有的时候可以不作psd直接在dw里画的
我也是在PS里画,但不知道还可以在DW里画.因为那不是用来画的,是用来写的.好象要学一下哦.
不知道怎么联系你，只好这里说。
主题的多语言功能我已经完全研究出来了，比较简单，容易操作，你哪天上线了就联系我。
Wp自己不就有多语言的文件吗？
Wp自己不就有多语言的文件吗？但是在使用了中文版的WP也会显示主题里面的非中文字符，所以S同学出了两种语言的A+主题，如果使用多语言技术，就只需要出一个版本，随便使用哪种语言的WP都可以方便地使主题显示和WP相同的语言。
我这个讲的是最基本的几个步骤，对于做的比较熟练的或者比较简单的无图纯 CSS 的，甚至可以跳过 绘制草图、制作 .psd 文件、通过 .psd 输出静态页面 这三步，直接去写 php。简单的例子可以看看 m.sparanoid.com
你要不直接发过来个 sample 给我吧，最近学校那边比较恶心上线的机会实在不多
http://blog.flyready.com/uploads/minimalist-fever-13.rar
发这来，让大家都来测试看看。
使用英文的WP，主题就是英文的；如果使用中文WP，主题自动切换为中文的。
做中文很麻烦啊，我觉得这功能还是主要用于西方语言比较好，用于中文的话，如果不改变原文的语序，比着英文的语法来做很困难。
它不能在英文 WordPress 上手动切换到主题的中文版？不能使用单独的 php 语言文件而不是 .mo、.po 文件？
我试了试，发现使用 php 语言文件并不合适，比如在这句：
<?php wp_loginout(); ?>尽管主题是可以切换到英文的，但只有在使用了中文的 WordPress 后才会是中文的
再比如这句：
<?php comments_popup_link(__('No Comment'), __('One Comments'), __('% Comments')); ?>如果这样的话，用 php 语言文件怎么套？如果全部套入语言文件的话，这样的字串如果多了的话，以后编辑会变的很麻烦，所以 php 的语言做也很麻烦
至于 .mo 和 .po 文件，WordPress 本身就用的是这个方法，编辑起来实在是过于麻烦……
所以，现在我认为以上两种方法都不可行了，还得出单独的 en/chs 版
不要走进死胡同了，如果用英文WP那拿中文的主题来干吗，为了看英文的后台？
相同的字串可以集合成一条来处理，节省了点时间但是也让处在不同位置的相同字串只能表达一个意思。编辑确实很麻烦，而且编辑器不支持字典。
我研究这个主要是由于前段时间有个德国老外来信说下了MF1.1版的，并翻译成了德语，看到有了1.2，特地问下有没有什么重要更改，毕竟重新翻译一次不是太容易的。
如果用这种语言文件，他就只需要翻译一次，以后的所有版本都可以放心升级不用担心翻译失效。
slimstat 这个统计程序有多种语言，它的实现方式应该符合你的要求。
站長：
希望你可以同意我轉載引用這篇文章，謝謝!
当然可以，感谢您的 Trackback
aaaaaaaaaaaaaaaaaaaaaaa [...]
看看有没有撑破界面
edited by Sparanoid
如此长的字串除了恶意，一般情况下并不会出现，所以并没做处理
找皮肤制作居然被我翻到了这篇文章...oH~mY~gOd...