網生@誌 | zEUS.'Blog » css http://zeuscn.net Not Only Wordpress Template, But Also My Life... Tue, 03 Jan 2012 13:20:32 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 分享自制淘宝商品页模板 PSD&HTML http://zeuscn.net/archives/2010/02/23/share-a-product-template-of-taobao.html http://zeuscn.net/archives/2010/02/23/share-a-product-template-of-taobao.html#comments Tue, 23 Feb 2010 11:16:13 +0000 zEUS. http://zeuscn.net/?p=762 好久没更新日志了，过年了也没跟大伙拜年，实在很惭愧…

本打算这个月调试检测 Lite V2 ，并重新提交到 官网的。不过随着本人经营的鞋店信誉提升，流量也逐渐在增加，所以网店装修也变成了一件十分必要的工作。刚好过年期间快递放假停止收发货，网店处于半停运状态，于是我就趁这个时间段把淘宝的商品页进行了一番美化。这也是我第一次操刀制作 模板（以前做模板都是凭感觉），再加上过年那几天忙于走亲戚和一次咸宁温泉之行，所以整个制作周期也拖得比较长。还好在快递恢复之前完成了整套工作 +HTML ，其中写 HTML 也是我第一次用到 TABLE … 淘宝商品的 HTML 编辑器不支持很多 属性，实在很头疼，不过都一一“克服”了。

整套设计总体来说还蛮满意的，虽然跟不少认识的优秀设计者还有蛮大的差距，但毕竟也是我的第一次，就不用要求太高了 :-P
整个页面设计以粉色为主，适合做一些女性化的产品，比如：女士的鞋帽箱包、化妆品应该都可以。
这里我把整套模板共享出来，送给开淘宝店和对此有兴趣有研究的朋友们，权当作是本人送给大家的新年礼物吧 :-)

下面是截图预览：

淘宝商品页模板

淘宝商品页模板

在线效果 点击这里 查看

点击下载 PSD 及 HTML 打包文件

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2010/02/23/share-a-product-template-of-taobao.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2010/02/23/share-a-product-template-of-taobao.html/feed 129 Ipple Lite V2 即将发布 http://zeuscn.net/archives/2010/02/03/ipple-lite-v2-will-release.html http://zeuscn.net/archives/2010/02/03/ipple-lite-v2-will-release.html#comments Wed, 03 Feb 2010 10:11:41 +0000 zEUS. http://zeuscn.net/?p=758 Lite 是我早期制作一块 模板，同系列的还有一款 Ipple Ultra。在2008年，这2块模板给我带来了相当大的人气，也让我结交了很多玩 的朋友。去年年底我就有打算“复刻” Ipple Lite，不过当时的投票中并没有包含这款主题，本根据投票结果是先制作 和 Blue-s 这2款主题，不过由于年底收货过多“杯具”，再加上新作中缺乏创作灵感，而且最近半年都没有免费的新作面世，所以我决定优先制作一款周期短，受众面广的免费主题，于是重制 Ipple Lite 便成了最佳的选择。

断断续续前后花了大概2周的时间终于把升级版的 Ipple Lite 制作好了，新版和旧版之间的差别还是蛮大的，时隔2年再看自己过去的作品，发现代码方面有不少不成熟的写法，新版本基本只是保留了 DIV 的大框架， 几乎重写了90%，整站的代码都进行了优化，并且加入时下流行的几种 效果。而且这是我第一次在主题中运用到“黄金分割”：新版的 Ipple Lite 主栏和侧栏的比例就是黄金分割的比例。
ipplelitev1 ipple lite v2

可以从截图中看到新版的变化还是颇大的，在线 DEMO 测试链接：
http://demo.zeuscn.net/index.php?wptheme=Ipple+Lite+V2

另外，我已将 Ipple Lite V2 提交给了 WordPress Free Directory ，这也是我第一次将作品提交给官方，不得不说的是 WordPress 官方对主题模板的要求真是超级严格！审核需要一段时间，也不知道是否能通过，权当学习和体验过程了。

Ipple Lite V2 的详细信息等模板发布之日再介绍了～

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2010/02/03/ipple-lite-v2-will-release.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2010/02/03/ipple-lite-v2-will-release.html/feed 132 Which is The Next Theme ? http://zeuscn.net/archives/2009/10/29/which-is-the-next-theme.html http://zeuscn.net/archives/2009/10/29/which-is-the-next-theme.html#comments Thu, 29 Oct 2009 03:35:30 +0000 zEUS. http://zeuscn.net/?p=624 前日简单和 Timer 聊了下，我们在今后合力推出付费主题的分工和分成问题上基本达成一致，我相信咱俩以后肯定能继续推出更酷更强大的 付费主题。不过在此之前我个人会争取在11月底推出一款免费的 主题，想想我已经有1年多的时间没有发布免费主题了，再不做一两款免费主题实在是说不过去，毕竟在 的世界里，免费才是王道。另外，用优秀的免费主题积攒人气然后再发布付费主题也不失为一种营销手段 :-P

