为WordPress网站文章下方添加关注二维码功能

昨天为大家分享了一篇关于WordPress网站设置百度分享功能的文章,应小伙伴要求,今天在写一篇关于WordPress网站文章下方添加关注二维码功能的文章,希望能帮助到大家更好的引导用户关注自己。

为WordPress网站文章下方添加关注二维码功能插图

后面需要用到的Html+CSS代码

这里我们为大家准备好了相关的html代码与CSS代码,方便大家直接拷贝使用,大家只需要替换html代码部分的相关图片地址即可,CSS代码引用,如果您的主题支持直接使用CSS样式导入,那么你直接导入到你的WordPress主题相关设置区域即可,如果你的WordPress主题设置里没有这个功能,那么您需要将CSS文件引用到文章页面。

html代码部分

<div class="publicNumber"><p class="title-nav">抱团交流</p><h5 style="margin-top:20px">“知识吧”目前开通了微信公众号,扫码关注,邀您一起分享交流。</h5><h5 style="margin-bottom:0px">“干货满满,快点来看噢!</h5><img src="https://tva1.sinaimg.cn/large/a660c8ffly1ge3txqf2y1j20al0amgnn.jpg" data-src="https://tva1.sinaimg.cn/large/a660c8ffly1ge3txqf2y1j20al0amgnn.jpg" alt="" class="Qr lazy"><p class="numberRen">目前100000+人已关注了我们</p><div class="logotoux">
			<img class="lazy" src="https://tva1.sinaimg.cn/large/a660c8ffly1gllc4wjushg2021023t8k.gif" data-src="https://tva1.sinaimg.cn/large/a660c8ffly1gllc4wjushg2021023t8k.gif" alt="">
			<img class="lazy" src="https://tva2.sinaimg.cn/large/a660c8ffly1gllc4s9h08g201x020glf.gif" data-src="https://tva2.sinaimg.cn/large/a660c8ffly1gllc4s9h08g201x020glf.gif" alt="">
			<img class="lazy" src="https://tva4.sinaimg.cn/large/a660c8ffly1gllc4hijh8g201v01y744.gif" data-src="https://tva4.sinaimg.cn/large/a660c8ffly1gllc4hijh8g201v01y744.gif" alt="">
			<img class="lazy" src="https://tva1.sinaimg.cn/large/a660c8ffly1gllc4c9xu8g201z01wt8j.gif" data-src="https://tva1.sinaimg.cn/large/a660c8ffly1gllc4c9xu8g201z01wt8j.gif" alt="">
			<img class="lazy" src="https://tva2.sinaimg.cn/large/a660c8ffly1gllc46xk9qg2021023glm.gif" data-src="https://tva2.sinaimg.cn/large/a660c8ffly1gllc46xk9qg2021023glm.gif" alt="">
			<img class="lazy" src="https://tva3.sinaimg.cn/large/a660c8ffly1gllc401axwg2021023jrd.gif" data-src="https://tva3.sinaimg.cn/large/a660c8ffly1gllc401axwg2021023jrd.gif" alt="">
			<img class="lazy" src="https://tva3.sinaimg.cn/large/a660c8ffly1gllc3tbiqxg2021023gll.gif" data-src="https://tva3.sinaimg.cn/large/a660c8ffly1gllc3tbiqxg2021023gll.gif" alt="">
			<img class="lazy" src="https://tva3.sinaimg.cn/large/a660c8ffly1gllc3j6t6cg2021023aa1.gif" data-src="https://tva3.sinaimg.cn/large/a660c8ffly1gllc3j6t6cg2021023aa1.gif" alt="">
			<img class="lazy" src="https://tva2.sinaimg.cn/large/a660c8ffly1gllc3el4pzg2021023dft.gif" data-src="https://tva2.sinaimg.cn/large/a660c8ffly1gllc3el4pzg2021023dft.gif" alt="">
			<img class="lazy" src="https://tva2.sinaimg.cn/large/a660c8ffly1gllc38q9l1g2021023mx5.gif" data-src="https://tva2.sinaimg.cn/large/a660c8ffly1gllc38q9l1g2021023mx5.gif" alt="">
			<img class="lazy" src="https://tva4.sinaimg.cn/large/a660c8ffly1gllc335pktg20210233yi.gif" data-src="https://tva4.sinaimg.cn/large/a660c8ffly1gllc335pktg20210233yi.gif" alt="">
			<img class="lazy" src="https://tva2.sinaimg.cn/large/a660c8ffly1gllc2yuvzng2021023q2x.gif" data-src="https://tva2.sinaimg.cn/large/a660c8ffly1gllc2yuvzng2021023q2x.gif" alt="">
			</div></div>	

