Punk ProjeKt

前言：现在网上有很多种博客系统，国外的wordpress,Movable Type,国内的O-blog,Z-blog等等。国内偏向于使用Z-blog这种基于asp＋access的blog系统，国外则使用Wordpress和Movable Type这些基于php＋MySQL的系统。我以前也用过Z-Blog做过一次blog系统，这种系统上手很容易，不过wordpress显然才是最棒最强大的，尤其是它的插件系统，而这正是同类的Movable Type相对较弱之处。通过一段时间的使用，自己对wordpress还算有些了解了，这里把自己知道的一些小技巧分享出来，很多东西其实都是通用的，你也可以用在你的blog上，例如blogbus等等。

在真正上手Wordpress之前，最好仔细阅读一下以下这些文档：

1. Wordpress官方文档PDF版：http://www.tamba2.org.uk/wordpress/docs/
2. Wordpress使用指南（中文）：http://alexhuang.org/?p=193

模板设计

WP提供的模板相当多，而且很多模板都已经被移植到Z-blog这类系统上了。但是说实话，个人认为看得上眼的没几个，很多模板作者给自己的网站做的相当漂亮，却不愿意共享自己的杰作；另一部分则是可修改性太小了，没法做个性化修改，谁也不愿意自己的网站和别人的一模一样。这里有几个模板我认为是相当不错的，可修改性好，功能全面，页面简洁：

1. Kubrick (WP1.5的官方默认模板，名字来自于著名导演Stanley Kubrick－代表作《闪灵》，估计是模板作者Michael Heilemann十分崇拜这导演吧…Sorry，又废话了)
2. K2 （同样出自Kubrick的作者Michael Heilemann以及Chris J Davis之手，我也是使用了这个模板D）
3. Fauna （我以前使用的是这个模板，可定制性很高，但是本人美工太差，做出来的效果很差，不过你可以看看CeprixConception的效果啊！）

我就以K2模板为例吧，谁叫这模板实在太棒了，默认提供了对N多插件的支持，网页代码也很清晰，要啥就加入啥，啥不要就注释掉相应代码就行了。而且comments系统还使用了AJAX技术，反正上手容易，可配置性很高！

K2默认的样子…实在不咋样，不过越简单也就越容易开刀嘛！来看看这个网站Low End Theory,作者正是使用的K2模板。K2的可修改性够大吧！要做出自己style的K2模板，先得把K2目录下的style.css文件拷贝一份放到styles目录下并重命名，例如punkprojekt.css，然后在styles目录下再新建一个punkprojekt的目录，用来存放模板图片等东西。下面就以本站为例进行进一步讲解。

1.再开始动工前，最好先画个草图，然后按照草图进行细节设计。

2.然后开始进行图片绘制了，Photoshop和Fireworks或者其他的都行，我更偏爱使用Fireworks。我确定的模板宽度是780px，所以图片宽度也设为780px，但是画布可以更宽些（注意背景一定要是透明的啊！），方便裁减。模板图片包含header,box和footer三个部分。其中box部分是可以垂直重复使用的，所以只要保证box有一块780px×3（或者更小）px的区域就行了。我是用Fireworks直接画出整个模板图片，而不是把header，box，footer部分分开绘制，这样做可以保证图片的尺寸是一致的。

这就是我用Fireworks绘的图，Header部分我做的很大，这样感觉起来与box部分衔接更自然。Box部分只要裁减其中一小块就行了，Footer部分以底圆边结束，整个模板看起来就浑然一体了。当然，现在也有种趋势，就是Footer部分也会做的很大，把sidebar里的评论部分等都移到底部来，这比较符合国外的习惯，但是似乎我们都不怎么喜欢经常拖页，所以要不要这样做就看你的个人口味了。

绘完图后，就开始裁减图片吧，一定要保证header，box和footer分布的宽度是一致的，你可以剪的比图片区域略宽一点，但是图片区域一定要是居中的啊！然后就导出图片吧，我用的是png格式，反正图片体积不是很大，那我尽量使用更高画质的png格式，gif不如png色彩鲜艳。不过使用png要注意个问题，因为IE对png的透明支持非常不好，所以如果你给图片打了点阴影的画，在IE下显示…相当难看，反正我的图片阴影部分显示成了个蓝色，弄得我不得不取消了阴影效果。

