wordpress侧边栏随页面滚动完美版

其实关于wordpress侧边栏随页面滚动的代码,本站已经收集了几篇,但是以前的代码都不支持侧边栏滚动时到一定位置停止(有时候我们不希望侧边栏出现无限滚动的情况,所以才会有滑动到一定位置时希望它停止的要求),今天无意间在一网站上看见可以达到这一要求的代码。

效果说明:当指定内容块的顶部接触浏览器上部边框时,这个内容块将固定不动。
当内容块的底部与下方的DIV达到指定距离时,内容块开始随整体向上滚动。从而不会覆盖掉下方的内容。

第一步,既然是jquery插件,当然要在<head></head>里加上下面的代码,如果你已经挂载过JQ,则可以省略此步。

<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js></script>

第二步,在侧边栏合适位置添加这段插件代码。

<!-- 侧边栏滚动-->
 <script type="text/javascript">
$(document).ready(function(){
	$(".post_content a[href='"+window.location.href+"']").addClass("selflink")
	$('.selflink').click(function() {return false;});
	$.fn.scrollFollow=function(options){options=options||{};options.container=options.container||$(this).parent();options.bottomObj=options.bottomObj||'';options.bottomMargin=options.bottomMargin||0;options.marginTop=options.marginTop||0;options.marginBottom=options.marginBottom||0;$window=$(window),$scrollObj=$(this);if($scrollObj.length<=0){return}scrollObj_Top=$scrollObj.position().top,scrollObj_Container_Height=options.container.height(),scrollObj_Position=$scrollObj.css("position");if(options.bottomObj==''||$(options.bottomObj).length<=0){is_bottomObj_exists=false}else{is_bottomObj_exists=true}$window.scroll(function(event){var new_scrollObj_Container_Height=options.container.height();var scrollObj_Height=$scrollObj.height();if(scrollObj_Container_Height!=new_scrollObj_Container_Height&&scrollObj_Container_Height<new_scrollObj_Container_Height+scrollObj_Height){scrollObj_Top=$scrollObj.position().top;scrollObj_Container_Height=new_scrollObj_Container_Height}scrollTop=$window.scrollTop(),topPosition=Math.max(0,scrollObj_Top-scrollTop);if(is_bottomObj_exists==true){var bottomObj_Top=$(options.bottomObj).position().top-options.marginBottom-options.marginTop;topPosition=Math.min(topPosition,(bottomObj_Top-scrollTop)-scrollObj_Height)}if(scrollTop>scrollObj_Top){if(is_bottomObj_exists==true&&(scrollObj_Top+scrollObj_Height>bottomObj_Top)){$scrollObj.css({position:scrollObj_Position,top:scrollObj_Top})}else{if(window.XMLHttpRequest){$scrollObj.css({position:"fixed",top:topPosition+options.marginTop})}else{$scrollObj.css({position:"absolute",top:scrollTop+topPosition+options.marginTop+'px'})}}}else{$scrollObj.css({position:scrollObj_Position,top:scrollObj_Top})}})};

	$("#float").scrollFollow({
		bottomObj: '.foot',
		marginTop:0,
		marginBottom:17
	});
});
 </script>
<!-- 侧边栏滚动-->

第三步,注意代码中的两个标签(红色位置)。给右侧需要浮动定位的DIV加上(id=“float”)。再给下方不想覆盖住的DIV加上(class=“foot”)。如此便大功告成了!

资料来源:http://www.jingucn.com/221/

缓存WordPress的Sidebar(侧边栏)的技巧

缓存WordPress的Sidebar(侧边栏)的技巧。缓存WordPress的相关栏目无疑会减轻服务器的压力,所以这里就给大家分享一种缓存WordPress的Sidebar(侧边栏)的技巧。

对 Sidebar 缓存的代码分享下,几点说明:

1. 可以自己修改缓存时间,怎么修改,看下面代码的唯一的注释。
2. 一旦采用这样的缓存,在缓存时间内对 sidebar 做任何修改都不会生效。
3. 如果你又想缓存又想修改东西,你可以把缓存时间修改为1秒,作了修改之后,让 sidebar 缓存生成之后,再把缓存时间修改为原来的。
4. 如果你的 sidebar 为不同页面不同 sidebar,那么你要根据自己的 sidebar 生成不同 sidebar 缓存,如:sidebar_home, sidebar_single,基本代码类似。
5. 会对 Recent Post, Recent Comment 这些插件产生延迟,在缓存的时间内,如果这些列表更新了回不能及时体现。

下面是具体的步骤和代码:

1. 进入 WordPress 后台,点击 Design => Theme Editor => Sidebar (sidebar.php)。

2. 在 sidebar.php 开头加入以下代码:

<?php 
$sidebar_html = ABSPATH . "wp-content/cache/sidebar.txt";
$have_cached = false;
if (file_exists($sidebar_html)){
$file_time = filemtime($sidebar_html);
if (($file_time + 3600) > time()){ //缓存1小时
echo "<!-- cached sidebar -->";
echo(file_get_contents($sidebar_html));
echo "<!-- end of cached sidebar -->";
$have_cached = true;
}
}
if(!$have_cached){
ob_start();
?>

3. 在 sidebar.php 结尾加入以下代码:

<?php
$sidebar_content = ob_get_contents();
ob_end_clean();
$sidebar_fp = fopen($sidebar_html, "w");

if ($sidebar_fp){
fwrite($sidebar_fp, $sidebar_content);
fclose($sidebar_fp);
}

echo $sidebar_content;
}
?>

到此代码就部署完毕,但要注意的是需要手动在wp-content下建cache文件夹并给予777权限,还有第2点代码中的缓存时间可以根据自己的情况而设置。效率和灵活永远是矛盾,只能求一个折衷咯。

资料来源:http://www.6ird.com/archives/82.html

wordpress侧边栏(sidebar)随滚动条滚动效果

wordpress侧边栏(sidebar)随滚动条滚动效果可能大家在很多网站上都看过,就是当网页比较长的时候,侧边栏部分模块可以随着滚动条的滚动而滚动。这样当文章或页面的内容比较长的时候,我们就可以在侧边栏显示一些内容,免得给人以左右不平衡的感觉。

步骤如下:

1、首先确定你侧边栏的各个模块都有一些class标志,如下图框框里面的内容(没有的话请仔细增加class标志):
sidebar

把下面的代码存为js,挂载在你主题上即可

var rollStart = $(‘.Statistics’), //滚动到此区块的时候开始随动
rollOut = $(‘.WidgetMeta,.Statistics’); //隐藏rollStart之后的区块
rollSet = $(‘.RRPosts,.TagsCloud’); //添加rollStart之前的随动区块
rollStart.before(‘<div class="rollbox" style="position:fixed;width:inherit;"></div>’);
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();
objWindow.scroll(function() {
if (objWindow.scrollTop() > offset.top){
if(rollBox.html(null)){
rollSet.clone().prependTo(‘.rollbox’);
}
rollOut.fadeOut();
rollBox.show().stop().animate({top:0,paddingTop:10},400);
} else {
rollOut.fadeIn();
rollBox.hide().stop().animate({top:0},400);
}
});

需要注意的就是那几个注释地方前面的class要与你主题的想对应。而且最好滚动区域的内容不能太长,不然会出现无限下拉的情况。

参考来源:http://loosky.net/?p=2028