我的wordpress历程3

发表于 更新于 分类于 Waline：

想想上次记录这个还是在四月份，一转眼马上就过了四个月了，真的好快啊。之前写的还是margin、padding、hover什么的呢，从我的一语成现在的样子，好久没有再改动过CSS了。

貌似近期最大的改动就是侧边栏挂件的自动浮动了。也就是网页向下滚动时，当我的分类目录和标签到达窗口顶端时自动固定在窗口顶端位置，不再随网页滚动。早就在别的网站上见过这个功能，但是没准备加到我的一语里。一是自己不会写，在网上找又麻烦的，工作的琐事就已经够烦的了，没心情搞这个；二是感觉不加这功能也无所谓，我这网站本来就是单调的风格……

一次在贴吧里乱逛，一个网友提出来，网页滚动到下边的时候右边栏是空的。于是终于决心抓闲暇挤时间，把这个东西搞出来。只好在网上胡搜了，貌似关于这个的东西还不是太多，不过最终还是找到了，我的参考在这里
http://www.zhangxinxu.com/wordpress/?p=1242

当时把代码看了几遍啊，看不懂……没基础就是没基础，php的语法不熟，几个地方读不过去。不过幸好，通过浏览器的工具我发现固定在窗口顶端的东西是position的值被改成fix了，然后代码里，就是对网页滚动距离和元素位置进行比较，修改position的值。所以好吧，代码我不能全懂，但是我可以用了。

还有一个问题，就是别人都是固定的一个元素，在我这想同时固定两个。我能想到的只有两个方法，要么把这个两个合到一起，要么改代码控制两个元素的固定。前一个得改wordpress的代码，小工具的模板在wp-includes里面，而不是存主题的目录里，所以就放弃了。因为改includes里面的东西会在wordpress升级时被覆盖掉，升级3.6的时候略显麻烦，以后再有什么升级也会很麻烦。虽然我升级3.6没成功又回到3.5了……所以就改抄来的代码吧，其实也简单，就是把判断条件稍微改动，在函数调用的时候加的个输入参数就ok了。当年的C还是没有白学的。不过缺点还是很明显，固定的参数，只能用于现在分类目录的大小，后期分类多了还得再手动调。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$.fn.smartFloat = function(x) {
    var position = function(element) {
        var top = element.position().top, pos = element.css('position');
        $(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            if (scrolls + x > top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: 'fixed',
                        top: x,
                        width: 250,
                    });
                } else {
                    element.css({
                        top: scrolls
                    });
                }
            }else {
                element.css({
                    position: pos,
                    top: top
                });
            }
        });
    };
return $(this).each(function() {
    position($(this));
    });
};
$('#categories-3').smartFloat(10);
$('#tag_cloud-2').smartFloat(147);

暂时也不会别的方法了，就先凑合着吧。在我的页面上用的代码是这样的。

最后再说一句，升级wordpress的时候一定要先做好程序文件和数据库的备份。经验之谈了，我经历了两次wordpress出问题，不得不用备份进行恢复……