2.7.1相对于2.6而言融入了很多新的特性，出来也有一段时间了，已趋稳定，因此我打算升级到2.7.1，与此同时，放弃了自己打造theme的幻想，直接用Jinwen的js-o3-lite，网页设计还真不是自己的强项。

wordpress升级很方便，基本的步骤是用新的wordpress替换掉就版本的wordpress，然后重新更新一下数据库即可。

1、用FlashFXP将2.7.1压缩包上传到DreamHost

2、备份旧的wordpress

3、将wp-config.php拷贝出来

4、删除linuxabc.net.cn目录

5、将新版本的wordpress解压到linuxabc.net.cn

6、根据旧的wp-config.php更改linuxabc.net.cn/wp-config.php

主要是数据库的用户名和密码

7、在IE中打开http://www.linuxabc.net.cn/wp-admin.php

这时会出现要求更新数据库的提示，点击“确定”即可完成整个升级步骤，非常简单。

由于目前content和sidebar未设背景色，沿用了body的#，显得很呆板，而且读者不容易将视线聚焦在左边的内容上，所以alfie决定将content的背景色改成白色，sidebar的颜色改成灰色系，改完之后发现两边不等高，如下图的左边所示，其实alfie的的初衷是实现右边的效果。

于是上网搜了一下，原来这个问题早已有之，众人也是八仙过海各显神通，总结了一下有以下四种解决方法。

一、分层交错法

英文原文是：Equal Height Columns with Cross-Browser CSS & No Hacks

原文的例子是三栏的，定义三个不同背景色的div：

通过控制width的百分比，将各个层错落显示，达到每个col显示不同的颜色，而且是等高的。

详细的实现方式请参阅原文。

二、border-right

alfie无意中进入http://www.alistapart.com/，看到了border-right这种解决方式，下面以LinuxABC为例简要说明。

首先将wrapper的背景色设为白色，content也设为白色，并且border-right的宽度为sidebar的宽度，sidebar的背景色设为#EDEDED

• 当content高于sidebar时，由于content的border-right的颜色即为sidebar的背景色，因此sidebar短缺的部分由content的border-right背景色不足；
• 当sidebar高于content时，由于wrapper是content和sidebar的父容器，content短缺的背景由wrapper补足；

这样就实现了两栏等高的问题，如果读者想知道三栏的实现方式，可以参考原文：Multi-Column Layouts Climb Out of the Box

index.php:

<div id="wrapper"> <div id="content">This is the content</div> <div id="sidebar">This is the sidebar</div> </div>

style.css:

#wrapper{
   background-color: #FFFFFF;
   overflow: hidden;
   width: 100%;
}
#content{
   background-color: #FFFFFF;
   width: 600px;
   border-right: 400px solid #EDEDED; 
   /* The width and color of the sidebar */
   margin-right: -400px; 
   float: left;
}
#sidebar{
   background-color: #EDEDED;
   width: 400px;
   float: right;
}

说明：知道http://www.alistapart.com/是谁创建的吗？是《网站重构》的作者Jeffrey Zeldman，alfie也是今天到书店无意中在《网站重构》这本书中发现的，这个世界好奇妙。

三、JavaScript

通过JavaScript或jquery的插件也可以实现多栏之间的等高，不过这种方式应用面不广，所以这里就不详谈了。

四、table

这是下下策，在没有css之前table的确是网页设计师的挚爱，但现已经是昔日黄花了，不提也罢。

alfie最终决定采用第二种方法，因为它够简单，效果也不错，方法一虽然很强大，但似乎过于小题大做了。

目前实现圆角效果的主流方式有两种，一种是CSS+DIV，另一种是使用圆角图片。这两种方法对alfie来说都不方便，第一种需要掌握复杂的div嵌套，而且圆角无法做到抗锯齿；第二种则需要使用图像处理工具，而alfie最怕的就是去学习photoshop这个庞然大物，所以决定另辟蹊径。

