涉及到下拉菜单制作的方法最核心的还是鼠标移动到上面的处理。下面是调用wp_nav_menu()函数后的HTML结构(做解释用)：

<div class="menu-菜单名-container">
	<ul class="menu" id="menu-菜单名">
		<li class="menu-tiem">
			<a href="#">菜单项目1</a>
			<ul class="sub-menu">
				<li><a href="#">子菜单项目1-1</a></li>
				<li><a href="#">子菜单项目1-2</a></li>
				...
			</ul>
		</li>
		<li><a href="#">菜单项目2</a></li>
	</ul>
</div>

这是一种很经典很优雅的导航HTML代码，在IE6以上以及标准浏览器中要实现下拉效果只用一句CSS就能搞定。比如下面的示例代码(可自定义)：

.menu li a { float:left; height:35px; width:100px;/*菜单高度与宽度*/ line-height:35px; text-align:center;  color:#ccc; text-align:center; }
.menu li { float:left; height:1%; background:#000; }
.menu-sjys-container { position:absolute; z-index:1000;}
.menu li ul li { clear:both; border-bottom:1px solid #333; border-right:none;  }
.menu-item  { position:relative; border-right:1px dotted #333; }
.menu-item:hover>.sub-menu{ display:block; /*下拉效果只用到这一段代码*/ }
.sub-menu { position:relative; left:1px; margin:0; z-index:101; display:none;/*一般情况下隐藏子菜单*/ }
.sub-menu ul.sub-menu { position:absolute; left:100px; top:0;}

上面的这两段代码在IE6以上以及标准浏览器中表现的很完美，原因是IE6这种老浏览器还不支持任何标签的伪类属性，即htmlTag:hover。所以为了兼容我们又不得不用JS来实现(纯CSS亦可)。我大概写了一段JS可以勉强达到效果，但不知道为什么在IE中切换菜单时会有闪动的感觉，这个得求教JS高手了哈。

<!--[if lt IE 7]> <script type="text/javascript">
//<![CDATA[
/*导航联动效果*/
(function () {
	function getElementsByClass(searchClass, node, tag) {
		var classElements = new Array();
		if (node == null) node = document;
		if (tag == null) tag = '*';
		var els = node.getElementsByTagName(tag);
		var elsLen = els.length;
		var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
		for (i = 0, j = 0; i < elsLen; i++) {
			if (pattern.test(els[i].className)) {
				classElements[j] = els[i];
				j++;
			}
		}
		return classElements;
	}
	function hoverSubMenu(node, flag) {
		node.onmouseover = function () {
			var subMenu = getElementsByClass("sub-menu", this)[0];
			if (subMenu) {
				subMenu.style.display = "block";
			}
		}
		node.onmouseleave = function () {
			var subMenu = getElementsByClass("sub-menu", this)[0];
			if (subMenu) {
				subMenu.style.display = "none";
			}
		}
	}
	var menuItems = getElementsByClass("menu-item");
	for (var i = 0; i < menuItems.length; i++) {
		hoverSubMenu(menuItems[i], i);
	}
})();
//]]>
</script>
<![endif]—>

问题应该出在不同浏览器对JS中onmouseover事件处理的方法上。但我还没有弄清楚，希望有“大湿”指导下哈。

问题在于W3C对onmouseout事件处理方法不是很理想，微软IE支持的onmouseleave方法确可以正常工作。

首先得说WPG是个神奇的小组，能交到不少好朋友学到很多东西。我当然是在技术组了哈。本来打算马上要去北京找工作的，但貌似暂时去不了了，这才有空帮助coolcfan同学做主题。

同样以简洁大方为主题风格的g33k在页面的设计和制作方面都独具匠心，给大家不一样的感觉。刚看见主题的缩略图时就很有想把她还原成标准的WordPress主题的冲动。历时一周，终于做成了这个漂亮的主题，我感到很荣幸。

主题有两个版本：一个是我为coolfan定制化的私用版，一个是人奔着共享精神允许我放出的通用版，其实两着并没有太大的差别，只是加在私用版中入了一些个性化的东西。

同时我也不准备我放出给太多的人，必竟不是我亲自设计的，仅在WPG论坛和我的博客发布。如果喜欢的话下载就行了。当然有空的话可以常来coolcfan和我的博客哦。

点击看大图

uushare下载：下载地址
dbank　下载：下载地址

注意：如果在使用的过程中发现bug请及时反馈到我的博客，我会第一时间更新。

——————————————–简单的更新通知分割线————————————————-

3.10日更新：美化RSS图标与链接，调整博客标题字体大小。
3.12日更新：二级分类目录重叠的问题，Can`t modify header的问题！
3.13日更新：关于二级评论溢出的问题。
6.30日更新：关于widget浮动的修正，感谢怒放同学提示。
9.23日更新：关于IE6下sidebar的错位修正，感谢不是咸鱼同学提示。
12.19日更新：关于WordPress3.0边栏最近评论失效：

请点击此处按步骤修正，或者用WP-RecentComments代替兼容性更好，原主题仅支持到WordPress2.9

还是说点有意义的吧！这次主题如果设计部分有10分的话我给自己打6分，编码部分如果有10分的话我将给自己打9分。恰好相返的是设计用了我很长时间却不是很理想，而代码部分就是水到渠成。或许我的界面并不是最漂亮最好看的，但我的样式表绝对是最精简最合理的。。。

虽然这个主题依然是基于SandBox框架的主题但自己改了很多东西来满足最高效和定制化的目的，样式的编写方面应用了比较多的技巧，也算是一些小经验吧！比如：我用到一个主样式表(style.css)和四个引入特殊样式表：reset.css,compatible.css,modify.css,plugins.css相信大家应该知道是做什么的(重置，兼容，修改，插件)。这样写最大的好处就是方便样式表的规划和后期管理（未完待续…）

估计这次应该是我在校最后一次做主题了，因为要忙于找工作。主题名初定为：silence—->安静是一种境界美。大家各抒己见，我都会认真考虑的，本来想也发到WordPress论坛上去的，但是又一想那上面太乱没多大意思，还是低调一点吧》哈哈^!^

点击看大图

博客内容类

1) WordPress Related Posts 这是由水煮鱼写的一个插件，它可以让你的博客文章下面显示与当前文章类似的文章，这样会有利于浏览者看到自己感兴趣的内容。安装和使用都相当简单，基本属于WPer必备插件。注：如果安装后不显示相关文章请清除浏览器缓存。

2) PageNavi 如果你讨厌WordPress默认主题上面的”旧文章，新文章”的分页链接，那么pagenavi将是你最佳的选择之一。强大的分布功能和自定义CSS样式使它成为你博客的一个亮点。使用也简单，设置好比如显示页数后将下面的这段代码放在主题的index.php文件中(注意放在文章循环结束的地方)：

<?php if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>

若你要修改CSS样式的话在插件的根目录下可以找到”pagenavi-css.css “修改便可。

3) Different Posts Per Page 本来不打算介绍这个插件的，因为用的人比较少。在定制化主题的时候会用到，它可以让你博客不同模板页显示你设置的文章数目。具体可以看这里

娱乐功能类

1) Audio Player 如果你喜欢音乐又不想让你的博客死气沉沉的话这款插件将让你的博客拥用天籁般的声音。我用的是” 2.0b6“版本的，功能十分强大。如果你在”General”->”Replace all links to mp3 files”的话插件将自动把文章中的mp3文件链接转换成默认的音乐播放器。如下：

<a href=”你想插入的mp3音乐地址”></a>

如果你不想这样也可以插入以下代码来调用Audio Player播放器，注意要去掉那四个引号

“["audio:mp3文件地址"]“

2) Picasa Image Express 没有图片的博客似乎不是一个合格的网页。这个插件完美地与Google Picasa相册结合，安装完与你Google Picasa帐户绑定后就可以将你Google相册里面的照片插入到文章里面了，这样节省了服务器空间而且Google图片所在的服务器是相当稳定的。

当然这个插件并不是必须的，如果你的网站服务器够大够稳定的话还是上传到自己的空间上实在点，起码不会被”和谐”掉^!^

3) MobilePress 这个插件可能用得人相对少一些，但是我觉得非常有必要。这个插件能让你的博客在手机Wap浏览器上优化后正常显示，为你节省流量。现在不都流行3G吗？若干年后普及了手机上网那么这也将为你的博客带来访问量

4) Twitter 插件当前是非常流行了，插件也是相当丰富，不过现在已经被封掉了，在这里我就不介绍了。如果你还是喜欢用的话那只能用http代理来follow别人了

评论留言类

1) Mail to Commenter 这个插件可以让你的评论留言者之间交互，也就你想对另一个人说话只需要加上”@用户铭+空格”就能把你的评论发到他的邮箱里面。也有很多人喜欢Thread comments这个插件，但是我感觉太大了用到的功能也不多所以就换成了Mail to Commenter了。安装后钩选”激活邮件通知”即可.

2) Akismet WordPress官方推荐使用的防止垃圾评论插件。相当好用，不过你得有个WordPress的API key ，去http://wordpress.com/api-keys/申请一个就行(要用代理的哦)。要想彻底防止垃圾评论建议再装上”SCP(Some Chinese Please)”这个插件，由于很多spam是由外国搞出来的，所以这个插件限制留言中必须有中文，这个插件比较简单就不单独介绍了

博客优化类

1) XML Sitemaps 可谓必备插件了吧？想让更多人知道你的博客?这个插件可以帮你建立站点地图并及时通知Google你的博客更新从而提高你博客在搜索引擎的收录量和暴光率。安装后会引导你进行SiteMaps初始化你的设置，好了，以后每发表一次博文它就能自动通知Google,Yahoo,MSN等搜索引擎。注重SEO的网友必须得深入研究一下了。

2) No Self Ping 这个插件很小也很简单，这款小插件可以有效的禁止Wordpress对自己文章的Ping Back

好了终于写完了，算下来我的博客也装了十来个插件了，应该相当影响网站速度了吧。不过还好一直都在精简呢。大家得看看哪个适合自己再装哦，要不然装多了可别怪我^!^

sandbox1.6.1主题框架下载

sandbox1.6.1中文语言包

注意 ：请确定你的wp-config文件中默认的语言包名称为”zh_CN”

首先让我说两句题外话，你知道你为什么想制作一个WordPress主题的原因吗？

或许你是一个不甘平凡的人，厌倦了千篇一律的主题模板；或许你是想从制作的过程中学习到一些你想要的知识；也或许你是一个向往自由的人，你希望做一个自由的设计者，用你自己的双手去设计你的未来和生活。无论是怎么样，我想只要你决定了的事就用心坚持下去。

如果你也和我一样是个二十出头的人那么你应该明白一个道理：学习和做事儿是一样的，都要用心做才会有结果。”功到自然成“看似简单的道理有多少人真正明白？

进入正题…

如果你是个WordPress新手那么做主题是比较麻烦的。就像我刚接触WP一样，到处找资料还一无所获。不过还好网络是一个大家庭总有一些人肯出来帮助你，所以就新手而言我建议你去看看水煮鱼翻译过的一篇主题制作文章“那么你想创建一个WordPress主题吗？”

如果你对WordPress有一定的了解问题就很好解决了，比如你会一点html,CSS，或是了解一些PHP。那么做个主题对你来说决非难事。网上有很多网友说诸如html,css这种简单技术学一天就足够了，对于这样的一些看法我个人觉得是很片面的，如果你不能够正视一样东西那么你永远都只能停留在初级阶段。

如果你已经学完了水煮鱼的教程并且想进一步研究那么往下看。。。

1.选择一个合适自己的主题框架

也许你一听到框架这个词就觉得很深奥，事实并非你所想，一个好的框架可以让你的制作过程事半功倍。就像我前面讲到过的sandbox框架，他会动态生成元素的class属性来供你使用，主题的结构也很精简到位。hybrid这个框架感觉不适合新手虽然他也是基于sandbox改的但是他有更强大的功能，结构也会更加复杂。

2.熟悉框架的xhtml架构

熟悉xhtml的结构会给你后面的CSS代码编写提供一个清晰的思路，我通常是这样做的：扒下页面静态html代码放在DreamWeaver里面用它的代码折叠功能，逐级折起来然后给第个大框架加上结尾注释(注意#和*分别表示ID和class),如下图所示(sandbox1.6)：

看到这图的时候就很清楚了，大结构上没用到嵌套而是竖直排列，这就给我们一个启示主题大半是用的浮动布局。利用浮动布局的好处就是比较灵活，可控制性高。但同时也会有问题，比如在IE6中的一些bug会彻底毁掉你的布局。关于兼容性的解决方法我会在下面CSS中说到，接下来在PhotoShop或者是画图板中画出你想要的布局样式(时髦的叫法是“原型设计”)，下面我给出一个一般博客的大概的结构图形：

现在结构已经很清晰了吧！到这一步得澄清一个问题了：如果说你已经会做主题了但是没有别人做的漂亮个性那是因为你还牌代码阶段，想做出真正的属于自己我主题你还得会设计，说到这个我如果你对设计还很一知半解，我推荐一本书给你一定会受益匪浅,来自Adobe的资深设计师robin。绝对值得一看的书。如果你已经有一个像样的博客主题设计稿了，那么请继续往下看。(也许你已经想到了下一节与CSS有关，是的，不过不是急着编写而是规划…)

3.CSS样式表的规划

在初学样式表的时候感觉规划是很虚无的东西感觉没什么用，但当你的样式复杂了以后规划就会使你你代码更有条理。规划的项目主要包括以下几点：

• 页面的基本属性(固定长宽或是自适应)
• 布局DIV的基本属性。比如 嵌套，定位，合理清除浮动等
• 找出须要继承的一些属性统一在父级元素中设置
• 是否须分要块写样式(取决于自己，对WP而言代码够熟练的话一个够了)
• 确定代码编写格式

下面就上一节说到的结构图做个简单的规划：

#content,.sidebar采用固定宽度浮动布局(就像大家知道的一样浮动元素最好给它width属性)。#wrapper,#container固定宽度且居中。#header,#access标准流布局。#footer和.sidebar最后一项必须清楚浮动，主页字体12px,颜色#666,ul列表padding:5px无项目列表，h1字体大小18px，h2-16px，a标签的默认样式，正文p标签的行高……

声明一点：在具体的制作中肯定比现在的要复杂N倍，你可以不把这些规划写在纸上但是至少要想好大概的轮廓。

4.样式表的具体实现

到这一步我得分享一个主题制作并且是很重要的技巧了：真正做主题的时候往往情况是有所变化的，所以不要指望一口气写出一个像样的主题，因此我们要为主题建立一个版本信息，每次完成某个效果后把项目的所有文件(主题文件夹目录，PSD文件的修改等)打包然后给出一个版本号，最好是记录下来每个版本与上一版的不同。比如实现了什么功能，修复了什么bug。

接下来就上上节的结构写出主要的样式代码：

body, p, h1, h2, h3, ul, li, strong, form, input {/*根据自己情况reset你的CSS*/

margin:0;

padding:0;

}

body {/*设置62.5的原因是为了后面更好的运用em来定义长度*/

font:62.5% Verdana, Geneva, sans-serif;

text-align:center；/*为了解决IE6中的居中问题*/

}

#wrapper {

width:960px;

margin:0 auto;

text-align:left;

}

#header {/*设置相对定位作用于嵌套其中的#access*/

position:relative;

height:100px;

}

#access {/*相对于#header进行定位*/

position:absolute;

right:10px;

bottom:0;

height:25px;

}

#content, #sidebar {

float:left;

}

#container {/*相当于clear掉sidebar后面的浮动使其高度自适应*/

height:1%;

overflow:hidden;

}

#content {

width:660px;

}

#sidebar {

width:300px

}

#meta {/*sidebar中最后一个div*/

clear:left;

}

#footer {

height:30px;

}

第一个版本就好了，保存好他然后copy一份进入下一节。

5.解决浏览器的兼容问题

我想你做的主题肯定是想让更多人看见最好的效果吧。终于到了这个大多数人都头疼的地方了，其实让我告诉你解决兼容性问题甚至比实现CSS更简单。原因很简单：bug就像是英语单词—》就那几个背掉一个少一个。所以解决兼容问题的核心不在技术而在人的耐性上面，你可以大骂fuck IE6。但是骂过后请回来，它等着你去征服…

下面是我总结出来的经验：

首先明白兼容性的问题就像是软件测试一样在项目开始的时候就应该开始了，本来这一点应该是在上一节讲到的，但我怕太多讲乱了，比如代码第一行的reset就是解决兼容性的方法之一。

通常我会用IE6和FireFox两个浏览器来测试，而且两个浏览器必须高度同步–也就是说完成一点效果后都要在两个浏览器中测试是否一致，然后找出原因(我假设这里出现的都是bug而不是下面的人为因素)逐一解决，Google，baidu，请教高手都可以，用任何方法修复它并记下来防止以后发生。

解决的方法有很多，各有利弊。比如：IE条件注释，CSS hack，运用高级过滤器。我个人不怎么喜欢IE条件注释(增加多余的代码)，虽然它符合标准。记住

符合标准的东西不一定全是好的，Web标准不可以被大家教条

所以我做出了选择：多用高级选择器实在不行再加hack，

在调试方法上我偏向于：尽量按标准写代码然后让它兼容IE6最后用高级选择器来设置标准浏览器中的效果，这一点是很重要的如果你不会用高级选择器的话兼容将是一个比较难的问题 。

下面说点看似不重要却真的很重要的东西

就是上面的提到的“人为因素”。先描述几个现象，你可以看看自己有没有遇到过：

你用尽了所有方法都没能使效果兼容各浏览器，最后才发现只是自己html的某个标签没关闭或者没正确嵌套或者是CSS的属性名写错，忘了加分号…

对于这种情况我有两下建议：
1.对于xhtml最好你先确定他的格式是否良好，可以用DreamWeaver里面验证功能，或者上W3C官网。因为非标准浏览器出的问题大多是潜在的，一个遵循标准的xhtml会减少这种潜在的因素。

2.写主题的每个阶段不要超过二个小时，超过后你会发现什么都很容易乱，我在上次做主题的经历中就尝到了这样滋味儿。两天写好的样式表就因为一个兼容问题脑了重写CSS。所以我建议大家不要用过长的时间去写代码，有时候时间可以解决许多问题。

6.发布维护你的作品

这一步应该来说是最轻松的了，让尽可能多的人给你的主题提出建议并虚心接受然后在实际中。因为网上会有很多高手等着你去请教呢^!^要学会提问，在自己实在没办法的时候再求助会更有效。

终于结束了–哈哈。一口气写完有什么不对的地方请大家留言告诉我。最后强调一点：以上都是个人经验总结所得，文章只能起到引导作用，关键还是取决于自己。。。

先前的那个是用默认主题改过的,但现在感觉不是很强大于是就引入了一个很著名的WordPress主题框架”sandbox”–沙盒.我比较喜欢这个框架有三点原因:

• 1.页面结构合理丰富—写样式表时候你会感觉很顺手
• 2.动态生成元素Class属性,易于控制页面—
• __比如我可以将achive和catelogy设计成效果完全不同的两个页面而不需要改动模板
• 3.符合WEB标准,通过W3C验证—当然这也取决于你的修改

结合上面的优点再加上自己对模板的一些改动和订制就做成了此主题,总得来说在我做的几个主题里面这个是我感觉比较好的一个,制做的过程也领会到了许多东西,改天总结出来和大家分享.另外也欢迎大家提醒我此主题bug我会尽力使其完美.还有一点:我暂时还不想放出下载,先用一段时间再说 ^!^

我在制做主题时候有这样的要求:主页显示3篇日志,其它(如存档,分类,标签…)页面全部显示.如果是这种情况那么你去改模板的话相当麻烦.Google了一下发现一个好用的插件”Different Posts Per Page”.很明显用来设置不同页面显示不同数量的文章.

如果你也有同样需要不防下载个试试,比较好用.插件要发送邮件激活.大家可以参考一下我的设置:

顺便透漏一下:新主题明天正式上线,欢迎大家捧场哦^!^