首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

wordpress js广告

在WordPress中使用JavaScript广告代码,可以通过以下几种方式实现:

使用插件

WordPress社区提供了多种插件来轻松添加和管理广告,例如:

  • Popup Maker:允许创建各种类型的弹窗广告,包括广告弹窗。
  • OptinMonster:功能强大的弹窗广告插件,提供高度定制化的选项。
  • Thrive Leads:基于用户行为触发的弹窗广告插件。

使用自定义代码

如果你希望通过代码来添加广告,可以在WordPress的functions.php文件中添加自定义的JavaScript代码。例如,以下代码将在网站加载时显示一个简单的弹窗广告:

代码语言:txt
复制
<script>
document.addEventListener("DOMContentLoaded", function() {
    var popup = document.getElementById('popup');
    var popup_box = document.querySelector('.popup_box');
    var popup_close = document.querySelector('.popup_close');

    // 窗口加载时弹出
    window.onload = function() {
        popup.style.display = "block";
    }

    // 点击窗体其他位置时关闭
    window.onclick = function(event) {
        if (event.target == popup) {
            popup.style.display = "none";
        }
    }

    popup_box.onclick = function() {
        popup.style.display = "none";
    }

    // 点击关闭按钮时关闭
    popup_close.onclick = function() {
        popup.style.display = "none";
    }
});
</script>

然后,在主题的CSS文件中添加相应的样式:

代码语言:txt
复制
#popup {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    margin: auto;
    background: rgba(36, 36, 36, 0.8);
}
.popup_box {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 280px;
    height: 396px;
    margin: auto;
    text-align: center;
}
.popup_close {
    position: relative;
    width: 36px;
    height: 36px;
    background: #fff;
    color: #999;
    float: right;
    font-size: 24px;
    text-align: center;
    border-radius: 50%;
    line-height: 36px;
    font-weight: bold;
}
.popup_close:hover, .popup_close:focus {
    color: red;
    cursor: pointer;
}
.popup_img {
    position: relative;
    top: 36px;
    left: 0px;
    width:240px;
    height:360px;
    border-radius: 15px;
}

请注意,使用自定义代码或插件添加广告时,应确保遵守相关广告法规和平台政策,避免侵犯用户隐私或违反服务条款。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WORDPRESS 增加广告

在Wordpress侧栏放置广告: 这个最简单也最常见,打开使用中的主题文件夹找到“sidebar.php”,加入下面的代码,把widget改成你主题侧栏使用的样式,活者自定义一个: Ad – Google...这里是广告代码 在Wordpress文章(内容)页放置广告: 这个也比较常见,打开“single.php”,找到“” 在Wordpress日志内容顶部加广告: 在“”上面加上广告代码即可: 如:...广告代码 在Wordpress日志内容下面加广告 方法类似于在日志上面加广告,不同的是广告代码要加在“”下面 广告代码 效果如图: 在Wordpress日志左侧加广告 这种样式的广告最常见,感觉也是最美观的...,有人称这种效果叫“画中画广告”,也就是文字围绕广告。...方法类似于在日志上面加广告,实现的关键是float:left: 广告代码 效果如图: 在Wordpress日%

1.3K30

WORDPRESS 增加广告

在Wordpress侧栏放置广告: 这个最简单也最常见,打开使用中的主题文件夹找到“sidebar.php”,加入下面的代码,把widget改成你主题侧栏使用的样式,活者自定义一个: Ad – Google...这里是广告代码 在Wordpress文章(内容)页放置广告: 这个也比较常见,打开“single.php”,找到“” 在Wordpress日志内容顶部加广告: 在“”上面加上广告代码即可: 如:...广告代码 在Wordpress日志内容下面加广告 方法类似于在日志上面加广告,不同的是广告代码要加在“”下面 广告代码 效果如图: 在Wordpress日志左侧加广告 这种样式的广告最常见,感觉也是最美观的...,有人称这种效果叫“画中画广告”,也就是文字围绕广告。...方法类似于在日志上面加广告,实现的关键是float:left: 广告代码 效果如图: 在Wordpress日% 转载请注明:积木居 » WORDPRESS 增加广告