计划中这次发布的免费主题是四选一，其中两款是完成度超过50%的主题，一款是由 Timer 设计的博客风格主题，最后一款是曾经的某个老主题的升级版。至于到底该制作哪一款，现在还没想好，所以就先在这里作个调查 :-)

Blue-s 和 主题：
Blue-s 是 Timer 设计的一款 主题，其实在几个月前我就曾经线上测试过无图片纯 的版本，这是完成度最高的一款主题，我接下来要做的就是加入背景图片和调试工作，不排除会再继续加入一些新的特效和输出方式。相对来说 Blue-s 的工作量是最小的可能做起来最快。以下是它“简陋”的截图效果：

Blue-s CMS 风格主题

Blue-s CMS 风格主题

WLK 其实就是魔兽世界第二个资料片“Wrath of the Lich King”的简称，这是一款模仿魔兽世界官方网站的主题，所以效果就不用说了，只是在某些设计上还没想好如何转换成 WordPress 的功能，这款主题在数月前基本上就完成了首页的制作，接下来需要制作内页，虽然有一定的工作量，但是制作思路在脑子里已经存放了很久了，所以做起来应该很快。下面是我从未放出过的首页截图，这次让大家一睹为快：

WLK 魔兽风格主题

WLK 魔兽风格主题

是一款 Timer 一年多以前的设计，由于我个人这样那样的原因导致这款主题一直都还没开工… 虽然是一个没开工的主题，但是 Lapis 是相对最简单的一款主题，标准的博客设计，没有眼花缭乱的设计和复杂的排版，所以制作起来也是相对最容易的：

Lapis 标准博客风格主题

Lapis 标准博客风格主题

Ultra Reborn 想必不少朋友都还记得 Ipple Ultra 这款我模范苹果官网风格的 CMS 主题，这款主题算的上是我最成功的主题了，说他成功并不是说它制作得最好，它和 D&Z Theme Pro CP 比起来简直就是小巫见大巫，但是 Ipple Ultra 在当年国人制作 WordPress 主题风潮早期阶段为我打下了非常坚实的基础，也为我营造了良好的口碑，打响了一定的知名度，使得我之后推出的主题也都备受不少 WordPress 中文用户的关注，当然了，也帮助我结识了不少朋友 :-) 如今我的制作水品相比一年半以前已经有了不小的提升，所以打算重新打造这款“经典”主题，加入时下流行的 并完善主题代码，优化 CSS 和 等等。即使11月份没有选择重制这款主题，但它也会是我今后的制作重点！

Ipple Ultra Reborn

Ipple Ultra Reborn

四款或将发布的免费主题介绍完毕，现在就是想知道 WordPress 用户们对这四款主题中的哪一款最感兴趣，我也好根据“客观”和“主观”的情况来决定11月份的主攻方向～
{democracy:9}

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/10/29/which-is-the-next-theme.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/10/29/which-is-the-next-theme.html/feed 45 三个第一次 http://zeuscn.net/archives/2009/08/28/drumbeating-and-taobao-goods-page.html http://zeuscn.net/archives/2009/08/28/drumbeating-and-taobao-goods-page.html#comments Fri, 28 Aug 2009 01:36:06 +0000 zEUS. http://zeuscn.net/?p=610 第一次做广告宣传图：
咱毕竟不是搞设计的人，PS 用得也不熟练，做出来的效果感觉还是比较生硬，不过毕竟也是第一次，再加上室友们都认可了，那就这么着吧。下面是效果图，虽然设计是凭空想出来的，但潜意识里还是受到了不少“广告”的影响。

华申鞋城

第一次做淘宝商品页面：
之前的博客中提到过我现在创业项目是跟鞋子有关，武汉有华中地区最大的鞋类商品批发市场，而这一块在网上也没有人做整合，所以我和 partners 就向这块“宝地”进军，我们主要的业务现在包括3块，鞋子的网上批发（http://www.whhsxc.com）、鞋子的网上零售（http://shop58955815.taobao.com/）和给鞋子批发商做网站。创业的前期做批发很难，毕竟没有固定的客户源，市场推广也很难做，所以我们把近期的业务重点放在了鞋子零售和做网站上。

既然选择在淘宝上做零售，那么“店铺装修”就是必不可少的了，本着一切从简的原则，我们没有订购淘宝的旺铺，所以店铺首页只能使用默认风格，但还是有必要把淘宝的单个商品页面美化一下。我花了大概一天半的功夫完成了这个页面，效果请见：http://item.taobao.com/auction/item_detail-0db1-04b75798c87207d4d7a9e3a45b05c82c.htm ，我看了下网上做“店铺装修”大多都是 TABLE ，但我依然还是用的 DIV ，一方面是不太喜欢 TABLE 另一方面是已经习惯了 DIV ，改不过来了。淘宝的商品编辑虽说是支持 HTML 的，但是限制很多，所以在整个制作过程中碰了不少壁，但都算是一一克服了 :-)

