我的wordpress历程3

想想上次记录这个还是在四月份,一转眼马上就过了四个月了,真的好快啊。之前写的还是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还是没有白学的。不过缺点还是很明显,固定的参数,只能用于现在分类目录的大小,后期分类多了还得再手动调。

$.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出问题,不得不用备份进行恢复……

添加新评论