aeroom » Wordpress http://kaero.org Make Merry Mon, 21 Mar 2011 15:29:23 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 01Games 实践论 http://kaero.org/2010/10/experience-of-01games/ http://kaero.org/2010/10/experience-of-01games/#comments Tue, 26 Oct 2010 05:29:11 +0000 Kaero http://kaero.org/?p=1187 如果一个目标能通过插件实现，那就尽量使用插件而不是修改主题代码，插件能让你的主题干净、富有弹性并且易于移植，除非迫不得已，不要轻易修改代码。 继续阅读 →]]> 经过一周的努力，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' )
	)
) );

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

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

推荐的插件

这涉及到一个很重要的原则：如果一个目标是能通过插件实现的，那就尽量使用插件而不是修改主题代码，插件能让你的主题干净、富有弹性并且易于移植，除非迫不得已，不要轻易修改你的主题代码，修改代码的确能很直接地解决问题，但是并不利于维护，也有可能造成奇怪的问题。

Meteor Slides

这是一个幻灯片插件，我用它替换了选项复杂的 Dynamic Content Gallery。它的设置非常简单，仅包括幻灯片尺寸和切换的效果控制而已。

添加幻灯片也很直观，你只要定义标题、上传图片和指定链接就OK了。这样做也更加灵活，Dynamic Content Gallery甚至没办法链接到站外的网址呢，现在我们可以轻松用Meteor Slides定制一个轮播广告位了。效果请参见01Games.org的边栏，或者aeroom的（整个）首页。

Related Posts Thumbnails

这是一个以缩略图的形式显示关联文章的插件，效果见本文最下方。我很早就在用这个插件，但是之前它的样式很难定制，因为它输出的内容以DIV组织并且在元素上直接写入CSS，这令我很苦恼。所幸在1.27以后作者增加了一个List的输出选项，现在我可以用灵活的CSS定义纯净的HTML了。

要注意的是，你必须手动设置每篇文章的特色图像，否则它可能找不到正确的缩略图，对于Windows Live Writer等客户端发布的文章尤其如此。

Regenerate Thumbnails

老用户装上Related Posts Thumbnails之后，最大的问题就是大部分旧日志都没有缩略图，因为缩略图是Wordpress 2.9才推出的新特性，这时就需要Regenerate Thumbnails了。还有一种情况是你在媒体里面修改了缩略图的尺寸之后，你也同样要用到Regenerate Thumbnails。

但是也不要期望太高，很多文章是不能生成缩略图的，需要再次强调的是，Windows Live Writer发表的文章尤其如此，囧rz。


WordPress Popular Posts
这是一个很老牌普及度也很高的插件，为什么要特别推荐？因为它现在支持缩略图了……对于设计师的博客来讲以图片来组织可能很重要。

FancyBox for WordPress
这是一个FancyBox插件，给你的图片增加Lightbox效果。同类的插件很多，还有一个是Easy FancyBox，相比之下更简单，但是相应的，有特殊需求的话定制起来也更麻烦。

以上就是这次我特别要推荐的几个插件，请在Wordpress插件库里自行搜索试用。那么这次的总结也到此为止，欢迎您给我留言：）

]]> http://kaero.org/2010/10/experience-of-01games/feed/ 8 WordPress for Blackberry http://kaero.org/2009/07/wordpress-for-blackberry/ http://kaero.org/2009/07/wordpress-for-blackberry/#comments Fri, 24 Jul 2009 10:40:42 +0000 Kaero http://kaero.org/2009/07/wordpress-for-blackberry/ 中文能正确显示么？这才是最关心的问题。结果显示已经很完善了呢，只是在没有WIFI的情况下传图片是非常非常吃力的。

]]> http://kaero.org/2009/07/wordpress-for-blackberry/feed/ 0 Blackberry Blog 客户端：BBMetaBlog http://kaero.org/2009/06/bbmetablog/ http://kaero.org/2009/06/bbmetablog/#comments Fri, 12 Jun 2009 06:16:04 +0000 Kaero http://kaero.org/2009/06/12/bbmetablog/ 继续阅读 →]]> OTA 地址：http://www.opencod.org/opencod/ls2007party.nsf/BBMetaBlog122.jad
发布源地址(by Jason Hook)：http://blog.jasonhookonline.com/2008/01/14/bbmetablog-v122-and-blogsphere-tandem-release.aspx

这应该算是一个比较简陋的 Blog 客户端，不过在 WordPress 官方的 App 推出之前，倒也可以考虑一下。先上截图：
bbmetablog_1
简单无修饰的主界面，不过倒也一目了然。

