ZH CEXO's BLOG » wordpress

鼠标悬浮显示@reply的评论

ZH CEXO — Mon, 09 Aug 2010 06:58:11 +0000

呃，或许标题起成这样根本不准确，但我也不知道该怎么命名这个标题，所以将就着吧。

一直使用@reply的方式来进行评论，什么是@reply呢？就是从以前的主题到现在，在每条评论的右边都会有Reply按钮，点击一下，评论框里面就会显示“@user:”然后写下你的留言，这样就很容易知道你在回复谁的评论了，而且因为我使用了Mail to commenter这个插件，被回复者会收到邮件提醒，至于@reply这个名字，可能是从Twitter上延用过来的吧。有人说，用嵌套的话，谁回复谁不是很容易看出来么，话是这么说没错，但嵌套的样式不好控制，也不知道套多少层合适，另外，如果上层的嵌套太多了，可能会影响别人看后面评论的心情吧，当然如果你不怕折腾，试试木木同学的无限嵌套。打住，我这篇文章要说什么问题呢？先上个图吧：

这样总该明白了吧。本来留言的时候点击Reply按钮后会自动生成被回复评论的锚记，可以点击这个锚记跳转到被回复的评论那里，但体验总有点不好。而鼠标悬浮于锚记上自动出现被回复的评论，最初是出现在shawn大师的博客上，后来Yinheli同学也按自己的方法钻研出来了。不过yinheli同学的代码感觉和他自己的主题结合着，不太适合我，改了半天老出不来效果，所以我就试着自己用jQuery折腾一下看看。

先打开Firebug分析一下DOM，我们就以图中的这个回复评论为例。因为我的评论没有分页，所以回复的评论都在本页里面，并且@user这个链接里面的href值是以“#comment-”开头的，另外要注意的是，每个评论的li都拥有一个id，这个id的值也就是href里面的值，比如上图中的href和id都是comment-2742。好了，我们现在要做的就是把href里面的链接取出来，然后取相同值的id的li，并且把这个li元素克隆一下，追加到DOM里面，再配合CSS的absolute定位，让你的评论能显示在鼠标的旁边。

下面上代码，注释我都写在后面，希望大家都理解。

jQuery代码：

//hover show comments
	$(".commentlist li p a").mouseover(function(e){		//鼠标悬浮在评论中有a标签的地方时
		var A=/^#comment-/;		/*正则表达式，用来筛选以#comment-的元素*/
		if ($(".commentlist li p a").attr("href").match(A)) 	//如果a里面的href里面的值与正则表达式里的相匹配，那么执行花括号里面的代码块
		{
			var t_link = $(this).attr("href");		//定义t_link来存储href里面的值
			var h_com = "" + $(t_link).html() + "";		//定义h_com，在里面赋上html代码
		} else h_com = "";
		$("body").append(h_com);	//将h_com里面的值追加到body里面
		$(".hover-comment").css({
			"top":(e.pageY+10) + "px",
			"left":(e.pageX+10) + "px"
		}).fadeIn("slow");		//让评论在鼠标悬浮于@user链接里面出现
	}).mouseout(function(){
		$(".hover-comment").fadeOut("slow",function(){$(this).remove()});		//鼠标移出链接时，将添加到body里面的h_com删掉
	}).mousemove(function(e){		//鼠标在@user上移动的时候，让显示出来的评论框也跟着移动
			$("#linktip").remove();
			$(".hover-comment").css({
			"top":(e.pageY+10) + "px",
			"left":(e.pageX+10) + "px"
		});
	});

CSS代码：

.hover-comment{
	position:absolute;		/*绝对定位，让悬浮的评论脱离文档流，方便出现在鼠标旁边*/
	width:580px;
	border:1px solid #7DA028;
	list-style:none;
	display:none;		/*添加到body中后，让它不显示，然后在js里以fadeIn的方式显示*/
	background:#FFF;
}

不知道大家能不能理解呢？另外有一个问题就是，我以前换主机的时候，数据库处理上出了问题，所以有的评论对不上，这样的话鼠标悬浮的时候就会出现null，怎么解决呢？希望知道的朋友提供个方法，谢谢！

参考阅读：

1. 鼠标悬浮实现显示留言内容(上)

2. 鼠标悬浮实现显示留言内容(下)

先上新主题，再慢慢完善

ZH CEXO — Sun, 01 Aug 2010 15:56:15 +0000

先囧一下，又是这么晚更新文章，关键是折腾这个新主题去了，咯，现在它就摆在大家面前了，我把原来的PSD图放一个看看吧：

本来是想把每篇文章第一张图片放在首页的，后来写代码写着，发现不要图片看上去也挺工整的，再说图片放首页的话，加载起来肯定会慢，所以就不加吧。

我承认我变懒了，这次的主题很多地方使用的CSS3的属性，所以对IE系列的浏览器会不太友好，但我不想再去折腾了，就这样吧，好的解决方法就算了。另外值得一提的是，由于Opera对CSS3支持的有限，这个新主题在Opera下面也不是很完善……

哦，对了，新主题的名字叫Vitality，活力的意思，与暗淡的春天相比，这个应该新鲜不少了吧，先用着再说，有问题再改，功能方面慢慢完善。

有一个问题，我使用了mail to commentors插件，按说应该是回复中含有”@user:”这样的字样就能发邮件的，这次我用js写的这个@回复功能，发现插件不会发送邮件了，请问有人知道解决方法么？

最后，大家要是看出了什么问题，也请留言提出，谢谢了！

WordPress子主题（翻译）

ZH CEXO — Tue, 06 Jul 2010 15:03:16 +0000

WordPress的子主题继承其他某个主题（父主题）的功能，允许你对父主题进行修改，增加其他功能等。本文将指导你如何创建一个基本的子主题，并阐释你能用它做什么。作为例子，本文使用WordPress 3.0的新默认主题Twenty Ten作为父主题。

制作一个子主题非常简单，创建一个文件夹，然后将一个格式正确的style.css文件放入里面，你的子主题就做好了！只需要懂得一点点HTML和CSS的知识，你就能使用这个基本的子主题对父主题进行样式、结构等任何程度的修改而无需改变父主题自身的文件。这样，当父主题升级更新后，你的修改也会被保留。

基于这个原因，我们推荐使用子主题对一个主题进行修改。

如果对PHP、WordPress模板和WordPress插件API有个基本的了解，你几乎可以用子主题对父主题的每一个方面进行扩展，并且，依然不用改变父主题自身的文件。

目录结构

子主题放在wp-content/themes目录下属于自己的目录里。下面的结构显示的就是子主题和它的父主题（Twenty Ten）在典型的WordPress目录结构中的位置：

public_html
- wp-content
  - themes （主题存放的目录）
    - twentyten （示例中父主题Twenty Ten的目录）
    - twentyten-child （子主题存放的目录，可以任意命名）
      - style.css （子主题中不可或缺的文件，文件名必需为 style.css）

这个文件夹里面可以少至只包含一个style.css文件，也可以包含多至一个完整WordPress主题所拥有的文件：

1. style.css（必需）

2. functions.php（可选）

3. 模板文件（可选）

4. 其他文件（可选）

让我们看看它们是如何一一起作用的。

必需的style.css文件

style.css是一个子主题唯一必须的文件。它的头部提供的信息让WordPress辨认出子主题，并且重写父主题中的style.css文件。

对于任何WordPress主题，头部信息必须位于文件的顶端，唯一的区别就是子主题中的Template:行是必须的，因为它让WordPress知道子主题的父主题是什么。

下面是一个style.css文件的头部信息的示例：

/*
Theme Name:    Twenty Ten Child
Theme URI:     http://example.com/
Description:   Child theme for the Twenty Ten theme
Author:        Your name here
Author URI:    http://example.com/about/
Template:      twentyten
Version:       0.1.0
*/

逐行的简单解释：

Theme Name（必需的）：子主题的名称

Theme URI（可选的）：子主题的主页

Description（可选的）：子主题的描述。比如：我的第一个子主题，真棒！

Author URI（可选的）：作者主页

Author（可选的）：作者的名字

Template（必需的）：父主题的目录名，区别大小写

Version（可选的）：子主题的版本。比如：0.1，1.0，等

*/ 这个关闭标记的后面部分，就会按照一个常规的样式表文件一样生效，你可以把你想对WordPress应用的样式规则都写在它的后面。

要注意的是，子主题的样式表会替换父主题的样式表而生效。（事实上WordPress根本就不会载入父主题的样式表。）所以，如果你想简单地改变父主题中的一些样式和结构——而不是从头开始制作新主题——你必须明确的导入父主题的样式表，然后对它进行修改。下面的例子告诉你如何使用@import规则完成这个。

一个子主题的范例

这个例子中的父主题是Twenty Ten，我们喜欢这个主题的几乎每个部分，除了网站标题的颜色，因为我想把它从黑色的改成绿色的。使用子主题的话，只用完成以下三个简单的步骤：

