用jQuery实现WordPress左侧滚动导航栏效果
刚从园子博客中学了WordPress左侧滚动导航栏效果,我的博客中也用上了。有必要将操作过程作个记录。
这里用WordPress的inove主题为例,其它博客实现原理类似。
(代码看懂前提需掌握Html、Css、JavaScript、Php、jQuery。)
1.在主题文件footer.php中添加如下代码:
<!-- shangxia START --> <div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div> <!-- shangxia END -->
注意要加在body结束标签之前。
2.在主题文件header.php的head区域添加如下代码:
<!-- shangxia START --> <?php if (is_single()) { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/shangxia-single.css" type="text/css" /> <?php } else { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/shangxia-other.css" type="text/css" /> <?php } ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});}); $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); $('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);}); $('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);}); $('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);}); }); --> </script> <!-- shangxia END -->
说明:这步通过条件语句判断加载不同的CSS文件,然后是调用了jQuery类库,并添加效果代码。其中<?php bloginfo(’stylesheet_directory'); ?>为主题对应的目录。
3.在主题目录中创建shangxia-single.css文件,内容为:
/* shangxia-single START */ #shangxia{position:absolute;top:40%;left:50%;margin-left:-503px;display:block;} #shang{background:url(img/shangxia.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;} #comt{background:url(img/shangxia.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;} #xia{background:url(img/shangxia.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;} /* shangxia-single END */
说明:其中margin-left:-503px中的值,需要根据自己网站的显示效果自行调试,负值越大越靠近左侧屏幕边缘。
4.在主题目录中创建shangxia-other.css文件,内容为:
/* shangxia-other START */ #shangxia{position:absolute;top:40%;left:50%;margin-left:-503px;display:block;} #shang{background:url(img/shangxia.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;} #xia{background:url(img/shangxia.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;} /* shangxia-other END */
5.准备好图片素材,到主题的img目录中:
这个文件尺寸为32x119,其必须和第3、4步的css代码相配合才行。
6.最后,上传素材和修改的文件,并微调导航栏的位置。
【资料参考园子博客http://www.yzznl.cn/archives/add-site-navigation.html】
呵呵 这个东西很实用
[嵌套回复]
没有看你调用shangxia.gif。所以没成功
[嵌套回复]
爱惜 十一月 2nd, 2010 at 17:18, 回复:
没看到下面的CSS。搞定。谢谢。
[嵌套回复]
为什么我弄出来不行呢?博主能去我网站看看么?调试出来不能动,中间的评论也不出现
[嵌套回复]
AEROFISH 一月 22nd, 2011 at 11:15, 回复:
你好!
我刚看了,原来我这里贴的代码有点错误,导致你直接粘贴后不能用。
我现在正在修改。
[嵌套回复]
网不住 一月 22nd, 2011 at 15:31, 回复:
嗯,ok了,可以用了
[嵌套回复]
AEROFISH 一月 22nd, 2011 at 11:25, 回复:
你好,我现在改好了,你把我这里第2段代码的第7行,按现在的重新替换下。就是原先这行有问题。
幸好你提问了,要不然这个错误我还发现不了。万分感谢!
[嵌套回复]
网不住 一月 22nd, 2011 at 15:26, 回复:
呵呵,好的,我修改一下看看··
[嵌套回复]
路过,我用你的方法了~~很给力,但是我想问的是你的那个高两代马上的工具栏怎么弄得?为什么我的插件没有?
[嵌套回复]
AEROFISH 八月 19th, 2011 at 13:04, 回复:
你好!我用的是SyntaxHighlighter这款插件。
[嵌套回复]
蝎紫 八月 19th, 2011 at 18:51, 回复:
貌似我也是啊、、为什么显示只有代码?真是无语
[嵌套回复]
有没有在左侧的主题啊》
太强大了!
[嵌套回复]
我想问一下,通过上面的代码在IE 8 浏览器中不能用,但在其它的浏览器又可以用,是怎么回事。
[嵌套回复]
AEROFISH 六月 16th, 2012 at 08:59, 回复:
我这边IE8、火狐都正常的。
[嵌套回复]
博主 貌似我的网站也不能用~~ 求帮助
[嵌套回复]
谢谢,用了你的方法,能用了
[嵌套回复]
但是有个问题,文章没有评论的时候好像点评论没反应
[嵌套回复]
我也添加这个功能了,效果不错。
[嵌套回复]
纠结不是我想要的,不过还是很有帮助的说。
[嵌套回复]