第一次做 Shopex 模板：
其实不完全算是“做” Shopex 模板，和 模板一样，一开始都是修改和仿制。其实这个也不太难，只是上手花了一些时间（了解 Shopex 模板的构造），之后就是靠 DIV 和 控制了，Shopex 模板很方便的是不用去接触和了解它的函数，但这也从一定程度上限制了主题制作者的发挥。

http://www.whhsxc.com 是我们拿来做批发的网站，由于时间的关系，我使用的是最简单的设计风格——无图加方框… 不过还算凑活，看得过去 :-P

现在我正在给一个批发商做网站，网站系统自然选用了我熟悉的 WordPress ，网站模板我并没有采用原创的方式，毕竟其一我现在还很欠缺设计的能力，其二是工作时间不允许。所以我找了一个和鞋子风格相近的免费模板，然后进行2次开发（ 化），整站的完成度已经超过70%了，希望能在后天之前上线！届时拿出来“现”一下，欢迎博友们拍砖！

好了，N 久没“正常”的更新了，我 X TMD Feedsky ，10天前的话题广告到现在都还在审核。MB 以后再也不写了它的广告了！

PS：最近我的 Adsense 都不显示了，不知道是怎么回事…

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/08/28/drumbeating-and-taobao-goods-page.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/08/28/drumbeating-and-taobao-goods-page.html/feed 112 优化 header.php 加速 WordPress http://zeuscn.net/archives/2009/07/22/optimize-the-header-for-wordpress.html http://zeuscn.net/archives/2009/07/22/optimize-the-header-for-wordpress.html#comments Tue, 21 Jul 2009 20:26:38 +0000 zEUS. http://zeuscn.net/?p=602 以众多插件和主题而闻名，插件不仅给我们的博客提供了诸多强大的功能，而且还简便了操作美化了页面。但凡事都是具有两面性的，不少插件为了实现自己的功能都需要引用额外的 和 样式，这些内容全部都被自动加载到了页面的 head 标签内，从一定程度上影响到了页面加载的速度。而实际上大部分时候我们不需要这些额外的内容。比如我的博客首页（index.）、归档页（archive.）和搜索结果页（search.），都不会使用我已经启用的 Audio player 、Democracy 、WP-Syntax 、CoolCode 、Clean Archives Reloaded 这几个插件，而它们都会自动将一些额外的内容加入到 head 标签内，所以我只需要根据自己的需要，让这些插件只在文章页（single.php）和页面页（page.php）内加载即可。

WordPress 插件是根据下面这个函数进行加载的：

<?php wp_head(); ?>

我们可以在主题模板内的 header.php 文件中找到它，也就是说只要出现以上这个函数，插件就能自动将相关的内容加载到 head 标签内，如果没有这个函数，插件则不会加载这些内容。那么我只需要按照下面的写法就能按照我自己的需求在文章页（single.php）和页面页（page.php）内加载相关的插件功能了。

<?php if (is_single() or is_page()) { ?>
<?php wp_head(); ?>
<?php } ?>

通过一个简单的判断语句我们就能有效的减少博客首页的“请求数量”以提高首页的加载速度，下面是首页和文章页 head 标签加载情况的两张对比图：（点击放大）

优化 header.php 加速 WordPress 首页加载速度

优化 header.php 加速 WordPress 首页加载速度

基本上，效果很明显！

功能和速度就像鱼和熊掌一样难以兼得，对于博客/网站速度的优化还是蛮需要积累经验的。

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/07/22/optimize-the-header-for-wordpress.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/07/22/optimize-the-header-for-wordpress.html/feed 91 CSS opacity 实例页面 http://zeuscn.net/archives/2009/07/15/css-opacity.html http://zeuscn.net/archives/2009/07/15/css-opacity.html#comments Tue, 14 Jul 2009 16:44:59 +0000 zEUS. http://zeuscn.net/?p=600 是 3 里的一个属性样式，它可以实现任意元素（文字、图片、层）的半透明效果，由于是 3 才支持，所以 IE6、IE7 都无法直接实现，但是我们可以用 alpha 滤镜来解决这个问题。半透明样式代码可以这样写：

1
2
3
4
5
6

.opacity{
filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;              /* 老版Mozilla */
-khtml-opacity:0.5;              /* 老版Safari */
 opacity: 0.5;           /* 支持opacity的浏览器*/
}

opacity 在 CSS2.0 手册里是这样解释的：

opacity 是 alpha 滤镜的一个可选参数，设置或检索透明渐变的开始透明度。取值范围为 0 – 100 。默认值为 0 ，即完全透明。 100 为完全不透明。

下面来看看实例页面：
http://www.vcbb.net/photo

CSS opacity 实例页面

CSS opacity 实例页面


