Di chuyển thanh bên thứ cấp bên trong lớp bọc của Thanh bên nội dung và thay thế các phao bằng Flexbox trong Genesis

Thủ thuật WordPress
#1

Trong trò chuyện Genesis Slack, một người dùng hỏi:

Tôi muốn di chuyển thanh bên phụ vào phần bọc của thanh bên nội dung, vì vậy tôi có thanh bên / nội dung / thanh bên trong phần bọc. Không có gì tôi đã thử cho đến nay dường như hoạt động. Bất kỳ trợ giúp sẽ được đánh giá cao nhất.

Theo mặc định, thanh bên thứ cấp hiện diện bên ngoài div.content-sidebar-wrap trong Genesis 2.5.3.

Bằng cách thêm

remove_action( 'genesis_after_content_sidebar_wrap', 'genesis_get_sidebar_alt' );
add_action( 'genesis_after_content', 'genesis_get_sidebar_alt' );

trong functions.php của chủ đề con, có thể được di chuyển vào bên trong ..sidebar-secondary .content-sidebar-wrap

Bây giờ chúng ta hãy thay thế float bằng Flexbox trong CSS để hiển thị các bố cục Content / Sidebar / Sidebar, Sidebar / Sidebar / Content và Sidebar / Content / Sidebar.

Mặc dù hướng dẫn đã được viết cho Genesis Sample 2.3.0, nhưng nó sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào.

Chỉnh sửa style.css .

a) Bên trên các truy vấn phương tiện, thêm

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap,
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-content-sidebar .sidebar-primary,
.sidebar-sidebar-content .sidebar-primary,
.content-sidebar-sidebar .sidebar-primary,
.sidebar-secondary {
    float: none;
}

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
    width: auto;
}

@media only screen and (min-width: 1024px) {
    .content-sidebar-wrap {
        display: flex;

        justify-content: space-between;
    }

    /* Sidebar/Sidebar/Content */

    .sidebar-sidebar-content .sidebar-secondary {
        order: 0;
    }

    .sidebar-sidebar-content .sidebar-primary {
        order: 1;
    }

    .sidebar-sidebar-content .content {
        order: 2;
    }

    /* Sidebar/Content/Sidebar */

    .sidebar-content-sidebar .sidebar-secondary {
        order: 0;
    }

    .sidebar-content-sidebar .content {
        order: 1;
    }

    .sidebar-content-sidebar .sidebar-primary {
        order: 2;
    }
}

b) Trong truy vấn phương tiện 1340px, nhận xét hoặc xóa

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
    width: 920px;
}

c) Trong truy vấn phương tiện 1200px, nhận xét hoặc xóa

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
    width: 740px;
}

Tham khảo: genesis / lib / structure / layout.php