曾经见过有人用JavaScript解决过圆角问题，而LinuxABC将大量采用jquery，所以alfie搜索了一下jquery的官方网站，还真的有好事者做了圆角效果的插件，而且还不少：

1. JQuery Curvy Corners
2. JCorners
3. JQuery Corner Gallery
4. rounded corners

对比一下上面几个插件，alfie最终决定采用rounded corners。因为另外三个插件不支持在div里直接提供参数，当多个页面元素的圆角弧度均不相同的时候需要用户在$("#ElementID").corner()中单独提供参数，这就造成展示层跟代码层的混合，不利于后期的维护。下面以一个例子展示JQuery Corner Galley和Rounded Corners两个插件的不同之处。

为LinuxABC的

1. topNavi的左上角和右上角做圆角效果；
2. wrapper的左下角和右下角做圆角效果；

JQuery Corner Galley：

<script>
   $(document).ready(function(){
      ...
      $('#topNavi').corner("round top 4px");
      $('#content').corner("round bottom 5px");
      ...
   });
</script>
<div id="topNavi">...</div>
<div id="content">...</div>

Rounded Corners：

<script>
   $(document).ready(function(){
      ...
      $('.rounded').corner();
      ...
   });
</script>
<div class="rounded {4px top}" id="topNavi">...</div>
<div class="rounded {5px bottom-left}" id="content">...</div>

rounded corners这种方式无疑更方便些，而且后期的维护相对简单。

短短几行代码就能搞定大部分的圆角效果，jquery实在是太神奇，想不爱她都不行！

一、通过style.css格式化代码块

这种方式是最原始的，一般的主题的样式表中都会有都会有类似下面的语句：

code{
    font:1em 'Courier New',Courier,Fixed;
    display:block;
    overflow:auto;
    text-align:left;
    margin: 10px 0;
    padding: 5px 10px;
    background: #FBF5DF;
    border-top: solid 1px #EDE0B3;
    border-bottom: solid 1px #EDE0B3;
}

只需要在代码块前后加上<code> 和</code>就可以在文章中简单的格式化代码块了，不过这种方式比较简陋，仅能实现代码的字体和大小，无法实现关键字高亮、缩进等。效果见上

二、在文章中直接插入已格式化好的代码

网友Unmi(隔叶黄莺)在dp.SyntaxHighlighter的基础上写了一个代码高亮的工具：CodeRender，它有自己的样式表，并提供格式化功能，可以依据各种不同语言的关键字进行高亮显示，用户只需要将格式化好后的<div>块插入文章中即可。下面是CodeRender工具的截图：

  下面则是使用CodeRender的效果：

三、使用wp-syntax插件

wp-syntax是一个专门用于代码高亮的wp插件，它是基于geshi这个php开源程序进行二次开发的，支持的语言种类异常丰富，用户只需要在写文章的时候，在代码块前后加上：<pre lang=”Lanuage”>和</pre>，后台就会自动帮你格式化代码了，下面是效果图：

对比三种方式，第一种最简单，但是功能最弱，无法满足要求；第二种灵活性最强，即使更换了blog系统，文章内的代码块效果依然保持不变，但是用户使用麻烦，需要频繁的在CodeRender和blog编辑器间切换；第三种使用比较方便，而且效果最佳，唯一的劣势仅限于wordpress平台，万一哪天换了平台，原有文章的代码块效果就消失了。不过一旦用上了wordpress，更换其它blog系统的可能性就很小了，因为它是如此的漂亮和优雅。

因而，建议采用wp-syntax插件这种方式，类似的插件还有国人编写的coolcode，有兴趣的读者也可以试一下。

  wordpress的动态页面都是通过调用header.php来构造的，而header.php定义了当前页面的样式表，所以解决的思路是判断当前是什么页面，然后根据不同的页面调用不同的样式表。下面是linuxabc中header.php关于css调用的代码