3.修改CSS文件。

先把做好的图片全部放到punkprojekt目录里，header，box，footer三个部分分别命名为header.png, body.png, footer.png。然后修改CSS文件里的代码成如下：

#header {
padding: 0;
margin-top: -20px; /*让header图片置顶*/
position: relative;
height:287px; /*图片有多高就填啥数值*/
background:url(punkprojekt/header.png) top center no-repeat; /*填入header.png图片地址，并设置为置顶居中且不重复*/
}

#page {
background:url(punkprojekt/body.png) center repeat-y; /*填入body.png图片地址，并设置为居中并垂直重复*/
text-align: left;
margin: 0 auto;
padding: 20px 0 0;
position: relative;
/* The entire template’s width is set in this class. */
width: 780px;
_width: 780px; /*这个数值是用于定义IE的，不让K2在IE下显示会出问题，K2默认使用的是740px，为了保证在所有浏览器下显示一致，改为780px*/
border: none;
}

#footer {
background:url(punkprojekt/footer.png) center no-repeat; /*填入fooer.png图片地址，并设置为居中并不重复*/
height:72px; /*图片有多高就填啥数值*/
/*text-align: center;*/
margin-top:-2px; /*让footer紧跟box部分*/
}

h1 {
display:none; /*不显示blog标题*/
}
#header .description {
display: none; /* 不显示blog描述文字*/
}

然后检查一下网页框架是否显示了你预期的效果吗？没有的话，再在这里面进行调整。我是打算把导航栏菜单放在顶部，所以修改CSS里的代码如下：

ul.menu {
margin: 0;
padding: 0;
position: absolute;
top: 0px; /*让menu菜单置顶*/
left: 20px; /*让menu菜单相对header区域由左向右靠一点点*/
width: 70%; /*设置menu菜单最多占据header区域的总宽度*/

ul.menu,
ul.menu li a {
padding: 12px 15px 11px; /*设置菜单文字背景占据的空间，反正高度填满导航栏图片区域部分就行了，再设置一点宽度*/
}

ul.menu li a {
font: 11px Verdana,Arial, Helvetica,Sans-Serif; /*设置菜单文字大小及字体*/
font-weight:bold;
color: #fff; /*设置菜单文字默认的颜色，这里设为白色*/
margin: 0;
}

ul.menu li a:hover {
background: #3D3D3D; /*设置鼠标移到菜单文字上时的背景颜色，我用的是暗灰色*/
color: #fff !important; /*设置鼠标移到菜单文字上时的字体颜色*/
text-decoration: none;
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
color: #fff !important; /*设置当前所在页面下的菜单文字颜色*/
background: #3D3D3D; /*设置当前所在页面下的菜单文字的背景颜色*/
text-decoration: none;
}

相关CSS知识介绍：什么是padding和margin

Padding就是内距，即某物体在区域内离边缘相距多少；而Margin是外距，即某物体距离附近区域相距多少；Padding和Margin都可以设置4个数值，即与上，右，下，左（顺时针）分别相距多少，例如padding:10px 0px 5px 4px;指的是距上10px，距右0px，距下5px，距左4px；如果只填3个数值，则第一个控制距上，第二个控制左右，第三个控制距下；如果只填2个数值，则第一个控制上下，第二个设置左右。

这就是padding和margin的区别，也可以直接使用padding-top：*px…margin-top:*px来分别指定相距大小。

剩下的CSS配置就自行完成吧，基本上也就是改改字体，换换颜色之类的，其他的CSS配置我会在以后的文章里进一步说明。记住一定要在wordpress系统的dashboard里把K2 option里的style选为你自己建立的那个css文件啊！

当然别忘了仔细阅读这几篇文章：

Customizing K2: Part 1, Part 2, Part 3

Modifying K2: Introduction, Headers

Climbing K2: Part 1, Part 2 ，Part 2.5

Dissecting K2’s Live Search