網生@誌 | zEUS.'Blog » JavaScript 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 无插件实现 WordPress Lightbox 特效 http://zeuscn.net/archives/2009/11/01/lightbox-for-wordpress-without-plugins-2.html http://zeuscn.net/archives/2009/11/01/lightbox-for-wordpress-without-plugins-2.html#comments Sat, 31 Oct 2009 16:14:42 +0000 zEUS. http://zeuscn.net/?p=658 上一篇日志介绍了让 WordPress 原生相册功能实现基于 jQuery 的 lightbox 特效，技巧是利用了 lightbox 的一个调用方法，依照同样的方法我们也可以让 原生的图片功能也能获得 lightbox 特效，也就是说在文章中插入一张图片的情况下也能实现点击放大浏览这种特效。

其原理也很简单，我们在直接利用 WordPress 文章编辑后台插入“上传、相册或媒体里已经存在的图片”：

WP 文章编辑插入图片

WP 文章编辑插入图片

之后程序会自动在前台页面代码中插入一个叫做 “wp-caption” 的 class

自动生成 wp-caption

自动生成 wp-caption 这个class

那么和上一篇方法一样，先去官方网站下载一套 的 lightbox plugin ，解压压缩包之后分别在 js 目录和 目录下找到如下3个文件：
jquery.js
jquery.lightbox-0.5.min.js
jquery.lightbox-0.5.css
将以上三个文件通过 FTP 上传到你所使用的 wordpress 主题目录下，然后在 <head></head> 标签内插入以下代码即可：

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>
<?php if (is_single() or is_page()) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js"></script>
<script type="text/css" src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css"></script>
<script type="text/javascript">
$(function() {
     $('.gallery a').lightBox(); //给原生相册功能加入 lightbox 特效
     $('.wp-caption a').lightBox(); //给原生图片功能加入 lightbox 特效
});
</script>
<?php } ?>

当然了，由于其中加入了判断，这个效果也只会出现在“文章页”和“页面页”。以上是主题在不支持 jQuery 的时候所添加的代码，如果主题已经加载了 jQuery 库，则需要酌情增加相关的代码了。

总结一下，基于 jQuery 的 lightbox ，我们无需任何其它 WordPress 的插件，就可以让 WordPress 原生的图片功能和相册功能都具有 lightbox 图片点击放大的特效。而且这个是基于 jQuery 库的一种扩展，因而我们可以在主题里方便的同时应用多种 jQuery 特效～ 比如 D&Z Theme Pro CP 主题侧栏 TAB 栏的切换效果、整站的锚点滚动和文章栏侧栏“MyConverse – 每个人都应该有一双匡威”栏目下的图片效果。

最后上几张实例展示：

擎天柱 CG 图

擎天柱 CG 图

机器狗 CG 图

机器狗 CG 图

红蜘蛛 CG 图

红蜘蛛 CG 图

大力神 CG 图

大力神 CG 图


YUPOO ID : ff8001e3-9f0b-4487-8c02-d9e45f8d1045

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/11/01/lightbox-for-wordpress-without-plugins-2.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/11/01/lightbox-for-wordpress-without-plugins-2.html/feed 89 无插件让 WordPress 原生相册支持 lightbox http://zeuscn.net/archives/2009/10/31/lightbox-for-wordpress-without-plugins.html http://zeuscn.net/archives/2009/10/31/lightbox-for-wordpress-without-plugins.html#comments Sat, 31 Oct 2009 03:58:30 +0000 zEUS. http://zeuscn.net/?p=644 不提倡使用过多的 插件，因为很多插件都会在 head 标签内增加大量的 JS，无疑这会影响到页面载入的速度，因而我就想能整合到主题里的效果尽量整合进来“统一管理”，这样自己也好让 JS 出现在它们需要的地方，避免不必要的加载。这里简单介绍一下给主题加入 的 lightbox 特效后如何让它能够支持 原生的图片相册功能。

我在上一篇日志里第一次使用了 WordPress 原生相册功能，给我感觉挺不错的——方便快捷，但是它的图片链接会重新打开图片，这着实不是很爽。另外，由于 D&Z Theme Pro CP 主题已经内嵌了 jQuery 的 lightbox 特效，于是我就想能否将两者结合起来，不试不知道，一试还真成功了 :-D 而且还只是仅仅只是在 header.php 中加入了一句代码：