1
2
3
4
5

<?php if ( is_single() ) {
  <link rel="”stylesheet”" href="&rdquo;&lt;?php" bloginfo(’template_url’); ?>/single_style.css” type=”text/css” media=”screen” />;   
<?php } else { ?>
  <link rel="”stylesheet”" href="&rdquo;&lt;?php" bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />   
<?php } ?>

以上语句说明了当显示single.php的时候使用single_style.css这个样式表，否则使用sytle.css。

really easy, huh?!

在进入正文之前先骂一下IE6，IE6是一个自以为是的家伙，都是微软这个父母给惯坏的，不遵循w3c的标准，对CSS的支持存在一些问题，在其它浏览器中显示得好好的页面在IE6中就不正常了，本网站的首页就是一个例子。骂归骂，毕竟IE6还是占据了绝大部分的市场，网页设计师不得不考虑它。

巧改英文链接

永久链接的乱码问题又是IE6的另一个缺陷，linuxabc启用了永久链接，当文章名是中文时，则链接在IE6的浏览器中显示的是乱码（在firefox中显示正常），live write的文章属性中有一个“数据域”，我们可以在这里输入文章的英文链接，例如《live writer 试用手记》这篇文章，alfie就改成了live-writer-try-out-notes，于是该文的永久链接就由乱码变成了http://www.linuxabc.net.cn/wordpress/live-writer-try-out-notes.html，在IE6和firefox均能正常显示该链接。

支持多个blog

alfie也在家里的电脑上架设了一套wordpress测试环境，在将文章发布到互联网前，需要现在测试环境测试一下。live writer提供了管理多个blog的功能，可以在“工具”—“帐户”中新增，发布文章前先确认当前所选定的blog即可。

alfie倾向于使用这种样式：http://www.linuxabc.net.cn/mobile/palm-or-wm.html/，这种链接不深，容易被搜索引擎收录；不带日期，容易迁移；带有分类，容易管理，最后是文章名的英文，容易理解。在“自定义结构”中输入/%category%/%postname%.html/，再点击“保存修改”即可启动永久的自定义链接了。

有些用户在windows下安装了wordpress环境，由于默认情况下apache2 for windows不加载mod_rewrite模块，所以wordpress的自定义永久链接无法正常工作。alfie今晚就被这个折腾了很久，终于找到了解决方案：

一、修改httpd.conf，启用mod_rewrite.so

#将下行前面的#删掉，加载mod_rewrite模块   
LoadModule rewrite_module modules/mod_rewrite.so    
 
# 默认情况下apache2对其根目录设置了 AllowOverride none的权限，    
# 故无法创建和修改.htaccess文件，请增加下列配置    
<Directory "D:/Apache2/htdocs/wordpress">    
    Options Indexes FollowSymLinks    
    AllowOverride All    
</Directory>

二、创建.htaccess

当启用永久链接时，wordpress会在其根目录下自动创建.htaccess文件，所以读者不用担心，如果发现没有该文件的话，也可以自己手工创建，内容如下：

# BEGIN WordPress   
<IfModule mod_rewrite.c>  
   RewriteEngine On   
   RewriteBase /wordpress/   
   RewriteCond %{REQUEST_FILENAME} !-f   
   RewriteCond %{REQUEST_FILENAME} !-d   
   RewriteRule . /wordpress/index.php [L]   
</IfModule>
# END WordPress

最后在重启apache服务就可以在windows下启用永久链接了。

另外需要提醒大家的是尽早在安装测试环境后马上进行上述的修改，链接样式变更后，搜索引擎所收录的旧链接将失效，读者访问你的文章时将得到404错误。

1. 1. visual edit名不副实，在后台攥写文章发布后却不是那么一回事；
2. 2. 速度慢，wordpress的后台那叫一个慢啊，点个按钮得等个3、5秒；

