1. David Wu首页
  2. WordPress
  3. WordPress安装教程

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. }

 

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/98825

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

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