Timothy's Space » WordPress

为minyx-llite建立新的代码分支版本

Timothy — Wed, 07 Dec 2011 17:03:00 +0000

自从放出minyx-lite(Timothy修改版)这款皮肤后，我一直有继续把这款皮肤改下去的想法。不过，目前比较不太满意的地方，就是放在GitHub上的代码，仍然是我的blog皮肤对应的版本，右边的sidebar，自然也加入了一些广告。这样，对于想获取此皮肤的童鞋来说，广告自然也给取去了，也许这并不是你想要的。

不过，Git早就有这样的源代码版本控制功能了，那就是建立代码版本的分支。

经过考虑，决定将之前的minyx-lite分为两个分支版本：

master分支：保留最干净的代码，尽量做到获取皮肤后，做最小的改动和调整，就能直接在wordpress后台激活并使用
minyx-lite-xiaozhou-net分支：这个分支会作为我的xiaozhou.net所使用皮肤版本的分支，比如会加入一些广告之类的，嘿嘿

以后大家获取皮肤代码，记得取主分支：master的。当然，一些和广告无关的功能性改动，我会同时merge改动到两个分支的，大家可以放心使用。

在GitHub上，分支已经创建好了，皮肤Host在GitHub上的地址：https://github.com/TimothyYe/minyx-lite-timothy

声明: 此Blog中的文章和随笔仅代表作者在某一特定时间内的观点和结论，对其完全的正确不做任何担保或假设
本站文章均采用知识共享署名-相同方式共享3.0 协议进行授权，除非注明，本站文章均为原创，转载请注明转自 Timothy's Space 并应以链接形式标明本文地址!

WordPress中页面跳转的实现

Timothy — Thu, 11 Aug 2011 16:09:00 +0000

WordPress中，有个功能较做页面(Pages)，通常，一个页面可以选择不同的模板，比如GuestBook，或者其他。不过，有时候，我们有这样的需求，在导航菜单上点击某个页面链接的时候，直接跳转到某个URL。其实有一种方法，就是去改blog的皮肤代码，直接把URL硬编码到皮肤文件中。不过，这样的方法很笨，也不是很灵活。

其实，WordPress页面支持不同的模板，我们完全可以通过模板来实现这一功能。通过请教Google老师，终于找到了一个算是比较简洁的办法，就是新建一个Redirect的模板，模板代码如下：

^?View Code PHP


/*
Template Name: Redirect
*/
 
if (have_posts())
{
  the_post();
  $pattern = '@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)-\d+-\d+-\d+.[A-Za-z]+@';
  preg_match($pattern, get_the_excerpt(), $matches);
  if ($matches[0]) header('Location: '.$matches[0]);
  else echo 'Enter a URL into your page body text.';
}
?>

其实页面实现的功能很是简单，直接用正则表达式匹配页面内容中的URL，然后直接跳转到这个URL。
此模板文件的使用方法：直接命名为Redirect.php，上传到你的皮肤根目录中。

接下来就更简单了，新建一个页面，把模板类型，选成”Redirect”。然后，直接在页面内容中，加入一条目标URL地址即可。由于我的WordPress是用的伪静态链接，链接格式是： http://*******-YYYY-MM-DD.html，所以我专门把正则表达式做了修改，如果你的文章链接地址和我的不一样，需要自己去改一下正则表达式……

这样，页面跳转到任意URL的功能就实现了。

[置顶]本Blog主题下载–minyx-lite(Timothy修改版) Last update:2012.02.04

Timothy — Tue, 02 Aug 2011 16:54:00 +0000

这主题叫做minyx-2.0 lite，其实不是偶原创的，它的原始版本，你可以在这里找到。当初一直比较喜欢这个主题，不过原始的布局，不太符合我的口味，于是改之。把布局和其他的一些地方都调整了一下，也加入了一些功能：

首页进度条加载
Ajax评论
一些jQuery的动态效果
右上角的几个Icon
左下角的页面滚动工具条
等等……

不过不足的地方，还有很多功能，是通过插件来实现的，如果你使用本主题，还得装上几个插件才行。

现在有了GitHub，方便多了，以后我会逐渐做一些改动，把能省插件的地方，尽量省掉，让整个主题的可移植性更高一些。

