aeroom » wordpress widgets 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 aeroom 重装上线 http://kaero.org/2009/06/new_version_is_released/ http://kaero.org/2009/06/new_version_is_released/#comments Tue, 30 Jun 2009 06:20:30 +0000 Kaero http://kaero.org/2009/06/30/new_version_is_released/ 继续阅读 →]]> 在两个月的忙碌时期过去之后，很低调很神速地在一周内将网站改版了。主要的变化是缩小了左侧的空白区，大幅增加了内容区域的宽度，上一版的可读区域的确是太小了。另外颜色也力求更少更淡，并且大范围地应用了圆角元素，作为一个 Web 从业者，努力提高网站的可用性和亲和力应该是我们始终不变的目标吧。

一些插件和 Widget 方面的改变

flickr logo 启用 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个边栏才够合理，那可以按照以下步骤进行设置：

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

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

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

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

ie6-refused碰到的一些问题：

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

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

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

]]> http://kaero.org/2009/06/new_version_is_released/feed/ 11 在 WordPress 中共享 Google Reader http://kaero.org/2008/04/share-your-greader-items/ http://kaero.org/2008/04/share-your-greader-items/#comments Wed, 23 Apr 2008 03:58:20 +0000 Kaero http://kaero.org/2008/04/23/%e5%9c%a8-wordpress-%e4%b8%ad%e5%85%b1%e4%ba%ab%e4%bd%a0%e7%9a%84-google-reader-%e8%ae%b0%e5%bd%95/ 最简单也最通用的办法是利用 Google 官方提供的功能，就在“您的共享项目”页面顶部就有这么一个链接：
image
点击这个链接转到定制界面：
定制界面
一目了然非常简单，还提供了各种配色方案可以选择，你也可以将颜色方案设为“None”，它就会使用主题自带的CSS样式了。你只需在 WordPress 后台为它新建一个文本 Widget，然后把这段代码粘贴到里面即可。

不过这样在某些主题里面可能不是非常协调，比如我现在使用的 Qwilm! 主题，直接丢上去就是这样子的：
image
不但有两个标题，而且“了解详情”链接跟搜索的标题粘在一起了，看起来不是很舒服。如果你不懂 CSS，处理起来就比较麻烦，所以有必要寻找一些其他的办法。我这里提供两个参考链接：

首先是这个 Google Reader Widget fore WordPress：http://nothingoutoftheordinary.com/2007/05/26/wordpress-google-reader-widget/，标准的 WordPress Widget，可以设置Cache时间。

然后是这个：http://www.chimp-simple.com/2007/06/29/wordpress-on-autopilot-automatic-posting-google-reader-to-wordpress/，貌似更强大，未测试-_-

]]> http://kaero.org/2008/04/share-your-greader-items/feed/ 0