$('.gallery a').lightBox();

Pro CP 的用户只需在 header.php 文件中搜索一下“lightbox”这个关键词，然后将上面那句代码添加成如下形式即可：

$(function() {
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    $('.gallery a').lightBox();
});

这里简单解释一下：
jQuery lightbox 的官方介绍（http://leandrovieira.com/projects/jquery/lightbox/）中可以得知调用 lightbox 特效的方法有如下几种：

$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});

当我们在 WordPress 中插入原生相册的时候，系统会自动在调用相册的源代码中加入 gallery 这个 class：
自动添加 gallery class

然后我根据 lightbox 的调用方法，将其中的

$('#gallery a').lightBox(); // 凡是带有 gallery ID 的对象都会启用 lightbox 特效

改为了

$('.gallery a').lightBox();// 凡是带有 gallery Class 的对象都会启用 lightbox 特效

即可，相当 Easy 吧～ 这样 D&Z Theme Pro CP 主题就能良好的支持 WordPress 原生相册的功能了！

那么在一个不支持 lightbox 的 wordpress 主题里我们要如何做呢？
先去官方网站下载一套 jQuery 的 lightbox plugin ，解压压缩包之后分别在 js 目录和 目录下找到如下3个文件：
jquery.js
jquery.lightbox-0.5.min.js
jquery.lightbox-0.5.css
将以上三个文件通过 FTP 上传到你所使用的 wordpress 主题目录下
打开主题的 header.php ，将如下代码加入到 <head></head> 标签内：

<script src="<?php bloginfo('template_directory'); ?>/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css" type="text/css"></script>

然后再加入上文介绍的：

<script type="text/javascript">
$('#gallery a').lightBox();
$('.gallery a').lightBox();
</script>

就大功告成了～ 但是一般来说我们只会在文章页或者页面页调用相册功能，所以我们可以使用一个判断语句让它们只在这两类页面中加载：

<?php if (is_single() or is_archive or is_page()) { ?>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('template_directory'); ?>/jquery.lightbox-0.5.css" type="text/css"></script>
    <script type="text/javascript">
    $('#gallery a').lightBox();
    $('.gallery a').lightBox();
    </script>
<?php } ?>

That’s all~
使用以上方法我相信原生的 WordPress 相册就能满足大部分用户的需求了，用它来代替功能强大但略显臃肿的 NextGEN Gallery 相册插件基本没啥问题～

看过以上介绍还不赶紧给自己的主题加上这么酷的效果？
005 009 004 006 003 007

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/10/31/lightbox-for-wordpress-without-plugins.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/10/31/lightbox-for-wordpress-without-plugins.html/feed 12 D&Z Theme Pro Green CP 版发布 http://zeuscn.net/archives/2009/10/27/dz-theme-pro-cp-green-released.html http://zeuscn.net/archives/2009/10/27/dz-theme-pro-cp-green-released.html#comments Mon, 26 Oct 2009 16:04:15 +0000 zEUS. http://zeuscn.net/?p=618 主题名称: Pro Green (Control Pannel)

主题描述: 一款引入杂志元素的博客模板，基于免费主题 D&Z Theme 进行二次开发而来，在此基础上丰富了页面设计，细节处理更加出色，并附带强大的后台设置，让您完全脱离代码即可玩转主题。主题原设计来自 Timer ，由 zEUS. 修改制作。

注:本主题的前身实为 D&Z Theme Pro CP：http://zeuscn.net/archives/2009/06/19/dz-theme-pro-cp-released.html 两者除了配色不同外功能上90%以上都相同，在这里先指明不同之处：

  • 去掉了 Google 设置，由于该功能并不大众化，并不是所有用户都需要投放 Google ，故而删除。
  • 保留文章页的文章顶部的广告位，该广告位前身为 Google Adsense，如今改为图片链接的广告形式，该广告位可以方便的在主题后台进行设置。
  • 去掉导航栏“分类目录”悬浮菜单，取而代之的是直接在主题后台设置页面链接。