主题在GitHub的地址如下： https://github.com/TimothyYe/minyx-lite-timothy

现在放的版本，还不是很完善，以后我会慢慢完善的。如果你有兴趣，Clone一个到本地吧~~

PS：使用此主题，还是请你尊重原作者的劳动成果，页面下面的原作者信息，还是请大家保留。

=======================华丽的分割线===================

以下是更新日志：

2011.08.04 去掉依赖的page-Navi插件，直接集成日志翻页功能，去掉sidebar的广告代码
2011.08.05 去掉依赖的WP-Related-Posts插件，直接集成相关日志功能到主题中
2011.08.05 干掉了Recent Comments插件，直接集成最近评论功能到主题中
2011.08.07 集成ThickBox到主题中，在文章阅读页面中点击图片，直接放大显示
2011.08.20 Redirect模板到主题中，可以在页面设置此模板，直接跳转到指定URL
2011.12.08 将代码分为两个分支版本
2011.12.10 调整文章段落行距，改善阅读体验
2012.01.05 调整文章版权声明
2012.02.04 修复相关文章重复显示问题

为你的WordPress添加一键分享功能

Timothy — Thu, 17 Mar 2011 16:24:00 +0000

很久没折腾blog了，之前就看到很多博友的站点，都有一键分享文章到各大微博和网站的功能。其实这功能挺实用的，不但能方便网友分享你的博文，更能通过一键分享，为你的blog站点带来访问量。

其实分享的代码很简单，就是通过不同的链接，链接到各大微博和网站。经过在网上的一番搜寻，找到一个比较不错的wordpress插件，叫做anyShare,由国人开发，在wordpress官方网站可以找到下载。

该插件默认支持很多个微博和网站，并且插件的安装也非常方便，只需要在后台启用即可，不需要修改blog皮肤。默认启用后，效果显示如下：

不过这似乎并不太满足我的要求，比如twitter,facebook，这些怎么能少呢？另外一个地方，就是默认是把站点名称显示在图片后面，这样一来，一行只能显示几个图标，太占地方。我决定把文字标题默认修改为不显示，而是采用title的方式显示(鼠标移动到图片上，会提示)。所以经过手动添加链接和修改CSS文件，最终此插件集成到我blog的效果如下：

经过一番修改，还比较满意。另外，我把修改后的插件，打包放到我的SkyDrive，有兴趣的同学可以直接下载了去用了。

插件下载地址

wp-supercache与wp-postviews插件的冲突

Timothy — Wed, 23 Feb 2011 16:27:00 +0000

启用WP-SuperCache后，发现文章阅读统计的那个插件WP-PostViews貌似失效了，于是请教了一下google老师，果然这两个插件有些冲突。

解决方法如下，卸载这里备忘：

进入插件wp-postviews，打开wp-postviews.php这个文件，找到代码

if(defined(‘WP_CACHE’) && WP_CACHE)

替换为

if((defined(‘WP_CACHE’) && WP_CACHE) || (defined(‘COSMETA’) && COSMETA))

测试有效。

另外，今天把WordPress升级到3.1，谁知DB-Cache-Reloaded这插件给挂了，去搜了一下，很多人都遇到这问题，估计是版本兼容性问题。不知道插件作者是否还会继续更新……

WordPress顶部加载进度条的实现

Timothy — Wed, 16 Feb 2011 16:19:00 +0000

近来貌似很多童鞋对俺WordPress头部的那个动态的加载进度条比较感兴趣。其实，这并不是我原创的，而是跟ZWW童鞋偷师来的，思路也是ZWW童鞋介绍的。所以，我在这里只是简单介绍一下实现方法，其实挺简单的。

先上图：

这图是从我的blog加载的时候截取下来的。从图中，大家可以清楚的看到，红色跳动的进度条。而那个绿色的进度条，是我的blog皮肤本来就带的一条绿色的线条。会动的那个红色进度条，是在CSS中新建的一个Div。

红色进度条的HTML代码如下：

^?View Code HTML

1
2

红色进度条的CSS定义如下：

^?View Code CSS

/************load progress bar***************/
#loading {
    height: 8px;
    left: 0;
    position: absolute;
    top: 100px;
    width: 100%;
    z-index: 99999;
}
 
#loading div{
	display:none;
	height:8px;
	background:#d54e21;
}

