WordPress新手求助：点击按钮更换着陆页背景图片分步指导

步骤1：准备背景图片 #

• 登录WordPress后台，进入「媒体」→「添加新文件」，上传所有要用来切换的背景图
• 上传完成后，点击每张图片，在右侧面板复制「文件URL」，把这些URL整理好备用

步骤2：给着陆页添加切换按钮 #

• 打开你的着陆页编辑器：
  • 古腾堡编辑器：点击左上角「+」，搜索「自定义HTML」模块，添加到页面合适位置，插入代码：<button id="bg-switch-btn">切换背景</button>
  • 经典编辑器：切换到「文本」模式，直接粘贴上面的按钮代码

步骤3：添加切换功能的JavaScript代码 #

方法A：用主题自定义工具（推荐） #

• 后台进入「外观」→「自定义」，找到「额外CSS/JS」「自定义代码」这类选项（不同主题命名可能不同）
• 切换到JS编辑区域，粘贴以下代码，记得把bgImages数组里的URL替换成你自己的图片链接：

// 替换成你上传的背景图URL
const bgImages = [
  'https://你的域名/wp-content/uploads/2024/0x/图1.jpg',
  'https://你的域名/wp-content/uploads/2024/0x/图2.jpg',
  'https://你的域名/wp-content/uploads/2024/0x/图3.jpg'
];

const switchBtn = document.getElementById('bg-switch-btn');
// 这里默认给整个页面body加背景，若要给特定区块，替换成区块的ID，比如document.getElementById('hero-area')
const targetContainer = document.body;

switchBtn.addEventListener('click', function() {
  // 随机选一张图
  const randomIdx = Math.floor(Math.random() * bgImages.length);
  // 设置背景样式
  targetContainer.style.backgroundImage = `url(${bgImages[randomIdx]})`;
  // 优化背景显示效果（可选，可根据需求调整）
  targetContainer.style.backgroundSize = 'cover';
  targetContainer.style.backgroundPosition = 'center';
  targetContainer.style.backgroundRepeat = 'no-repeat';
});

• 点击「发布」保存自定义设置

方法B：用插件添加代码（主题无自定义JS选项时用） #

• 后台进入「插件」→「添加新插件」，搜索「Insert Headers and Footers」并安装激活
• 进入「设置」→「Insert Headers and Footers」，在「Body」输入框粘贴上面的JS代码，保存即可

步骤4：调整目标容器（可选） #

如果你的背景不是给整个页面，而是着陆页的某个特定区块（比如首屏hero区）：

• 打开前端着陆页，右键点击目标区块→「检查」，找到该区块的ID（比如landing-hero）
• 修改JS代码里的const targetContainer = document.body，替换成const targetContainer = document.getElementById('landing-hero')

步骤5：测试功能 #

保存所有设置后，刷新前端着陆页，点击「切换背景」按钮，检查图片是否能随机切换显示

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