于是，把目光投向离线编辑器，试用了几个发现最好用的还是微软出的live writer
令我诧异的是，这么优秀的软件，居然是免费的，向来唯利是图的M$，居然提供了一顿丰盛的免费的午餐！

不过我爱上live writer的历程却并不轻松，安装过程颇费周折。live writer没有独立的安装程序，需要WLInstall.exe这个引导程序通过网络进行安装（注意：live writer依赖于.net framework 2.0，用户需要先装这个组件），WLInstall.exe实际上是微软live计划的入口，运行后将检测你机器上的live组件，并默认安装/更新所有组件，真霸道！说到这alife又忍不住想f*ck微软了，不过转念一想，我们在吃免费的午餐，还有什么资格对人家口诛笔伐呢？说到这就不得不说国内用户的丑恶嘴脸，一方面在用盗版的windows，一方面又骂微软定价过高、安全性差，是，没错，windows的售价大大超出了国民的支付能力，但你可以不用啊？微软又没有把刀架在你脖子上，所以既然偷偷的用了别人的东西，就是不要再抱怨这抱怨那了，知足吧。扯远了，安装的过程就不多说了，为了方便读者，alfie将live writer的安装目录压缩了，放在这里供大家下载，解压后就可直接运行，再提醒一次，需要先安装.net framework 2.0哦。

live writer的功能介绍

一、界面

live writer继承了典型的微软风格，类似office，很容易上手

二、真正的所见即所得

这是微软的强项，无出其右者，可能有的读者会反对，觉得Tex才是真正的WYSWYG，这就不深究了，对于普通用户而言，唯M$是也。在live writer安装的过程中，它将自动检测blog类型，并将blog模板下载到本地，这样用户就可以边编辑边查看在网站中的效果了。

三、贴心的图片编辑功能

这是alfie的最爱了，用户不仅可以在live writer中调整图片大小、变形、旋转的基本操作，还可以增加各种效果，例如上图就用了阴影效果，最贴心的当属水印，用户可以在图片中写上自己博客的网址，防止文章被盗用，这也是一种维权的手段之一，真的是太贴心了，alfie在用到这个功能的时候有一种很温暖的感觉，^_^。

四、智能发布

用户发表一篇文章后，觉得不满意，再修改再发布，仍然可以覆盖原先发布的文章，甚至更改了文章标题也不妨，不知道这是无心插柳还是有意为之。如果是有意为之，则微软的体贴到了极致；如果这无心插柳，则这个bug显得那么可爱，alife要的就是这种效果。

live writer还有插件接口，将来肯定会有越来越多的插件丰富其功能，对于拥有blog的用户，live writer绝对是不容放过的一道美食。

wordpress采用的是php，简单易学，官方甚至提出5分钟安装好一个博客的口号。整个软件的架构设计得很好，有大量的第三方插件，从天气预报到youTube视频，不一而足，这些种类繁多的插件为能满足各种各样的用户需求，不过我觉得最吸引用户的是互联网上有大量的精美的主题。

得益于php和优秀的架构，即使菜鸟也能对主题动刀动枪大改一番，就像乐高积木一样，我们仿佛回到了童年，将颜色各异的积木组合成各种个样的形状，那种内心的满足是其他blog软件所无法提供的，这就是DIY的乐趣和魅力所在。使用了wordpress的blog，大都会开一个theme的类别，可见DIY情怀是如此的流行，我承认我已经喜欢上修改主题了，虽然这跟建博的初衷背道而驰，不过我还是会继续对它进行修葺，就像装修一栋属于自己的房子一样。下面是国人根据K2这个主题进行修改后的k2-u3主题

