wordpress以短代码插入广告到文章页 简码插入自定义模块代码

wordpress建站有一个好处就是可以有很多功能可以自己去尝试，除了主题自带的广告功能，我们想在文章中随意插入自定义模块都需要复制粘贴代码，这样有些太麻烦了。那么有没有一种方式可以将广告以短代码形式插入文章，实现用简码插入自定义模块代码功能呢？今天就分享一下这个功能。

要实现用短代码方式任意插入自定义模块的话，我的网站需要三个步骤。当然，大家不喜欢这个广告代码可以替换成自己的代码即可，重要的是functions中的代码。

1、设置自定义模块CSS

将下面的CSS代码放入主题的CSS文件或者自定义代码。

/*自定义模块CSS */
.amtj-title{
font-size: 16px;
margin-bottom: 15px;
color: #333;
}

.amtj-list{
margin-top: 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: 1px solid #e4e4e4;
margin-bottom: 12px;
padding: 20px;
}

.amtj-list .am-content {
display: flex;
justify-content: space-between;
align-items: center;

}

.amtj-list .am-content .am-rom {
width: 100%;
padding-left: 20px;
}

.amtj-list .am-content .am-title {
border-bottom: 1px solid #e4e4e4;
padding-bottom: 10px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
}

.amtj-list .am-content .am-title h3{
font-size: 18px;
font-weight: bold;
color: #333;
}

.amtj-list .am-content .am-rom button{
width: 110px;
height: 36px;
background: #fe8431;
color: #fff;
border-radius: 2px;
border: 1px solid #fe8431;
margin-left: 110px;

}

@media screen and (max-width: 768px){
.amtj-list li {
width: 100%; 
}
}
/*结束*/

上面的CSS是搭配以下的div代码展示：

<div class="amtj-list">
<div class="am-content">
<div><img src="https://www.yunmen.cc/wp-content/uploads/2022/08/c4ca4238a0b9238-1.jpg" alt="阿里云代金券" /></div>
<div class="am-rom">
<div class="am-title">
<div class="am-sale">
<h3>阿里云代金券 新用户专享礼遇</h3>
</div>
</div>
<div class="am-content">阿里云200+款云产品通用！<a href="https://www.aliyun.com/minisite/goods?userCode=0a5rig7f" target="_blank" rel="noopener nofollow">
<button class="cheng-button">点击查看</button></a></div>
</div>
</div>
</div>
</div>

2、将下面的代码放入主题的functions文件并保存。

/* 自定义短代码 */
//短代码函数
function wpb_demo_shortcode_2() {

//广告代码赋值给一个变量
$string .= '<div class="amtj-list">
<div class="am-content">
<div><img src="https://www.yunmen.cc/wp-content/uploads/2022/08/c4ca4238a0b9238-1.jpg" alt="阿里云代金券" /></div>
<div class="am-rom">
<div class="am-title">
<div class="am-sale">
<h3>阿里云代金券 新用户专享礼遇</h3>
</div>
</div>
<div class="am-content">阿里云200+款云产品通用！<a href="https://www.aliyun.com/minisite/goods?userCode=0a5rig7f" target="_blank" rel="noopener nofollow">
<button class="cheng-button">点击查看</button></a></div>
</div>
</div>
</div>
</div>';

//返回广告代码
return $string; }

//注册短代码

add_shortcode('ad_123', 'wpb_demo_shortcode_2');

3、在编辑文章时，需要插入的地方输入简码[ad_123]即可。