我们可以看到页面中的所有“图片区域”都蒙上了一层半透明的灰色“蒙板”，当鼠标移动上去后“蒙板消失”，这种效果运用在图片站上非常不错。在这里每一个“图片区域”里虽然包括了图片和标题两部分，但我将整个“图片区域”做成固定的宽高，然后 display:block; 最后将这个图层加上 opacity 的效果。

具体的样式代码我就不贴出来了，大家可以用 firebug 就能直接看到了，而且效果是多样的，代码也是灵活的。需要注意的是想要做成我这个实例页面里的效果需要对半透明层上的 a 和 a:hover 这2个样式特别的定义一下～

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/07/15/css-opacity.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/07/15/css-opacity.html/feed 79 针对 WordPress 模板导航栏2级悬浮菜单的一个很好的解决方案 http://zeuscn.net/archives/2008/12/18/single-level-dropdowns-for-wordpress.html http://zeuscn.net/archives/2008/12/18/single-level-dropdowns-for-wordpress.html#comments Thu, 18 Dec 2008 15:22:47 +0000 zEUS. http://zeuscn.net/?p=542 不知道你是否看的懂标题…

随着 越来越大众化，随着大家博客内容越来越丰富，我们对它的要求也是越来越高、越来越苛刻，很明显的一点就是很多人开始觉得 模板原始的导航菜单（只有1级）样式过于单调，输出的内容也有限，于是如何方便的输出2级导航栏就成为了一个大众化的需求。

之前，我针对 D&Z 已经有所尝试——《给 D&Z Theme 增加一个额外的悬浮菜单 》，其方法是基于小胖的《JavaScript下拉菜单》。此方法虽然可行，但存在一个弊端——2级导航菜单需要手动添加和更新！这样做的话增加了不少工作量，而且对于 WordPress 新手来说的话也有不小困难…

2级菜单

在这篇文章里，我将分享一个同样是使用 来生成2级导航菜单的方法，此方法弥补了上述的缺陷。原文详情见这里：
http://www.htmldog.com/articles/suckerfish/dropdowns/

小胖的方法之所以需要手动更新 WordPress 导航栏，是因为他的代码里给“父 li ”里写入了“onmouseover” 和 “onmouseout” 这2个行为：

1
2
3
4
5
6
7
8
9
10
11
12

<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">父栏目1</a>   
   <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
      <li><a href="#">子菜单4</a></li>
   </ul>
</li>
<li><a href="#">父栏目2</a></li>
<li><a href="#">父栏目3</a></li>
<!-- etc. -->

然而 WordPress 输出页面导航链接的函数是：

1

<?php wp_list_pages('sort_column=menu_order&depth=1&exclude=&title_li=');?>

其表现出来的形式为：

1
2
3
4

<li><a href="#">父栏目1</a></li>
<li><a href="#">父栏目2</a></li>
<li><a href="#">父栏目3</a></li>
<li><a href="#">父栏目4</a></li>

也就是说这个函数输出的是一排带链接的 “li” ，因此我们就不可能把 “onmouseover” 和 “onmouseout” 这2个行为写入到函数中并让“父 li” 输出，如果要做2级导航菜单的话就需要把每个 “li” 都独立出来，这样就相当麻烦了…

不过 Suckerfish 的 Javascript 就解决了这个，它无需在“父 li” 中写入额外的内容，这样就能很好的运用到 WordPress 中来。那么 WordPress 模板导航栏部分的代码我们可以这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script type="text/javascript">
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
 
<div class="nav">
    	<ul id="nav">
            <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="网站首页">网站首页</a></li>
            <?php wp_list_pages('sort_column=menu_order&depth=2&title_li=');?>
	</ul>
</div>

前半部分调用的就是 Javascript 代码，后半部分直接输出导航栏，注意到第19行中的“depth=2”，这个参数用于控制输出2层导航栏，也就是只会输出一层子菜单，改成3的话就会输出2层子菜单，以此类推。

针对上述代码，我们还需要相应的样式来控制子菜单的隐藏和显示（必须）：

1
2
3
4
5
6

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
	left: auto;
}

其它的 样式，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#nav {
}
#nav ul {
}
#nav li {
}
#nav li a {
}
#nav li a:hover {
}
#nav li ul {
}
#nav li ul li {
}
#nav li ul li a {
}
#nav li ul li a:hover {
}

就需要根据主题的整体样式来决定了。

个人感觉，对于 WordPress 主题制作者而言，这是个不错的解决2级导航菜单的方案，对于有一定 HTML 和 CSS 基础的朋友来说，也能很方便的对模板导航栏进行改造。