主题功能:

  • 支持侧边栏 （小工具）设置，首页和内页为两种不同的侧边栏，可以分别设置 Widget（小工具）；
  • 首页采用 排版，首页的 Flash 幻灯片和文章左侧的分类图片可以在后台轻松设置；
  • 首页的文章自动输出固定长度的摘要，无需再担心首页的排版问题；
  • 模板采用诸多 特效，页面平滑滚动、TAB 栏渐变切换、无需额外插件整合 lightbox 图片特效；
  • 代码引用合理，lightbox 图片特效特效适用于单篇日志页和页面页，所以模板的首页不会加载其代码，其余特效的 代码集成在一个文件内，这样就减少了浏览器请求的次数，从一定程度上提高了页面载入的速度；
  • 内置 原生的评论嵌套回复和评论分页功能；
  • 自带评论 Gravatar 头像；
  • 自带文章评论和反向链接分离；
  • 自带作者评论特殊背景色；
  • 附带友情链接页面模板；
  • 提供随机日志、热评日志、随机友链等小工具（Widget）模块；
  • 集成文章翻页的功能（无需再使用 WP-Pagenavi 插件）；
  • 优化，后台可以设置博客的关键词和描述，自动为单篇日志/页面添加文章标签作为关键词，自动截取文章摘要作为单篇文章/页面的描述。分类描述自动加载为分类页的描述（基本可以抛弃 All in one SEO 插件）；
  • 自定义导航栏链接，模板后台可以方便的设置输出在导航栏上的页面链接；
  • 后台可以自定义模板侧栏的 Tab 栏内容；
  • 网站备案号设置，您只需要在后台添加备案号码即可，无需再更改 footer 文件；
  • 模板通过 W3C 验证，兼容国内主流 3.0 IE6 IE7 等浏览器

版本号: 2.09.06.19

使用窍门：

  • 调用 Lightbox 特效时需要在图片链接代码中加入 rel=”lightbox” 例如： 
    <a rel="lightbox" href="http://pic.yupoo.com/zeuscn/2122679da7af/w2abszqt.jpg"><img class="img_border" src="http://pic.yupoo.com/zeuscn/2122679da7af/medium.jpg" alt="擎天柱 天火 合体图" /></a>
  • 给文章中的图片加上 class=”img_border” 可以使图片外有个画框，见上例中的代码。

首页/后台截图（点击放大）：

dzpg_index dzpg_single
dzpg_archive dzpg_search

售后服务：
终生提供技术支持，但不包括页面样式外观的修改和调整。

主题售价：
人民币 88 元
http://item.taobao.com/auction/item_detail.jhtml?item_id=b6f82b53f4168abee1799e2d2276784e&x_id=0db1

打包出售：
D&Z Theme Pro CP 原版主题+绿色版主题=人民币 99 元
http://item.taobao.com/auction/item_detail-0db1-47a19a11b1ca7e385b9ffefaa8d5bbad.htm

曾经购买过 D&Z Theme Pro CP 的用户获取绿色版主题仅需：人民币 11 元（以支付宝交易记录为准）
http://item.taobao.com/auction/item_detail-0db1-5859e1e01b95a02c1777f20d8f78feff.htm
另外，有言在先，凡是在2009年8月1日之前购买 D&Z Theme Pro CP 的朋友凭借支付宝的交易记录可以通过邮件或者QQ免费向我索取绿色版的主题 :-)

联系方式：
EMAIL//旺旺：zeus0517@gmail.com
：178618671

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/10/27/dz-theme-pro-cp-green-released.html，转载原创文章请注明 zEUScn.NET ‖ 您可以直接 发布评论

Copyright©zEUScn.NET.Some rights reserved.

(Digital Fingerprint:
05538bd2e0492fe803256b5788cfa6fd) ]]> http://zeuscn.net/archives/2009/10/27/dz-theme-pro-cp-green-released.html/feed 10 优化 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.php）、归档页（archive.php）和搜索结果页（search.php），都不会使用我已经启用的 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 D&Z Theme Pro CP 版正式（付费）发布 http://zeuscn.net/archives/2009/06/19/dz-theme-pro-cp-released.html http://zeuscn.net/archives/2009/06/19/dz-theme-pro-cp-released.html#comments Fri, 19 Jun 2009 14:38:43 +0000 zEUS. http://zeuscn.net/?p=592 主题名称: Pro (Control Pannel)

主题描述: 一款引入杂志元素的博客模板，基于免费主题 D&Z Theme 进行二次开发而来，在此基础上丰富了页面设计，细节处理更加出色，并附带强大的后台设置，让您完全脱离代码即可玩转主题。主题原设计来自 Timer ，由 zEUS. 修改制作。