CSS代码部分

.publicNumber {
    width: 676px;
    height:420.375;
    position: relative;
    margin-top:20px;
    padding: 15px;
    max-width: 100%;
    box-shadow: #cccccc 0px 0px 7px;
    border-radius: 15px;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center;
    margin: 0px auto;
    margin-top: 40px;
  }
  .publicNumber h5 {
    font-size: 15px;
  }
  .publicNumber .Qr {
    width: 227px;
  }
  .publicNumber .title-nav {
    font-weight: bolder;
    max-width: 100%;
    width: 130px;
    height: 30px;
    margin: 0px 0px 0px 25px;
    font-size: 16px;
    color: #fff;
    background-image: url("https://www.wordpresscs.com/wp-content/uploads/2019/12/640.png");
    background-repeat: no-repeat;
    background-size: 130px 30px;
    background-position: center center;
    position: absolute;
    top: -10px;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .publicNumber .numberRen {
    text-align: center;
    word-wrap: break-word;
    color: #7f7f7f;
    font-size: 18px;
    margin-bottom: 10px !important;
  }
  .publicNumber .logotoux {
    display: flex;
    justify-content: center;
    width: 30%;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  .publicNumber .logotoux img {
    width: 30px;
    height: 30px;
  }
  @media (max-width: 991.8px) {
    .publicNumber {
      width: 100%;
      position: relative;
      margin: -20px 0px 0px;
      padding: 15px;
      max-width: 100%;
      box-shadow: #cccccc 0px 0px 7px;
      border-radius: 15px;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
      text-align: center;
    }
    .publicNumber h5 {
      font-size: 15px;
      margin-top: 20px;
    }
    .publicNumber .Qr {
      margin-bottom: 10px;
      max-width: 100%;
    }
    .publicNumber .title-nav {
      font-weight: bolder;
      max-width: 100%;
      width: 130px;
      height: 30px;
      margin: 0px 0px 0px 25px;
      font-size: 16px;
      color: #fff;
      background-image: url("https://www.wordpresscs.com/wp-content/uploads/2019/12/640.png");
      background-repeat: no-repeat;
      background-size: 130px 30px;
      background-position: center center;
      position: absolute;
      top: -10px;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
    }
    .publicNumber .numberRen {
      text-align: center;
      word-wrap: break-word;
      color: #7f7f7f;
      font-size: 18px;
    }
    .publicNumber .logotoux {
      display: flex;
      justify-content: center;
      width: 80%;
      margin: 0 auto;
      flex-wrap: wrap;
    }
    .publicNumber .logotoux img {
      width: 30px;
      height: 30px;
    }
  }

为WordPress网站文章下方添加关注二维码功能

为WordPress网站文章下方添加关注二维码功能插图1

上面是我们最终要实现的WordPress网站文章下方添加关注二维码功能最终样式,是不是挺漂亮的?大家有没有心动呢?是不是也想要一个这样的WordPress网站文章下方添加关注二维码功能,接下来就跟我一起动起手来吧。

操作步骤:

为WordPress网站文章下方添加关注二维码功能插图2

第一步:我们在WordPress网站后台的“外观”里找到“主题编辑器”并点击进入;

为WordPress网站文章下方添加关注二维码功能插图3

第二步:我们在“主题编辑器”的右侧找到“文章页面”模板文件“single.php”并选中;

为WordPress网站文章下方添加关注二维码功能插图4

第三步:我们在“文章页面”模板文件“single.php”找到合适的位置,将我们前面准备好的html代码复制进去,最后更新文件;

为WordPress网站文章下方添加关注二维码功能插图5

第四步:我们在WordPress主题的相关自定义CSS样式窗口,将我们的CSS代码复制进去并保存。

为WordPress网站文章下方添加关注二维码功能插图6

最后大家刷新一下我们的WordPress网站文章页面看看吧,一个美观漂亮的二维码关注功能就设置好了,是不是挺漂亮。

最后结语:

好了关于WordPress网站文章页面添加二维码关注功能就分享完了,如果你在建站过程中遇到任何问题,欢迎大家通过公众号与我们联系,另外大家也可以多多关注我们的网站,我们会努力为大家更新各种网站知识,让大家能更好的解决所遇到的网站问题,建网站就少不了租用服务器,最后在给大家推荐个便宜服务器吧。

阿里云8核16G云服务器3年只需要¥2047点击这里直达

未经允许不得转载:新手建站 » 为WordPress网站文章下方添加关注二维码功能

赞 (41) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