希望这个方法能给大家带来便利 :smile:

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/12/18/single-level-dropdowns-for-wordpress.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/12/18/single-level-dropdowns-for-wordpress.html/feed 22 给 D&Z Theme 增加一个额外的悬浮菜单 http://zeuscn.net/archives/2008/11/26/javascript-drop-down-menu-for-dz-theme.html http://zeuscn.net/archives/2008/11/26/javascript-drop-down-menu-for-dz-theme.html#comments Wed, 26 Nov 2008 08:52:55 +0000 zEUS. http://zeuscn.net/?p=534 D&Z 在导航栏的设计上最多只能容纳5个导航链接，虽然看起来很和谐，但是对于部分使用者来说导航链接过于少了点。这里我介绍一下如何给 D&Z 额外增加一个酷酷的悬浮导航链接区域（例如本站导航栏中的“展开导航”），此方法基于小胖共享的——JavaSript 下拉菜单。这里我放弃 而选择使用 JS 来实现这个效果的原因其一是因为 实现起来兼容性问题很头疼，其二是 JS 实现起来的代码比 的更少！

D&Z Theme 主题的 header. 中普通导航栏的默认代码是：

1
2
3
4
5
6

<div class="nav">
        <ul>
            <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="博客首页">博客首页</a></li>
            <?php wp_list_pages('sort_column=menu_order&depth=1&exclude=&title_li=');?>
        </ul>
</div>

其中第四行代码就是页面页列表，也就是我们每新建一个页面（Page）页，就会在导航栏上出现一个页面页的标题连接。wp_list_pages() 函数的用法可以参考官方文档的说明：
http://codex.wordpress.org/wp_list_pages

下面是我给导航栏增加悬浮菜单后的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="nav">
        <ul>
            <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="HOME">博客首页</a></li>
            <?php wp_list_pages('sort_column=menu_order&depth=1&exclude=491,515,8,523,36&title_li=');?>
	    <script type="text/javascript">
            function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
            }
            function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
            }
            </script>
            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            	<a href="javascript:void(0)">展开导航</a>
                <ul>
                <span class="subnav-l"></span>
                <?php wp_list_pages('sort_column=menu_order&depth=1&include=36,523,515,8&title_li=');?>        
                </ul>
            </li>
        </ul>
</div>

同样是第四行，我使用 exclude 参数排除了几个页面（id）链接，使得它们不会出现在导航栏里，同时也在导航栏里腾出了一个位置放“展开导航”，第20行代码是用于显示在悬浮菜单里的页面（Page）页，这里使用了 include 参数来指定需要显示的页面标题连接。

PS：wp_list_pages() 函数里的 exclude 和 include 这2个参数后面的值需要根据自己的页面 ID 号来进行设定。

当然了，悬浮菜单里还能放分类列表，也就是使用 wp_list_categories() 函数代替这里的wp_list_pages() 函数。前者使用方法请参考函数 wp_list_categories 参数详解

下面是悬浮菜单的样式代码，将其添加到 style.css 中即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* Javascript 悬浮菜单样式 */
.subnav-l {
background:url(images/subnav-l.gif) no-repeat;
height:28px;
width:10px;
margin-top:2px;
float:left;
}
.nav ul li ul {
display:none;
padding:0 10px 0 0;
margin:0;
position:absolute;
right:0;
height:30px;
width:auto;
background:#333 url(images/subnav-r.gif) no-repeat right;
list-style:none;
float:left;
z-index:30;
}
.nav ul li ul li {
float:right;
height:26px;
padding:2px 11px;
}

样式中的图片，点击 这里 下载。

这样，导航栏的悬浮菜单就增加完毕了，如果是使用 D&Z Theme 的朋友，除了参数中的几个 ID 需要修改外，无需再改动其它任何内容。

我在给导航栏增加悬浮菜单后在 IE 下遇到了个问题，一旦悬浮菜单展开，文章栏就会下移一小段（被悬浮菜单挤下去的），但我在本地测试却又没有这种情况… 不知道其他朋友会不会碰到这种“怪事” :?: 如果大家还有其它问题，请直接在下面留言。

最后希望大家使用愉快 :mrgreen:

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/11/26/javascript-drop-down-menu-for-dz-theme.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/11/26/javascript-drop-down-menu-for-dz-theme.html/feed 26 近期完成的一个小小首页 http://zeuscn.net/archives/2008/11/23/a-little-project.html http://zeuscn.net/archives/2008/11/23/a-little-project.html#comments Sun, 23 Nov 2008 15:26:08 +0000 zEUS. http://zeuscn.net/?p=530 原计划本月完成 主题，不过在动手之前接了2个“项目”，一个是帮一个做摄影的朋友完成一个全新的 主题，另一个是帮助大学同学 9907. 做一个服装网站的首页。所以 Lapis 主题继续无限期的推迟…

