如何在移动端主页眉下方添加仅移动端显示的二级区域？

1. 在header.php中添加二级区域代码 #

找到主题目录下的header.php文件，定位到页眉结束标签（通常是</header>）附近，插入你需要的二级区域HTML结构。示例代码：

<div class="mobile-secondary-header">
  <!-- 这里放入你的二级区域内容，比如导航栏、操作按钮等 -->
  <p>自定义二级区域内容</p>
</div>

2. 用CSS控制仅移动端显示 #

将以下CSS代码添加到主题的自定义CSS面板（若有），或者子主题的style.css文件中：

/* 默认隐藏二级区域 */
.mobile-secondary-header {
  display: none;
}

/* 针对移动端宽度（可根据需求调整像素值）显示 */
@media only screen and (max-width: 768px) {
  .mobile-secondary-header {
    display: block;
    /* 可添加自定义样式匹配设计需求 */
    background-color: #f0f0f0;
    padding: 12px 16px;
    text-align: center;
  }
}

3. 优先使用子主题修改 #

直接修改主题核心文件会在主题更新时丢失改动，建议创建并使用子主题：

• 新建子主题文件夹，里面包含声明了父主题信息的style.css，以及复制父主题header.php并修改后的文件
• 激活子主题后，你的修改会被永久保留，不受父主题更新影响

4. 验证修改效果 #

打开浏览器开发者工具（按F12），切换到移动端视图，检查二级区域是否正常显示、样式是否符合预期。若未显示，排查以下点：

• HTML结构是否插入到了正确位置
• CSS媒体查询的宽度值是否匹配你的移动端适配需求
• 是否有主题原有样式覆盖了你的自定义CSS

内容的提问来源于stack exchange，提问作者Michael Tarr