1. 在wp-content/themes目录下创建一个新目录，并将它命名为twentyten-child（或其他你喜欢的名称）

2. 将下面的代码保存在名为style.css的文件里，并将它放到新建的这个文件夹

3. 转到WordPress的控制台>主题，然后激活你的新主题：Twenty Ten Child。

/*
Theme Name:    Twenty Ten Child
Description:   Child theme for the Twenty Ten theme
Author:        Your name here
Template:      twentyten
*/
@import url(“../twentyten/style.css”);
#site-title a{
    color:#009900;
}

下面一步步解释上面代码的作用：

1. /* 开启子主题的头部信息。

2. Theme Name: 子主题名称的声明。

3. Description: 主题的描述（可选，也可被省略）。

4. Author: 作者名字的声明（可选，也可被省略）。

5. Template: 声明子主题的父主题，换言之，父主题所在的文件夹的名称，区分大小写

6. */ 子主题头部信息的关闭标记

7. 用@import规则将父主题的样式表调入

8. #site-title a定义网站标题的颜色（绿色），覆盖父主题中相同的样式规则。

注意@import规则

需要注意的是，在@import规则之前没有其他的CSS样式规则，如果你将其他的规则置于它之上，那么它将无效，并且父主题的样式表不会被导入。

使用 functions.php

不像style.css，子主题中的functions.php不会覆盖父主题中对应功能，而是将新的功能加入到父主题的functions.php中。（其实它会在父主题文件加载之前先载入。）

这样，子主题的functions.php提供了一个灵活稳定的方式来修改父主题的功能。如果你想在你的主题里加入一些PHP函数，最快的方式可能是打开functions.php文件然后加入进去。但那样并不灵活：下次你的主题升级更新了，你加入的新功能就会丢失掉。相反地，如果你使用子主题，将functions.php文件放进去，再将你想加入的功能写进这个文件里，那么这个功能同样会工作得很好，并且对于父主题以后的升级更新，子主题中加入的功能也不会受到影响。

functions.php文件的结构非常简单：将PHP起始标签置于顶部，关闭标签置于底部，它们之间就写上你自己的PHP函数。你可以写得很多，也可以写得很少，反正按你所需。下面的示例是一个基本的functions.php文件的写法，作用是将favicon链接加入到HTML页面的head元素里面。

’ . “\n”;
}
add_action(‘wp_head’,’favicon_link’);
?>

给主题作者的提示。事实上子主题的functions.php首先加载意味着你的主题的用户功能可插入——即子主题是可替换的——通过有条件地进行声明。例如：

if (!function_exists(‘theme_special_nav’)){
    function theme_special_nav(){
        // Do something.
    }
}

用这种方式，子主题可以替换父主题中的一个PHP函数，只需要简单地对它再次声明。

模板文件

模板文件在子主题中的表现和style.css一样，它们会覆盖父主题中的相同文件。子主题可以覆盖任何父主题模板中的文件，只需要创建同名文件就行。（注意：index.php在WordPress3.0及以上版本才能被覆盖。）

同样，这项WordPress的功能允许你修改父主题的样式功能而不用去编辑父主题的文件，并且你的修改能让你在更新父主题后继续保留。

下面是一些使用模板文件的子主题的例子：

增加一个父主题没有提供的模板（例如：网站地图页面的模板，或者一单栏页面，它们在页面编辑，模板选择里是可用的）

增加一个比父模板更加具体的模板（见模板级别）。（例如：新加的tag.php模板用于按tag归档的文章来代替父主题中通常的archive.php模板。）

替换父主题中的一个模板（例：使用你自己的home.php来覆盖父主题中的home.php）

其他文件

除了style.css，functions.php，index.php和home.php，子主题可以使用任何正式主题使用的类型的文件，只要文件被正确链接。打个比方，你可以使用在样式表里或者Javascript文件里链接的图标、图片，或者从functions.php文件中调用出来的额外PHP文件。

Refer Child Themes in WordPress Codex

主题设计图Spring，谁要？

ZH CEXO — Wed, 25 Nov 2009 08:05:56 +0000

在寝室里闲着无事，就画了一张主题的设计图Spring。说来起因挺好笑的，由于前段时间武汉很冷，还下雪了，所以大家都认为冬天提前到了，但不想雪后放晴到现在，每天的温度一直在升高，所以寝室的同学开玩笑说“春天来了”。哈！是啊，提到春天，多美的景色啊，特别是经过了一冬的枯树上绽开的一点点新绿……于是我就想着那些新绿和泥土的气息，开着还不是很熟悉的Photoshop兀自画了起来~