大致实现原理如下：

用绝对定位的方式，将红色的进度条位置准确定位到皮肤背景的绿色线条上，并且进度条的高度要和背景那个绿色线条一致。大家在HTML定义中也看到，在初始情况下，这个红色的进度条是不可见的。加入上面的两处代码，我们的初始准备工作，就做好了。接下来，就更简单了，在你的wordpress首页的不同地方，加入不同的jQuery代码，让红色的进度条可见，并且改变其width值，让它看起来就像动了一样。

比如，在header.php中任意位置，加入如下的jQuery代码：

^?View Code HTML

这样，浏览器在加载到header.php的时候，红色的进度条，就由”隐身”，变为可见，并且长度以动画的形式，增加到20%。这样，聪明的童鞋一定想到了，在index.php的不同位置，分别加入上面的代码，让红色进度条的长度变为40%，60%，80%，这样，我们就能看到红色进度条动态加载的效果了，并且，由于这个代码放在首页不同的位置，它确实能反映出当前浏览器加载代码的真实进度。

最后，有一个收尾的工作，在footer.php中，加入jQuery代码：

^?View Code HTML

这样的目的，是让进度条在首页尾部加载到100%之后，进度条消失，露出皮肤默认的那个绿色线条。

至此，教程结束，其实就这么简单，呵呵。最后，再次感谢ZWW童鞋的分享。

Blog评论效果小改

Timothy — Tue, 23 Nov 2010 15:09:00 +0000

工作上的事总算告一段落，于是又开始折腾自己的blog。这次在评论功能中加入了表情效果，和一个动态的字数统计效果。

表情以及字数统计的具体实现，参考了万戈的blog上的方法。有兴趣的同学请移步过去看看。

修改表情传送门： http://www.xiaozhou.net/go/wange_smile
修改字数统计传送门：http://www.xiaozhou.net/go/wange_comment

WP自用插件: HTML Entities Converter

Timothy — Sun, 25 Jul 2010 14:46:00 +0000

在用Wordpress写有程序代码的文章的同学，都有这样的体验，就是在文章中插入代码，并提交文章到wordpress的时候，wordpress会把代码中的一些符号进行转义，再存到数据库中。这种情况，多出现在WordPress后台编辑使用可视化编辑器的时候，或者使用Windows Live Writer的时候。这样，代码经过转换过后，就成了一团乱了，比如：

其中的大于号，引号，还有其他的一些符号，都被转换成了HTML实体符号。

对应的其他符号的转换关系，还有如下的一些：
网上也有一些解决办法，比如在使用WP-CodeBox插件的时候，通过修改WP-CodeBox插件自身的代码，添加转换函数，进行一次转换。或者在wordpress后台使用HTML编辑器，逐个进行修改，纯体力活。基于这样的情况，俺做了个实现自动转换HTML实体符号功能的插件，激活后，你就不必担心代码中的符号会被转换成HTML实体符号了，在你提交发布文章的时候，它会自动帮你把被转换成HTML实体符号的字符给转换回来……从此，你可以放心的在文章中插入代码，而不必担心代码被转换得一团乱了，hoho。代码只有两三句，完全没啥技术含量，高手请忽略……

点击这里下载: HTML Entities Converter V1.0

上传到Wordpress的plugin目录，后台激活即可。

WP-Reader-Wall 插件兼容 WordPress 3.0的修改

Timothy — Wed, 21 Jul 2010 17:02:00 +0000

wp-reader-wall是个有意思的插件，能在页面列出最近评论过的同学的头像。采用照片墙的方式，展示给用户，并且，头像的排序是根据评论的条数来排序的。
自从上次升级WordPress到3.0后，发现者插件没有正常工作了，索性禁用了此插件，也没时间仔细研究。今天特闲，所以决定拿这插件来研究研究。发现导致插件工作不正常的地方，是在插件的代码中定义select的sql语句，取读者数据的时候出了问题。把这句sql从插件中挖出来，在线上环境的mysql中执行了一下，果然取不到数据。刚开始，怀疑是sql语句的where条件的问题，后来逐个排除，没发现异常。最后，把重点放在了表名上，插件里面是用的一个全局变量：$tablecomments 来表示评论的表，索性直接替换成wp_comments试试，果然能取到数据了。看来$tablecomments在WordPress 3.0中失效了。去wordpress搜了一下，官方提到$tablecomments变量是不推崇的方式，可能已经被弃用。官方还建议了一些其他的全局变量的替代办法，如下：

