aeroom » 网站更新

01Games 实践论

Kaero — Tue, 26 Oct 2010 05:29:11 +0000

经过一周的努力，01Games博客终于在上周末进入正常运行状态。这次我放弃了熟悉的Sandbox，把改造目标转向Wordpress 3.x的默认主题Twenty Ten。一路修改下来，我的体会是这个主题功能够强大定制也够灵活，在01Games上线之后我又趁热打铁，花了一个晚上把aeroom基于Twenty Ten重构了，这速度足以说明它有多高效。

善用判断语句

这次也摒弃了之前轻易就新建页面模板的做法，而是更多地依赖判断语句，关于判断条件请参阅官方的技术文档：http://codex.wordpress.org/Conditional_Tags。我用到的一个非常重要的判断语句是：if ( is_front_page() && !is_paged() ) { } ，这个语句判断当前页面是否是网站首页，结合loop.php和sidebar.php，足以轻松定制一个与列表页完全不同的首页（对比aeroom的首页和第2页），既无需新建一个页面模板，也不用在“设置 → 阅读”里面专门设置一个静态首页。

推而广之，在很多地方都可以用不判断语句做出与众同的效果，最常用的无疑是Widget，对于支持多Widget的主题来讲，加上判断语句让每个页面出现不同的Widget是很轻松的事情。如果你连这个都嫌麻烦的话，或者你应该试试这个插件：Widget Logic。还有一个思路来自Twenty Ten主题包里面的loop.php，它的目的是给列表循环内的2个指定分类设置特别样式：

if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) {
    ......
} elseif  ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) {
    ......
} else {
    ......
}

Twenty Ten的相关Hack

对于我来讲Wordpress就是一个内容发布工具，它的外在表现可以随心所欲千变万化，因此我很难接受像传统Blog那样地把所有文章循规蹈矩做一个列表。灵活的布局导致Twenty Ten的一个特色功能自定义页眉变得很鸡肋，所以我在functions.php里面将相关代码删除，起结位置如下：

// Your changeable header business starts here
define( 'HEADER_TEXTCOLOR', '' );
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/path.jpg' );
......
......
......
	'sunset' => array(
		'url' => '%s/images/headers/sunset.jpg',
		'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
		/* translators: header image description */
		'description' => __( 'Sunset', 'twentyten' )
	)
) );

01Games的顶栏会根据用户是否登录显示不同的内容，右图是登录前后对比，这个判断的实现如下：

if ( $user_ID ) {
	global $current_user;
	echo get_avatar( $current_user->user_email, $size = '28');//显示Gravatar头像
	echo $current_user->display_name;//显示名称
} else {
	......//显示默认内容
}

你也可以像01Games那样默认给每位作者显示头像，它调用的是functions.php里面的twentyten_posted_on()函数，修改后如下：

function twentyten_posted_on() {
	printf( __( '%1$s Posted on %3$s ', 'twentyten' ),
		sprintf( '%3$s%4$s',
		get_author_posts_url( get_the_author_meta( 'ID' ) ),
		sprintf( esc_attr__( 'View all posts by %s', 'twentyten' ), get_the_author() ),
			get_the_author(),
			get_avatar( get_the_author_meta( 'ID' ), $size = '32', $default = '' )
 			//$default指定默认头像的链接地址
 		),
 		'meta-prep meta-prep-author',
 		sprintf( '%3$s',
 			get_permalink(),
 			esc_attr( get_the_time() ),
 			get_the_date()
 		)
 	);
}

给文章和页面指定CSS样式表

Twenty Ten的body_class()函数虽然比Sandbox稍逊一筹，但根据body类给指定页面玩一些小花样也足够用了。然而有时候我们不会满足于此，想让某个页面以特殊的面貌出现于用户眼前，这时再去修改style.css就力不从心了，另外也很容易让style.css变得臃肿。所以下面这个小技巧就很管用，在header.php的标签内增加如下代码（为了获得CSS优先级，最好放在标签的最后）：