这种DIY情怀不禁让我想起了windows和linux，windows是一个纯粹的商业软件，微软以用户易用性为中心，打造了市场占有率最大的操作系统，它吸引用户的是其易用性和绚丽的图形界面，安装简单，易于使用，大量的应用软件可供选择，不过高端用户总觉得缺少了一些东西，那就是windows屏蔽了系统底层的东西，无法满足他们DIY的乐趣，恰好，linux弥补了这个空白，linux是一个个人兴趣爱好的产物，在各路好手的援手下慢慢成长起来的，它最大的特点就是灵活性高，用户能随心所欲对其进行修剪，这能很好的满足那些拥有无穷精力、喜欢折腾的DIY们的需要。

网上不少windows vs linux的帖子都会谈到windows的易用性和linux的灵活性，微软近年来也开始将操作系统底层的东西展现给用户，譬如vista提供了一个大幅改进了的命令行环境，而linux厂商也在易用性方面下了很大功夫，ubuntu和SuSE就是代表，所以说，一个产品既要考虑大众用户对简单易用的需求，又要考虑高端用户对扩展性的需求。

wordpress正是这样的一个产品，它是易用性和灵活性的完美结合，这就是它风靡全世界的原因。

这个截图来自于http://www.geekishblog.com/，博主用的是Organic这个主题，该主题的sidebar.php里有一个包含两个标签页的区块，第一个标签页的内容是Recent Post，第二个是Recent Comments，接着再通过样式表和tabber.js这个类来实现ajax的效果，那我们也可以利用它做一个“精华文章区块”来放置精华文章。先下载tabber.js

一、解压到主题根目录下

压缩包里面有多个示例文件和两个js文件，还有一个样式表，将tabber-minimized.js和exmaple.css解压到主题的根目录下，并重新命名为tabber.js和tabber.css。

说明：两个javascript文件的内容完全一样，tabber-minimized.js是tabber.js的优化版本，文件尺寸小，能加速网页的浏览速度。另外，这是一个遵循GPL的自由软件，用户可以免费使用。

二、修改header.php

标签页的效果是利用无序列表+CSS+javascript来实现的，因而在header.php中指定这两个文件的URL。

<link media="screen" href="&lt;?php echo bloginfo(stylesheet_directory). '/tabber.css'; ?&gt;" type="text/css" rel="stylesheet" /> 
<script type="text/javascript" src="&lt;?php echo bloginfo(stylesheet_directory) .'/tabber.js'; ?&gt;"></script>

bloginfo是wordpress的函数，stylesheet_directory是bloginfo的参数，整个语句的意思是构造tabber.js的绝对路径，这样用户的浏览器就可以正确的下载该文件了。最后加上这段：

<script type="text/javascript">
   document.write('<style type="text/css">.tabber{display:none;}<\/style>'); 
</script>

默认情况下浏览器会在tabber类加载前优先显示标签页的内容，这会影响影响用户的体验，这段代码的作用是保证tabbe类加载之后方显示“精华文章区块”。

三、确定“精华文章区块”位置

在网页的哪个位置放置“精华文章区块”呢？这个问题还蛮挺重要的，很多主题都将类似的功能区块放在右边栏，因为这样有利于用户导航，而本网站使用的是ProSense这个主题，侧边栏的位置大小有限，所以把它放在第一和第二篇文章之间，这样也能醒目展示“精华文章”。

下面是ProSense主题中index.php的源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php if (have_posts()) : ?> 
   <?php $count = 1 ?>
   <?php while (have_posts()) : the_post(); ?> 
      <div class="post" id="post-<?php the_ID(); ?>"> 
         显示文章 
      </div><!-- post end--> 
      <?php if ($count==1) {  ?> 
         <div>
            精华文章区块 
         </div><!--在第一篇文章之后显示“精华文章区块” --> 
      <?php } ?> 
   <?php endwhile; ?> 
   <div class="navigation"> 
      显示导航链接 
   </div> 
<?php else : ?> 
   显示目前无文章 
<?php endif; ?>

整段代码的意思是：如数据库有文章则使用while……endwhile这个循环将所有文章显示出来，加入计数器count，当count=1时插入“精华文章区块”（亦即第一篇文章之后）。关键语句就是跟计数器相关的两句：

