网站CSS与侧边栏组件复制问题求助：按钮与小部件行

一、修复「捐赠」按钮的脚本格式问题 #

• 问题根源：原「会员」按钮的交互脚本绑定在membership-cta类上，复制后改了donate-cta类但脚本未同步更新，导致交互失效或格式错乱。
• 具体操作：
  1. 找到主题JS文件（一般在wp-content/themes/你的主题/js/路径下，比如main.js），搜索membership-cta相关的事件监听代码，大概率是类似这样：

     document.querySelector('.membership-cta').addEventListener('click', function() {
       // 原按钮的弹窗/跳转逻辑
     });
     

  2. 修改脚本，让它同时监听两个按钮：

     // 同时选中会员和捐赠按钮
     document.querySelectorAll('.membership-cta, .donate-cta').forEach(btn => {
       btn.addEventListener('click', function() {
         // 如果两个按钮逻辑不同，用类名区分
         if(this.classList.contains('donate-cta')) {
           // 写捐赠按钮的专属逻辑，比如跳转到捐赠页
           window.location.href = '/donate';
         } else {
           // 保留原会员按钮的逻辑
           // 原代码内容
         }
       });
     });
     

  3. 样式同步：直接给新「捐赠」按钮加上membership-cta类（或复制该类的CSS代码到donate-cta），确保样式一致：

     <!-- 直接复用原类，无需写新样式 -->
     <div class="membership-cta donate-cta">捐赠</div>
     

     也可单独写CSS：

     .donate-cta {
       /* 完全复制.membership-cta的所有CSS属性 */
       padding: 12px 24px;
       background-color: #2c5f2d;
       color: #fff;
       border-radius: 4px;
       /* 其他原样式 */
     }
     

二、新增小部件行的布局修复 #

• 问题根源：注册新侧边栏后未将其放在独立容器中，导致新小部件挤入原home-ctas行；或原容器的Flex布局未开启自动换行。
• 具体操作：
  1. 检查模板文件（比如front-page.php或home.php），把新侧边栏放在独立容器中，与原行分开：

     <!-- 原有的第一行3个小部件 -->
     <div class="home-ctas">
       <?php dynamic_sidebar('home-ctas'); ?>
     </div>
     
     <!-- 新增的第二行小部件容器 -->
     <div class="home-ctas home-ctas2">
       <?php dynamic_sidebar('home-ctas2'); ?>
     </div>
     

  2. 调整容器CSS：如果原home-ctas用Flex布局，确保开启自动换行，同时让每个小部件占1/3宽度：

     .home-ctas {
       display: flex;
       gap: 20px;
       flex-wrap: wrap; /* 必须添加，否则元素不会换行 */
       margin-bottom: 30px;
     }
     .home-ctas .widget {
       flex: 1 1 calc(33.333% - 14px); /* 减去gap宽度，确保一行3个 */
       min-width: 280px; /* 小屏幕自动换行 */
     }
     /* 给新行加顶部间距，区分开 */
     .home-ctas2 {
       margin-top: 40px;
     }
     

  3. 排查挤占问题：如果新小部件仍挤入原行，检查模板代码位置，确保新侧边栏容器在原home-ctas容器外部，而非嵌套在内。

内容的提问来源于stack exchange，提问作者Jenna Magnuski