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

随机广告示意

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

首先是样式，在当前主题目录下的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

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