子比主题美化 – 文章页经典三栏

部署教程

首先在 func.php或functions.php 内添加以下代码

// 注册一个新的左侧边栏
function zib_main_register_additional_sidebar() {
    register_sidebar(array(
        'name'          => '左侧边栏',
        'id'            => 'left_sidebar',
        'description'   => '显示在所有页面的左侧边栏位置',
        'before_widget' => '<div class="zib-widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>',
    ));
}
add_action('widgets_init', 'zib_main_register_additional_sidebar');

随后修改主题目录下的single.php，在下方添加

<?php if (function_exists('dynamic_sidebar')) {
    echo '<div class="sidebar2"><div class="sidebar-affix affix-top" style="width: 311px; top: 88px;"><div data-affix="true" class="posts-nav-box" data-title="锚点"></div></div><div data-affix="true" class="posts-nav-box" data-title="锚点"></div>';
    dynamic_sidebar('left_sidebar');
    echo '</div>';
}
?>

最后添加自定义css适配经典三栏

.sidebar2 {
    float: left;
    margin-right: -311px;
    width: 311px;
    position: unset;
}
/*左侧边栏*/
.site-layout-3 .sidebar2 {
    margin-right: -100%
}
.sidebar2 {
    float: left;
    width: 311px;
    position: relative
}
.site-layout-1 .sidebar2 {
    display: none
}
.mobile-nav-widget .posts-mini,.sidebar2 .posts-mini {
    width: 100%!important
}
.mobile-nav-widget .px12-m-s,.mobile-nav-widget .px12-sm,.sidebar2 .px12-m-s,.sidebar2 .px12-sm {
    font-size: 12px
}

.mobile-nav-widget .em09-sm,.sidebar2 .em09-sm {
    font-size: .9em
}

.mobile-nav-widget .hide-m-s,.mobile-nav-widget .hide-sm,.sidebar2 .hide-m-s,.sidebar2 .hide-sm {
    display: none
}

.mobile-nav-widget .nopw-sm,.sidebar2 .nopw-sm {
    padding-left: 0!important;
    padding-right: 0!important
}

.controller-hide .dplayer-controller,.controller-hide .dplayer-controller-mask,.mobile-nav-widget .dplayer-full-in,.mobile-nav-widget .dplayer-loop,.sidebar2 .dplayer-full-in,.sidebar2 .dplayer-loop {
    display: none!important
}
    .sidebar2 .card {
        width: 100%;
        margin: 0
    }

    .sidebar2 .author-minicard {
        width: 100%;
        margin: 3px 0
    }

    .sidebar2 .s-desc,.sidebar2 .slide-text {
        font-size: 12px;
        padding: 1em 1.2em
    }
@media (max-width: 996px) {
    body .sidebar2.show-sidebar {
        display: unset;
        width: 100%;
        margin-right: 0
    }
    .sidebar2 {
        display: none
    }
}

至此教程已经结束

作者：李初一

文章没读爽？点我试试随机文章