01Games 实践论

经过一周的努力，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 <span>Posted on</span> %3$s ', 'twentyten' ),
		sprintf( '<span><a href="%1$s" title="%2$s">%3$s%4$s</a></span>',
		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( '<a href="%1$s" title="%2$s" rel="bookmark"><span>%3$s</span></a>',
 			get_permalink(),
 			esc_attr( get_the_time() ),
 			get_the_date()
 		)
 	);
}

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

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

<?php if ( is_single() || is_page() ) {/* for custom css */
	$css = get_post_meta($post->ID, 'custom-css', true);
 	if (!empty($css)) { ?>
<link rel="stylesheet" type="text/css"
href="<?php bloginfo('stylesheet_directory') ?>/styles/<?php echo $css; ?>.css" />
 	<?php }
} ?>

这样你只要在自定义字段里面增加一个名为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重新生成你的缩略图试试：）