ID, 'custom-css', true);
 	if (!empty($css)) { ?>

这样你只要在自定义字段里面增加一个名为custom-css的字段，然后把相同名称的CSS文件上传至当前主题下面的styles文件夹就OK了。之所以放在主题文件夹下，是为了将来移除主题时不会留下残余文件，保持文件夹干净有序。

缩略图问题

要强调的是，即使你在“设置→媒体”的选项里勾选了“忽略原始比例，总是裁剪缩略图到这个尺寸”，那也只会对缩略图有效果，对中等尺寸和大尺寸是没用的；也就是说中等尺寸和大尺寸的缩略图的比例都是参差不齐的。很多时候我们希望在不同的地方调用相同尺寸的缩略图，如何避免这个问题？在functions.php做如下修改（请先搜索你的functions.php是否已经有add_theme_support( 'post-thumbnails' )）：

// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size( 'home-show', 160, 160, true );//在主题内使用the_post_thumbnail(''home-show')调用
add_image_size( 'list-show', 400, 300, true );//尺寸可以自由定义

现在用Regenerate Thumbnails重新生成你的缩略图试试：）

New aeroom is up and running.

Kaero — Sat, 17 Apr 2010 19:53:00 +0000

因为非常重大的私人事务，在新版主题上线2周之后，我终于空出时间来写一篇日志总结一下这次的更新了——这些天虽然忙到焦头烂额，但我一直还是一直想着这篇网志，以至于自己都觉得不可思议：既然网站都已经上线，进行过哪些改动也理应为人所知了，又何必非得自己苦口婆心地再详述一遍呢？

这次的改动并不很大，只是按照上一版的方向继续改进而已，我想这个方向就是“可读性”吧。如你所见，网站主体由居左对齐改为居中，首页的排版模仿了杂志的效果，而内页的主体文字也放大了一号，我希望这样排版的阅读体验能尽量接近纸质媒体。不过局部的细节仍然需要长期的细致调整，让每一个像素都趋于完美，这应该是一个设计师的本能。

我在很早之前就希望调整博客的设计，其实之前的主题并无太大的缺陷，Winging 君甚至认为它比新主题更大气。但是我自己想的是，随着屏幕越来越宽，居左的样式可能会越来越局促，在公司电脑的1680分辨率下它表现尚可，回到家里1920的大屏幕问题就比较明显了，右边是大块大块的空白。

aeroom 重装上线

Kaero — Tue, 30 Jun 2009 06:20:30 +0000

在两个月的忙碌时期过去之后，很低调很神速地在一周内将网站改版了。主要的变化是缩小了左侧的空白区，大幅增加了内容区域的宽度，上一版的可读区域的确是太小了。另外颜色也力求更少更淡，并且大范围地应用了圆角元素，作为一个 Web 从业者，努力提高网站的可用性和亲和力应该是我们始终不变的目标吧。

一些插件和 Widget 方面的改变

启用 Flickr Photo Alubm 替换了过于臃肿的 NextGen Gallery，同时用其自带的 Widget 取代了 FlickrRSS，具体效果请参见现在的 Albums。除了 Flickr 在国内的速度稍慢之外，我觉得这款插件还是相当不错的。但是千万不要追求华丽给它启用任何 AJAX Slideshow 效果，否则看照片的人会发狂的。另外它的模板其实很好定制，一般来讲只要调整一下 /tantan-flickr/templates 文件夹里面的 photoalbum-index.php 就够了。

弃用了 Quoter，启用了一个回复评论的通知插件：Mail to Commentor，我觉得邮件通知真的很必要，非常利于形成友好的讨论氛围。还有一个相似的插件是 WordPress Thread Comment，相对来说功能更强大，只是回复的时候会改动表单的位置，对布局造成破坏，这个有点让人讨厌啊-_-

灵活地使用了更多的 Widget。我一直觉得每个页面都挂着同样的边栏是很糟糕的事情，比如首页和分类目录的边栏就应该有所不同，Post 和 Page之间也应该有所区别，不过稍事研究之后，却发现这原来是非常容易解决的问题。一般的主题都只有1个或2个边栏，但是我们根据上面的想法，觉得需要不同的4个边栏才够合理，那可以按照以下步骤进行设置：

打开主题文件夹里面的 functions.php，搜索 register_sidebars() 函数，它应该以这样的形式存在的：
register_sidebars( 1, $p );
上面的“1”就是现在注册的边栏数，只要将其改为4（或者是任何你预想的数字）就行了。
然后我们进入 WordPress 后台，就能在“外观 → 小工具”的管理界面中看到4个可用边栏了，你可以在这4个边栏中任意添加不同的 Widget。
现在你刷新你的主题，应该会发现还是只有一个相同的边栏。这时打开主题文件夹里面的 sidebar.php，找到…，复制3次（一共是4个了），然后再赋予它们4个不同的ID，在这一步保存后再刷新主题，你会发现之前在后台设置的4个边栏都出现了——但是每个页面都是一样的，而且还是4个堆在一起！
那么接下来就该让它们分别呈现于不同的页面了，我们给每个边栏加上显示的条件，比如在首页出现的边栏的前后加上以下PHP代码：…

这样这个边栏就只会在首页出现了。类似的，我们可以给只出现在 Page 中的边栏加上 is_page() 的条件判断， Post 的边栏则加上 is_single()。更多条件判断语句可以参考 WordPress 官方文档的 Conditional Tags 页面。

需要注意的问题：query_posts() 函数会导致某些判断无效，为了避免该状况发生，请务必在它后面加上 wp_reset_query() 函数。

启用了 Fancybox，暂时只在 Portfolio 页面应用了。虽然在IE8下面貌似会出现无响应的问题，不过仍然很喜欢它的样式。

碰到的一些问题：

IE6 正式被放弃，PNG 的透明问题实在是懒得去解决了，不过除此之外，似乎并没有出现让人难以忍受的布局问题。不过好久没有接触过CSS，不由赞赏 IE8 还是一个相当不错的浏览器啊，两个IE6和IE7都保持的经典BUG：input 元素的 text-indent 无效以及无法正确地 float:right 的问题——都被修复了。

不过 Windows Live Writer 竟然不能正确加载新主题，真是奇怪呢——家里的 WLW 还因此而崩溃了，至今没有修复。

好像要说明的就这些了，请大家帮忙反馈 BUG。

主题的修正和补完工作也告一段落了

Kaero — Fri, 12 Dec 2008 15:44:31 +0000

在我刚刚兴高采烈地做完总结致辞的几分钟后，马上就被隔壁的沙总（前往拜会沙总）电脑上的 IE6 给无情地打击了——整个网站简直就是支离破碎不堪入目啊。在连续两天夜以继日的抢修之后，网站在 IE7 里的表现基本恢复正常，然而因为使用了大量的透明 PNG 图片，我只能无奈地表示：

其他的修正工作还是卓有成效的，不知你有没有发现在某些分类出现的特殊风格？比如 Writing 和 Work 这两个分类。还有为某些优雅女士特别量身定做的评论框，不妨瞅瞅这里和这里——还是非常了不起的吧？其实这都靠无所不能的 Sandbox 啊，在此前我曾经尝试过 Comment Highlighter 这个插件，不过有了 Sandbox 之后你就可以跟它潇洒告别了。

另外还完善了一下链接页面，并且增加了一篇题为『本站友情链接的参考样式』的指导性文档。过去因为本人的懒散，大家就算想做个链接也还得劳心费力自己动手，并且最终效果还往往出现某些差错，譬如 Winging 网站上的友情链接……其实这么小的尺寸我一点也不建议把文字和图案一起放上去，不过别人好心为你做了图你一个无所作为的懒鬼混蛋也就只能缄口不言罢-_-

再另外……最后……好像没有了。一两天的时间就做了这么多工作，我真是太勤奋了。那么与沙总的会晤也已经完了吧？什么？什么都没见到？怎么可能呢？哇扣，还真的什么都没有啊，这到底是怎么回事啊？哈哈哈

PS：突然想起来了，我昨天把 WordPress 升级到了最新的 2.7，整个过程轻松愉快，新主题和所有插件都安然无恙。大概也是因为插件使用得比较少的缘故吧？不过新的管理界面还需要一点时间来适应，还是觉得原来的配色和布局更加简洁舒适啊。

在白宫落成仪式上的总结致辞

Kaero — Wed, 10 Dec 2008 16:19:04 +0000

经过上周六至本周一的努力施工，俺的博客终于改造完成了。这个新主题的设计稿其实很陈旧了，还是大半年前的工作，代码则是基于 Sandbox 改写的。咳咳，最终效果得到了品味高雅的 Winging 同学的认可与赞赏，感激～同时也受到了某些无耻之徒如困妞和天台等人的强烈嫉妒和刻意贬低，愤慨～他们表示看上去完全不咋的，或者干脆说是简陋，尤其是百度空间资深用户困哉，在得知这博客使用的是传说全宇宙最强的 WordPress 程序之后，他更是痛心疾首地控诉：配上你这套烂皮，真可谓暴殄天物啊！然后就皱着眉头摇着脑袋非常不满地把自己的百度Mac模板拿出来对比了。

首先得把新主题一个不太明显的功能拎出来示众一下，如下图左端红色部分所示：

这里其实是一个 Previous Post 的跳转链接，相应的右端也有一道浅灰的区域，则是 Next Post 的跳转链接。因为设计时没有并考虑到这两个很必要的链接，在 Coding 的时候临时添加了这么个效果，但为了不至于影响文章标题喧宾夺主，做得比较低调可能容易被忽略，而 Sandbox 代码又不太好改动，所以连个提示都没办法加，只能希望鼠标翻转事件能够引导用户去点击了。

为了加快载入速度便于阅读，我把那些 Web 2.0 网站的应用都集中到首页了，内容页面中的 Sidebar 只保留了很简单的基本功能，另外放上了一个有趣的 Widget WOWZIO ，可以让你看到网站上的其他用户都在干嘛——虽然在罕有人迹的本站它可能一天也就动那么一两下，不过要是有一天俺成名了它就会像锯木厂工作台上的木屑一样飞迸啊。然而首页其实还有问题的，因为很多东西都转移过来这边，所以在拥挤的布局里我仅显示了最新的一篇文章。这样用户想继续阅读的时候就比较麻烦了，因为在附近范围内没有链接引导他们打开其他文章或者存档页列表。他们只能通过最顶部的导航来选择，这无疑是非常糟糕的体验啊。所以我还在考虑要不要在 Twitter 列表上面插入一个 Recent Posts 列表。

在改造的过程中也尝试了很多新的 WordPress 插件，下面就推荐几个我觉得不错并且最后保留下来的吧：

1） Dynamic Content Gallery：就是首页上边那个 Slideshow 效果，看起来还不错吧？其实最早找到的是 Featured Content Gallery，这两个插件都是基于同一个JS框架开发的，效果非常类似，不过 FCG 弄了很久，始终停留在加载那一步就不能播放了，最后无奈放弃另选了 DCG。不过 FCG 有一个优点是可以任意指定一个2至10之间的图片数，而 DCG 则固定加载5张。另外 FCG 只能加载一个指定分类，DCG 在这方面则自由很多。

2） Quoter：咳，对于俺的博客来讲这还是一个稍显奢侈的插件吧？效果如图所示：

你只要点击 Quote 就可以引用谁谁谁的发言了，这在那些引起热烈讨论的大人气话题里面还是相当管用的，否则在一大串的回复列表中你就可能陷于无的放矢无人理会的尴尬境地了。不过在评论数通常为零的本站，咳，不说也罢，人生真是很悲哀啊。

3） MobilePress：这是一个针对移动设备的插件，对于普通用户完全没有影响。不过在俺这个经常在地铁上上网的黑莓用户看来，它还是相当相当棒的。

追加了黑莓上面 Opera Mini 的两张截图。和原貌呈现的 Winging 同学博客对比一下，还是各有千秋的吧？然则对于某些布局复杂的网站来说，用 MobilePress 优化一下输出可读性还是会强很多的。

以上总结完毕，最后感谢大家的支持，希望自己今后也能努力一点：）

Twitter

Kaero — Fri, 01 Aug 2008 05:36:59 +0000

开始用 Twitter 了，就是右边那一排“最近发过的牢骚”。主要是 Blog 好久不更新，不免有点小小的空虚，不过平时也太懒了，昏昏愦愦，写不写自己也觉得没个所谓。随性发发小牢骚，又不好意思摆上台面。长篇大论嘛又写不出来，没事浮出水面用 Twiiter 喷一两句，应该是颇为合适的方式呢。

其实很早就开始用饭否了。饭否真的非常方便，MSN 的签名栏绑定一下，基本上不用再操心了。反而Twitter 想跟 MSN 结合使用的话，似乎还需要另外安装一个插件（点击这里），并不像饭否这样子干净利落。

选择 Twitter 只是因为手机上安装了一个TwitterBerry 的小程序，虽然似乎偶尔会反应不够灵敏，不过平时更新还是相当便捷的。虽说饭否也开通了短信更新的方式，不过老觉得需要另外花钱，不像 TwitterBerry GPRS 流量包月不用白不用。

Firefox 也有很方便的 Twitter 扩展，我使用的是 Twitter Bar，在地址栏就可以更新了。

TwitterBerry：http://www.orangatame.com/products/twitterberry/

Twitter Bar：https://addons.mozilla.org/zh-CN/firefox/addon/4664

丢了两个域名

Kaero — Sun, 17 Feb 2008 02:07:00 +0000

aeroom.net，aeroom.org。之前数据引擎的员工也通知过我，不过我是打算完全放弃国内的服务商的，等域名过期再在Dreamhost注册，方便快捷。没想到新网非常BT，域名过期了自己帮你续好了，就等你去交钱，这不是要绑住你么……这么下去估计迟早要卖给别人-_-只是两个域名嘛，也没啥，由它去了……

New aeroom, based on LifeType.

Kaero — Sun, 17 Dec 2006 06:41:13 +0000

我大概是一个典型的双子座，我说的是在善变这方面。刚刚尝试了一下 WordPress，然后就决定转向 LifeType 了。当然，这些尝试都是在本地做的，如果我的空间支持 MySQL 的话，PJBlog 应该也早就被撤换了吧……不过它已经被冷落了，以至于现在使用的皮肤还始终处于半成品的状态。

我有个非常完善的网站规划，但是苦于找不到合适的程序来实现，所以原来是打算自己开发一个系统的，不过以我的条件来讲——三分钟热情的品性与三脚猫的编程能力——要实现这个目标似乎是遥遥无期，那也只好把它当作一个长期目标来规划了。

在我的想法里面，理想的 Blog 程序应该支持二级或更多级别的分类，而且要有非常强大的模板系统（关于这个理想状态的模板系统，请参考 iNewS），也就是说，绝对不能是一个 Blog 只有一个模板，而是每个分类，甚至每个页面都可以选择其相应的模板。虽然 WordPress 的模板设计起来非常灵活，但是没办法做到每个分类都有相应的模板，而 LifeType 中的一个用户可以拥有多个 Blog，每个 Blog 可以单独定义模板，这样就可以在某种程度上达到我的要求。

参照页面最上端的导航条，我的网站分为以下几个栏目：

aeroomStudio：
发布与展示我的设计作品
aeroomPress：
分享我制作的电子书——虽然现在还没有一部制作完全的。
诗：
收集旧体诗词，包括前人作品、网络诗词与我自己的作品。
WebPicker：
分享与评论 Cool site。
插画：
用来发布插画作品与动漫同人。
雪庵：
记录我的潦倒生活与堕落历程，另外还有一些未经大脑思考过的所谓人生感悟。
行事历：
装模作样地为自己定制工作计划的地方。

我在 LifeType 里面建了7个 Blog，分别对应这些栏目，然后每个栏目就可以有着不同的模板了。当然，可能还会遇到一些问题，但是在现阶段也只能将就将就了……愿我能更加努力吧。

PS：其实阿桂的 iNewS 如果精简一下，并且在 RSS 和 TrackBack 方面增强一些的话，绝对是非常强大并且符合我要求的 Blog 程序。咳，因为答应他的一些东西搁置了很久，所以现在都不好意思向他说这个了，汗一个先～

在本地搭建的 WordPress

Kaero — Tue, 21 Nov 2006 02:31:02 +0000

捣鼓了好半天，终于把 WordPress 搭建起来了。因为这个空间没有提供 MySQL 的数据库，所以也只能在本地看了。我用了花生壳，这样你可以通过这个域名来访问它：http://aeroom.vicp.net/wordpress/，不过问题是我一关机你就不能访问……

皮肤暂时用的是 UtomBox 下载的 4u 海明威中文版，在这里表示感谢谢。不过自己的皮肤也在构想中，而且已经有了一定的思路，嘿嘿。

另外有一个关于 PHP + MySQL 的奇怪问题，就是在 PHP 和 MySQL 都各自安装好，并且测试无误之后，PHP 里面尝试连接 MySQL 会报错。在网上搜索，结果是这样子解决的：除了系统目录中的 php.ini 文件要配置好以外，另外再复制一份到 php 的安装目录。非常诡异……之前安装 PHP 时参考的各种资料里面也没有提到这么回事，但是就这样解决了。