登录时绕过Cloudflare缓存以在首页显示额外菜单项的方案求助

方案1：通过Cloudflare Cookie规则区分登录/未登录用户缓存 #

• 核心逻辑：WordPress登录后会生成wordpress_logged_in_开头的Cookie，让Cloudflare检测到该Cookie时绕过缓存，直接返回动态页面；未登录用户则走「Cache Everything」的静态缓存。
• 操作步骤：
  1. 进入Cloudflare控制台，找到「页面规则」页面。
  2. 创建新规则，匹配路径设为你的首页（比如example.com/*或仅首页example.com/）。
  3. 添加规则设置：选择「缓存级别」→「绕过缓存」，匹配条件选「Cookie」→「包含」，填入wordpress_logged_in_。
  4. 保存规则后，未登录用户仍享受全缓存加速，登录用户会获取动态生成的带专属菜单项的页面。

方案2：前端JS动态插入个性化菜单项（无服务器缓存依赖） #

• 核心逻辑：页面整体走Cloudflare静态缓存，通过前端JS实时判断用户登录状态，动态添加菜单项，完全不影响缓存效率。
• 实现步骤：
  1. 在WordPress主题的functions.php中注册一个AJAX接口，用于验证用户登录状态：

     add_action('wp_ajax_check_login_status', 'check_login_status');
     add_action('wp_ajax_nopriv_check_login_status', 'check_login_status');
     function check_login_status() {
         echo json_encode(array('logged_in' => is_user_logged_in()));
         wp_die();
     }
     

  2. 在主题的导航模板中，提前准备好专属菜单项的HTML结构（隐藏状态）：

     <li id="custom-logged-in-menu" style="display:none;"><a href="/your-custom-url">专属菜单项</a></li>
     

  3. 在主题的footer.php中添加JS代码，请求AJAX接口并动态显示菜单项：

     document.addEventListener('DOMContentLoaded', function() {
         fetch('/wp-admin/admin-ajax.php?action=check_login_status')
             .then(response => response.json())
             .then(data => {
                 if (data.logged_in) {
                     document.getElementById('custom-logged-in-menu').style.display = 'block';
                     // 或者根据导航结构插入到指定位置，比如：
                     // document.querySelector('.main-menu').appendChild(document.getElementById('custom-logged-in-menu'));
                 }
             });
     });
     

  4. 确保AJAX接口的URL正确，且这段JS内联在页面中，避免静态缓存覆盖。

方案3：使用Cloudflare ESI动态渲染个性化片段 #

• 核心逻辑：将专属菜单项作为独立的Edge Side Includes（ESI）片段，Cloudflare缓存页面主体部分，仅动态渲染ESI片段，兼顾缓存速度与个性化内容。
• 操作步骤：
  1. 在WordPress主题中创建一个单独的PHP文件（比如logged-in-menu.php），用于输出专属菜单项：

     <?php
     require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
     if (is_user_logged_in()) {
         echo '<li><a href="/your-custom-url">专属菜单项</a></li>';
     }
     ?>
     

  2. 在主题的导航模板中，用ESI标签替换原菜单项位置：

     <esi:include src="/wp-content/themes/your-theme/logged-in-menu.php" />
     

  3. 进入Cloudflare控制台，在「缓存」→「缓存规则」中启用ESI功能，并为该ESI片段设置「绕过缓存」规则，确保每次请求都动态生成。
  4. 注意：需确保服务器支持ESI，且Cloudflare的计划包含ESI功能（部分免费计划可能不支持）。

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