VeryUE

非 常 悠 逸

Month: 十一月, 2011

Lifestream无觅插件

Lifestream无觅插件

子曰:赖夫斯特瑞姆是个好同志。

我也这么觉得。只可惜Lifestream不够本地化,对中文圈的一些主流SNS应用支持不足。加上最近我又在折腾无觅(Wumii),不仅在自己的博客上安装,而且看到许多博客更是早已部署。这样,逛博客的时候可以点点喜欢,不仅可以在无觅网的个人主页中看到,无觅还可以根据自己的口味给我推荐我喜欢的文章。挺不错的东西。

更可贵的是,无觅的个人页面提供了RSS订阅支持,于是我也就有了将喜欢的文章同步到我的Lifestream中想法。试用Lifestream中自带的Generic添加后,可以捕获到,但显示的结果却是“Posted ××××××××”:成了我发表的文章了。作为一个有版权意识的新青年,这怎么能忍,明明应该是“Liked ××××××××”!

这我只能自己改代码了,还不错,看了看其他插件(扩展,extensions)的格式之后,我自己就照葫芦画瓢搞出了这个Lifestream无觅插件。效果如下:

Lifestream无觅插件效果图

Lifestream无觅插件最终效果

功能也蛮简单:按照其他插件(扩展,extensions)一样的步骤,填写无觅的ID然后保存就好了。插件可以正常显示无觅的logo,当然,最重要的是,Lifestream页面中的显示格式是“Liked ××××××××”。 点击继续阅读全文»

WordPress文章图片准确居中

Manifest是一个非常好的Wordpress主题,为了使它更加好用,我对它进行了一系列的修改。然而在修改过程中却发现了一个Wordpress本身的问题:文章中的图片总是不能准确居中。

先说一下,我添加文章图像的方法主要有两个:

  1. 不带“图像说明”,即在编辑图片时将“说明”字段留空。
  2. 带有“图像说明”,在编辑图片时填入“说明”字段,在文章中最终显示图片下的为一段描述。

在添加图像时会选择居中,可以看到在第一种情况下,产生的HTML内容为:

1
2
3
<p style="text-align: center;">
<img class=" aligncenter" height="154" width="366" alt="alt" src="src.png" title="title" original="original.png" style="display: inline;">
</p>

即图片被放在了一个段落标签<p>中,通过添加<p>标签的sytle属性text-align: center;,使图片居中显示。

而在第二种情况(带有图片说明文字)时,产生的HTML内容为:

1
2
3
4
<div class="wp-caption aligncenter" style="width: 376px">
<img class=" " height="154" width="366" alt="alt" src="src.png" title="移除成功提示" original="original.png">
<p class="wp-caption-text">你的图片说明</p>
</div>

可以看到,这时图片被放在了一个<div>中,此时,<div>被加上了class属性,而且样式中定义了宽度。这样我们就要在style.css中添加样式使图片居中。也就是说,如果发现在编辑文章时选中了图像居中却无法实现居中就是因为在样式表中没有为其定义样式。

我使用如下CSS代码实现图片居中和说明文字与图片左对齐:

1
2
3
4
5
6
7
8
9
.entry-content .wp-caption.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
#coreContent .entry-content p.wp-caption-text {
text-align: left;
}

理论上,至此我们就实现了图片居中显示,无论是否添加了说明文本。

但实际上我们发现第二种情况(添加了说明文字)出现图片和说明文字并不是严格左对齐的情况;当图片与body等宽时,图片还会超过body的边界。再仔细查看此时的HTML代码。我发现,div标签强制定义了宽度为376px,比实际的图片宽度大了10px,这就导致了图片在此div中居中时,向右偏移了5px。所以,我们必须使div宽度等于实际的图片宽度。

在Wordpress Support中有人提出了三个解决方法: 点击继续阅读全文»

解决Lifestream页面主题丢失问题

Lifestream是一个非常有用的插件,它可以把自己在各种互联网应用中发布的信息收集起来,形成属于自己的信息流。

Lifestream有多种使用方式,既可以放在Widget里,也可以建立专门的Lifestream页面,还可以在自动生成digest。在我的博客里就是生成了专门的Lifestream页面。

