第一步：获取百度商桥代码
在您开始之前,请确保您已经注册并登录了百度商桥的后台。
-
登录百度商桥后台： 访问 https://shangqiao.baidu.com/ 并使用您的百度账号登录。
-
进入代码获取页面： 登录后，在左侧菜单栏中找到 【代码管理】 或类似名称的选项（有时也叫“安装代码”或“获取代码”）,点击进入。
-
选择代码样式和获取代码：
- 选择样式：百度商桥提供了多种悬浮按钮的样式（如默认、简约、图标等）,您可以根据自己网站的审美进行选择。
- 获取代码：选择好样式后，页面会生成一段 JavaScript 代码。请完整复制这段代码。
提示：代码通常是一段以 <script> 开头，以 </script> 结尾的 JavaScript 代码。
第二步：将代码安装到网站
将获取到的代码安装到网站，有几种常见的方法,您可以根据自己的技术能力和网站类型选择最适合的一种。
手动添加代码（最常用、最灵活）
这是最直接的方法，适用于所有类型的网站，您需要将代码添加到网站所有页面的 <body> 标签内的末尾，即在 </body> 之前。
为什么放在 <body> 末尾？
这样可以确保在加载商桥插件之前，网页的主要内容已经加载完毕,避免影响网站的打开速度。
操作步骤：
-
登录您的网站后台：
- WordPress 网站：登录 WordPress 后台。
- 其他 CMS/自定义网站：通过 FTP 或主机控制面板访问网站文件。
-
找到并编辑模板文件：
-
对于 WordPress 网站（推荐使用子主题或代码片段插件）：
- 方法 A（最安全）：安装代码片段插件
- 在 WordPress 后台，进入【插件】->【安装插件】，搜索 "Code Snippets" 或 "WPCode"。
- 安装并激活插件。
- 在左侧菜单找到【代码片段】->【添加新】。
- 点击【自定义代码】。
- 在代码框中粘贴您复制的百度商桥代码。
- 在【执行位置】中选择【在站点前台的所有页面上运行】。
- 保存更改并启用此代码片段，这是最推荐的方法,不会因主题更新而丢失。
- 方法 B：编辑
footer.php文件- 进入【外观】->【主题文件编辑器】。
- 在右侧文件列表中找到并点击
footer.php。 - 在文件中找到
</body>- 将 完整的 百度商桥代码粘贴到
</body>标签的正上方。- 点击【更新文件】保存。 注意：直接编辑主题文件有风险,更新主题后代码可能会被覆盖。
- 将 完整的 百度商桥代码粘贴到
- 方法 A（最安全）：安装代码片段插件
-
对于其他网站（如 HTML、PHP、Joomla、Drupal 等）：
- 通过 FTP 或文件管理器，找到您网站的全局页脚模板文件，通常名为
footer.php、footer.html或template.html。 - 用代码编辑器（如 VS Code, Sublime Text, Notepad++）打开该文件。
- 同样，将代码粘贴到
</body>标签之前。 - 保存文件并上传回服务器。
- 通过 FTP 或文件管理器，找到您网站的全局页脚模板文件，通常名为
-
通过第三方插件（仅限 WordPress）
如果您使用的是 WordPress 网站,也可以使用专门的百度商桥插件来简化操作。
-
安装插件：
- 在 WordPress 后台，进入【插件】->【安装插件】。
- 搜索“百度商桥”或“Baidu Shangqiao”。
- 选择一个评价高、安装量大的插件进行安装和激活。
-
配置插件：
- 激活后，在左侧菜单会找到新添加的“百度商桥”或类似选项。
- 进入设置页面，通常只需要粘贴您从百度商桥后台获取的代码即可,插件会自动处理将其添加到网站所有页面的逻辑。
优点：操作非常简单，适合不熟悉代码的用户。 缺点：可能增加网站加载时间,且依赖插件的持续维护。
第三步：验证安装是否成功
安装完成后,您需要验证商桥是否已经成功显示在网站上。
-
清除缓存：
- 浏览器缓存：按
Ctrl + F5(Windows) 或Cmd + Shift + R(Mac) 强制刷新网页。 - 网站缓存：如果您使用了 WP Rocket, W3 Total Cache 等缓存插件，或者开启了 CDN 服务（如 Cloudflare），请务必清除所有缓存,否则可能看不到效果。
- 浏览器缓存：按
-
访问网站：
- 打开您的网站,滚动到页面底部或您预设的悬浮位置。
- 您应该能看到百度商桥的悬浮按钮。
-
点击测试：
点击悬浮按钮，会弹出对话窗口，您可以自己测试一下,看看是否能正常接收消息。
常见问题与注意事项
-
Q: 为什么我添加了代码，但网站上什么都没显示？
- A:
- 代码位置错误：检查代码是否正确放在
</body>标签之前，而不是<head>里。 - 缓存问题：这是最常见的原因,请务必清除浏览器和网站的所有缓存。
- 代码未完整复制：检查复制的代码是否完整,有没有漏掉开头或结尾的部分。
- 网站有错误：检查网站开发者工具（按 F12）的控制台，看是否有 JavaScript 错误。
- 代码位置错误：检查代码是否正确放在
- A:
-
Q: 商桥按钮的位置可以调整吗？
- A: 可以。 百度商桥后台的代码管理页面通常有“样式设置”或“高级设置”选项，您可以在那里调整按钮的悬浮位置（如右下角、左侧等）、颜色和大小，如果您的自定义样式选项有限，也可以通过修改代码本身来实现更精细的控制，但这需要一些 CSS 知识。
-
Q: 我只在某些页面（如首页）显示商桥，可以吗？
- A: 可以。 不要将代码放在全局的
footer.php中，而是将代码只添加到您希望显示商桥的特定页面模板文件中，在 WordPress 中，您可以只编辑page-home.php或front-page.php等特定页面的模板。
- A: 可以。 不要将代码放在全局的
-
Q: 我用的是 HTTPS 网站，商桥能用吗？
- A: 完全可以。 现在的百度商桥代码都支持 HTTPS，只要您的网站是 HTTPS 协议,就能正常工作。
希望这份详细的指南能帮助您成功将百度商桥添加到您的网站！如果您在操作过程中遇到任何具体问题,可以随时追问。
