aeroom » wordpress plugins 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 你的网站为移动设备准备好了吗？ http://kaero.org/2009/06/is-your-site-ready-for-mobile-device/ http://kaero.org/2009/06/is-your-site-ready-for-mobile-device/#comments Sat, 13 Jun 2009 14:59:21 +0000 Kaero http://kaero.org/2009/06/13/is-your-site-ready-for-mobile-device/ CSSiPhone.com，该站致力于收集特别为 iPhone 浏览器重新设计过的网站，在各种智能手机以及手持上网设备越来越普及的今天，这无疑具有很强的前驱性和参考意义。 继续阅读 →]]>

各种各样专门收集酷站的网站真的非常多呢，不过今天推荐的是一个取材相对特别的站：CSSiPhone.com，该站致力于收集特别为 iPhone 浏览器重新设计过的网站，在各种智能手机以及手持上网设备越来越普及的今天，这无疑具有很强的前驱性和参考意义。接下来就奉上其中一部分精彩截图。

WordPress如何快速适应移动设备？

在 aeroom 新版本上线的时候，我曾经简单介绍过一个叫 MobilePress 的 WordPress 插件，如果您也是 WordPress 用户的话，这个插件可以帮助你快速适应移动设备，而且你也可以定制自己的 MobilePress Theme——没错，MobilePress 也支持 Theme 并且和 WordPress Theme 完全没有冲突。

今天我要推荐另外一款 WordPress 插件：WP-T-WAP。这是一款国人开发的插件，在安装激活这款插件之后，你可以通过类似 http://yourdomain.com/wap 的地址访问你的网站 WAP 版——比如看看我的： http://kaero.org/wap。（MobilePress 的方式与此不同，MobilePress 会自动识别你的浏览器是否来自移动设备，无需像 WP-T-WAP 一样在您的地址后面增加类似 /wap 的路径，也正是因为这个不同点，所以这两个插件可以同时运行于你的 WordPress）虽然 WP-T-WAP 的界面还显得比较简单在美观度上稍逊于 MobilePress，但在另一方面它可要强大得多，WP-T-WAP 提供了简化的后台管理功能，你可以通过它发布/编辑/删除文章和评论，并且支持上传图片和插入部分 HTML 标签。众所周知的是，默认情况下想通过移动设备使用功能繁复的 WordPress 后台是不可能的，但是借助 WP-T-WAP 我们终于能实现移动发布博客了。WP-T-WAP 并没有像 MobilePress 那样很方便的外观修改接口，不过你可以在 functions.php 找到相应的 CSS 代码并且按你的想法修改它。

image

image

image

image

image

image

]]> http://kaero.org/2009/06/is-your-site-ready-for-mobile-device/feed/ 4 RSS 全文输出的格式问题 http://kaero.org/2009/04/full-text-feed/ http://kaero.org/2009/04/full-text-feed/#comments Tue, 14 Apr 2009 06:53:54 +0000 Kaero http://kaero.org/2009/04/14/full-text-feed/ 继续阅读 →]]> Blog 的 Feed 输出一直是没有格式的，其实细心的我老早就注意到这个问题了，不过因为工作繁重生活忙碌而一直没有机会来修正这个问题。现在我终于决心来纠正这一现象了，我再也不能让本站广大的 RSS 订阅者们忍受不分段无图片无视频等等问题的折磨了。

首先我祭出的武器是 Simple Feed Copyright 这个插件，其实它主要的功能是在每篇 RSS Feed 文章后面加上一段版权信息，但是据说也可能产生意想不到的效果。

OK，现在就发布这篇日志来测试一下效果如何。另外再请教一下各位达人如何在不发布新日志的情况下刷新 Feed 输出……

Update：看来是 A 计划已经可耻地失败了……不过无须气馁，我们还有 B 计划： Full Text Feed。

不过这两个插件居然都没有设置页面，看来还是前途叵测-_-

Update 2：果然又一次失败了，难道不是全文输出的问题？再次 Google 了一下，大部分的结果都指向一个可能：Feed 输出格式是 RSS 0.9 而不是 RSS 2。可是这个 RSS2 应该在哪儿设置呢？我找了老半天还真没找着这个选项。

Update 3：果然是这样的……正确的订阅地址：http://kaero.org/feed/，另外一个正确的：http://kaero.org/feed/rss2/，可悲的是我自己订阅的……偏偏是那个会丢失格式的RSS 0.9：http://kaero.org/feed/rss

折腾了半天……原来是我自己在瞎折腾……

]]> http://kaero.org/2009/04/full-text-feed/feed/ 1 NextGen Gallery，影集 http://kaero.org/2008/04/nextgen-gallery/ http://kaero.org/2008/04/nextgen-gallery/#comments Sat, 19 Apr 2008 07:42:32 +0000 Kaero http://kaero.org/2008/04/19/nextgen-gallery%ef%bc%8c%e5%bd%b1%e9%9b%86/ 继续阅读 →]]> 今天我给 FunnyWork 新增了一个 Albums 页面，具体效果大家可以自行查看。这个相册是利用 WordPress 插件 NextGen Gallery 实现的，那么现在就来教教大家怎么来新建一个新的影集。

