[WordPress][教程] 使侧边栏随屏幕滚动

前言:

今天写完《为模板增加一个侧边栏》之后,我又急不可耐的想写出此文。原因呢,很简单,就是想在自己记忆恍惚之前记录下所有改动,从长远角度来看方便自己。

解决方案:

由于代码用到了 jquery 库,因此需要提前加载。在 header.php 的 head 结束标签之前对 jquery 库进行加载,并在结束标签之后加入代码。具体如下:




以上就是实现侧边栏动态化的全部工序。但对于某些模板来说,还需要对侧边栏进行下处理。例如 glossy stylo 1.04 ,在 style.css 中将 sidebar 默认定义为左浮动。在正文长度过短的情况下,靠下方的侧边栏会移动到左侧去,因此需要对其进行些修改。首先看修改前的代码:

#sidebar
{
    float:left;
    margin-left:10px;
    margin-top:9px;
    width:240px;
}

要实现多个侧边栏始终位于同一侧且不乱动,就要对其浮动方式进行修改,修改需要对 css 的浮动方式有大致了解,详情可以参考 w3school 的相关讲解,这里不作赘述,直接放上修改后的代码。

#sidebar
{
    float:right;
    clear:right;
    margin-left:10px;
    margin-top:9px;
    width:240px;
}

至此,大功告成。发布下自己改造的 glossy stylo 模板,权当备份吧。 点我下载

《[WordPress][教程] 使侧边栏随屏幕滚动》上有1条评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注