ZH CEXO's BLOG » 主题

从Beta到Alpha

ZH CEXO — Wed, 29 Dec 2010 07:26:02 +0000

不知道有没有人注意到我博客LOGO旁边的beta小气泡。之所以挂上这个beta，因为我在想，主题这种东西一次不可能那么完美，所以就做一部分出来，再慢慢完善，等到机会合适了，就把beta这个标识撤下来。不过对于自己的Vitality，显然beta不知道什么时候才拿得下来……上次的文章《收到了RJ童鞋精心制作的2011年台历》中我就提到过，我的新主题会由RJ同学来制作，不过显然RJ同学非常忙，所以我也不催她，希望她尽力做好就行了。

从我学习了CSS开始，我使用的主题基本上都是自己做的，一边做一边学习。然后想了想，可能已经做到第六个了。下一个会是什么样子，问RJ同学吧~先来回顾一下：

显然光做主题是不够的，但是很多时候自己的一些想法都可以通过这种媒介表达出来，可以学到很多东西。新的东西正在出现，要学习的越来越多。这只是一个开始，对自己来说，正处于Alpha阶段……

近期博客上一点点整改

ZH CEXO — Tue, 17 Aug 2010 14:07:14 +0000

这几天一直在折腾一些事情，其实也就是乱搞，一边想把自己做的事情写出来，一边又嫌麻烦没有写，又或者是感觉没什么可写的，反而又不知道该写什么，人生就是如此纠结。既然都是乱写，那就写一下近期博客主题上面的整改吧。

这个新主题8月1日上线的，和之前的主题不同，这个主题比较简洁，没什么太花哨的元素，这样的话，正在学习js的我，折腾起来手感可能会好一点。一直以为js是个麻烦的东西，好难学会，但自己静下心来看了会书，感觉也没那么复杂，当然啦，想学得深入肯定是不简单的。不过书上介绍，学习js的过程中，最好学习另外一门编程语言，形成良好的编程观念和习惯，推荐学习C或者Java，这个我暂没兴趣-,-。下面是近期整改的内容：

链接上的气泡提示

近期来看过博客的朋友们应该知道，我全站的链接上，用鼠标悬浮的时候都会出现黑色半透明的气泡提示。本来这种效果在别人的博客上也都见过了，而且别人的博客上有提示里面还带有链接，而我的没有。要做出链接其实也不麻烦，只不过我做这个提示的作用是，想让a标签里面的title属性快点显示，那么有的a标签里面没有title属性，本来我定义的是“点击访问”这个汉字，但netputer小盆友提出，如果没有title属性就别显示了，结果我就按照他的意思修改了一下。

鼠标悬浮显示@reply的评论

这个我已经专门写了一篇文章了，介绍得很清楚，有兴趣的同学自己去看看。当然我也收到意见说嵌套可能会更好，其实我也觉得嵌套更好，不然WordPress不会原生支持它，但出于习惯的考虑，我还是使用了@reply方式，并使用这种鼠标悬浮显示评论的方法提高用户体验，希望大家喜欢。

内容专注模式

我不知道到底有多少人喜欢对着屏幕来看文章，又有多少人真正认真去看别人写的文章，一般如果文章是我很感兴趣的话题，我会仔细地看完。但是如果有人在我的博客上认真看文章的话，可能时间一长眼睛会不舒服，因为新主题和旧主题比起来背景太白了，并且我的文章一般都不算短吧……（汗！）我之前有介绍过Safari 5推出的阅读模式，受它的启发，我就在文章页的导航前面加上了“内容专注模式”，将背景用黑幕遮起来，希望大家阅读的时候眼睛能好受一点，当然也是希望大家能认真读我写的东西啦（笑）。这个功能本质上和有些博客上的“关闭侧边栏”没什么太大区别，但我只是想换一种方式实现类似功能，不太想千篇一律。

上面的图中能找出点什么信息来么？呵呵，希望你能知道，那也许是我下篇文章要写的内容。

先上新主题，再慢慢完善

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

圣诞快乐和不是总结的总结

ZH CEXO — Thu, 24 Dec 2009 06:14:48 +0000

今年的圣诞节，武汉的天气还不错，适宜出去玩玩。今晚就是平安夜，大家有些什么安排呢？圣诞一至，新年就不远了，一年就这样过去了。回首2009，自己已经身在大学的最后一年，大学生活快要和自己告别了。多的不想说，就下面这张简单的图总结一下吧~

祝大家圣诞快乐，新年快乐！

主题设计图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下简单地看了几眼，我有跳楼的冲动……

ZH CEXO's BLOG » 主题

从Beta到Alpha

相关阅读

近期博客上一点点整改

链接上的气泡提示

鼠标悬浮显示@reply的评论

内容专注模式

相关阅读

先上新主题，再慢慢完善

相关阅读

WordPress子主题（翻译）

目录结构

必需的style.css文件

一个子主题的范例

使用 functions.php

模板文件

其他文件

相关阅读

圣诞快乐和不是总结的总结

相关阅读

主题设计图Spring，谁要？

相关阅读

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

相关阅读

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

相关阅读