想看我 先订我 — RSS Post Editor

* WordPress / # , , / 2008年10月02日 / 24条评论 / 930 次浏览

如今通过RSS阅读Blog的人是越来越多啦，OrzDream也是如此，大部分的童鞋是通过RSS了解OrzDream的更新动态的。为了感谢这些通过RSS订阅的童鞋，也为了鼓励更多的童鞋使用RSS这个非常好玩好用的东西，所以从今天起NetPuter会不定向不定时地设置一些内容只在RSS Feed中显示。[rss]（现在你的括号中看到的就是只显示在RSS Feed的内容啦，不信你可以打开文章看看哦）[/rss]

那么这个功能要怎么实现呢？很简单，只需要一个插件：RSS Post Editor，就可以实现标题所说的“想看我？先订我！”啦。

  • 姓名：RSS Post Editor
  • 年龄：1.0
  • 血型：订阅型 & 日志型
  • 照片：真的想看么？那就先订阅OrzDream的Feed吧，我在这篇文章中使用了这款插件了的说~
  • ……：……

更多介绍，请查看：http://wpland.cn/2008/09/rss-post-editor.html
[rss]为了方便大家，也为了演示，我把下载页面给通过RSS订阅的童鞋：猛击这里就行啦~[/rss]

PS：小提问：你对RSS技术的未来有什么见解呢？

继续阅读~

WordPress技巧：超实用的 Web 2.0 风格翻页代码

* WordPress / # , / 2008年10月02日 / 71条评论 / 2,779 次浏览

十月以来，陪伴我一个三个月的ADSL包月上网已经和我Say GoodBye了，取而代之的是每个月30小时68元的套餐。对于我这种人来说明显是不够的，所以就开始研究WordPress啦。今天就给大家带来《WordPress技巧：超实用的Web 2.0风格翻页代码》。

给WordPress增加一个高级翻页功能

WordPress几乎无所不能，只拿来做Blog略显单调，拿来做CMS、工作室甚至是微博客都绰绰有余。如何显示这些文章呢？文章比较少还好，但是对于几十甚至几百甚至几千篇文章，WordPress原生翻页功能就几乎变成了鸡肋了，尤其是它只能上一页、下一页的滚动，很麻烦！

还好，国外的高手制作了这款WP-PageNavi插件，让我们能够轻松拥有一个高级的翻页功能。我想应该很多人知道这一款插件吧，就不用我多介绍啦。需要的童鞋可以猛击这里。

事实上，还有很多增强WordPress翻页功能的插件，个人比较比较喜欢WP-PageNavi，所以下文就拿这款插件开刀啦~

给PageNavi开刀之前 记一下它长啥样


可怜的娃儿，你怎么长这么丑……

要给PageNavi开刀整成啥样

  1. 如果主题色彩非常有特色的话，你可以参考主题色系进行整容。
  2. 在这里NetPuter给大家强烈推荐这个玩意儿：24款超实用的Web 2.0风格翻页代码。

    这里面包含了24款翻页风格，比如说Digg、Yahoo、Flickr等等，更重要的是这套风格和PageNavi的样式长得很像，脸型也差不多，方便我们修改。下载链接在这里（快点鼠标左键，哼哼哈嘿~）
  3. 这娃儿命太苦了，算了，别折磨它了……

开刀整容吧

