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

zhezhongyun 2025-03-19 18:35 14 浏览

导读：在文章文末增加二维码也是网站常见的功能，一般在自己的文章文末添加本站的微信公众号二维码，微信二维码、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、代码：


加入官方2000人QQ群一起交流



关注官方微信公众号[站长在线]

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

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

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


加入官方2000人QQ群一起交流



关注官方微信公众号[站长在线]

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

mip的网站代码是：

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

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

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

标签

上一篇：一文带你理清同源和跨域（跨域同源策略）
下一篇：简单了解CSS3的all属性（css3所有属性）

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

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?