bbmetablog_2
预设界面，一般支持 XML-RPC发布协议的博客应该都支持，像Wordpress，Google Blogger，Z-Blog，PJBlog等等。相关的发布接口可以自行查询，比如 WordPress 应该类似这样：http://your-domain.com/wp-dir/xmlrpc.php。

bbmetablog_3
简单的发布界面，可以设置标题，标签和内容，分类的话在Config界面设置，默认是未分类。

bbmetablog_4
右键菜单选择“manage tag”，就出来这个标签设置界面。

Edit Post 功能因为试用没有成功，所以就不截了。

总结一下，优势是发布速度还算快，支持的 Blog 程序也比较多，能满足基本需要。不过缺点也比较致命：不支持中文……编辑内容的时候看不出来，发布到网站就变成乱码了。另外希望功能比较完满的同学估计也会嫌它太简单，图标也丑了点，跟百度几乎一样-_-

以上就是我的测试心得，有达人能修改的话最好不过了，毕竟Wordpress 官方 App 应该还没有这么快出来吧：）

]]> http://kaero.org/2009/06/bbmetablog/feed/ 0 在白宫落成仪式上的总结致辞 http://kaero.org/2008/12/summary-for-theme-building/ http://kaero.org/2008/12/summary-for-theme-building/#comments Wed, 10 Dec 2008 16:19:04 +0000 Kaero http://kaero.org/2008/12/11/%e5%9c%a8%e7%99%bd%e5%ae%ab%e8%90%bd%e6%88%90%e4%bb%aa%e5%bc%8f%e4%b8%8a%e7%9a%84%e6%80%bb%e7%bb%93%e8%87%b4%e8%be%9e/ 继续阅读 →]]> 经过上周六至本周一的努力施工，俺的博客终于改造完成了。这个新主题的设计稿其实很陈旧了，还是大半年前的工作，代码则是基于 Sandbox 改写的。咳咳，最终效果得到了品味高雅的 Winging 同学的认可与赞赏，感激～同时也受到了某些无耻之徒如困妞和天台等人的强烈嫉妒和刻意贬低，愤慨～他们表示看上去完全不咋的，或者干脆说是简陋，尤其是百度空间资深用户困哉，在得知这博客使用的是传说全宇宙最强的 WordPress 程序之后，他更是痛心疾首地控诉：配上你这套烂皮，真可谓暴殄天物啊！然后就皱着眉头摇着脑袋非常不满地把自己的百度Mac模板拿出来对比了。

首先得把新主题一个不太明显的功能拎出来示众一下，如下图左端红色部分所示：
image
这里其实是一个 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：咳，对于俺的博客来讲这还是一个稍显奢侈的插件吧？效果如图所示：
image
你只要点击 Quote 就可以引用谁谁谁的发言了，这在那些引起热烈讨论的大人气话题里面还是相当管用的，否则在一大串的回复列表中你就可能陷于无的放矢无人理会的尴尬境地了。不过在评论数通常为零的本站，咳，不说也罢，人生真是很悲哀啊。

3） MobilePress：这是一个针对移动设备的插件，对于普通用户完全没有影响。不过在俺这个经常在地铁上上网的黑莓用户看来，它还是相当相当棒的。
20081211010307
追加了黑莓上面 Opera Mini 的两张截图。和原貌呈现的 Winging 同学博客对比一下，还是各有千秋的吧？然则对于某些布局复杂的网站来说，用 MobilePress 优化一下输出可读性还是会强很多的。

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

]]> http://kaero.org/2008/12/summary-for-theme-building/feed/ 6 WordPress 主题资源 http://kaero.org/2008/04/wordpress-theme-resources/ http://kaero.org/2008/04/wordpress-theme-resources/#comments Sun, 13 Apr 2008 14:44:05 +0000 Kaero http://kaero.org/2008/04/13/wordpress-%e4%b8%bb%e9%a2%98%e8%b5%84%e6%ba%90/ 继续阅读 →]]> 官方的 WordPress Theme Viewer。不过不知道是否为我自己的原因，Test Run 的时候都只能看到默认模板。另外搜索功能似乎也不是很管用，反正我每次搜索 1 Column 总不能出来相符的结果-_-

WordPress Themes，资源众多，不过难免良莠不齐，想在里面找出一款中意的主题还真得花一番功夫。

WordPress主题中文站，更新不是非常快，里面的主题水准都不错，不过大多是比较符合国人审美的那种类型。

http://www.wpdesigner.com/

最后重点推荐来自SMASHING Magazine推荐的几个系列，这几个系列里面应该很容易找出你喜欢的，而且顺藤摸瓜也总能找出一些更好的：

image

]]> http://kaero.org/2008/04/wordpress-theme-resources/feed/ 0