当前位置:万花网 > Wordpress建站 > 正文

wordpress页面结合JS添加随机图片广告!

Tips:本文最后更新于【 2019-06-27 18:49:58 】,某些文章具有时效性,若有错误或已失效,请在下方留言或联系小P君

今天研究了一下,发现文章页面的上面空荡荡的,索性就加个广告吧,本来是只放一张图片,感觉太单调,怎么能弄几张广告,然后随机显示呢?

wordpress页面结合JS添加随机图片广告!

随机广告示意

这里我就简单介绍一下多张图片怎么随机显示其中一张,其实并不是很复杂,大家只需要跟着我的步骤操作就行了!

首先是样式,在当前主题目录下的syle.css最下方,各个主题不一样,有可能是main.css,等等,这个自己找一下主题的主样式表,添加如下CSS;

/*顶部广告测试*/
@media screen and (max-width:768px){
    .top-gg{
        display:none !important;
    }
}
/*上面的内容是我为了在手机端不显示广告设置的,你可以根据自己需求,不需要删除即可*/
.top-gg {
	margin: 15px auto 0;
	text-align: center;
	padding-bottom:15px;	
}
.top-gg img {	
	-webkit-border-radius: 6px;
	-ms-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px
}
.top-gg a  :hover {
	border: 1px solid #bbb
}
.top-gg a img {
	border: 1px solid #d6d6d6
}

样式设置好了,那么我们来设置广告的内容,如下;

var p=4;
var q=Math.floor(Math.random()*p+1)
switch(q)
{
case 1:
document.writeln("<a href='https://www.vanhua.cn/907.html' target='_blank' rel='nofollow noopener'><img src='https://www.vanhua.cn/wp-content/uploads/2019/06/1380150广告模板002.png'></a>");
break;
case 2:
document.writeln("<a href='https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=9jsxrhg8' target='_blank' rel='nofollow noopener'><img src='https://www.vanhua.cn/wp-content/uploads/2019/06/1380150广告模板003.png'></a>");
break;
case 3:
document.writeln("<a href='http://wpa.qq.com/msgrd?v=3&uin=281140032&site=qq&menu=yes' target='_blank' rel='nofollow noopener'><img src='https://www.vanhua.cn/wp-content/uploads/2019/06/1380150广告模板004.png'></a>");
break;
case 4:
document.writeln("<a href='这里是图片链接内容的地址' target='_blank' rel='nofollow noopener'><img src='这里是图片地址'></a>");
break;		
}

这里我们需要注意的是,随机显示图片多少根据自己的需求修改

(譬如,你要显示的随机图片是4张,就是上面的样式)

假如你要显示的图片为三张,那么将最上面的4改为3,从case 4到大挎号之前全部删除,就可以;怎么增加减少,这里就不多赘述了!

好了,将上述内容存储为 topgg.js,上传到你主题目录下的js文件夹内;

在你需要放置广告内容的位置,引用js即可;如下;

譬如我要引用的位置是当面主题目录下的文章页面上方,那么我们找到当面主题的 single.php ,打开,在你需要的位置放置 ;

<!--顶部广告-->
<div class="top-gg">
	<script type="text/javascript" src="这里就是的刚刚传上去的topgg.js的位置"></script>
</div>
<!--顶部广告-->

引用js的位置,譬如 /wp-content/themes/你主图的名字/js/topgg.js

然后就大功告成了,觉得有用的童鞋给我点个赞哦!

感觉很棒!可以赞赏支持我哟~

赞(1) 打赏
作者保留所有权,侵删请联系,转载请注明: » 万花网 » wordpress页面结合JS添加随机图片广告!

低至¥89元/年限时抢

抢阿里云服务器1折起代金券

立即抢购

评论3

  1. #1

    可以的。

    奶爸de笔记7个月前 (06-27)回复
  2. #2

    我觉得这个比主题设置要好,不用清空内存缓存,太棒了!必须学习下!

    缙哥哥7个月前 (06-30)回复
  3. #3

    亲,js不规范哟,建议使用jquery的html方法,主题已引用jquery可以直接用的。还有,少添加js文件,你可以将这些较少的独立页面所有的js直接写到对应的页面中。

    代码狗7个月前 (07-03)回复