这样，我们可以遵循官方的建议，在WP-Reader-Wall插件的select语句中，用$wpdb->comments替代原来的$tablecomments，这样，插件就能正常在WordPress 3.0下使用了。总结了一下，关于WordPress升级遇到的一些问题，可以直接查阅官方文档，还有就是参考每个版本之间的变化，包括变量定义，以及数据库改动。这才是最好，最直接的办法。

具体修改方法，在WP-Reader-Wall.php中，找到如下的代码:

^?View Code PHP

	$request = "SELECT count(comment_ID) comment_nums,comment_author, comment_author_email,comment_author_url FROM $tablecomments  where comment_date》'".$cur_time_span."' AND comment_type='' AND comment_approved=1 group by comment_author_email order by count(comment_ID) DESC ";

修改为：

^?View Code PHP

1
2
3

$request = "SELECT count(comment_ID) comment_nums,comment_author, comment_author_email,comment_author_url FROM ".$wpdb->comments.
" where comment_date>'".$cur_time_span."' AND comment_type='' AND comment_approved=1 group by comment_author_email order by count(comment
_ID) DESC ";

WordPress自动添加关键词优化的代码

Timothy — Sat, 03 Jul 2010 06:03:00 +0000

最近看了一篇SEO相关的文章，感觉比较有帮助。虽然keywords对现在的搜索引擎来说，已经不是很重要了，不过给文章和首页加上一些keywords也是有必要的。另外一个就是description，google貌似对description还是有一定重视的。Wordpress也有相关的SEO插件，比较出名的是All in on SEO pack，不过貌似对中文支持不是太好。在网上寻得一段PHP脚本代码，添加在header.php模板中，能自动为首页设置好keywords和description。并且，在文章页面，能自动截断部分文章内容作为描述，也能自动把文章的tag加为keywords，感觉还不错，在此分享一下：

^?View Code PHP


//判断是否为首页
if (is_home()) {
    $description = "你的站点描述";
    $keywords = "你的关键词";
//判断是否为文章页
} else if (is_single()) {
    if ($post->post_excerpt) {
        $description = $post->post_excerpt;
    } else {
        $description = mb_strimwidth(strip_tags(
    apply_filters('the_content',$post->post_content)
    ),0,220);
    }
    $keywords = "";
    $tags = wp_get_post_tags($post->ID);
    foreach ($tags as $tag ) {
       $keywords = $keywords . $tag->name . ",";
    }
//判断是否为分类页
} else if (is_category()) {
  $description = category_description();
}
?>
 
<meta content="$keywords; ?>" name="keywords" />
<meta content="$description; ?>"name="description" />

将此段代码放入到header.php中的meta部分即可。

启用Lazy Load插件

Timothy — Sat, 19 Jun 2010 10:21:00 +0000

Lazy Load是基于jQuery的插件，能让页面的加载更加有序。在遇到图片比较多的页面的时候，就更能派上用场了。由于Blog加载了jQuery，正好也可以用上这个。

具体的设置，可以参考A-Shun同学的相关文章。启用后试用了一下，效果还不错。推荐有兴趣的同学也试试。

Blog近期改动小记

Timothy — Wed, 16 Jun 2010 16:56:00 +0000

