WordPress首页文章页或其它自定义侧边栏

一样平常主题都有带侧边栏的吧,大部门都在首页或文章页有设定,若是想在页面上关连侧边栏而且是自力于首页和文章页的呢,这时刻就要添加这些代码了,在主题的function.php中添加:

  1. function widgetSetup(){
  2.     $args = array(
  3.         'name'          => '首页牢靠侧边栏',
  4.         'id'            => 'sidebar-index-affix',
  5.         'description'   => '显示在首页牢靠侧边栏小工具',
  6.         'class'         => 'custom',
  7.         'before_widget' => '<div id="%1$s" class="widget %2$s">',
  8.         'after_widget'  => '</div>',
  9.         'before_title'  => '<div class="widget-title">',
  10.         'after_title'   => '</div>'
  11.     );
  12.     register_sidebar($args);
  13.     $args = array(
  14.         'name'          => '首页侧边栏',
  15.         'id'            => 'sidebar-index',
  16.         'description'   => '显示在首页侧边栏小工具',
  17.         'class'         => 'custom',
  18.         'before_widget' => '<div id="%1$s" class="widget %2$s">',
  19.         'after_widget'  => '</div>',
  20.         'before_title'  => '<div class="widget-title">',
  21.         'after_title'   => '</div>'
  22.     );
  23.     register_sidebar($args);
  24.     $args = array(
  25.         'name'          => '文章页牢靠侧边栏',
  26.         'id'            => 'sidebar-article-affix',
  27.         'description'   => '显示在文章页牢靠侧边栏小工具',
  28.         'class'         => 'custom',
  29.         'before_widget' => '<div id="%1$s" class="widget %2$s">',
  30.         'after_widget'  => '</div>',
  31.         'before_title'  => '<div class="widget-title">',
  32.         'after_title'   => '</div>'
  33.     );
  34.     register_sidebar($args);
  35.     $args = array(
  36.         'name'          => '文章页侧边栏',
  37.         'id'            => 'sidebar-article',
  38.         'description'   => '显示在文章页侧边栏小工具',
  39.         'class'         => 'custom',
  40.         'before_widget' => '<div id="%1$s" class="widget %2$s">',
  41.         'after_widget'  => '</div>',
  42.         'before_title'  => '<div class="widget-title">',
  43.         'after_title'   => '</div>'
  44.     );
  45.     register_sidebar($args);
  46.     $args = array(
  47.         'name'          => '页面页牢靠侧边栏',
  48.         'id'            => 'sidebar-page-affix',
  49.         'description'   => '显示在页面页牢靠侧边栏小工具',
  50.         'class'         => 'custom',
  51.         'before_widget' => '<div id="%1$s" class="widget %2$s">',
  52.         'after_widget'  => '</div>',
  53.         'before_title'  => '<div class="widget-title">',
  54.         'after_title'   => '</div>'
  55.     );
  56.     register_sidebar($args);
  57.     $args = array(
  58.         'name'          => '页面页侧边栏',
  59.         'id'            => 'sidebar-page',
  60.         'description'   => '显示在页面页侧边栏小工具',
  61.         'class'         => 'custom',
  62.         'before_widget' => '<div id="%1$s" class="widget %2$s">',
  63.         'after_widget'  => '</div>',
  64.         'before_title'  => '<div class="widget-title">',
  65.         'after_title'   => '</div>'
  66.     );
  67.     register_sidebar($args);
  68. }
  69. add_action('widgets_init', 'widgetSetup');

以上的代码包罗了首页,文章页,指定一个页面的侧边栏,同时每个侧边栏都包罗一个不随转动条转动的边栏,在主题sidebar.php替换为以下代码:

  1. <?php
  2. /**
  3.  * The template for the sidebar containing the main widget area
  4.  */
  5.  
  6. ?>
  7. <aside id="sidebar">
  8. 	<div class="sidebar-wrap">
  9.         <?php if (!is_active_sidebar('sidebar-index') && !is_active_sidebar('sidebar-index-affix') && !is_active_sidebar('sidebar-article') && !is_active_sidebar('sidebar-article-affix')): ?>
  10.             <div class="widget"><p>请到[后台->外观->小工具]首页或文章页侧边栏中添加需要显示的小工具。</p></div>
  11.         <?php else: ?>
  12.             <?php if (is_home()): ?>
  13.                 <div class="affix">
  14.                     <?php dynamic_sidebar('sidebar-index-affix'); ?>
  15.                 </div>
  16.                 <div class='sidebar-index wow slideInUp'>
  17.                     <?php dynamic_sidebar("sidebar-index"); ?>
  18.                 </div>
  19.             <?php endif; ?>
  20.             <?php if (is_single()): ?>
  21.                 <div class="affix">
  22.                     <?php dynamic_sidebar('sidebar-article-affix'); ?>
  23.                 </div>
  24.                 <div class='sidebar-article wow slideInUp'>
  25.                     <?php dynamic_sidebar("sidebar-article"); ?>
  26.                 </div>
  27.             <?php endif; ?>
  28.             <?php if (is_page(1003)): ?>
  29.                 <div class="affix">
  30.                     <?php dynamic_sidebar('sidebar-page-affix'); ?>
  31.                 </div>
  32.                 <div class='sidebar-page wow slideInUp'>
  33.                     <?php dynamic_sidebar("sidebar-page"); ?>
  34.                 </div>
  35.             <?php endif; ?>
  36.         <?php endif; ?>
  37. 	</div>
  38. </aside>

这里包罗了牢靠栏的affix,通过JS和css便能弄出种种样式了,设置这些后,找到:外观-小工具,就能看到这些侧边栏了的JS
WordPress首页文章页或其它自定义侧边栏
转动超出侧边栏高度时,牢靠侧边栏:

  1. var headerH = $('#header').height();
  2. var footerH = $('#footer').innerHeight();
  3. var windowH = $(window).height();
  4. var sidebarW = $('#sidebar').width();
  5. var sidebarH = $('#sidebar').outerHeight();
  6. var sidebarTop = $('#sidebar').offset().top;
  7. $(window).scroll(function(event) {
  8.     var bodyH = $(document).height();
  9.     var affixH = $(".affix").innerHeight();
  10.     var leftH = (windowH - headerH - affixH) > 0 ? (windowH - headerH - affixH) : 0;
  11.     var scrollTop = $(document).scrollTop();
  12.     var scrollBottom = bodyH - windowH - scrollTop;
  13.         if (scrollTop > sidebarTop+ sidebarH) {
  14.             if (scrollTop < (bodyH - footerH - windowH + leftH)) {
  15.                 $('.affix').css({
  16.                     position: 'fixed',
  17.                     top: $('#header').height()+$('#header').position().top+3,
  18.                     bottom: '',
  19.                     width: sidebarW + 'px'
  20.                 });
  21.             } else {
  22.                 $('.affix').css({
  23.                     position: 'fixed',
  24.                     top: '',
  25.                     bottom: footerH - scrollBottom,
  26.                     width: sidebarW + 'px',
  27.                 });
  28.             }
  29.         } else {
  30.             $('.affix').css({
  31.                 position: '',
  32.                 top: '',
  33.                 width: sidebarW + 'px',
  34.             });
  35.         }
  36. }

这转动的处置,得用很多多少参数呀,看着都头晕,是否另有更简捷的处置方式呢,迎接分享

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 WordPress首页文章页或其它自定义侧边栏 https://zhutizhen.com/14478.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务