请求协助：为WP站点移动端添加按OS跳转的可点击广告横幅

1. 编写操作系统检测与跳转逻辑 #

先准备一段JavaScript代码，用于识别用户的移动操作系统，并在点击横幅时跳转到对应应用商店。请将代码中的你的Play Store链接和你的Apple Store链接替换为实际地址：

function handleBannerClick() {
    const userAgent = navigator.userAgent.toLowerCase();
    let storeUrl = '';
    
    if (userAgent.includes('android')) {
        storeUrl = '你的Play Store链接';
    } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
        storeUrl = '你的Apple Store链接';
    }
    
    if (storeUrl) {
        window.location.href = storeUrl;
    }
}

2. 在WordPress中添加广告横幅 #

你可以通过以下两种常用方式添加横幅：

方法一：自定义HTML小工具

• 进入WordPress后台 → 外观 → 小工具
• 找到「自定义HTML」小工具，添加到侧边栏、页脚等适合展示的区域（推荐选择移动端专属展示区域）
• 在小工具中插入横幅HTML和JS代码：

<div class="mobile-ad-banner" onclick="handleBannerClick()">
    <!-- 替换为你的广告内容，比如图片或文字 -->
    <img src="你的广告图片地址" alt="应用下载广告">
</div>

<script>
function handleBannerClick() {
    const userAgent = navigator.userAgent.toLowerCase();
    let storeUrl = '';
    
    if (userAgent.includes('android')) {
        storeUrl = '你的Play Store链接';
    } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
        storeUrl = '你的Apple Store链接';
    }
    
    if (storeUrl) {
        window.location.href = storeUrl;
    }
}
</script>

方法二：直接编辑主题模板

如果希望横幅固定显示在页面顶部或底部，可编辑主题的模板文件：

• 进入WordPress后台 → 外观 → 主题文件编辑器
• 找到header.php或footer.php文件，在<body>标签内合适位置插入以下代码：

<div class="mobile-ad-banner" onclick="handleBannerClick()">
    <img src="你的广告图片地址" alt="应用下载广告">
</div>

<script>
function handleBannerClick() {
    const userAgent = navigator.userAgent.toLowerCase();
    let storeUrl = '';
    
    if (userAgent.includes('android')) {
        storeUrl = '你的Play Store链接';
    } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
        storeUrl = '你的Apple Store链接';
    }
    
    if (storeUrl) {
        window.location.href = storeUrl;
    }
}
</script>

3. 添加样式控制（仅移动端显示） #

为避免横幅在桌面端展示，添加以下CSS代码（可通过外观 → 自定义 → 额外CSS入口添加）：

/* 桌面端隐藏横幅 */
.mobile-ad-banner {
    display: none;
    cursor: pointer;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* 移动端显示横幅 */
@media (max-width: 768px) {
    .mobile-ad-banner {
        display: block;
    }
    .mobile-ad-banner img {
        width: 100%;
        height: auto;
    }
}

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