咨询：WordPress点击导航栏按钮切换首页背景图片的方法

可以通过自定义JavaScript实现，不需要额外插件，以下是两种可行方案：

方案一：使用LocalStorage传递切换状态 #

这种方法通过本地存储标记告诉首页需要切换背景，适合「仅点击该按钮时才触发切换」的场景：

1. 给导航按钮添加自定义CSS类
   进入WordPress后台「外观 → 菜单」，打开顶部「屏幕选项」，勾选「CSS类」，给返回首页的菜单项添加home-switch-bg类。

2. 添加自定义JavaScript代码
   可通过「外观 → 自定义 → 额外代码 → 自定义JavaScript」添加，或把代码放到主题footer.php文件的</body>标签前：

   document.addEventListener('DOMContentLoaded', function() {
     // 监听导航按钮点击事件
     const homeBtn = document.querySelector('.home-switch-bg');
     if (homeBtn) {
       homeBtn.addEventListener('click', function(e) {
         e.preventDefault();
         // 存储切换背景的标记
         localStorage.setItem('switchHomeBg', 'true');
         // 跳转到首页
         window.location.href = this.href;
       });
     }
   
     // 首页加载时检测标记并切换背景
     if (document.body.classList.contains('home') && localStorage.getItem('switchHomeBg') === 'true') {
       // 替换为你首页背景元素的选择器（比如body、#home-banner等）
       const bgElement = document.querySelector('body');
       if (bgElement) {
         // 示例：切换到指定图片，也可改成随机切换
         bgElement.style.backgroundImage = 'url("你的图片URL")';
         // 随机切换示例：
         // const bgList = ['url("img1.jpg")', 'url("img2.jpg")', 'url("img3.jpg")'];
         // bgElement.style.backgroundImage = bgList[Math.floor(Math.random() * bgList.length)];
       }
       // 清除标记，避免刷新首页重复触发切换
       localStorage.removeItem('switchHomeBg');
     }
   });
   

方案二：使用URL参数传递状态 #

通过给首页URL添加参数，让首页识别并切换背景，适合需要追踪跳转来源的场景：

1. 给导航按钮添加自定义CSS类
   同方案一，添加home-switch-bg类。

2. 添加自定义JavaScript代码

   document.addEventListener('DOMContentLoaded', function() {
     // 修改导航按钮的跳转链接
     const homeBtn = document.querySelector('.home-switch-bg');
     if (homeBtn) {
       homeBtn.addEventListener('click', function(e) {
         e.preventDefault();
         // 拼接带参数的首页链接
         const targetUrl = this.href + (this.href.includes('?') ? '&' : '?') + 'switch-bg=1';
         window.location.href = targetUrl;
       });
     }
   
     // 首页检测URL参数并切换背景
     const urlParams = new URLSearchParams(window.location.search);
     if (urlParams.has('switch-bg')) {
       const bgElement = document.querySelector('body');
       if (bgElement) {
         // 替换为你的图片列表
         const bgImages = [
           'url("' + wp.themeUrl + '/images/bg1.jpg")',
           'url("' + wp.themeUrl + '/images/bg2.jpg")'
         ];
         bgElement.style.backgroundImage = bgImages[Math.floor(Math.random() * bgImages.length)];
       }
     }
   });
   

3. （可选）传递主题URL到JS
   如果使用主题内的图片，在主题functions.php中添加代码，让JS能获取主题路径：

   function custom_bg_enqueue_scripts() {
     wp_enqueue_script('custom-bg-script', get_template_directory_uri() . '/js/custom-bg.js', array('jquery'), '1.0', true);
     wp_localize_script('custom-bg-script', 'wp', array(
       'themeUrl' => get_template_directory_uri()
     ));
   }
   add_action('wp_enqueue_scripts', 'custom_bg_enqueue_scripts');
   

   之后把JS代码放到主题的js/custom-bg.js文件中即可。

注意事项 #

• 替换代码中的背景元素选择器和图片URL为你的实际内容
• 若首页使用了缓存插件，测试前需清除缓存
• 若主题不支持自定义代码添加，建议通过子主题修改文件

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