wordpress如何修改Google AdSense自适应广告代码

现在几乎所有的程序模板都采用响应式主题,通过自适应的方式方便在PC和wap中浏览,大多数网站主、博客主,在网站搭建完成,内容充实以后,都会去申请各种广告联盟,以获得广告收益,相比而言,Google AdSense广告的收益还是非常可观的,而且其代码简洁,自适应广告的方式也省去了很多麻烦。

现在主流的网站程序自适应主题基本上都自带广告模块,可以很简单的在网站后台广告模块添加广告代码实现广告展示。但像wordpress自适应主题是没有单独的移动主题,无法单独设置pc广告代码和移动端广告代码,如果你发现Google AdSense的自适应广告代码无法满足您的所有需求,不妨修改广告代码,更好地满足自适应网站的需求。

下面介绍如何修改自适应代码才能为三类屏幕宽度(即移动设备、平板电脑和桌面设备)设置具体的广告单元尺寸。即使您以前没有任何 CSS 媒体查询或是 AdSense 广告代码修改经验,也可以理解此示例。

下面是一段修改后的自适应广告代码,这段代码会为每种屏幕宽度设置下列确切的广告单元尺寸:

  • 宽度不超过 500 像素的屏幕:320×100 广告单元。
  • 宽度在 500 像素到 799 像素之间的屏幕:468×60 广告单元。
  • 宽度在 800 像素以上的屏幕:728×90 广告单元。

以上广告单元尺寸可在显示广告内容后,根据自身需要在代码中进行适当修改,以达到最完美的广告展示。

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

针对您自己的网站调整此示例代码:

  1. 在您的 AdSense 帐号中创建一个展示广告单元,确保“广告尺寸”部分中的自适应选项保持选中状态。记下自适应广告代码中的以下信息:
    • 发布商 ID,例如 ca-pub-1234567891234567
    • 广告单元 ID (data-ad-slot),例如 1234567890。
  2. 在示例代码中:
    • 将所有 example_responsive_1 实例都替换为唯一名称,例如 Home_Page、front_page_123 等。

      注意事项

      • 您的唯一名称只能包含英文字母 (A-Z)、数字和下划线,且第一个字符必须是英文字母。
      • 您每次调整此示例代码时都必须使用不同的唯一名称。
    • ca-pub-XXXXXXX11XXX9 替换为您自己的发布商 ID。
    • 8XXXXX1 替换为您自己的广告单元 ID。
  3. 决定您希望广告单元在每类屏幕宽度上占据的尺寸:
    • 如果您希望采用示例代码中现有的广告单元尺寸,则不需要做出任何额外更改。
    • 如果您希望根据具体屏幕尺寸设置不同的广告单元尺寸,请在示例代码中进行以下操作:
      • 320px100px 替换为您希望为宽度不超过 500 像素的屏幕使用的广告单元的宽度和高度。
      • 468px60px 替换为您希望为宽度在 500 像素和 799 像素之间的屏幕使用的广告单元的宽度和高度。
      • 728px90px 替换为您希望为宽度超过 800 像素的屏幕使用的广告单元的宽度和高度。
  4. 复制修改后的广告代码,并将其粘贴到您希望展示广告的网页的 HTML 源代码中。
    注意:放置广告代码后,我们建议您在不同的设备和屏幕上测试您的广告,确保自适应功能正常工作。

博主也是通过以上方法对广告代码进行了修改,目前博客已实现主题PC和WAP广告展示。希望此教程可以解决帮到您。

未经允许不得转载:蝈蝈部落格 » wordpress如何修改Google AdSense自适应广告代码
分享到: 生成海报

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录