侧栏与小工具

题制作进度终于到了侧边栏。也依样画葫芦按主流添加了不少小工具。
我参考了很多站点的各种侧栏功能,最常见的就是 不同页面展示不同的侧栏以及跟随页面滚动的固定侧栏。终归不是专业的,所以不知道怎么去描述。按我的理解,侧栏和小工具要分开来看。
所以要添加小工具 就必须先注册侧边栏,注册之后,后台小工具才有挂载的地方,不然小工具不知道放哪里。
剩下的就是利用条件判断语句和js去实现以上两种常见的侧边栏功能。
也就是说:小工具归小工具,侧栏归侧栏,就是sidebarwidget字面上的区别。这么理解方便自己在折腾时更好的实现添加顺序。

固定跟随侧栏

我记得半年前 还不懂wp的时候对这个功能很喜欢,但当时好像还没有详细的教程,要加什么jquery库,还要加什么js,还要改什么sidebar.php模板,乱七八糟的,对于新手来说太吃力了。这里我就弄一个浅显一些步骤,顺便把自己制作JVfantasy主题添加的过程记录下来。

步骤一

注册一个侧边栏,用于挂载你要实现滚动跟随的小工具。在主题目录下的functions.php模板中添加注册代码

register_sidebar ( array (
        'name' => '滚动跟随侧栏',
        'id' => 'inlojv_widget_follow'
    ) );

注意上面注册时使用的ID,即inlojv_widget_follow,下面会用到这个ID。
这时候你的 后台-小工具 处就会多出一个侧栏,如图:

注册侧边栏

特别要说明的是:它只是显示出来而已,若此时你把小工具挂载上去再到网站首页查看 它是不会显示的。那么怎么让它显示出来?

步骤二

在主题的sidebar.php模板中用条件判断语激活已经注册好的侧栏。
找到你的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:fixedtop:0,加了这个,就算大功告成了。

完成以上四步,你的侧栏就可以实现跟随滚动了,滚动的方式是:当这个侧栏滚动到网站顶端时就会固定。