66520
  • WordPress防屏蔽广告插件AdsMatcher Anti Adblock 防广告被拦截

    AdsMatcher Anti Adblock 是一款用来防止广告被拦截的 WordPress 插件,如果你的站点上投放了广告,而你又不希望用户屏蔽广告,不妨尝试一下这款插件吧。...当用户访问你的站点时,如果开启了广告屏蔽,就会弹窗阻止用户继续浏览你的站点,可以起到防广告被拦截的目的。 1....插件安装 插件官网:https://wordpress.org/plugins/adsmatcher-anti-adblock/ WordPress 后台插件页搜索 “AdsMatcher Anti Adblock...参数设置 将 Title 修改为:“检测到你开启了广告拦截”,将 Message 修改为:“请禁用您的广告拦截器,来支持我们!”。 3. 个性化修改 1....wp_enqueue_script('viewability-checking', 'https://www.adsmatcher.com/api/viewability.min.js'); 4.

    1.7K10

    在WordPress中优化谷歌(AdSense)广告联盟

    image.png 自从前段时间谷歌广告联盟通过以后,也算是比较关注的了 今天来说一下优化吧,在说优化之前,先说一下WordPress常用的页面判断 很多时候我们需要将某些内容在指定的页面中显示,比如将谷歌自动广告设置为不在首页显示...表示非 下面我们就来处理谷歌的广告显示,我选择了自动广告和一个单元广告 自动广告处理 先说自动广告,简单易处理,我不需要在首页显示太多广告,影响美观 js.../adsbygoogle.js:1:74657"} 仔细看了一下,留言簿页面的控制台是正常的,有几个页面没有开启评论功能,所以就报错了 尝试一下是不是因为没有开启评论造成的,然后找了一下WordPress...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:在WordPress中优化谷歌(AdSense)广告联盟

    1.2K30

    WordPress 技巧:使用 Shortcode 投放 Google Adsense 广告

    前面我介绍了 Google Adsense 个人经验总结,今天介绍一个 WordPress 技巧:使用 WordPress 的 Shortcode API 投放 Google Adsense 广告,让你非常方便在文章的正文中插入广告...请示我们可以使用 WordPress 的 Shortcode 来投放 Google Adsense 广告,非常方便。首先简单来了解下什么是 Shortcode。...什么是 Shortcode Shortcode API 是 WordPress 2.5 之后新增的一个功能,简单的说就是事先定义一组的函数,由此生成对应的一个简单的短代码,然后在内容的正文中的任何地方插入这个短代码...比如:[galley] 就是调用 WordPress 默认的相册的短代码,当然也可以带有参数。...更详细信息可以参考: WordPress Shortcode 介绍和详细使用 使用 Shortcode 投放 Google Adsense 广告 把下面的代码保存到你当前的主题的 functions.php

    60310

    HTML被恶意注入JS弹广告

    自己写个的网页上传到阿里云服务器供APP访问,突然发现在手机访问该页面时间歇性的弹出广告。你说膈应人不??...然后再用浏览器访问,查看源码发现在 中多了一行这个东西 http://45.126.123.80:118/j.js?...开始怀疑 买的阿里云服务器被黑了 文件上传软件有漏洞被人恶意篡改了 一番尝试之后 以上两点都不是,是由于上传文件时被运营商拦截了,然后注入上面js代码。...3、我再次连接公司网络,重复1操作,还是出现恶心的js注入。 所以,我不得不把我的所有html页面重新上传覆盖了一遍。。。问题貌似解决了。...总结 网络运营商搞得鬼,拦截你的请求、插入你的代码、然后给你弹出广告、然后自己获利赚钱,整个一套不要脸的流程。

    4.9K20

    WP125: WordPress 的 125×125 广告管理插件

    所以我们需要一个高效的广告管理工具,除了可以使用第三方的广告管理工具(比如:Google DFP,百度广告管家)之外,我们还可以使用 WP125 这个 WordPress 插件来管理博客侧边栏 125X125...WP125 介绍 WP125: WordPress 的 125×125 广告管理插件 WP125 插件也是一个高效的广告管理工具,它能帮你非常高效的管理侧边栏 125X125 广告位,让你专心写日志...WP125 会在 WordPress 后台添加一个 “Ads” 顶级菜单,然后有三个子菜单,分别用来调整设置,添加和管理广告位。 WP125 功能 支持一栏或者两栏广告显示,并且支持模板函数。...WP125 安装 和其他插件安装一样,通过 FTP 直接上传到插件目录,激活即可,也可以直接在 WordPress 后台安装。...WP125 设置和使用 WP125 设置 登录到 WordPress 后台 > Ads > Setting,对 WP125 就行设置: Ad Orientation (广告定位):设置是一栏还是两栏显示

    43210

    移动网页广告引入mraid.js使用指南

    在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能。...,影响了用户看到的广告效果,即可能会降低点击率和转化率。.../mraid_cn/blob/master/mraid_cn.md 开始 1、在网页中首先引入mraid.js【直接引入即可,不需要在本地放mraid.js,页面在支持mraid的app中会自动注入】...js"> 2、在PC端开发完成之后,不方便测试mraid效果,推荐这个网站:http://webtester.mraid.org/ 可以在线设置广告位的宽高...mraid.js,所有事件发生都要在ready之后,mraid.open也需要ready之后,只要引入了mraid.js,就可以识别mraid对应的方法存在,但是事件的执行要在ready事件之后。

    2.3K30

    WordPress首页简单广告框弹窗两种方法实现纯代码+插件

    我们平时访问网站、博客时经常会打开网页后看到弹出一个图片广告。 如果作为普通访客可能会略有抵触,但是作为站长,我们却十分需要这样的广告来为网站赚钱贴补一下服务器维护费用。...建站的朋友将JS代码丢到主题的主JS文件中去即可。...DUX主题用户直接丢到主题 js 文件夹下的 main.js 文件中即可。其他程序建站的朋友可以放到自己相应的JS文件里。...方法二:插件实现 插件是WEB主题公园所开发的 WordPress 首页弹窗广告插件,可以在你的首页设定一个弹框,你可以使用这个功能制作比如广告推荐、中英文切换、功能提示等等功能。...可视化编辑器编辑内容:采用WordPress的编辑器对内容进行编辑,可以上传图片、文字、链接,可编辑图文绕排、图片平行显示等等形式。

    5.5K43
    领券