2009-11-23 Update：

1、文章版权说明：在单篇文章末尾加上“转载请注明出处等文字和单击即可选择文章链接的文本框”；
2、模板首页文章栏加入 ajax 切换的效果，以显示更多内容（使用说明在论坛公布）；
3、lightbox 特效兼容 WP 自带的图片和相册功能（博客中已经介绍，现在已经直接集成）；
4、额外增加几个“文章归档”、“文章分类”、“点击量最高的文章”、“随机友链”等 小工具，好让他们可以同时显示在首页和文章页；
5、最新留言截断乱码的问题；
6、单篇文章增加字体放大缩小的功能；
7、修正导航栏和分类目录的排序问题。

主题功能:

  • 支持侧边栏 Widget（小工具）设置，首页和内页为两种不同的侧边栏，可以分别设置 Widget（小工具）；
  • 首页采用 排版，首页的 Flash 幻灯片和文章左侧的分类图片可以在后台轻松设置；
  • 首页的文章自动输出固定长度的摘要，无需再担心首页的排版问题；
  • 模板采用诸多 特效，页面平滑滚动、TAB 栏渐变切换、无需额外插件整合 lightbox 图片特效；
  • 代码引用合理，lightbox 图片特效特效适用于单篇日志页和页面页，所以模板的首页不会加载其代码，其余特效的 代码集成在一个文件内，这样就减少了浏览器请求的次数，从一定程度上提高了页面载入的速度；
  • 内置 原生的评论嵌套回复和评论分页功能；
  • 自带评论 Gravatar 头像；
  • 自带文章评论和反向链接分离；
  • 自带作者评论特殊背景色；
  • 附带友情链接页面模板；
  • 提供随机日志、热评日志、随机友链等小工具（Widget）模块；
  • 集成文章翻页的功能（无需再使用 WP-Pagenavi 插件）；
  • 优化，后台可以设置博客的关键词和描述，自动为单篇日志/页面添加文章标签作为关键词，自动截取文章摘要作为单篇文章/页面的描述。分类描述自动加载为分类页的描述（基本可以抛弃 All in one SEO 插件）；
  • 自定义导航栏链接，模板后台可以方便的设置输出在导航栏上的链接（支持到 WordPress 2.8.1）；
  • 首页嵌入 消息，只需在后台设置您的 Twitter 帐号和输出消息的条数即可；
  • 后台可以自定义模板侧栏的 Tab 栏内容；
  • 集成 Google ，只需要在后台设置您的发布商代码即可；
  • 网站备案号设置，您只需要在后台添加备案号码即可，无需再更改 footer 文件；
  • 模板通过 W3C 验证，兼容国内主流 3.0 IE6 IE7 等浏览器

版本号: 2.09.06.19

使用窍门：

  • 调用 Lightbox 特效时需要在图片链接代码中加入 rel=”lightbox” 例如： 
    <a rel="lightbox" href="http://pic.yupoo.com/zeuscn/2122679da7af/w2abszqt.jpg"><img class="img_border" src="http://pic.yupoo.com/zeuscn/2122679da7af/medium.jpg" alt="擎天柱 天火 合体图" /></a>
  • 给文章中的图片加上 class=”img_border” 可以使图片外有个画框，见上例中的代码。

首页/后台截图（点击放大）：

D&Z-Theme-Pro-Options dzp_cp_index dzp_cp_single
dzp_cp_archive dzp_cp_search

售后服务：
终生提供技术支持，但不包括页面样式外观的修改和调整。

主题售价：
人民币 88 元
D&Z Theme Pro 老用户（这里指的是 Pro 用户，而非使用免费的 D&Z Theme 用户）升级费用：人民币 20 元

购买方式：
：http://item.taobao.com/auction/item_detail-0db1-cc7ba2dc750381adba6337f35c6124b2.jhtml

联系方式：
EMAIL//旺旺：zeus0517@gmail.com
：178618671 / 24811820

注意：在未经授权的情况下，本主题不允许任何形式的倒卖。

zEUS.

日志评论

本文地址：http://zeuscn.net/archives/2009/06/19/dz-theme-pro-cp-released.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

Fatal error: Maximum execution time of 30 seconds exceeded in E:\zeuscn.net\wp-includes\wp-db.php on line 502