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