关闭边栏(ESC)打开边栏(ESC)
目 录
一般主题都有带侧边栏的吧，大部分都在首页或文章页有设定，如果想在页面上关连侧边栏并且是独立于首页和文章页的呢，这时候就要添加这些代码了
在主题的function.php中添加
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
function widgetSetup(){ $args = array( 'name' => '首页固定侧边栏', 'id' => 'sidebar-index-affix', 'description' => '显示在首页固定侧边栏小工具', 'class' => 'custom', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title">', 'after_title' => '</div>' ); register_sidebar($args); $args = array( 'name' => '首页侧边栏', 'id' => 'sidebar-index', 'description' => '显示在首页侧边栏小工具', 'class' => 'custom', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title">', 'after_title' => '</div>' ); register_sidebar($args); $args = array( 'name' => '文章页固定侧边栏', 'id' => 'sidebar-article-affix', 'description' => '显示在文章页固定侧边栏小工具', 'class' => 'custom', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title">', 'after_title' => '</div>' ); register_sidebar($args); $args = array( 'name' => '文章页侧边栏', 'id' => 'sidebar-article', 'description' => '显示在文章页侧边栏小工具', 'class' => 'custom', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title">', 'after_title' => '</div>' ); register_sidebar($args); $args = array( 'name' => '页面页固定侧边栏', 'id' => 'sidebar-page-affix', 'description' => '显示在页面页固定侧边栏小工具', 'class' => 'custom', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title">', 'after_title' => '</div>' ); register_sidebar($args); $args = array( 'name' => '页面页侧边栏', 'id' => 'sidebar-page', 'description' => '显示在页面页侧边栏小工具', 'class' => 'custom', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-title">', 'after_title' => '</div>' ); register_sidebar($args); } add_action('widgets_init', 'widgetSetup'); |
以上的代码包括了首页，文章页，指定一个页面的侧边栏，同时每个侧边栏都包括一个不随滚动条滚动的边栏
在主题sidebar.php替换为以下代码
|
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 32 33 34 35 36 37 38 |
<?php /** * The template for the sidebar containing the main widget area */ ?> <aside id="sidebar"> <div class="sidebar-wrap"> <?php if (!is_active_sidebar('sidebar-index') && !is_active_sidebar('sidebar-index-affix') && !is_active_sidebar('sidebar-article') && !is_active_sidebar('sidebar-article-affix')): ?> <div class="widget"><p>请到[后台->外观->小工具]首页或文章页侧边栏中添加需要显示的小工具。</p></div> <?php else: ?> <?php if (is_home()): ?> <div class="affix"> <?php dynamic_sidebar('sidebar-index-affix'); ?> </div> <div class='sidebar-index wow slideInUp'> <?php dynamic_sidebar("sidebar-index"); ?> </div> <?php endif; ?> <?php if (is_single()): ?> <div class="affix"> <?php dynamic_sidebar('sidebar-article-affix'); ?> </div> <div class='sidebar-article wow slideInUp'> <?php dynamic_sidebar("sidebar-article"); ?> </div> <?php endif; ?> <?php if (is_page(1003)): ?> <div class="affix"> <?php dynamic_sidebar('sidebar-page-affix'); ?> </div> <div class='sidebar-page wow slideInUp'> <?php dynamic_sidebar("sidebar-page"); ?> </div> <?php endif; ?> <?php endif; ?> </div> </aside> |
这里包括了固定栏的affix，通过JS和css便能弄出各种样式了
设置这些后，找到：外观-小工具，就能看到这些侧边栏了的JS
滚动超出侧边栏高度时，固定侧边栏
|
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 32 33 34 35 36 |
var headerH = $('#header').height(); var footerH = $('#footer').innerHeight(); var windowH = $(window).height(); var sidebarW = $('#sidebar').width(); var sidebarH = $('#sidebar').outerHeight(); var sidebarTop = $('#sidebar').offset().top; $(window).scroll(function(event) { var bodyH = $(document).height(); var affixH = $(".affix").innerHeight(); var leftH = (windowH - headerH - affixH) > 0 ? (windowH - headerH - affixH) : 0; var scrollTop = $(document).scrollTop(); var scrollBottom = bodyH - windowH - scrollTop; if (scrollTop > sidebarTop+ sidebarH) { if (scrollTop < (bodyH - footerH - windowH + leftH)) { $('.affix').css({ position: 'fixed', top: $('#header').height()+$('#header').position().top+3, bottom: '', width: sidebarW + 'px' }); } else { $('.affix').css({ position: 'fixed', top: '', bottom: footerH - scrollBottom, width: sidebarW + 'px', }); } } else { $('.affix').css({ position: '', top: '', width: sidebarW + 'px', }); } } |
这滚动的处理，得用好多参数呀，看着都头晕，是否还有更简捷的处理方式呢，欢迎分享
暂时只会emlog，WordPress还得学
兴趣而已