利用theia sticky sidebar为WordPressLeaf主题增加粘性侧边栏 侧边栏固定跟随浮动效果

利用theia sticky sidebar为WordPressLeaf主题增加粘性侧边栏 侧边栏固定跟随浮动效果

利用theia sticky sidebar为WordPressLeaf主题增加粘性侧边栏 侧边栏固定跟随浮动效果

导语:昨天写了一篇很长的文章,然后在预览的时候,发现我的侧边栏很短,然后就在右侧看到了很大的一片空,感觉有点不美观。然后在网上找了一阵,发现了一篇文章对粘性侧边栏写得蛮详细的,也正好适合我。

如果你感兴趣,可以访问这位博主的文章:简单代码实现智能侧边栏跟随固定浮动的效果

他利用了开源代码theia-sticky-sidebar,这个代码包在github有下载。具体怎么做其实很简单,请看下面的步骤。

在github下载theia-sticky-sidebar


我们先前往github下载WeCodePixels的theia-sticky-sidebar包: github

我觉得WeCodePixels应该是一个团队。粗略看了一下,提交的代码的人有很多。感谢他们的分享。

在functions.php里增加以下代码


wp_enqueue_script( 'codilight-lite-sidebar', get_template_directory_uri() . '/assets/js/theia-sticky-sidebar.js?', array(), '20160803');

这段代码的意思就是在WordPressLeaf的头部加载theia-sticky-sidebar.js,粘性侧边栏的实现主要是靠它和jquery.js来实现的。

在theme.js里增加以下代码


 jQuery(document).ready(function() {
     jQuery('#secondary').theiaStickySidebar({
         // Settings
         additionalMarginTop: 30
     });
 });

上传文件


需要上传的文件有functions.php、theia-sticky-sidebar.js、theme.js、style.css。上传完后,请刷新缓存,然后效果就出来了。我这篇文章的长度可能不够,如果你要看效果,可以前往:本站WordPress主题:WordPressLeaf主题免费下载,这篇文章很长,你就能看到粘性侧边栏的效果了。

结束


使用粘性侧边栏,可以不留空,甚至你可以在侧边栏的头部和尾部放置广告小工具,这样滚动时,广告总是可见了。:)还有一个想法就是当文章长的时候,滚动侧边栏。当侧边栏长的时候,滚动文章。等有机会再来调试一下吧,先使用滚动侧边栏就好。

编辑 杨

我们是一群WordPress的爱好者,爱它的简单快捷,爱它的变化多样。

或许您还喜欢下面的文章

留下一条回复

关闭