<?php $count = 1 ?> 
...
<?php if ($count==1) { 显示精华文章区块 } ?>

依葫芦画瓢，只要将这两句加入到您到index.php就可以了，切记将第一句放在while之前，第二句放在while和endwhile之间。

四、添加精华文章

alfie的精华文章内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="tabber">
  <div class="tabbertab">
     <h2>最新文章</h2>
      <ul>
        <?php
          $recentposts = new WP_query();
          $recentposts->query('showposts=5&amp;orderby=date&amp;order=DESC');
        ?>
        <?php while ($recentposts->have_posts()) : $recentposts->the_post(); ?>
          <li>
              <a href="&lt;?php the_permalink() ?&gt;"><?php the_title() ?></a>
              <span><?php if(function_exists('the_views')) { the_views(); } ?> | <?php comments_popup_link('发表评论', '1 条评论?', '% 条评论?'); ?> | <?php the_time('Y-m-d') ?></span>
 
        <?php endwhile; ?>
      </li></ul>
  </div>
  <div class="tabbertab">
     <h2>精品推荐</h2>
     <ul>
      <li>该功能未完工，请耐心等候。
    </li></ul>
  </div>
</div>

为了方便日后的维护，alfie将这部分内容单独放入一个文件(suggestions.php)，index.php里只需要简单的include它就可以了。于是在index.php中:

<?php if ($count==1) { include('suggestions.php'); } ?>

五、修改样式表

对应的样式表是tabber.css，读者需要自行修改之，以使该区块能跟整个网页的风格相协调。www.linuxabc.net.cn的tabber.css如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

----clip---- 
/*-------------------------------------------------- 
ul.tabbernav = the tab navigation list 
li.tabberactive = the active tab 
--------------------------------------------------*/ 
ul.tabbernav { 
   margin:0; 
   padding: 3px 0; 
   border-bottom: 1px solid #663200; 
   font: bold 14px Verdana, sans-serif; 
} 
 
ul.tabbernav li { 
   list-style: none; 
   margin: 0; 
   display: inline; 
} 
 
ul.tabbernav li a { 
   padding: 3px 0.5em; 
   margin-left: 3px; 
   border: 1px solid #663200; 
   border-bottom: none; 
   background: #FBF5DF; 
   text-decoration: none; 
} 
 
ul.tabbernav li a:link { color: #CC3300; } 
ul.tabbernav li a:visited { color: #663320; } 
 
ul.tabbernav li a:hover { 
   color: #CC3300; 
   background: #EDE0B3; 
   border-color: #663200; 
} 
 
ul.tabbernav li.tabberactive a { 
   background-color: #EDE0B3; 
   border-bottom: 1px solid #EDE0B3; 
} 
 
ul.tabbernav li.tabberactive a:hover { 
   color: #CC3300; 
   background: EDE0B3; 
   border-bottom: 1px solid 663200; 
} 
 
/*-------------------------------------------------- 
.tabbertab = the tab content 
Add style only after the tabber interface is set up (.tabberlive) 
--------------------------------------------------*/ 
.tabberlive .tabbertab { 
   padding:5px; 
   border:1px solid #663200; 
   border-top:0; 
   font-size: 12px; 
   background: #EDE0B3; 
} 
 
.tabberlive .tabbertab ul li { 
   display: block; 
   color: #CC3300; 
   border-bottom:1px dotted #bbb; 
   padding-left:20px; 
   padding-top:2px; 
   padding-bottom:2px; 
   background: url(images/star.gif) no-repeat left 1px; 
   line-height: 1.4em; 
} 
 
.tabberlive .tabbertab ul li span{ 
   display: block; 
   color: #663200; 
} 
----clip----

至此大功告成，说明：alife的美工实在不怎么样，所以漂亮与否就全靠读者自己的艺术鉴赏力和美工技巧了。