WordPress Cookie 同意模块代码版

2026年2月26日2026年2月28日

通过在WordPress主题中添加自定义代码来实现一个轻量级的Cookie同意模块。下面提供一个可直接使用的“代码版”实现，包含HTML结构、CSS样式和JavaScript逻辑。该模块会在用户未同意时显示一个固定在底部的通知条，点击“同意”后存储Cookie并隐藏通知条。

实现步骤

1. 将HTML代码添加到主题尾部

将HTML插入到主题的 footer.php 文件中（建议放在 <?php wp_footer(); ?> 之前），或者通过 wp_footer 钩子动态输出。

<!-- Cookie同意模块 -->
<div id="cookie-consent-banner" style="display: none;">
  <div class="cookie-consent-content">
    <p>本站使用Cookie来提升您的体验。继续使用本网站即表示您同意我们的Cookie政策。</p>
    <button id="cookie-consent-btn">同意并关闭</button>
  </div>
</div>

2. 添加CSS样式

将以下样式添加到主题的样式文件中（如 style.css），或者通过 wp_add_inline_style 钩子注入。

/* Cookie同意条样式 */
#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #333;
  color: #fff;
  padding: 15px;
  text-align: center;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
.cookie-consent-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
#cookie-consent-banner p {
  margin: 0;
}
#cookie-consent-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  transition: background 0.3s;
}
#cookie-consent-btn:hover {
  background: #45a049;
}

3. 添加JavaScript逻辑

将以下JavaScript代码添加到主题的JavaScript文件（如 js/custom.js）中，或通过 wp_footer 内联输出。这里建议使用内联方式，确保在DOM加载后运行。

// 检查Cookie同意状态
function checkCookieConsent() {
  if (document.cookie.indexOf('cookie_consent=accepted') === -1) {
    document.getElementById('cookie-consent-banner').style.display = 'block';
  }
}

// 设置同意Cookie并隐藏横幅
function acceptCookies() {
  document.cookie = "cookie_consent=accepted; path=/; max-age=" + 60*60*24*365; // 有效期1年
  document.getElementById('cookie-consent-banner').style.display = 'none';
}

// 页面加载后检查
document.addEventListener('DOMContentLoaded', function() {
  checkCookieConsent();
  document.getElementById('cookie-consent-btn').addEventListener('click', acceptCookies);
});

4. 整合代码到functions.php（可选）

如果你不想直接修改主题文件，可以将以下代码添加到子主题的 functions.php 中，它会通过钩子自动输出HTML和JS（CSS建议手动添加）。

// 在页脚输出Cookie同意HTML和内联JS
add_action('wp_footer', function() {
  // 如果Cookie已同意，则不输出任何内容
  if (isset($_COOKIE['cookie_consent']) && $_COOKIE['cookie_consent'] === 'accepted') {
    return;
  }
  ?>
  <!-- Cookie同意模块 -->
  <div id="cookie-consent-banner" style="display: none;">
    <div class="cookie-consent-content">
      <p>本站使用Cookie来提升您的体验。继续使用本网站即表示您同意我们的Cookie政策。</p>
      <button id="cookie-consent-btn">同意并关闭</button>
    </div>
  </div>
  <script>
    function checkCookieConsent() {
      if (document.cookie.indexOf('cookie_consent=accepted') === -1) {
        document.getElementById('cookie-consent-banner').style.display = 'block';
      }
    }
    function acceptCookies() {
      document.cookie = "cookie_consent=accepted; path=/; max-age=" + 60*60*24*365;
      document.getElementById('cookie-consent-banner').style.display = 'none';
    }
    document.addEventListener('DOMContentLoaded', function() {
      checkCookieConsent();
      document.getElementById('cookie-consent-btn').addEventListener('click', acceptCookies);
    });
  </script>
  <?php
});

注意事项

使用子主题：如果你对Arkhe主题进行修改，强烈建议创建子主题，避免主题更新时覆盖你的代码。
样式调整：根据你的主题配色和布局调整CSS，例如修改背景色、圆角等。
Cookie名称：代码中使用的Cookie键名为 cookie_consent，你可以根据需要修改。
多语言支持：如果你的网站是多语言，可以将提示文本通过WordPress的翻译函数 __() 或 pll_e() 进行本地化。
GDPR合规性：此代码仅实现基本的同意存储，如果需要更复杂的功能（如分类管理、第三方脚本控制），建议使用专门的插件（如Cookie Notice、Complianz等）。