由于 WordPress 主题还没有完全“竣工”，所以这里就先不拿出来“现”了。
服装网站的首页已经（抄袭）完成了，采用的是 HTML /DIV 构架，由于我在设计方面并不擅长，所以决定“借鉴”网络上现成的服装网站设计，最终让我找到了一个韩国网站的 设计稿，另外同学希望首页简洁一些，所以我就将设计精简了一下。从写代码开始大约花了2个半天的时间就完成了这个小“项目”，自己都有些惊讶自己的效率。
通过这一年来做 WordPress 主题的实践，虽然现在的我依然缺乏理论知识，但在制作网页能力上的提高是显而易见的，呵呵，08 年算是没有白活…

下面就是网站首页的效果截图：

Live Demo 点 这里

因为 9907. 他自己就会用 asp 写这种电子商务网站的程序，所以我做的这个只是个纯 html 页面。另外作为一个可能被用于商业网站的页面，所以源代码我就不正式的“共享”了，相信使用 的朋友还是能看到源码。

做好这个之后其实我心里痒痒的，很想把它做成一个 WordPress 的模板，功能上可能除了多用户开设网店，在线购物和在线支付这些功能我还无法实现外，其它应该就没啥问题了。

那么如果是针对单个商户，并提供在线下订单，送货上门后货到付款的方式，用 WordPress 来做网站绝对不成问题！恩… 有时间虚拟一个服装网站整整看 :cool:

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/11/23/a-little-project.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/11/23/a-little-project.html/feed 24 WordPress 较常用的首页文章 CMS 排版方法 http://zeuscn.net/archives/2008/09/11/wordpress-cms-index.html http://zeuscn.net/archives/2008/09/11/wordpress-cms-index.html#comments Thu, 11 Sep 2008 14:41:23 +0000 zEUS. http://zeuscn.net/?p=486 D&Z 首页一直在改版进行中，为的是推出 Pro 版本。在第一次改版时我在文章栏的上部添加了一个额外的内容模块——一个 Flash 展示窗和最新的一篇日志，下面的文章栏就依次显示除了第一篇日志外的其他日志，首页显示的总日志数还是可以在 后台设置-阅读里进行设置。这种类 的排版的方法网上有不少介绍，我也是从 Sofish 的一篇日志里学来的，虽然他介绍了方法，但我却还是尝试了很久才成功，原因是他的介绍过于简单，在这里我就做一些代码的补充。

wordpress

结合现在的 D&Z Theme 首页效果，代码和注释依次参考下文：

  1. 定义首页的第一篇文章，showposts=1 则是只显示最新的一篇文章（使用 函数来进行定义） 
    1
