当前位置:首页 > 原创教程 > 正文

给网站加一个广告弹窗

博客的服务器月底到期,原本准备和彩虹或者神龟蹭一个服务器挤挤的,结果某老板刚好有一台服务器闲置就顺手给我了。

白嫖的服务器,自然是有一定的使用条件,最后谈拢后答应帮他加一个广告。

一般的博客主题都会有广告位,通常在后台的小工具里找得到。

我的也有,但我实在是没找到一个很满意的广告位置,就只好自己造一个出来了。

首先理一理自己的思路,我希望这个广告:

  1. 是个页面弹窗,可以点击关闭
  2. 只出现一次,避免造成用户体验过差
  3. 手机别弹窗了,用户体验会很差的
  4. 代码量要少,毕竟我是个不会写代码的人

接着判断一下自己需要的东西,重复造轮子的事情我是不愿意去做的,选择一个成熟的web弹出层可以让我避免兼容性等各种问题。

我比较倾向于layer这个轮子:

官网的一段自夸:

layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被10031412人次关注)。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。

layer 采用 MIT 开源许可证,将会永久性提供无偿服务。因着数年的坚持维护,截至到2017年9月13日,已运用在超过 30万 家 Web 平台,其中不乏众多知名大型网站。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案,并且她仍在与 Layui 一并高速发展。

实际上这个轮子确实非常棒,我便从官网http://layer.layui.com/ 下来到了这个45k的小东西。

把里面的layer文件夹解压出来,上传到博客的模板目录里

为了防止js异常导致页面空白,所以我把调用弹窗的代码加到模板中的footer.php里,这样弹窗就会作用于整个站点。

<?php if ( !wp_is_mobile() ) { ?>
<script type="text/javascript" src="https://www.muruoxi.com/wp-content/themes/CKoo/layer/layer.js"></script>
<script>
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return true;
else
return false;
}
;!function(){
layer.ready(function(){ 
  if(!getCookie('heijinka')){
    layer.open({
    type: 1,
    title: '这是一个神奇的二维码,你不试着扫一下吗?',
    maxmin: true,
    area: ['800px', '450px'],
    content: '<img style="height:400px;width:auto;" src="https://www.muruoxi.com/wp-content/themes/CKoo/20191021231844.jpg" alt="环球黑金卡骑士卡免费领取"/>',
    end: function(){
      document.cookie="heijinka=true";
    }
  });
  }
});
}();
</script>
<?php } ?>

其中,wp_is_mobile()是WordPress内置函数,用来判断是否为移动设备访问,getCookie是自己写的函数,用来读取浏览器里的cookies,如果读取到名为heijinka的cookies,说明已经弹窗过了,载入其他页面就不需要弹窗了。https://www.muruoxi.com/wp-content/themes/CKoo/layer/layer.js这个路径我用了绝对路径,你可以根据自己之前上传的layer文件夹去修改。但请注意,必须在jq加载后才能加载它。

如果需要我帮忙改成其他博客或网站适用版本,或者其他需求的请留言。


 

本博客资源若无特殊说明,均为和谐版本,无需付费,我不搞软件的会员,也不接受指定的和谐业务。

 

软件无法下载/安装/其它电脑问题,免费加企鹅群:709531763

有问题加上面的群,直接群里问,在线的时候有问必答,私聊一般都不看

想打赏微信扫右边的二维码

 
文章标题:给网站加一个广告弹窗
本文作者:慕若曦
发表日期:2019-10-23 03:05 星期三    首发于    暮若夕
本文固定链接: https://www.muruoxi.com/jiaocheng/4322.html
 
文章标签:
上一篇: 下一篇:

10 条评论

评论加载中...
  1. 6楼
    威航软件园   

    请问帝国cms可以用吗?

    2019年10月28日 上午12:31 评论
  2. 5楼
    心灵博客   

    发了广告还普及了技术知识,真棒

    2019年10月25日 上午12:25 评论
  3. 4楼
    阳光之海   

    学习到了

    2019年10月24日 下午7:18 评论
  4. 地板
    灰常记忆   

    技术大佬,啥都会搞。

    2019年10月24日 下午3:46 评论
    • 慕若曦   

      小灰你已经是季更博主嘞(#゚Д゚)

      2019年10月25日 上午12:52 评论
  5. 板凳
    双双对对爸爸   

    不知道这样的体验好不好。

    2019年10月23日 下午11:41 评论
    • 慕若曦   

      已经算可以了,挂在首页一直让人看着的话我会烦,挂载内页没人看的话老板会烦,权衡以后就这样做了。

      2019年10月25日 上午12:39 评论
  6. 沙发
    姜辰   

    45k?好大啊~

    = =、对了,我觉得这个广告非常好。(

    2019年10月23日 下午4:21 评论

发表评论

╮( ̄▽ ̄)╭ |  (= ̄ω ̄=) |  (>﹏<) |  Σ( ° △ °|||)︴ |  Σ(っ °Д °;)っ |  X﹏X |  (╯-_-)╯╧╧

小提示:提交评论后刷新本页面即可看到隐藏的文件哦~
加载中……