• 注册
  • 柒比贰B2 柒比贰B2 关注:7 内容:6

    创建B2主题下直接嵌入HTML页面的页面模板

  • 查看作者
  • 打赏作者
    • 如题,在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;
      }

      请登录之后再进行评论

      登录

      关注微信公众号

      坚持每天来艺优论坛,会让你
      工作也轻松了!
      生活也美好了!
      心情也舒畅了!
      走路也有劲了!
      腿也不痛了!
      腰也不酸了!
      工作也轻松了!
      你好我也好,不要忘记哦!
    • 切换主题
    • 底部
    • 帖子间隔 侧栏位置: