如题,在B2子主题目录下创建文件夹“Pages”,在文件夹下创建文件“page-fullwidth-no-margin.php”,文件名可以随意,尽量英文,将以下代码粘贴进去。
<?php
/**
* Template Name: 全宽无间距模板(保留导航页脚)
* Template Post Type: page
* Description: 保留主题导航/页脚,仅消除内容区顶部/底部间距的全宽模板
*/
get_header();
?>
<style type="text/css">
/* ========== 核心:精准消除导航与banner之间的间距 ========== */
/* 1. 消除导航栏下方的默认间距(适配绝大多数主题) */
.site-header, .header, .masthead, #header, .top-nav {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
/* 2. 消除内容区最外层容器的顶部间距(截图中红色箭头指向的空白) */
.content-area, .site-content, #primary, #main, .page-wrap {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
/* 3. 消除页面编辑区的默认间距 */
.entry-content, .page-content, .hentry, .post-content {
margin: 0 !important;
padding: 0 !important;
}
/* 4. 隐藏页面标题(避免重复,不影响导航) */
.entry-header, .page-header, .entry-title, .page-title {
display: none !important;
height: 0 !important;
visibility: hidden !important;
}
/* 5. 消除自定义内容自身的冗余间距 */
.banner {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
}
.container {
margin-bottom: 0 !important;
}
.cooperation {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 6. 消除页脚上方间距 */
.site-footer {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 兜底:消除浏览器/主题的微小空白 */
html body {
line-height: 1.7 !important;
background: #f8f9fa !important; /* 匹配内容区背景,避免白边 */
}
</style>
<div class="fullwidth-content-no-gap">
<?php
while ( have_posts() ) : the_post();
the_content();
endwhile;
?>
</div>
<?php
get_footer();
?>
此时去页面新建页面的时候,页面模板选择“全宽无间距模板”即可,B2主题顶部会有99px的间距,这时春哥给的代码可以解决,代码放入WP后台==》外观==》自定义==》额外css里面,代码如下
.site-header {
height: 99px;
}





滇ICP备15006555号
滇公网安备 53262102000333号