首先登录到 WordPress 后台，点击网站名称下面的“影集”进行管理。一进来便是 NextGen Gallery 的概览页面，橙色的工具条右端有很醒目的两个按钮：

image

顾名思义，前面一个按钮是管理影集，而后面那个就是上传图片了，点击它进入到下一步：添加一个新影集。

image

新影集的名称不允许出现汉字，不过无需担心，这个只是用来命名图片所在的新文件夹，影集显示的标题是可以在以后任意修改的。

建好影集之后，就可以向影集里面添加图片了，添加图片有三种途径：

  1. 上传一个ZIP文件，NextGen 会自己解压缩这个包里所有的图片。不过需要特别提醒的是，Winrar 默认的压缩格式.rar 是不支持的哦；
  2. 导入图片文件夹。用 FTP 的同学有福了（这个……貌似只有俺自己有 FTP 权限-_-），你可以直接使用 FTP 把图片上传到某个文件夹，而且不一定就得传到 NextGen 默认的 /wp-content/gallery/ 下面，这个文件夹是可以任意指定的。你甚至可以指定 WordPress 默认的上传文件夹，比如 /wp-content/uploads/2008/04/，这样就能显示2008年4月上传的所有照片了，很强大吧？不过千万要慎重，某次我在勾选了“当删除影集时删除文件”（该选项可以在 NextGen 的选项里面修改）的情况下删除了这么一个影集，直接导致日志里面所有图片都不能显示的悲惨后果……
  3. 最后一个，也是最土鳖的方法：上传图片。这个就不用多介绍了，记得选择相应的相册即可。

不要以为上传好了照片就万事大吉，这个还是有点小小的麻烦的，你需要转到“管理影集”的页面，对你刚建立好的影集进行操作，否则它是不会显示在 Albums 页面上的。

进入某个影集的修改界面，默认是该影集下面所有的图片列表，你可以修改图片的标题、描述，或者删除它。还可以在选中图片ID之后对其进行如下操作：

image

如果你在 NextGen Gallery 的“选项”页面激活了相关图片功能的话，那有一个功能你必须了解一下，就是“显示标签”：

image

给图片定义标签之后，比如给某张图片定义了一个标签“女王”，那么在有“女王”标签的日志页面上就会显示这张图片了。一张图片可以使用英文逗号“,”同时定义多个标签。

以上是影集内图片的编辑选项，那么整个影集该怎么编辑呢？这个比较隐蔽，在影集标题的后面有这么一个按钮：

image

就是它了。点击会展开影集的相关选项，一共是六个：

  1. 标题。
  2. 描述。
  3. 路径。
  4. 页面链接到。
  5. 预览图像。
  6. 创建新页面。

刚创建好的影集你需要为它创建一个新页面（第6项），记得将新页面的父页面设置为“Albums”。

image

然后再设置它的链接页面（第4项），就是你刚才创建的那个新页面，否则在 Albums 页面点击影集封面会没有反应。

好了，上述几项都填写完毕，保存更改。是不是觉得大功告成了？到 Albums 瞅瞅，倒，为什么还是看不到我创建的相册呢？哈哈，还有最后一步，点击 NextGen Gallery 菜单中的“相册”，进入管理相册的界面，是不是发现你的影集出现在右侧的列表框中呢？

一般情况下，你不需要新建一个相册，直接选择”default”相册即可：

image

然后把你的影集直接拖拽到左侧的“default”相册框内，点击右上方的“更新”按钮，这回就真的OK了！

最后补充一下在日志上调用 NextGen Gallery 的方法：

  • 插入一个幻灯片：[slideshow=gallery_id,width,height]
  • 插入一个相册：[album=album_id,extend] 或者 [album=album_id,compact]
  • 插入一个影集：gallery=gallery_id
    请自行添加“[ ]”
  • 插入一张图片：[singlepic=pic_id,width,height,mode,float]
    * mode 是可选项，可选参数有 web20（倒影效果），watermark（水印效果）
    * float 也是可选项，可选参数有 left（左对齐），right（右对齐）
  • 插入一个图片浏览器：[imagebrowser=gallery_id]
    图片浏览器的效果如下所示：
    image

如果你有给照片添加标签的好习惯，那么还有下面两种方法：

  • 插入和一个或者几个标签关联的所有图片：tags=tagname1,tagname2,tagname3…
  • 以相册的形式组织和这些标签关联的图片：albumtags=tagname1,tagname2,tagname3…
    * 请自行添加“[ ]”

更详细的说明请参考 NextGen Gallery 的 FAQ 页面：http://wordpress.org/extend/plugins/nextgen-gallery/faq/

]]> http://kaero.org/2008/04/nextgen-gallery/feed/ 2