如何添加网站文章文末二维码？给文章文末添加二维码的代码是什么？

导读：在文章文末增加二维码也是网站常见的功能，一般在自己的文章文末添加本站的微信公众号二维码，微信二维码、QQ二维码、QQ群二维码等，那样阅读过本文的网友，如果需要交流的话，可

导读：在文章文末增加二维码也是网站常见的功能，一般在自己的文章文末添加本站的微信公众号二维码，微信二维码、qq二维码、qq群二维码等，那样阅读过本文的网友，如果需要交流的话，可以迅速的可以通过QQ、QQ群、微信、微信群来相互交流。

本文就以站长在线使用的mip建站系统为例，来教大家怎么在自己的网站的文章末尾添加两张二维码。

要想实现文末添加二维码，有两个部分需要添加：一个是css里面添加该代码的css，一个是在网站模板里面添加html代码。

一、在当前页面的css文件里面添加css：

.wmewm {width:300px; height: 150px;}
.wxewm {width:150px; height: 150px; float:left;clear:left;}
.gzhewm {width:150px; height: 150px; float:right;clear:right;}

自定义.wmewm就是 文末二维码的简写，宽度为300px，高度为150px，当然这个自定义的名称和高度，宽度自己随意。

自定义.wxewm 就是微信二维码的简写，宽度为150px，高度为150px,当然这个自定义的名称和高度，宽度自己随意。

自定义.gzhewm就是公众号二维码的简写，，宽度为150px，高度为150px,当然这个自定义的名称和高度，宽度自己随意。

上面的意思就是，一个大的div里面，有两个并排的小div，大的div高是150，宽是300，而两个小的div的宽和高都是150.

二、在网页模板里面添加html代码：

这个文末二维码，实际上也就是一个广告位而已，添加代码的步骤如下：

2.1、后台--插件--广告管理--添加广告

2.2、添加内容是：

2.2.1、名称：文末二维码

2.2.2、别名：wmewm

2.2.3、代码：

<div align="center">
<div class="wmewm" align="center">加入官方2000人QQ群一起交流<div class="wxewm"><mip-img src="https://www.olzz.com/img/qqun.png" alt="2000人QQ群"></mip-img></div>
<div class="gzhewm"><mip-img src="https://www.olzz.com/img/wxgzh.jpg" alt="微信公众号二维码"></mip-img></div>

</div>
关注官方微信公众号[站长在线]
</div>

2.2.4、复制调用代码{mipjz:ad name='wmewm' /}到文章详情页模板articleDetail.html里面的 {$itemInfo['mipContent']}后面，上一篇下一篇的前面即可。

注：站长在线的diy模板，在模板制作的时候，已经写入了，文末二维码的调用代码了和css代码了，只需要在后台添加这个广告即可。

上面讲的MIP建站系统的代码，如果是传统的dedecms、wordpress、PHPcms、帝国等非mip的网站的话，把mip-img的标签改成img标签即可，即：

<div align="center">
<div class="wmewm" align="center">加入官方2000人QQ群一起交流<div class="wxewm"><img src="https://www.olzz.com/img/qqun.png" alt="2000人QQ群"></div>
<div class="gzhewm"><img src="https://www.olzz.com/img/wxgzh.jpg" alt="微信公众号二维码"></div>

</div>
关注官方微信公众号[站长在线]
</div>

这样添加以后，前台的文末就会显示你添加的两张二维码了，当然如果你这是想添加一张文末图片的话，那就简单得多啦！不需要写css规则，直接在模板文件里面添加一张图片的HTML代码即可：

mip的网站代码是：

<div align="center"><mip-img src="https://www.olzz.com/img/wxgzh.jpg" alt="微信公众号二维码"></mip-img></div>

普通的如wordPress、dedecms、phpcms就是在模板页面里面添加：

<div align="center"><img src="https://www.olzz.com/img/wxgzh.jpg" alt="微信公众号二维码"></div>

当然，图片还是可以带上链接的，我这里就不带链接了。

正在阅读的你，学会了如何添加网站文章文末二维码了吗？有自己网站的赶快去实践体验一下哦，建站的经验，全部来自于实践，赶快动手吧！欢迎进群，一起交流学习，共同进步！

猜你喜欢