预览图在这：

和我那半瓢水的代码能力相比，自己的设计能力弱很多，对色彩的感觉方面都很差劲，所以一直以来，我做的主题都是用的别人的配色，很少自己来想。再者，我老是自信不足，怕做出来的东西见不了人，结果页面布局方面也老是参考参考再综合。但后来sofish他们告诉我，做主题这种东西，要形成自己的风格，比如mg12和sofish的作品，一看就知道是他们做的。但如果老是用一种固定的思维和模式来做东西，那样也太呆板了，所以得“改版”~

这是我第一个真正意义上自己的作品，对着电脑一心画成的，没有参考别人的结构和配色。结构的话，感觉博客的结构都差不多，而颜色，是来自于头部的那棵大树。大家感觉如何呢？

所以这么春天这么环保的主题，谁想要？我CODE，FOR FREE！当然以我的代码能力，这个主题可能会很折腾，不是很容易弄好……

查看大图请点击这里（推荐用鼠标右键打开）

换掉旧主题，正式启用Dark Spring

ZH CEXO — Fri, 14 Aug 2009 05:44:22 +0000

就这样，慢慢地打磨我的新主题，很做了一段时间，因为自己的水平有限，再者想尽力把它做好。上次的小图大家没有看清楚吧，这次总体的效果又如何呢？

LinxoV1这个主题是我一年以前做的，当时刚学习CSS不久，就着新鲜劲就做了出来。以前我做主题都没用什么框架来着，XHTML都自己来写，然后关于代码的SEO我也完全不懂，反正最后觉得不错就行了。但是真正做的时候就免不了这里加个div，那里删个什么标签的，很费事，效果也不是很好。这次的主题我使用sandbox主题框架，只进行了小小的修改。不用Hybrid框架的原因是，一来资料很少，二来非得安装Hybrid原主题才能正常工作。而我使用sandbox，就可以作为一个单独的主题拿出来了。

很有一段时间没有碰CSS了，发现很多代码都忘记了，幸好Dreamweaver有代码提示，为我省掉不少事情。但我做主题还是解决不了IE下面的显示问题，唉……这次又找sofish童鞋帮我处理了导航条在IE7下面的显示问题，并且提供了文章自动截断的方法。但这个主题头部在IE8和Opera下，背景图片还是有1px的偏移，我修改不了，拉倒算了……还有，为了早日淘汰IE6，我也作一份贡献吧，加上了~~IE6 no more~~的代码(换成了mg12的Let’s Kill IE6了)，只是个提示作用，关掉提示网页依然可以用，当然效果比高级浏览器差多了。

本来我做这个主题有一个目的就是减少插件的使用数目，比如显示评论最多的文章和随机文章等等，但是评论最多的文章好解决，而随机文章的代码一放到主题里面，评论和文章就不配套了，这个问题很苦恼了我一阵，后来去掉了一切正常，看来WebDesignerWall里面提供的代码也不是完全好用啊。关于评论部分，我想了半天不知道怎么来设计，后来就来个简洁的算了吧，也节省点代码。至于Ajax评论功能和网页动态效果什么的，本来也想加上去的，算了，毕竟那不是我的设计，而且可要可无，博客的质量在于文章嘛（说这句话我怎么觉得在打自己的脸……囧……）~~

现在写文章真难产，而且我的事情又来了，这可如何是好？？

完成新主题Dark Spring的主页部分

ZH CEXO — Tue, 04 Aug 2009 04:21:48 +0000

我的博客开了一年多了，以前挺勤快，现在很懒了，懒得连主题都不想换了……这个LinxoV1主题也就这样跟着用了快一年的时间。趁着放假我的兼职做完了，还剩下几天的时间就要去学校，我就合计着想做一个新主题。话说以前做主题的时候我几乎直接code，心中没什么设计图，想到哪做到哪，结果做出来的东西要一次又一次不停地修改。但这次，我先做出了我博客新主题的psd设计图，再来code，希望能做得好一点。

因为我这个人没有艺术功底，也没有创新能力，所以我的主题设计是参考了很多主题后综合而来的。然后拿着设计图，我在想用什么当作主题框架。要说我真想用的框架是Hybrid，但是和它相关的资料太难找到了，而且有的要收费，并且做出来后，我的子主题对它的父主题依赖挺大的。最后我还是选择了sandbox，需要些什么功能就Google一下，然后再加进去吧。

