aeroom » Work

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重新生成你的缩略图试试：）

FontLab Studio 心得一二

Kaero — Thu, 13 May 2010 05:43:31 +0000

FontLab Studio 是一个 Windows 平台流行的字体设计软件，比起 Font Creator，它的一大优势是支持直接导入AI或者EPS矢量格式。它和 Adobe Illustrator 的配合更可谓天衣无缝，你可以直接从AI里面复制字体形状然后粘贴到FontLab Studio中。

因为本篇文章只涉及到一点点个人所得，更详细的 FontLab Studio 的信息和教程恕不赘述，在此推荐一篇简单的 FontLab 教程，以资读者参考：Illustrator+FontLab 进行字体设计教程，再推荐一篇陈嵘老师写的关于英文字体设计的文章：字体细语2——英文字体的基础知识——《新平面》第22期。

FontLab Studio支持从AI里面直接复制字体形状，不过这个过程需要注意的是，AI里面的形状请尽量大，如果太小的话会发生这样的变形：

其二，复合形状一定要合并，否则形状有叠加的部分会出现错误：

未拼合的形状会在字体较小时出现这样的情况：

所以一定要记得合并复合形状，具体操作如下图所示：

第三，如何精确控制默认字距？在旁边的虚线上按鼠标右键，弹出Properties菜单：

点击出现Metrics Properties设置窗口，直接设置你想要的字距即可：

以上的经验希望能对您有所帮助。

New aeroom is up and running.

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

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

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

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

怎样才能修复 Windows Live Writer？

Kaero — Tue, 30 Jun 2009 14:36:16 +0000

我真的已经抓狂了，我将 Windows Live Writer 卸载过了，重装过了；将 .Net Framework 2.0 卸载过了，重装过了，还升级到了3.5版本；我用过传说中强力卸载的神器 Windows Install Clean Up；Application Data 和 Local Setting 文件夹里面和 Windows Live Writer 有关的文件夹也都删除过；注册表里面所有跟 Windows Live Writer 有关的项都清理过了。难道除了重装系统，我真的就没有别的选择了么？

我一直觉得 Windows Live Writer 是个很棒的软件，Zoundry Raven 完全不能与之相比，更勿论笨拙的 WordPress 后台编辑界面。但是这样的问题真的太古怪了，而且修复的过程令人绝望。

问题的起因是在 Windows Live Writer更新了一下最新的主题——模板下载失败，然后报错，退出，这之后就从来没有再成功启动过了。

Windows Live Writer startup Error

错误就是上面的情况，系统日志里面没有任何记录。诚心请教有经验的达人应该如何解决-_-

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 优化一下输出可读性还是会强很多的。

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

银他妈，怀旧四人组

Kaero — Mon, 17 Nov 2008 09:47:07 +0000

其实俺觉得草图都挺有感觉的，一上色就反而全无亮点，譬如这样子的草图：

小红帽的故事

Kaero — Fri, 14 Nov 2008 03:16:02 +0000

采蘑菇的小姑娘

Kaero — Tue, 11 Nov 2008 13:07:49 +0000

埋伏？危险！！！

注意右上角那个惊恐万分地哀号着的家伙，就知道前面两者各自的命运了吧……