2
3

    <?php $my_query = new WP_Query('showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>

  2. 第一篇文章的标题及内容（使用 和默认的 WordPress 标签来输出文章） 
    1
2
3
4
5
6

    <div class="title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(''); ?></a></h2>
<div class="postinfo">分类: <?php the_category(' , ') ?> | <?php comments_popup_link('无人沙发', '1 条评论', '% 条评论'); ?> </div>
</div>
<div class="entry"><?php the_content('继续阅读 &raquo;'); ?></div>
<?php endwhile; ?>

  3. 调用第一篇文章结束，接下来可以放 AD 或者其它一些内容

  4. 然后首页调用后续文章部分（依然是使用 PHP 函数来进行定义）

    1
2

    <?php if (have_posts()) : while (have_posts()) : the_post();
if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

  5. 后续文章的标题及内容（还是使用 CSS 和默认的 WordPress 标签来输出文章） 
    1
2
3
4
5
6

    <div class="title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(''); ?></a></h2>
<div class="postinfo">分类: <?php the_category(' , ') ?> | <?php comments_popup_link('无人沙发', '1 条评论', '% 条评论'); ?></div>
</div>
<div class="entry"><?php the_content('继续阅读 &raquo;'); ?></div>
<?php endwhile; endif; ?>

    如果你在后台设置了首页显示5篇文章，那么以上将显示除第一篇外的其余4篇

按照上述代码就能实现这种类CMS的排版方式，此时你可以向上图一样在第一篇文章的旁边放上一段 Flash 或者图片，你还可以修改后续文章的输出方式，使用

<?php the_excerpt(); ?>

代替

<?php the_content('继续阅读 &raquo;'); ?>

而让后续文章输出摘要而非全文，甚至你可以把它们都去掉只输出 H2 标签内的文章标题，再运用一些 CSS 手段让其显示得更加美观，等等等等，就要看大家的 CSS 技巧和想象力了。

这也算是一个 WordPress 的进阶使用方法，还是需要有一定 PHP HTML/CSS 基础，新手请慎用…

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/09/11/wordpress-cms-index.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/09/11/wordpress-cms-index.html/feed 108 WordPress 技巧—显示分类图片 http://zeuscn.net/archives/2008/09/10/wordpress-category-icon.html http://zeuscn.net/archives/2008/09/10/wordpress-category-icon.html#comments Wed, 10 Sep 2008 06:12:06 +0000 zEUS. http://zeuscn.net/?p=483 何为分类图片？——我们的每篇日志都有自己的分类，一般来说在文章栏中我们会用文字链接来描述文章所属分类，但有时候出于美观和页面整体效果的需要我们要用不同的图片来代替各种分类。那么如何来达到这种效果呢？

其实 已经有了个叫做 Category Icons 的插件可以帮助我们在文章需要的地方显示分类图片，并且还能显示在 Feed 中，该插件还提供一些其它的功能。可惜的是插件作者主页国内无法访问，我找不到详细的使用说明文档，无奈只有放弃这款插件。

在继续搜寻互联网之后，我寻找到了另外一种同样非常有效方法——不用插件也能显示分类图片！该方法基于 Styling Posts by Category and Category-Specific Images 并修改自 Very Easy WordPress Theme Hack: Show Category Images ，下面我来谈谈我是如何在博客首页上实现这个效果的，效果如下图：

ZEUS.

  1. 准备好各个对应分类的图片，并且图片的名称需要和分类名一致！比如我有一个 “与我有关” 的文章分类，其缩略名是 “sth-about-me” ，那么我就将对应的分类图片命名为 “sth-about-me.jpg” （进入 WordPress 后台-管理-分类，即可修改分类缩略名，最好使用英文）。
  2. 使用 FTP 在你的 /wp-contant/ 目录下建立一个 cat-icons 目录，将所有分类图片上传至该目录下。
  3. 打开你的 index. 文件，在 post 容器内，即 
    1
2

    <div class="post" id="post-<?php the_ID(); ?>">
</div>

    之中的适当位置添加如下代码：

    1
2
3
4
5
6
7
8
9
10
11

    <?php foreach((get_the_category()) as $cat)
{
$catname =$cat->category_nicename;
echo "<a href=/category/";
echo $catname;
echo "/>";
echo "<img src=http://yourdomain/wp-content/cat-icons/";
echo $catname;
echo ".jpg alt=\"$catname category \" title=\"$catname 分类 \" /></a>\n";
}
?>

    我想稍懂 HTML 和 PHP 的朋友应该能理解上述语句的含义，但请注意，倘若你的分类永久链接形式不是默认的： “http://yourdomain/category/分类名称/” 那么你就需要根据自己的链接形式修改第四行的 “/category/”

  4. 最后你还需要有一定的 HTML/ 的知识来将上述代码进行定位，你可以让它在 “entry 容器” 旁 float left 或者 right ，如果图片较小的话还能放到文章标题 H2 的旁边等等，这就要看大家的想象力和页面的排版方式了。

完成上述步骤后，分类图片就能自动的添加在文章旁了。有个问题还需要注意，如果你的文章不止属于一个分类，此时对应的所有分类图片都会显示，如果你的版式和我一样只想让它显示一个分类图标的话就需要用 CSS 技巧来 hiden 多余的图片了。根据不同的样式其方法也不一样，所以我也不进行说明了。

比起安装插件，这个方法要更加简洁！也更推荐大家使用～ 不过如果你对 PHP HTML/CSS 相关知识还一无所知的话，就需要慎用了…

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2008/09/10/wordpress-category-icon.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2008/09/10/wordpress-category-icon.html/feed 18 IE6 支持 PNG 格式图片的 CSS 滤镜写法 http://zeuscn.net/archives/2008/08/03/ie6-support-png.html http://zeuscn.net/archives/2008/08/03/ie6-support-png.html#comments Sun, 03 Aug 2008 13:38:03 +0000 zEUS. http://zeuscn.net/?p=463 之前一直在用 gif 图片或者用和背景色相同的 jpg 图片回避 IE6 不支持 PNG 图片背景色透明的 BUG，不过在做大菠萝3（Diablo III）主题时不愿放弃自己一个比较酷的 Idea，所以我还是决定要解决这个 BUG。
网上关于解决 IE6 这个 BUG 的方法很多，有用 JS 的，也有用 IE6 的 滤镜的。稍微看了一下，JS 的方法仅用于单个图片的效果，但若拿图片作背景则不行。 滤镜的写法则简单很多，也能用作背景，但还是存在一个问题，图片的地址只能使用“绝对地址”，而我们在模板的 CSS 样式表里使用的大多是相对地址，虽然也可以使用绝对地址，但是不同的用户使用该模板的话就必须修改其绝对地址，对于不懂 CSS/HTML 的人来说，无疑这是一道“坎”。不过后来猫猫的一句话让我如梦初醒——可以把这段 CSS 写在 head 里，这样就可以用 自己的 语句来调用绝对地址了！

让 IE6 支持 PNG 图片背景透明的 CSS 滤镜写法如下：

1
2
3
4

*html #image-style {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
}

这里我写了一个实例：http://zeuscn.net/download/ie6png.html
使用 和 IE7 浏览器看的话，2张图片没有区别，但使用 IE6 核心的浏览器看的话会发现第一张图片有白色背景——第一张图片是直接添加而没有使用滤镜。

1
2
3
4
5
6
7