由于旧的Lifestream插件已停止开发,我现在使用的是wp-lifestream2但是,在最新版的中有一个bug:当刷新Feed之后,Lifestream页面的主题会载入失败,如下图:

Lifestream theme fails to load

Lifestream主题载入失败

而当在设置(Settings)里不需更改设置,点击保存后,即可使主题载入正常。正常的载入情况如图:

Lifestream主题载入成功

Lifestream主题载入成功

虽然很久以前有人已经提交过这个bug,但是尚未修复。没办法,只有自己进行修改。在我查看数据库后发现,是因为Lifestream_options记录中的Page_id值出错引起的。我发现Page_id为0时,主题载入正常,而Page_id为Lifestream页面真实id时会出错,这也就是为什么我们未更改设置但是保存后页面会恢复正常的原因,因为保存设置会将Page_id改为0,而读取feed会使Page_id值改为真实id。

下面是修改的方法,我们就是要使Page_id一直保持为0的状态。 点击继续阅读全文»

WordPress主题Manifest修改实录

Manifest主题是我目前正在用的博客主题,作为一款Minimalism类的主题,它简洁干净(Simple & Clean),非常适合随心所欲的书写文字,不愧是Jim Barraud的作品。

Roamlog翻译了它的1.0版本的介绍,我就引用一下:

主要特点有:

  • Valid XHTML
  • Microformat support
  • 404 页面, 内置“Recent Articles”
  • 存档页面,支持页, 分类, 标签
  • Links 页面
  • 支持 Google AD
  • 不支持 IE6

看上去很舒服的一款主题, 推荐一下, 另外, 搜索框是在最下面, 在 footer 部分还支持添加一些社会化网络(其它的也可)的链接, 可以自行添加.

实际上,作者已经发布了这个主题的1.1版本,可以在其主页看到。1.1的新特征有:

  • 层叠评论。
  • 支持Wordpress画廊。
  • 支持在页面内评论
  • 导航栏中一级子页面支持。

一般来说,基于以下两方面原因,我们通常需要对Wordpress主题进行一定的修改:

  1. 由于英文主题针对英文字母而优化,对中文的支持不好,往往字体偏小。而且会缺少中文字体集(font-family),我们必须进行添加。
  2. 主题中的某些功能不适合,需要修改。

修改的过程不是一蹴而就的,需要不断磨合,在使用的过程中发现问题,及时修改。所以我会在这里记录修改的过程:备份并且分享。 点击继续阅读全文»

仿Google“小清新”界面PPT模板

神棍节独守空房,黯然但不神伤。无聊之际,随手打开Google看到看着那自己还算喜欢的“小清新”新界面(我没说那个杀千刀的Google Reader新界面!),加上最近迷上了Minimalist类的Wordpress主题,特别喜欢那种“白雪皑皑一点红”的“白+红”主题,另一方面,决定以后抛弃PowerPoint自带的模板,一直在寻找简洁而不简单的PPT模板。一个念头一闪而过:觉得何不做个仿Google新界面的PPT模板!经过几个小时的备战,终于有了这个模板!

下面介绍一下:

先做的是内容页面,这个基本上就是按照Google的搜索界面来的:

  • 顶部的“硬又黑”导航栏正好对应于PPT的目录,这是我一直需要的一个功能:在看单页的时候可以知道自己在哪个部分,加强了“整体感”。顶部的红条和字体颜色指示了当前所在的位置。
  • “本页标题”放在了“搜索框”中,用红色加以强调。
  • 接下来是正文,这里做了三级,一般来说,三级就够了。这三级标题也正好对应Google搜索结果的三个层次,分别为蓝色、绿色和灰色,字体用了华文中宋、楷体和仿宋。
  • 页脚刚好对应时间、主题和页码,样式和Google搜索一样:蓝色Arial。
仿Google界面PPT模板正文页

仿Google界面PPT模板正文页

接下来是标题页,因为没什么可以参考的,所以就自己发挥了一下。由于要有左侧红条的效果,所以标题是用表格画的(正文页的导航栏也是如此)。在用的时候要到“母版视图”中更改。

仿Google界面PPT模板标题页

仿Google界面PPT模板标题页

点击继续阅读全文»

无觅相关文章插件,快速提升流量