将上述代码添加到主题后，刷新网站前端即可看到底部的Cookie同意条。点击“同意”后，通知条消失且一年内不再显示。

后续增加同意和拒绝按钮，

1.将代码添加至functions.php中

// 在页脚输出Cookie同意HTML和内联JS（含接受/拒绝按钮）
add_action('wp_footer', function() {
  // 如果已经设置了任何cookie_consent（无论接受或拒绝），则不显示横幅
  if (isset($_COOKIE['cookie_consent'])) {
    return;
  }
  ?>
  <!-- Cookie同意模块 -->
  <div id="cookie-consent-banner" style="display: none;">
    <div class="cookie-consent-content">
      <p>
        本站使用Cookie来提升您的体验。继续使用本网站即表示您同意我们的
        <a href="" target="_blank" rel="noopener noreferrer">Cookie</a>政策。
      </p>
      <div style="display: flex; gap: 10px;">
        <button id="cookie-accept-btn">同意</button>
        <button id="cookie-reject-btn">拒绝</button>
      </div>
    </div>
  </div>   
  <script>
    function checkCookieConsent() {
      // 如果不存在 cookie_consent（无论值是什么），则显示横幅
      if (document.cookie.indexOf('cookie_consent=') === -1) {
        document.getElementById('cookie-consent-banner').style.display = 'block';
      }
    }
    function acceptCookies() {
      document.cookie = "cookie_consent=accepted; path=/; max-age=" + 60*60*24*30; // 30天
      document.getElementById('cookie-consent-banner').style.display = 'none';
    }
    function rejectCookies() {
      document.cookie = "cookie_consent=rejected; path=/; max-age=" + 60*60*24*30; // 30天
      document.getElementById('cookie-consent-banner').style.display = 'none';
    }
    document.addEventListener('DOMContentLoaded', function() {
      checkCookieConsent();
      document.getElementById('cookie-accept-btn').addEventListener('click', acceptCookies);
      document.getElementById('cookie-reject-btn').addEventListener('click', rejectCookies);
    });
  </script>
  <?php
});

2.css代码放置于主题的css文件中

 /* Cookie同意条样式  */
    #cookie-consent-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #333;
      color: #fff;
      padding: 15px;
      text-align: center;
      z-index: 9999;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    }
    .cookie-consent-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }
    #cookie-consent-banner p {
      margin: 0;
    }
    #cookie-consent-banner a {
      color: #fff;
      text-decoration: underline;
    }
    #cookie-consent-banner a:hover {
      color: #ddd;
    }
    #cookie-accept-btn,
    #cookie-reject-btn {
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 4px;
      font-size: 16px;
      transition: background 0.3s;
    }
    #cookie-accept-btn {
      background: #4CAF50;
      color: white;
    }
    #cookie-accept-btn:hover {
      background: #45a049;
    }
    #cookie-reject-btn {
      background: #666;
      color: white;
    }
    #cookie-reject-btn:hover {
      background: #555;
    }

主要改动说明：

新增拒绝按钮：按钮文本为“拒绝”，放在同意按钮旁边，使用flex布局保持间距。
按钮样式：同意按钮保持绿色（#4CAF50），拒绝按钮采用灰色（#666），悬停变深，大小、圆角与同意按钮一致。
Cookie检查逻辑：从仅检查accepted改为检查是否存在cookie_consent=（任意值），这样无论用户接受或拒绝，横幅都不会再次弹出。
拒绝函数：rejectCookies()设置cookie_consent=rejected，有效期30天，并隐藏横幅。
HTML结构调整：将两个按钮包裹在<div style="display: flex; gap: 10px;">中，确保按钮并排且间距合理（原有.cookie-consent-content已设置gap，但额外包裹可避免样式冲突）。
隐私政策链接：保持原有新窗口链接打开功能。

Comments

There are no comments for this post yet.