kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(layout): restore Zibll float dual-column so content no longer overlaps sidebar

Browse Source 
Align main shells to main.container > .content-wrap + .sidebar siblings, drop
content-shell padding on dual-column hosts, and remove route flex overrides that
disabled the negative-margin sidebar math.
This commit is contained in:
kate522
2026-07-22 21:05:12 +08:00
parent 79bc4159f5
commit 7d33097209
15 changed files with 156 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
archive.php
+4 -4
View File
@@ -36,12 +36,12 @@ if (is_author()) {
if (function_exists('aksrt_archive_open_shell')) {
aksrt_archive_open_shell([
'main_class' => 'site-main content-shell content-shell--stream',
'main_class' => 'site-main container',
'has_sidebar' => $has_sidebar,
'page_kind' => 'archive',
]);
} else {
echo '<main id="main-content" class="site-main content-shell content-shell--stream" tabindex="-1"><div class="content-wrap"><div class="content-layout' . ($has_sidebar ? '' : ' content-layout--no-sidebar') . '"><div class="content-layout__primary">';
echo '<main id="main-content" class="site-main container" tabindex="-1"><div class="content-wrap"><div class="content-layout">';
}
?>
<div class="content-main content-main--archive">
@@ -76,9 +76,9 @@ if (function_exists('aksrt_archive_open_shell')) {
if (function_exists('aksrt_archive_close_shell')) {
aksrt_archive_close_shell(['has_sidebar' => $has_sidebar]);
} else {
echo '</div>';
echo '</div></div>';
if ($has_sidebar) { get_sidebar(); }
echo '</div></div></main>';
echo '</main>';
}
get_footer();
assets/css/frontend/layout.css
+41 -9
View File
@@ -51,10 +51,14 @@
}
/* ============================================================
* Site shell — Zibll site-layout-1/2/3 float dual-column
* Site shell — Zibll site-layout-1/2/3 float dual-column (main.css 1:1)
* DOM: main.container > .content-wrap + .sidebar (siblings)
* body.site-layout-1 = no sidebar
* body.site-layout-2 = sidebar right
* body.site-layout-3 = sidebar left
*
* Never put display:flex/grid on .content-wrap for dual-column pages —
* float is ignored under flex/grid and .sidebar negative-margin then overlaps.
* ============================================================ */
main.container,
@@ -63,6 +67,18 @@ main.content-shell,
position: relative;
}
/* content-shell is a padding shell for non-dual pages; when it also hosts
* the float dual-column, kill horizontal padding so negative-margin math matches Zibll. */
main.container.content-shell,
main.content-shell.container,
.site-main.container.content-shell {
padding-left: 0;
padding-right: 0;
max-width: var(--container, var(--mian-max-width, 1200px));
width: 100%;
box-sizing: border-box;
}
main.container::after,
main.content-shell::after,
.site-main.container::after {
@@ -71,10 +87,14 @@ main.content-shell::after,
clear: both;
}
/* Zibll: .content-wrap { float:left; width:100%; } — display:block restores float
* if a route stylesheet accidentally set flex/grid on the wrap. */
.content-wrap {
float: left;
width: 100%;
min-width: 0;
display: block;
box-sizing: border-box;
}
.content-layout {
@@ -83,6 +103,7 @@ main.content-shell::after,
min-width: 0;
margin-right: 0;
margin-left: 0;
box-sizing: border-box;
}
.content-layout__primary {
@@ -97,6 +118,7 @@ main.content-shell::after,
min-width: 0;
position: relative;
box-sizing: border-box;
display: block;
}
.content-layout__aside {
@@ -104,12 +126,14 @@ main.content-shell::after,
}
/* No sidebar */
body.site-layout-1 .sidebar {
body.site-layout-1 .sidebar,
.site-layout-1 .sidebar {
display: none;
}
body.site-layout-1 .content-layout,
body.site-layout-1 .content-layout--no-sidebar {
body.site-layout-1 .content-layout--no-sidebar,
.site-layout-1 .content-layout {
margin-left: 0;
margin-right: 0;
}
@@ -120,13 +144,15 @@ body.site-layout-1 .content-layout--no-sidebar {
margin-right: 0 !important;
}
/* Sidebar RIGHT (layout 2) — hard 311px like Zibll main.css (runtime var must match) */
body.site-layout-2 .content-layout {
/* Sidebar RIGHT (layout 2) — Zibll uses hard 311px; runtime --sidebar-width must match */
body.site-layout-2 .content-layout,
.site-layout-2 .content-layout {
margin-right: calc(var(--sidebar-width, 311px) + 15px);
margin-left: 0;
}
body.site-layout-2 .sidebar {
body.site-layout-2 .sidebar,
.site-layout-2 .sidebar {
float: left;
width: var(--sidebar-width, 311px);
margin-left: calc(0px - var(--sidebar-width, 311px));
@@ -134,12 +160,14 @@ body.site-layout-2 .sidebar {
}
/* Sidebar LEFT (layout 3) */
body.site-layout-3 .content-layout {
body.site-layout-3 .content-layout,
.site-layout-3 .content-layout {
margin-left: calc(var(--sidebar-width, 311px) + 15px);
margin-right: unset;
}
body.site-layout-3 .sidebar {
body.site-layout-3 .sidebar,
.site-layout-3 .sidebar {
float: left;
width: var(--sidebar-width, 311px);
margin-left: -100%;
@@ -165,13 +193,17 @@ body.site-layout-3 .sidebar {
/* Mobile collapse (Zibll max-width: 991px) */
@media (max-width: 991.98px) {
body.site-layout-2 .content-layout,
body.site-layout-3 .content-layout {
body.site-layout-3 .content-layout,
.site-layout-2 .content-layout,
.site-layout-3 .content-layout {
margin-left: auto;
margin-right: auto;
}
body.site-layout-2 .sidebar,
body.site-layout-3 .sidebar,
.site-layout-2 .sidebar,
.site-layout-3 .sidebar,
.sidebar {
display: none;
}
assets/css/routes/archives.css
+1 -20
View File
@@ -4,21 +4,7 @@
* @package AKSRT
*/
.page-template-archives .content-wrap {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.page-template-archives .content-layout {
flex: 1 1 0;
min-width: 0;
}
.page-template-archives .sidebar {
flex: 0 0 300px;
max-width: 100%;
}
/* Dual-column geometry owned by layout.css site-layout float rules (Zibll). */
.archives-month-list {
list-style: none;
@@ -76,8 +62,3 @@
margin-left: 6px;
}
@media (max-width: 991px) {
.page-template-archives .sidebar {
flex: 1 1 100%;
}
}
assets/css/routes/posts-navs.css
+1 -27
View File
@@ -5,22 +5,7 @@
*/
/* header card */
.page-template-posts-navs .content-wrap,
main.page-template-posts-navs {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
main.page-template-posts-navs .content-wrap {
flex: 1 1 0;
min-width: 0;
}
main.page-template-posts-navs .sidebar {
flex: 0 0 260px;
max-width: 100%;
}
/* Dual-column geometry owned by layout.css site-layout float rules (Zibll). */
.posts-navs .title-theme h2 {
margin: 0;
@@ -247,15 +232,4 @@ main.page-template-posts-navs .sidebar {
outline: 2px dashed var(--focus-color, #f04494);
}
@media (max-width: 991px) {
main.page-template-posts-navs .sidebar {
flex: 1 1 100%;
order: -1;
}
#post-navs-sz .col-xs-6,
#post-navs-sz .col-sm-6 {
width: 100%;
margin-bottom: 12px;
}
}
assets/css/routes/user-auth.css
+1 -10
View File
@@ -77,13 +77,4 @@
color: #e74c3c;
}
.page-template-user-auth .content-wrap {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.page-template-user-auth .content-layout {
flex: 1 1 0;
min-width: 0;
}
/* Dual-column geometry owned by layout.css site-layout float rules (Zibll). */
category.php
+1 -1
View File
@@ -193,7 +193,7 @@ foreach ($custom_dimensions as $dim) {
if (function_exists('aksrt_archive_open_shell')) {
aksrt_archive_open_shell([
'main_class' => 'site-main container content-shell content-shell--stream',
'main_class' => 'site-main container',
'has_sidebar' => $has_sidebar,
'top_fluid' => ['cat_top_fluid'],
'page_kind' => 'category',
inc/helpers/aksrt-archive.php
+8 -3
View File
@@ -415,7 +415,14 @@ if (!function_exists('aksrt_archive_open_shell')) :
'page_kind' => 'archive',
]);
// Force container; strip content-shell* so float dual-column is not padded/max-width nested.
$main_class = trim((string) $args['main_class']);
if ($main_class === '') {
$main_class = 'site-main container';
} elseif (strpos($main_class, 'container') === false) {
$main_class .= ' container';
}
$main_class = trim((string) preg_replace('/\bcontent-shell(?:--[a-z0-9-]+)?\b/i', '', $main_class));
?>
<main id="main-content" class="<?php echo esc_attr($main_class); ?>" tabindex="-1">
<?php
@@ -424,8 +431,7 @@ if (!function_exists('aksrt_archive_open_shell')) :
}
?>
<div class="content-wrap">
<div class="content-layout<?php echo !empty($args['has_sidebar']) ? '' : ' content-layout--no-sidebar'; ?>">
<div class="content-layout__primary">
<div class="content-layout">
<?php
}
endif;
@@ -443,7 +449,6 @@ if (!function_exists('aksrt_archive_close_shell')) :
'bottom_fluid' => [],
]);
?>
</div>
</div>
</div>
<?php if (!empty($args['has_sidebar'])) : ?>
inc/helpers/aksrt-homepage.php
+1 -3
View File
@@ -1026,8 +1026,7 @@ if (!function_exists('aksrt_homepage_render_layout')) {
?>
<main id="main-content" role="main" class="container site-main aksrt-homepage" tabindex="-1">
<div class="content-wrap aksrt-homepage__shell">
<div class="content-layout<?php echo $has_sidebar ? '' : ' content-layout--no-sidebar'; ?> aksrt-homepage__content-layout">
<div class="content-layout__primary aksrt-homepage__primary">
<div class="content-layout aksrt-homepage__content-layout aksrt-homepage__primary">
<?php
aksrt_homepage_render_widget_zone(
['home_top_content'],
@@ -1126,7 +1125,6 @@ if (!function_exists('aksrt_homepage_render_layout')) {
'aksrt-homepage__content-zone aksrt-homepage__content-zone--bottom'
);
?>
</div>
</div>
</div>
index.php
+23 -20
View File
@@ -19,32 +19,35 @@ get_header();
// Fallback: when homepage shell is unavailable, keep a standard archive loop.
?>
<?php
// Zibll dual-column: sidebar is a sibling of .content-wrap under main.container.
// Visibility is driven by body.site-layout-* (aksrt_is_show_sidebar), not widget presence.
$has_sidebar = function_exists('aksrt_is_show_sidebar')
? aksrt_is_show_sidebar()
: is_active_sidebar('sidebar-blog');
?>
<main id="main-content" class="site-main container" tabindex="-1">
<?php $has_sidebar = is_active_sidebar('sidebar-blog'); ?>
<div class="content-wrap">
<div class="content-layout<?php echo $has_sidebar ? '' : ' content-layout--no-sidebar'; ?>">
<div class="content-layout__primary">
<?php
$render_config = function_exists('aksrt_resolve_post_list_render_config')
? aksrt_resolve_post_list_render_config(['context' => 'archive'])
: ['context' => 'archive', 'mode' => 'list'];
?>
<div class="content-layout">
<?php
$render_config = function_exists('aksrt_resolve_post_list_render_config')
? aksrt_resolve_post_list_render_config(['context' => 'archive'])
: ['context' => 'archive', 'mode' => 'list'];
?>
<?php if (have_posts()) : ?>
<?php aksrt_render_post_list(null, $render_config); ?>
<?php aksrt_render_pagination(); ?>
<?php else : ?>
<div class="no-results">
<p><?php esc_html_e('暂无文章。', 'aksrt'); ?></p>
</div>
<?php endif; ?>
</div>
<?php if ($has_sidebar) : ?>
<?php get_sidebar(); ?>
<?php if (have_posts()) : ?>
<?php aksrt_render_post_list(null, $render_config); ?>
<?php aksrt_render_pagination(); ?>
<?php else : ?>
<div class="no-results">
<p><?php esc_html_e('暂无文章。', 'aksrt'); ?></p>
</div>
<?php endif; ?>
</div>
</div>
<?php if ($has_sidebar) : ?>
<?php get_sidebar(); ?>
<?php endif; ?>
</main>
<?php
page.php
+70 -70
View File
@@ -22,89 +22,89 @@ $show_sidebar = function_exists('aksrt_is_show_sidebar') ? aksrt_is_show_sidebar
<div id="reading-progress-global" class="reading-progress-bar" role="progressbar" aria-label="<?php esc_attr_e('阅读进度', 'aksrt'); ?>" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
<?php endif; ?>
<main id="main-content" class="site-main container content-shell content-shell--page page-content-<?php echo esc_attr($page_content_style); ?> page-id-<?php echo esc_attr((string) $page_id); ?>" tabindex="-1">
<?php if (is_active_sidebar('page_top_fluid_' . $page_id)) : ?>
<div class="fluid-widget-wrap">
<?php dynamic_sidebar('page_top_fluid_' . $page_id); ?>
</div>
<?php endif; ?>
<?php
// Zibll page.php: fluid top OUTSIDE main; main.container + content-wrap/layout + sidebar sibling.
// Do not put content-shell padding/max-width on the dual-column host (breaks float math).
?>
<?php if (is_active_sidebar('page_top_fluid_' . $page_id)) : ?>
<div class="fluid-widget-wrap">
<?php dynamic_sidebar('page_top_fluid_' . $page_id); ?>
</div>
<?php endif; ?>
<main id="main-content" class="site-main container page-content-<?php echo esc_attr($page_content_style); ?> page-id-<?php echo esc_attr((string) $page_id); ?>" tabindex="-1">
<div class="content-wrap">
<div class="content-layout<?php echo $show_sidebar ? '' : ' content-layout--no-sidebar'; ?>">
<div class="content-layout__primary">
<?php if (is_active_sidebar('page_top_content_' . $page_id)) : ?>
<?php dynamic_sidebar('page_top_content_' . $page_id); ?>
<?php endif; ?>
<div class="content-layout">
<?php if (is_active_sidebar('page_top_content_' . $page_id)) : ?>
<?php dynamic_sidebar('page_top_content_' . $page_id); ?>
<?php endif; ?>
<?php
while (have_posts()) :
the_post();
$page_meta_header_style = get_post_meta(get_the_ID(), 'page_header_style', true);
$ph_style_override = null;
if ($page_meta_header_style !== '' && in_array($page_meta_header_style, ['', '1', '2', '3', 'not'], true)) {
$ph_style_override = ($page_meta_header_style === 'not') ? '' : $page_meta_header_style;
}
$page_cover = (string) get_post_meta(get_the_ID(), 'page_header_cover_img', true);
$header_args = [
'title' => get_the_title(),
];
if ($ph_style_override !== null) {
$header_args['style'] = $ph_style_override;
}
if ($page_cover !== '') {
$header_args['cover'] = esc_url($page_cover);
}
?>
<article <?php post_class('entry-page'); ?>>
<?php get_template_part('templates/parts/page-header', null, $header_args); ?>
<?php if (has_post_thumbnail()) : ?>
<figure class="entry-thumb">
<?php the_post_thumbnail('large'); ?>
</figure>
<?php endif; ?>
<div class="entry-content" data-aksrt-lightbox="<?php echo !empty($page_settings['lightbox']) ? '1' : '0'; ?>">
<?php the_content(); ?>
<?php
wp_link_pages([
'before' => '<nav class="page-links"><span class="page-links-title">' . esc_html__('分页：', 'aksrt') . '</span>',
'after' => '</nav>',
]);
?>
</div>
</article>
<?php
while (have_posts()) :
the_post();
if (comments_open() || get_comments_number()) {
echo '<div class="theme-box box-body radius8 main-shadow comments-card">';
comments_template();
echo '</div>';
}
$page_meta_header_style = get_post_meta(get_the_ID(), 'page_header_style', true);
$ph_style_override = null;
if ($page_meta_header_style !== '' && in_array($page_meta_header_style, ['', '1', '2', '3', 'not'], true)) {
$ph_style_override = ($page_meta_header_style === 'not') ? '' : $page_meta_header_style;
}
$page_cover = (string) get_post_meta(get_the_ID(), 'page_header_cover_img', true);
$header_args = [
'title' => get_the_title(),
];
if ($ph_style_override !== null) {
$header_args['style'] = $ph_style_override;
}
if ($page_cover !== '') {
$header_args['cover'] = esc_url($page_cover);
}
?>
<article <?php post_class('entry-page'); ?>>
<?php get_template_part('templates/parts/page-header', null, $header_args); ?>
endwhile;
?>
<?php if (has_post_thumbnail()) : ?>
<figure class="entry-thumb">
<?php the_post_thumbnail('large'); ?>
</figure>
<?php endif; ?>
<div class="entry-content" data-aksrt-lightbox="<?php echo !empty($page_settings['lightbox']) ? '1' : '0'; ?>">
<?php the_content(); ?>
<?php
wp_link_pages([
'before' => '<nav class="page-links"><span class="page-links-title">' . esc_html__('分页：', 'aksrt') . '</span>',
'after' => '</nav>',
]);
?>
</div>
</article>
<?php
if (comments_open() || get_comments_number()) {
echo '<div class="theme-box box-body radius8 main-shadow comments-card">';
comments_template();
echo '</div>';
}
endwhile;
?>
<?php if (is_active_sidebar('page_bottom_content_' . $page_id)) : ?>
<?php dynamic_sidebar('page_bottom_content_' . $page_id); ?>
<?php endif; ?>
</div>
<?php if (is_active_sidebar('page_bottom_content_' . $page_id)) : ?>
<?php dynamic_sidebar('page_bottom_content_' . $page_id); ?>
<?php endif; ?>
</div>
</div>
<?php if ($show_sidebar) : ?>
<?php get_sidebar(); ?>
<?php endif; ?>
<?php if (is_active_sidebar('page_bottom_fluid_' . $page_id)) : ?>
<div class="fluid-widget-wrap">
<?php dynamic_sidebar('page_bottom_fluid_' . $page_id); ?>
</div>
<?php endif; ?>
</main>
<?php if (is_active_sidebar('page_bottom_fluid_' . $page_id)) : ?>
<div class="fluid-widget-wrap">
<?php dynamic_sidebar('page_bottom_fluid_' . $page_id); ?>
</div>
<?php endif; ?>
<?php if (!empty($page_settings['lightbox'])) : ?>
<div class="lightbox-overlay" id="lightbox-overlay" role="dialog" aria-modal="true" aria-label="<?php esc_attr_e('图片预览', 'aksrt'); ?>">
<button type="button" class="lightbox-close" aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><i class="fas fa-times"></i></button>
search.php
+1 -1
View File
@@ -118,7 +118,7 @@ $has_sidebar = function_exists('aksrt_archive_has_sidebar')
if (function_exists('aksrt_archive_open_shell')) {
aksrt_archive_open_shell([
'main_class' => 'site-main container content-shell content-shell--stream',
'main_class' => 'site-main container',
'has_sidebar' => $has_sidebar,
'top_fluid' => ['search_top_fluid'],
'page_kind' => 'search',
tag.php
+1 -1
View File
@@ -99,7 +99,7 @@ if (!empty($cat_filter_terms)) {
if (function_exists('aksrt_archive_open_shell')) {
aksrt_archive_open_shell([
'main_class' => 'site-main container content-shell content-shell--stream',
'main_class' => 'site-main container',
'has_sidebar' => $has_sidebar,
'top_fluid' => ['tag_top_fluid'],
'page_kind' => 'tag',
templates/pages/page-categories.php
+1 -1
View File
@@ -49,7 +49,7 @@ if ($page_title === '') {
<?php
if (function_exists('aksrt_archive_open_shell')) {
aksrt_archive_open_shell([
'main_class' => 'site-main container content-shell content-shell--page',
'main_class' => 'site-main container ',
'has_sidebar' => false,
'page_kind' => 'categories',
]);
templates/pages/page-friends.php
+1 -1
View File
@@ -14,7 +14,7 @@ $links = function_exists('aksrt_get_friend_links') ? aksrt_get_friend_links() :
if (function_exists('aksrt_archive_open_shell')) {
aksrt_archive_open_shell([
'main_class' => 'site-main container content-shell content-shell--page page-content-default',
'main_class' => 'site-main container page-content-default',
'has_sidebar' => false,
'page_kind' => 'friends',
]);
templates/pages/page-newposts.php
+1 -1
View File
@@ -25,7 +25,7 @@ $query = new WP_Query([
if (function_exists('aksrt_archive_open_shell')) {
aksrt_archive_open_shell([
'main_class' => 'site-main container content-shell content-shell--page page-content-default',
'main_class' => 'site-main container page-content-default',
'has_sidebar' => false,
'page_kind' => 'newposts',
]);