#test {
	background:url(h2-bg.png) no-repeat;
	*background-image: none;
	*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://zeuscn.net/download/h2-bg.png", sizingMethod="scale");
	height:85px;
	width:66px;
}

我们可以从实例中的代码看到，由于 HTML 文件和图片 h2-bg.png 位于相同目录，所以这里的背景链接我是使用的相对地址。而下面的 CSS 滤镜我使用的是绝对地址。这里我为了兼容 Firefox IE6 和 IE7 我使用了 Hack 的写法：属性前添加 “*” ——只让 IE 核心的浏览器识别。

那么在 WordPress 模板的 head 标签内的 CSS 样式表调用之后，添加了下面的样式代码来绕过在样式表内使用绝对地址的问题：

1
2
3
4
5
6
7
8
9

<link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
<style>
.post .title-bg {
	height:85px;
	width:65px;
	*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="<?php bloginfo('stylesheet_directory'); ?>/images/h2-bg.png", sizingMethod="scale");
	position:absolute;
}
</style>

这个效果的具体样式是什么样的呢？嘿嘿，主题发布之日就能揭晓了～

zEUS.

日志评论

  • 2008年, 八月 3日, 童丹艺 writes: 瓦咔咔~~抢到1楼~~虽然还没有看。。。嗯嗯，会看完的。。虽然看不懂。。呵呵，无比激动咧~~
  • 2008年, 八月 3日, zEUS. writes: @童丹艺：呵呵，多谢支持撒～～ 看不懂光抢沙发就够啦～～
  • 2008年, 八月 3日, zx.longinus writes: 在以前沒有放棄 ie6 支持的時候，我會使用 gif 做個簡陋版專門給 ie6 使用，雖然當時就知道利用 filter 和 css hack 的方法，但是總覺的 ie6 的用戶很低等，沒有必要為他們花時間……
  • 2008年, 八月 3日, zEUS. writes: @zx.longinus：额... 你可以看作我是为了模板更 popular，虽然我也很烦 IE6 但是为了用户体验，为了流量，不得已而为之。不过我不BS用户，因为他们是 IE6 的“受害者”。
  • 2008年, 八月 4日, wayne writes: ie6太lj了...
  • 2008年, 八月 4日, fiorano writes: 最早用itheme的时候，试过这个方法，可是死都不出效果，不知道是不是主题的问题 :???:
  • 2008年, 八月 4日, zEUS. writes: @wayne：确实很垃圾，IE6增加了我不少负担！！ :twisted: @fiorano：呵呵，这个效果我也搞了半天才研究清白...
  • 2008年, 八月 4日, page writes: 你这个 语法高亮怎么实现呢？
  • 2008年, 八月 4日, zEUS. writes: @page：coolcode 一款国人改造的插件，还不错～ 支持很多类别的代码高亮。
  • 2008年, 八月 4日, Yacca writes: 我只给gavartar做了css滤镜... 其他的图片因我能够控制显示,所以就干脆不用透明背景了...呵呵 自己用的皮 什么都可以通融 哈哈
  • 2008年, 八月 4日, zEUS. writes: @Yacca：呵呵，因为正在做的 DiabloIII 主题的背景色要么渐变，要么背景复杂，所以只能寻求PNG的透明效果了 :smile:
  • 2008年, 八月 4日, dogorgod writes: 呵呵，兄弟的探索精神果然不凡，这个难题都攻破了。赞 :lol:
  • 2008年, 八月 4日, sofish writes: [Comment ID #5096 Will Be Quoted Here] 爱折腾的人都是这样的，哈哈... 正好想要,不过呢,GIF不是更小一点?
  • 2008年, 八月 5日, GanGeGe writes: 不到万不得以我是决不会把PNG放在网页上的......
  • 2008年, 八月 5日, 花果山寨 writes: 专业的介绍，学习学习！
  • 2008年, 八月 5日, willerce writes: 试过用这个方法. 但是一旦用多了.就会很卡. 比如vikiworks.com现在用得太多,一用IE进,就卡得不行.
  • 2008年, 八月 6日, 老N writes: 这样的技术文章只好先保留了，自己作主题时再拿出来瞅瞅哦~~ :lol:
  • 2008年, 八月 9日, 知更鸟 writes: 这个一定要试试了
  • 2008年, 八月 10日, zEUS. writes: [Comment ID #5098 Will Be Quoted Here] GIF 背景透明的图片放到网页上会有白边... @GanGeGe：恩，我就是万不得已。。 @willerce：恩，尽量少用
  • 2012年, 一月 17日, new technology in nuclear medicine writes: Extra Reading... [...]we like to honor other sites on the web, even if they aren't related to us, by linking to them. Below are some sites worth checking out[...]...

本文地址：http://zeuscn.net/archives/2008/08/03/ie6-support-png.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]>
Fatal error: Maximum execution time of 30 seconds exceeded in E:\zeuscn.net\wp-includes\feed-rss2.php on line 49