『教程』在文章内添加滚动广告-梓逸博客

梓逸
2021-08-01 / 0 评论 / 2 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年11月17日,已超过14天没有更新,若内容或图片失效,请留言反馈。

前言

我看到很多人在首页添加广告,但很少在文章里看到广告,(虽然很少有人找我搞广告 表情 )于是就有了这个教程。
本篇教程不只是挂广告教程,还可以给文章广告添加滚动效果哦!

成品展示

电脑端
kvwi8hh5.png
手机端
kvwiab7m.png

教程开始吧!

一、添加后台

打开 functions.php 添加以下代码:

二、添加滚动广告栏

文章页直接在主题的 post.php 文件内合适的地方加入以下代码

三、修改广告栏样式

直接在 Joe/assets/css 打开 joe.post.min.css 然后在最后添加以下代码

.joe_post__ad .swiper-container{height: 180px!important;margin-top:15px;border-radius: var(--radius-inner);}.joe_post__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_post__ad .swiper-container{height: 120px!important}.joe_post__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}
四、添加滚动效果

首先在主题的 post.php 文件内 header标签内加入以下代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>

然后再在 Joe/assets/js 打开 joe.post_page.min.js 然后在这里添加以下代码

if(0!==$(".joe_post__ad .swiper-container").length){let e="vertical";new Swiper(".swiper-container",{keyboard:!1,direction:e,loop:!0,autoplay:!0,mousewheel:!0,pagination:{el:".swiper-pagination"},})}

代码位置

kvwii9ak.png

大功告成
快点去你的网站看看成品吧!
点击链接加入群聊【ZMR博客&MC交流群(2)】:https://jq.qq.com/?_wv=1027&k=MzXzCTRC

0

评论

博主关闭了所有页面的评论