首先，我们需要了解一些PageNavi默认的代码样式（WP-PageNavi插件目录下的“pagenavi-css.css”）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;
}
.wp-pagenavi a:visited {
	padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;
}
.wp-pagenavi a:hover {
	border: 1px solid #000000;color: #000000;background-color: #FFFFFF;
}
.wp-pagenavi a:active {
	padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;
}
.wp-pagenavi span.pages {
	padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #000000;background-color: #FFFFFF;}
.wp-pagenavi span.current {
	padding: 2px 4px 2px 4px;margin: 2px;font-weight: bold;border: 1px solid #000000;color: #000000;background-color: #FFFFFF;
}
.wp-pagenavi span.extend {
	padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #000000;color: #000000;background-color: #FFFFFF;
}

然后我们将24款超实用的Web 2.0风格翻页代码中的CSS.CSS所需要的CSS代码Copy出来，你会发现整容的内容（这里拿Digg的为例）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

DIV.digg {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
	BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
	BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg A:active {
	BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.current {
	BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099
}
DIV.digg SPAN.disabled {
	BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}

对CSS比较了解的朋友发现了吧，这段代码比较臃肿，你可以稍微优化下。看看我是怎么整容的：

  1. 把上面代码中的“DIV.digg”替换成“.wp-pagenavi”，注意要灵活变通哦。
  2. 把“.wp-pagenavi A”和“.wp-pagenavi A:link”合并到一起，也就是写成“.wp-pagenavi A, .wp-pagenavi A:link {内容}”这样。
  3. 同样再把“.wp-pagenavi A:hover”和“.wp-pagenavi A:active”合并到一起。
  4. 你可以把修改后的“.wp-pagenavi SPAN.disabled”部分删掉，因为根本就没有用。
  5. 如果你不想显示前面的“Page 1 of 4”，你可以在CSS中增加以下代码： 
    1
2
3

    .wp-pagenavi SPAN.pages {
	display: none;
}
  6. 最后，把上面修改的内容添加到你正在使用的主题目录下的“style.css”的屁股。

快看整成什么样


哈哈，这娃儿变得很漂亮啦，赶快去给你的PageNavi整容吧！

继续阅读~

{01}挑逗你的神经 OrZine杂志创刊号震撼登场

* OrZine / # , , / 2008年10月01日 / 27条评论 / 943 次浏览

今天是2008年10月1日，伟大的祖国59岁生日！同时，由NetPuter主编、策划、设计、打杂的全新线上杂志——OrZine也诞生啦！

前言

为了让大家了解这本杂志，我自个儿Q&A吧……

  1. 为什么要叫OrZine？
    OrzDream，OrzDream，但是到了现在还是没有凸显Orz这个主题。然后Zine又是Magazine的缩写，其中Z既可以当作Orz的Z也可以当作Zine的Z，所以就取名叫——OrZine啦。
  2. OrZine的主要内容是什么呢？
    这个嘛，还没有明确具体的内容主题，主要是向大家推荐一些好玩好用的东西。而在本期创刊号中就向大家推荐了一个视频和一个Feed，同时欢迎大家向我们投稿哦。
  3. 什么？！Feed推荐？！
    是在，你没有看错，Feed推荐。现在RSS Feed已经成为Blog的一个不可缺少的功能了，我们可以通过RSS Feed高效地阅读我们所订阅的内容。所谓“一千个读者，就有一千个哈姆雷特”，如果全世界有一千个Blog（当然不只一千个），那就会有一千个Feed。要如何在这一千个Feed中挑选出合自己心水的Feed呢？正在你苦恼的时候，OrZine的Feed推荐出现了……
  4. 好，好吧，但是OrZine的更新频率是多久呢？
    呃，因为目前主编、策划、设计、打杂的全都是NetPuter一个人在弄，而我平时没有那么多时间，因此目前暂定一个月一期。在这里欢迎感兴趣的童鞋加入OrZine中，感兴趣的请通过这里联系我。
  5. 对了，我还想问，……
    具体的问题大家在阅读OrZine的时候就会知道啦，要还真的有问题就留下你的评论吧。

[推视频]还记得这一段Adidas的奥运广告吗？

郑智Adidas奥运广告 台词

我是郑智
99年奥运预选赛 我只有十九岁
第一次参加这么重大的比赛
心里特别紧张
在无数球迷的呐喊声中
我们拼尽了全力
可最后还是输了
奥运梦 碎了
我一直忘不了 球迷失望的表情
那种难过 我一辈子记得
这些年 我成长了不少
就等北京奥运
我不想再辜负球迷
要和球迷们一起
为中国足球
写下新一页

可是最后的结果呢？

[推Feed]十八岁以下慎入！

  • Feed名称：4U
  • Feed地址：http://4u.straightline.jp/rss
  • Blog地址：http://4u.straightline.jp/
  • Feed预览：
  • Feed介绍：订阅了这个Feed挺久了，但因为更新太频繁我也没有经常看，大多都是直接标为已读的，但偶尔放松下还是不错的。希望大家不要说我很色很不纯洁，毕竟大家都是GG（什么？你不是？莫非你是MM？快快留下评论！）~

后记和一些PS

  1. 这就是本期OrZine创刊号的内容啦，内容很少，但是我感觉很劲爆。
  2. 你有好玩好笑好有意义的视频吗？投稿吧！
  3. 你有收藏一些内容不错的Feed吗？来投稿吧！
  4. 也想在[推Feed]栏目中展示你的Blog？也来投稿吧！
  5. 怎么投稿了？！前言不是说了嘛，通过这里联系我。
  6. 还有其他内容想推荐？干脆加入OrZine编辑组吧，我们没有薪水，没有小费，但是我们有一群忠实的观众！
  7. 鉴于从明天开始上网时间会减少，因此大家也可以通过饭否发私信联系我。
  8. 最后感谢茶乐帮我想的标题，之前自己怎么想不是俗就是烂……
继续阅读~

WordPress 技巧：自定义Gravatar的默认头像

* WordPress / # , , / 2008年09月30日 / 51条评论 / 1,563 次浏览

今天看到一篇《Create a Custom Default Avatar》，想起前一段时间我也被这个问题困扰，然后就不了了之。原来只需要添加一个参数而已！

什么是Gravatar

gravatars in commentsGravatar是“Globally Recognized Avatar”的缩写，是WordPress的母公司Automattic旗下的产品，中文意思为“全球通用头像”。如果你在Gravatar用你的Email地址申请一个帐号，然后为该Email添加一张相对应的头像。以后，你在任何支持Gravatar头像服务的Blog评论留言时，填写你的Email地址，就显示你的头像。

从概念上来说，和OpenID一样，只不过OpenID是让你进入，而Gravatar是让你显示。你注册一个帐号后，可以添加多个邮件地址和对应头像，Gravatar对每个邮件地址采用MD5加密，不用提心你的电子邮件地址会受SPAM骚扰。（via 帕兰映像）

为什么要自定义Gravatar的默认头像

我们可以在WordPress的后台设置默认头像（管理->设置->评论），但是只有几种而已，而且Mystery Man也不是很好看。这时候我们就可以自定义Gravatar的默认头像啦。

如何自定义Gravatar的默认头像

在这里我先说下在主题中是如何调用Gravatar头像的。一般的主题都支持Gravatar，你可以打开主题目录下的“comments.php”文件，找到下面的这一段代码（如果没有则在相应地方加上这一段代码）：

1
2
3

...
<?php echo get_avatar( $comment, 32 ); ?>
...

其中，32代表头像的大小，你可以修改成你所需要的尺寸。然后我们把上面的代码修改成这样子：

1
2
3

...
<?php echo get_avatar( $comment, 32, 'Gravatar.gif' ); ?>
...

这一段代码中的“Gravatar.gif”就是你要显示的的默认头像的图片地址啦，赶快改成相应的图片地址吧。

还有其他参数吗

当然有啦，你可以猛击这里了解更多信息。

我要说的说完了，轮到你啦！

继续阅读~

玩转GTalk：网页即时交流

* Google / # , / 2008年09月29日 / 29条评论 / 2,725 次浏览

终于放假啦，NetPuter先祝大家国庆节愉快！这几天OrzDream都在进行一些小修补，有没有发现侧边栏上的这个，点它就可以和NetPuter在网页中即时交流啦。因为平时一开机就挂个GTalk（你呢？），所以就放个GTalk小挂件在这里啦。可能很多人都知道吧，但是在玩转GTalk系列中怎么可以少了如此实用的玩法呢，所以就写下来啦。

零、目录

一、我也想要一个这样的“玩具”

方法很简单，打开这个页面（需要登陆Google账户）。你会发现“玩具”已经出现在页面里啦。或许你不喜欢它的样式，那就点“Edit▼”吧，然后你会看到下列选项：

  • Title (optional)：标题（可以不填）
  • Your nickname：你的昵称
  • Style：样式
  • Show your status message：显示你的状态消息（也就是你的GTalk签名啦）
  • Update badge：设置好了之后就点这个按钮预览和获取新代码

接下来，把代码复制到相应位置就可以啦。

二、玩得怎么样

  1. 个人感觉还算实用，但是没有那么方便啦。首先对于用户来说，他们可能也有GTalk并且想加你为好友方便交流，但是这个“玩具”里根本就没有显示自己的帐号。要怎么解决？在刚才设置的“Title”中填写你的GTalk地址吧，我暂时只想到这个。
  2. 当用户点了“玩具”中的链接之后，你的GTalk显示的不是对话内容，而是一个链接，像这样：

    然后你要打开这个链接点“Launch Chat”才能进入对话，感觉很繁琐。
  3. 进入了对话之后，原来这个对话是一个Web版GTalk，感觉比Web版飞信不错吧。
  4. 总结：对于用户来说，点了这个“玩具”之后有2种结果：被鸟了or没人鸟。而你有空的话，点一下就可以进行交流了，但是如果没空的话你要怎么办？直接关掉还是进入对话跟用户说“对不起，我没有时间”？Google还是需要努力提高体验才行。
继续阅读~
«1415161718»Last »