侧栏与小工具
主
题制作进度终于到了侧边栏。也依样画葫芦按主流添加了不少小工具。
我参考了很多站点的各种侧栏功能,最常见的就是 不同页面展示不同的侧栏以及跟随页面滚动的固定侧栏。终归不是专业的,所以不知道怎么去描述。按我的理解,侧栏和小工具要分开来看。
所以要添加小工具 就必须先注册侧边栏,注册之后,后台小工具才有挂载的地方,不然小工具不知道放哪里。
剩下的就是利用条件判断语句和js去实现以上两种常见的侧边栏功能。
也就是说:小工具归小工具,侧栏归侧栏,就是sidebar和widget字面上的区别。这么理解方便自己在折腾时更好的实现添加顺序。
固定跟随侧栏
我记得半年前 还不懂wp的时候对这个功能很喜欢,但当时好像还没有详细的教程,要加什么jquery库,还要加什么js,还要改什么sidebar.php模板,乱七八糟的,对于新手来说太吃力了。这里我就弄一个浅显一些步骤,顺便把自己制作JVfantasy主题添加的过程记录下来。
步骤一
注册一个侧边栏,用于挂载你要实现滚动跟随的小工具。在主题目录下的functions.php模板中添加注册代码
register_sidebar ( array ( 'name' => '滚动跟随侧栏', 'id' => 'inlojv_widget_follow' ) );
注意上面注册时使用的ID,即inlojv_widget_follow,下面会用到这个ID。
这时候你的 后台-小工具 处就会多出一个侧栏,如图:
特别要说明的是:它只是显示出来而已,若此时你把小工具挂载上去再到网站首页查看 它是不会显示的。那么怎么让它显示出来?
步骤二
找到你的sidebar.php模板,在侧栏的</div>前添加下面的条件语句,激活这个侧栏,注意:识别这个侧栏靠的就是上面注册时已经定义好的ID:inlojv_widget_follow
<?php if( is_active_sidebar('inlojv_widget_follow') ) { ?> <!–如果侧边栏inlojv_widget_follow可用,那么激活它–> <div id="scroll_box"> <div class="slide-box-scroll"> <?php dynamic_sidebar('inlojv_widget_follow'); ?> </div> </div> <?php }?>
注释是按我的理解去写的,方便看清代码的含义。如图所示:
注意上面div的id和类,待会加载js时需要将id和类添加进去。
步骤三
注册好侧栏,又把它激活了,那么在网站首页就可以显示了,但是它还没有滚动时固定跟随的功能,这时候就要用到jQuery库和一段js代码了。jQuery库 目前大多数主题都会带有,查看源代码你会看到类似jQuery.js或jQuery.min.js之类的加载脚本框架,如果没有可以百度搜索公共库来自行加载,加载jQuery库需要用到下面的代码:
<script type="text/javascript" src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
这段代码添加到主题的footer.php的 </body> 之前即可,作用是加载百度的jQuery库,如果你的主题本身已经加载,那就不需要了!然后是在这个jQuery框架下添加侧栏固定跟随的js,代码如下:
//sidebar-follow $(function() { $(window).scroll(function() { var scroll_top = $(window).scrollTop(); if ($('#scroll_box').length > 0) { var sb_top = $('#scroll_box').offset().top; if (sb_top < scroll_top) { $('#scroll_box .slide-box-scroll').addClass('follow'); } else { $('#scroll_box .slide-box-scroll').removeClass('follow'); } } }); });
可以看到,刚才激活侧栏时定义的id和类已经添加在里面了,
你可以将这段代码保存成一个名为sidebar-follow.js文件,上传到主题的js文件夹之后 按照上面的方法加载,比如:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/sidebar-follow.js"></script>
也可以直接把这段js复制粘贴到jQuery库的代码里面,合成一个js再加载。
步骤四
添加、修改对应的CSS,div有了,还要对其进行样式化,这里面有一个样式是必须添加的,如下:
/*侧栏固定在顶部*/ #scroll_box .follow{position:fixed;top:0;margin-top:15px} /*侧栏宽度*/ #sidebar1 .slide-box-scroll{width:327px}
两句话而已,最主要的是position:fixed和top:0,加了这个,就算大功告成了。
完成以上四步,你的侧栏就可以实现跟随滚动了,滚动的方式是:当这个侧栏滚动到网站顶端时就会固定。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/3647.html