近期对Blog改动较多，不过俺发现对自己Blog还是有许多不太满意的地方，所以又开始折腾了。
1.首先，增加了Blog顶部和尾部快速滚动的功能，大家可以看到在Blog左下角，有一个向上和向下的箭头图标，点击相应的图标，即可实现Blog顶部和尾部的快速滚动了。其实当初是想作成在Blog尾部双击鼠标，就可以快速回到Blog顶部的，后来林木木同学提议这样做会在用户填写评论的时候，不小心双击，有一定的冲突。后来，就做成了左下角的滚动图标。滚动图标的图片，是从网上找来的，滚动图标的CSS实现，是从ZWW同学那里偷师来的，滚动效果，jQuery实现，也是从林木木同学那里偷师来的。
2.将右上角的twitter,facebook,rss三个图标图标和左下角的快速滚动图标，加上了动态效果。默认是半透明的，鼠标悬停后，变为不透明，CSS实现。效果还不错，感觉有用的同学，可以直接参考本Blog的CSS样式表了。
3.第三个改动，也是我感激挺有用的。常常评论的同学，每次都要重复输入用户名、邮箱和网页地址，这是相当繁琐的，为了改善体验，参考了林木木同学的一篇文章。原理是通过PHP获取用户的Cookie，把先前的用户名、邮箱、网页地址统统取出来，默认给填好，并把这三个框给隐藏起来。这样看起来就好像用户已经登录的样子，再也不用重复输入了。这项改动挺实用的，确实能为你的Blog改善不少的用户体验，建议有兴趣的同学都能用上。
4.启用了Google XML Sitemap插件，这个，不用说了，感觉很重要的插件，不过我现在才启用……
5.为文章标题的点击事件，加上了jQuery效果。点击时，显示”页面加载中…”，然后进行跳转，感觉这样变动态了一些。

这次的折腾，就到这里了，尽管是偷师，但是感觉也从中学到了不少，特别是CSS和jQuery。或许以后还会对Blog进行更多的改进，等下次再折腾了。

Blog插件更新

Timothy — Fri, 11 Jun 2010 17:03:00 +0000

很久没整理下Blog了，这次对Blog的一些插件做了一些调整和更新。
为了优化一下Blog访问速度和用户体验，正式启用了WP Super Cache插件。Nginx下需要单独在配置文件中设置一下，生效后，随便访问几个页面，看到Blog的wp-content/cache目录下生成文件了，表示成功启用了。设置的方式，可以参考久酷同学的一篇文章。
另外，貌似WP Super Cache插件和WP-PostViews插件有一些冲突，启用了WP Super Cache后，发现文章计数停住不动了，估计是因为生成了静态页面的关系。想了一下，俺的文章其实访问量并不是很大，显示一下文章访问量意义也不太明显，所以为了性能的缘故，暂时停用了WP-PostViews插件。网上貌似有关于这两个插件冲突的解决方法，不过今天暂时没时间细细研究了，空了再试试。
最后，替换掉一个评论者信息的插件Comment Info Detector,感觉WP-UserAgent能检测的浏览器和操作系统的版本更多一些，所以用了它。
其实俺比较喜欢的是WP Super Cache这个插件，希望它对Blog的访问速度有一定的提升。嗯，观察几天Blog访问情况就知道结果了。

WordPress插件介绍:WP-CodeBox

Timothy — Fri, 21 May 2010 15:06:00 +0000

WP-CodeBox 是我的WordPress一直使用的，一个可以方便的在文章中嵌入代码的插件。它使用起来非常便捷，而且支持众多的编程语言，对于咱开发人员来说，真的是一大福音。当初从wordpress.org的官网比较了几款代码插入的插件，最终我还是选择了它。CodeBox除了支持众多编程语言外，而且在展示代码的时候，有漂亮的外观(如下图)，并且代码框使用脚本实现了动态的代码折叠效果。在浏览的时候，用户可以通过单击按钮随时折叠代码，也节约了屏幕空间。

CodeBox的使用也非常简单，举个最简单的例子，只要在文章中写入下列代码，插入你的程序代码即可：

insert your code here…

其中的language code，是编程语言的代码，让插件知道，你插入的代码是属于哪种语言。
当然还可以插入文件，供别人下载，也可以通过设置让其是否显示折叠和代码行，等等，相关功能都可以在wordpress官网中该插件的页面找到。
对于CodeBox支持的众多编程语言，俺在OneNote中整理了一份language code和具体编程语言的对照表，这样可以一目了然的知道你的编程语言，对应的language code是啥了。我把对照表导出成一了份PDF，放在俺的Sky Drive，供大家下载。

Blog改动-启用读者墙功能

Timothy — Wed, 28 Apr 2010 09:51:48 +0000

从久酷那里偷师来的Reader Wall，显示本站点所有参加评论的同学，此功能还不错，能增加博友之间的互动性。其实这插件一直就装上了，只是一直设置为私有页面。现在评论的博友稍微多一些了，打算开放此页面，同学们可通过右上角菜单访问。