下面的预览图不是我的PS图，而是已经完成的主页部分code在Firefox3.5下的真实效果。具体这个主题会做成什么样子，以后大家再看吧。就目前来说，进度可能才20%，因为内容页等其他的页面不是很好做。而且我现在开始就不再继续做了，开学有考试，再不看书就玩完，我可不想把报名费扔掉。所以目前，我就继续用LinxoV1主题吧。

下面是预览图：

有什么意见和建议可以提，因为主题未完成，比较容易修改。在IE下简单地看了几眼，我有跳楼的冲动……

发布新主题EasyLine

ZH CEXO — Sun, 25 Jan 2009 06:46:58 +0000

本来我是不做主题的，而且我说过LinxoV1可能是我最后一个主题，但是潘小胖子上次问过我学习CSS用什么书，后来又让我教他做主题，可是我也只是个半瓢水，只学了一个星期的CSS……然后他说要求不高，做成网易新闻的内容页面的效果就行了，然后我就仿照那个做了这个EasyLine主题，可是！可是！他不想要，让我改，改成现在这个样子了，所以这个原始的主题就废了……但我觉得直接删了多可惜呀，不如放出来吧~

这个主题很简单，简单得不能再简单，但是还是有图片……不过总的文件压缩成zip后只有37KB，所以也算一个轻量级主题吧，而且能合在一起的图片我已经处理成一张了，减少了http请求。因为是答应帮潘小胖子做的，所以我连logo都没改，所以如果有人想用，请自己把主题里面相关内容进行修改。

再上个图吧：

主题需要插件：中文Wordpress工具箱

目前此主题在本机的IE6，IE7，Firefox3.0，Opera9，Chrome2下面测试样式基本一致，如有问题可留言提出。

下载 | 主页 | 内容页

有没有人用还是个问题……再囧一下……

今天除夕，祝大家新年快乐！

升级到WordPress2.7

ZH CEXO — Thu, 11 Dec 2008 07:24:36 +0000

本来这种比较轰动的消息会有无数个博主来写的，这次我也来凑个热闹，写一篇，毕竟Wordpress2.7版是一个改变比较大的版本，从开博客接触这个东西以来，我们也有一点使用心得，现在也向大家交待一下升级时候遇到的问题，希望对你们有帮助~

以前从2.5版升级到2.6的时候出现了一点问题的，后来网站因此停止访问整整一天，现在想想也觉得烦，所以每次升级都有点提心吊胆的，然后找到了一款自动升级的工具叫Wordpress Automatic Upgrade这个插件，升级就成了易事，但是这个2.7版不能用那个插件来升级，会出现一个空白页面。

2.7的后台相对于以前的版本来说相当简练，可操作性强，让用户定位各种功能十分便捷，在2.7以前的版本里为了达到同样的效果使用的是Ozh’ Admin Drop Down Menu这个插件，但是在2.7版里这个插件请千万禁用，不然会发生左边的侧栏丢失的情况，如果你在升级前没有禁用所有的插件，并且也使用了这个插件，已经造成了侧栏丢失的情况，请进入这个地址http://yoururl/wp-admin/plugins.php，然后再禁用Ozh’ Admin Drop Down Menu。

再就是Simple Tags这个插件的问题了，你升级了之后，如果Simple Tags这个插件处于启用状态，那么后台的顶部区域会出现提示说Simple Tags这个插件不能用于2.7，请用Simple Tagging来代替。虽然Simple Tagging和Simple Tags是同一个制作组开发的，但是前者并不支持中文的标签显示，而且目前没找到中文版，使用多有不便，所以就有好心的网友开发了可用于2.7版的Simple Tags，基于原版制作，大家可以放心使用。

最后说一下的就是2.7的Google Gears支持放到了“工具-工具”那个项目里面了。

就说这么多了，总结一下

1. 如果存在Ozh’ Admin Drop Down Menu这个插件，请禁用

2. WordPress Automatic Upgrade这个插件不能用了，也没必要再用了

3. Simple Tags for WordPress 2.7下载

PS：怎么感觉Windows Live Writer也不能用了

ZH CEXO's BLOG » wordpress

鼠标悬浮显示@reply的评论

jQuery代码：

CSS代码：

参考阅读：

相关阅读

先上新主题，再慢慢完善

相关阅读

WordPress子主题（翻译）

目录结构

必需的style.css文件

一个子主题的范例

使用 functions.php

模板文件

其他文件

相关阅读

主题设计图Spring，谁要？

相关阅读

换掉旧主题，正式启用Dark Spring

相关阅读

完成新主题Dark Spring的主页部分

相关阅读

发布新主题EasyLine

今天除夕，祝大家新年快乐！

相关阅读

升级到WordPress2.7

相关阅读