搬码资源网广告位 搬码资源网广告位

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

下面是搬码源码网 abnma.com 通过网络收集整理的代码片段。搬码源码网小编现在分享给大家,也给大家做个参考。

一般主题都有带侧边栏的吧,大部分都在首页或文章页有设定,如果想在页面上关连侧边栏并且是独立于首页和文章页的呢,这时候就要添加这些代码了,在主题的 function.PHP 中添加:

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’ => ‘显示在首页侧边栏小工具’,

‘after_title’ => ‘</div>’

);

register_sidebar($args);

$args = array(

‘name’ => ‘文章页固定侧边栏’,

‘id’ => ‘sidebar-article-affix’,

‘description’ => ‘显示在文章页固定侧边栏小工具’,

‘after_title’ => ‘</div>’

);

register_sidebar($args);

$args = array(

‘name’ => ‘文章页侧边栏’,

‘id’ => ‘sidebar-article’,

‘description’ => ‘显示在文章页侧边栏小工具’,

‘after_title’ => ‘</div>’

);

register_sidebar($args);

$args = array(

‘name’ => ‘页面页固定侧边栏’,

‘id’ => ‘sidebar-page-affix’,

‘description’ => ‘显示在页面页固定侧边栏小工具’,

‘after_title’ => ‘</div>’

);

register_sidebar($args);

$args = array(

‘name’ => ‘页面页侧边栏’,

‘id’ => ‘sidebar-page’,

‘description’ => ‘显示在页面页侧边栏小工具’,

‘after_title’ => ‘</div>’

);

register_sidebar($args);

}

add_action(‘widgets_init’,’widgetSetup’);

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

<?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

滚动超出侧边栏高度时,固定侧边栏:

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: ”,

});

}

}

这滚动的处理,得用好多参数呀,看着都头晕,是否还有更简捷的处理方式呢,欢迎分享

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11137.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?