WordPress微博主题ZXT-Battlenet公开发布

  这个主题是我很久很久以前基于zxt的微博主题修改而来,呃,到底有多久呢?各位可以去看这篇文章,自从那篇文章写出来后,有不少人想要,但我只给了部分几个,这就是为什么我把标题写成公开发布的原因。

  好了,废话不多说了,上下载链接。
http://iskeee.googlecode.com/files/zxt-battlenet.zip
  DEMO看这里:http://athere.cn/

主题释疑

  为什么叫ZXT-Battlenet?
  因为原作者发布的时候主题是叫ZXT,而我修改后使用了战网(Battlenet.com.cn)的背景图片,所以我就直接组合了名称。

  主题Banner上的图片是我去年中秋节做的,所以看起来很河蟹(河蟹社会嘛,哈哈),估计99.999%的人会不用这图片,所以不用的请打开主题文件夹中的style.css,搜索#header,把

background:url("images/header.gif") no-repeat scroll 0 0 #C73A25;

删了,如果你想换张其他图片,请打开主题文件夹中的images文件夹,把header.gif替换之。

  主题左上方的导航修改是在header.php内,请搜索#menu,然后依葫芦画瓢,注意,由于IE6实在二逼,所以,我对IE6做了hack,在IE6中是看不见左上方导航的,倔强的IE6用户不必感到疑惑。

  主题已经内置翻页,无需再使用翻页插件。

  主题中数据统计上一行是显示友情链接的地方,如果你不想使用,请打开index.php查找

<div id="index_links">
<div class="index_links_content">
<?php get_links('2', '<span>', '</span>', '', FALSE, 'id', FALSE, FALSE, -1,
FALSE); ?>
</div>
</div>

全部删除之,如果你想使用但却没显示出链接来,请修改

<?php get_links('2', '<span>', '</span>', '', FALSE, 'id',
FALSE, FALSE, -1, FALSE); ?>

中’2’的数字,把2修改成你想显示链接表的id,具体数字请到后台链接分类目录中查看,如果还不明白,那请把2删除。

  哦了,暂时就说这么多,有其他问题的请留言。

利用jQuery改变网页元素加载顺序

  在上一篇介绍副标题处显示嘀咕消息的文章中,我是把嘀咕的js放在header.php中,这是一个常规的方法,简单方便易实现,但这方法也存在一个很大的弊端,因为网页是按从上到下的顺序进行加载,引用了一段外部js在头部后,自己博客首页打开速度就会受到影响,还有就是在外部js失效后,博客首页也就会卡在那打不开了,极大的降低了访客体验度,有没有其他方法可以解决呢?

  我首先想到的方法就是把嘀咕的代码单独保存为一个php文件,加载到index.php的底部中,再利用css的绝对定位absolute把其定位到博客副标题处来显示,用top和left调整好位置后,在我笔记本屏幕上显示没有问题,但换到其他分辨率下,错位问题也就随之而来了, 具体原因请看absolute的定位原理:

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

所以,这个方法被否决了,Google之后,我发现了另外的一个方法,就是本文标题所述的内容:利用jQuery改变网页元素加载顺序,下面就以副标题处显示嘀咕消息为例来介绍如何利用jQuery来改变网页元素的加载顺序。 继续阅读利用jQuery改变网页元素加载顺序

副标题处显示嘀咕消息

  也许观察仔细的童鞋早已发现我博客副标题旁的东西了,其实这就是一个嘀咕消息的显示,这篇文章就是告诉各位如何实现的,当然,是写给新手看的,高手们不要鄙视我。

  首先来介绍下什么是嘀咕,在这我就直接引用官方说明了:

嘀咕 (digu.com),是新一代的实时博客服务,通过电脑或手机,用户可以随时随地快速记录所见所感,即时简单地了解朋友间彼此的生活片段,保持联系。

所以,我们必须先有一个嘀咕帐号,呃,帐号申请方法如下:(此处省略若干字……),帐号到手后,再去http://www.wudishow.com/处填入你的嘀咕帐号(也就是上面所述的OpenCloud帐号),依次点击创建无敌秀,嘀咕,Wodpress,JS,设置显示条数为1,再复制下面显示出的代码,此时,第一个步骤告一段落。

  然后,打开你博客模板的header.php,在description下面粘贴复制好代码,保存。刷新下你的博客,一般情况下,你会发现效果惨不忍睹,所以,我们要在模板css里面添加:

#wudiShow a,#wudiShow_Header,#wudiShow_More {
display:none;
}

结束这一步后,你会发现效果好了一点,但什么错位之类的大家最讨厌了,所以,我们可以根据自己的情况用margin酌情调整下,此时,你的脸上应该浮现出满意的笑容了,哈哈。

  当然,追求速度的童鞋可能有意见了,在头部加载一个JS文件会极大影响博客的整体速度,甚至会因为外部JS失效导致下面的内容无法显示,呃,其实这点我也考虑到了,什么?你想知道怎样解决?哈哈,请允许我先卖个关子,下一篇文章会做一个系统的介绍,那方法不仅仅只适用于嘀咕的显示哦。

  最后附上我的嘀咕地址:http://www.digu.com/iske,欢迎大家踊跃跟随(就是特推的follow),你跟随我之后我也会第一速度跟随你的。: )

