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

随机广告示意
这里我就简单介绍一下多张图片怎么随机显示其中一张,其实并不是很复杂,大家只需要跟着我的步骤操作就行了!
首先是样式,在当前主题目录下的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
然后就大功告成了,觉得有用的童鞋给我点个赞哦!
可以的。
我觉得这个比主题设置要好,不用清空内存缓存,太棒了!必须学习下!
亲,js不规范哟,建议使用jquery的html方法,主题已引用jquery可以直接用的。还有,少添加js文件,你可以将这些较少的独立页面所有的js直接写到对应的页面中。