用jQuery隐藏回头访客资料输入框

  上一篇文章提到的已经成功发表过评论的评论者在下次评论时仍需重新输入姓名,电邮地址的问题已经查明是由缓存插件Hyper Cache引起的,能找到的解决方法是利用js来解决,但无奈在我博客上测试不成功,只能暂时禁用此插件,同时在木木的指引下,我也发现了一个能提高访客体验度的功能:隐藏回头访客的姓名,电邮,网址输入框。

  按照木木提供的方法,我再次悲剧的发现用在我博客上并不能正常工作,只能再次Google&百度,找到最后,终于在Xiaorsz的博客中找到个利用jQuery实现的方法,测试后工作正常,下面写点改动的地方。

  首先,我们要编辑comments.php,在类似于:

<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1"/>

的评论者姓名输入框代码上方添加:

<?php if ( $comment_author != "" ) : ?>
<div id="welcome">
<?php printf(__(' Hi! 欢迎回来!<strong>%s</strong>.'), $comment_author) ?>
</div>
<?php endif; ?>

然后再把三个评论者姓名,电邮,网址的代码输入框用<div id="author_info"></div>包起来,到此,comments.php修改结束;

  然后,新建一个名为inputhidden的js文件,把Xiaorsz提供的代码放进去:

$(document).ready(function() { //开始
if($('input#author[value]').length>0){ //判断用户框是否有值
$("#author_info").css('display','none'); //将id为author_info的对象的display属性设为none,即隐藏
var change='<span id="show_author_info" style="cursor: pointer; color:#2970A6;">change &raquo;</span>'; //定义change,style是定义CSS样式,让他有超链接的效果,color要根据你自己的来改,当然你也可以在CSS中定义#show_author_info来实现,这样是为了不用再去修改style.css而已!
var close='<span id="hide_author_info" style="cursor: pointer;color: #2970A6;">close &raquo;</span>'; //定义close
$('#welcome').append(change); //在ID为welcome的对象里添加刚刚定义的change
$('#welcome').append(close); // 添加close
$('#hide_author_info').css('display','none'); //隐藏close
$('#show_author_info').click(function() { //鼠标点击change时发生的事件
$('#author_info').slideDown('slow') //用户输入框向下滑出
$('#show_author_info').css('display','none'); //隐藏change
$('#hide_author_info').css('display','inline'); //显示close
$('#hide_author_info').click(function() { // 鼠标点击close时发生的事件
$('#author_info').slideUp('slow') //用户输入框向上滑
$('#hide_author_info').css('display','none'); //隐藏close
$('#show_author_info').css('display','inline'); })})}}) //显示change

保存文件。

  接着,我们要载入jQuery框架,因为我之前添加过Willin大师的Ajax嵌套回复,已经在footer.php添加过,所以这一步我可以省略,没有添加过的童鞋可以在footer.php中加入:

<script type="text/javascript" src="http://ajax.loli.net/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

然后在下面继续添加:

<?php if ( is_singular() ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/inputhidden.js"></script>
<?php } ?>

这部的先后顺序一定不能错,不然就无法成功。

  OK,到此用jQuery隐藏回头访客资料输入框的全部操作就完成了,快试试去吧!Enjoy !

博客主题再次修改

  由于之前对主题修改的我很是不满意,所以我再次进行了大幅度改动,现在的主题终于能让我连续看1分钟不会感到视觉疲劳了。

  再次唠叨下改动了几个地方:

  1.去除之前透明效果,部分位置用图片产生伪透明效果。
为什么要去除透明效果?因为在IE7/8下,雅黑字体与透明滤镜有兼容问题,会产生诡异的字体模糊效果,解决办法只能是禁用滤镜或使用其他非ClearType渲染的字体,进而导致页面整体及其不协调。
  2.对部分位置的文字添加了text-shadow属性,此效果在FireFox3.5.4中完美显示,在Chrome3.0.195.27中欠完美显示,在IE6/7/8中无效果,在其他内核浏览器中效果未知,希望各位能说说。
  3.对评论者头像添加了box-shadow属性(从Willin大师的博客中发现的),此效果只能在Firefox中显示。
  4.在博客副标题处添加了嘀咕消息显示,考虑到速度问题,嘀咕消息只显示在首页。
  5.综上所述,现在博客在Firefox中显示是最完美的,哈哈。

  再说下待修改的地方:

  1.还未能解决文章标题再IE6下的显示缺陷,暂时只能做hack变动标题颜色。
  2.未能解决已经成功发表过评论的评论者在下次评论时仍需重新输入姓名,电邮地址的问题。已经发现是缓存插件Hyper-Cache引起的,暂时禁用了。(表达的有点拗口)

  唠叨结束,对于上面的两个问题,希望知道的大大能指点下,谢谢!