一般主题编辑器增加标签

标签其实WordPress后台编辑器里已经内置了一些标签，但是这些标签远远不能满足我们日常的使用，所以只能我们自己DIY了，

vieu主题增加标签

通过阅读源码我们得知，vieu主题的标签在\vieu\include\modules\mo_editbutton.php目录下，我这里就教大家加几个我经常用到的吧，有

H2毛笔标

H2设置标

H2下载标

H2微信标

H2QQ标

我们只需要将以下代码放进\vieu\include\modules\mo_editbutton.php文件末尾即可
QTags.addButton( ‘H2pen’, ‘H2毛笔标’, ‘<h2 class=”section-title”><span><i class=”fa fa-paint-brush”></i>’, ‘文字</span></h2>’,”,’H2毛笔’ );
QTags.addButton( ‘H2set’, ‘H2设置标’, ‘<h2 class=”section-title”><span><i class=”fa fa-gear”></i>’, ‘文字</span></h2>’,”,’H2设置’ );
QTags.addButton( ‘H2download’, ‘H2下载标’, ‘<h2 class=”section-title”><span><i class=”fa fa-cloud-download”></i>’, ‘文字</span></h2>’,”,’H2下载’ );
QTags.addButton( ‘H2wechat’, ‘H2微信标’, ‘<h2 class=”section-title”><span><i class=”fa fa-wechat”></i>’, ‘文字</span></h2>’,”,’H2微信’ );
QTags.addButton( ‘H2mht’, ‘H2QQ企鹅标’, ‘<h2 class=”section-title”><span><i class=”fa fa-qq”></i>’, ‘文字</span></h2>’,”,’H2QQ’ );

代码解析

QTags.addButton( ”, ”, ”, ” );
【四对引号，分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容（最后一对引号为空则一次输入全部内容），\n表示换行】
形象说明： QTags.addButton( ‘ 按钮ID’, ‘按钮显示名’, ‘点一下输入内容’, ‘点一下关闭内容’ );

可以自定义添加多行 QTags.addButton( ”, ”, ”, ” ); 增加多个按钮！

然后添加样式文件到/vieu/static/css/main.css文件，将以下代码添加进main.css末尾即可，一般不建议在代码中间加，防止自己弄错了也方便后期好维护。【当然大佬除外】

/*标签*/

h2 i[class^=”icon-“]:before,
h2 i[class*=” icon-“]:before,
h2 i.fa:before {
display: inline;
margin-left: 0;
margin-right: 0;
}

.section-title {
position: relative;
margin-bottom: 1em;
font-size: 12px;
letter-spacing: 1px;
font-weight: 700;
}

.section-title:before {
content: “”;
position: absolute;
top: 50%;
left: 0;
margin-top: 3px;
width: 100%;
border-bottom: 4px solid #F4F6F7;
}

.section-title span {
position: relative;
display: inline-block;
padding-right: 1.4em;
background: #fff;
}

.row+.section-title {
margin-top: 3em;
}

.section-title+p {
margin-top: 2em;
}

方法二

方法很简单，依样画葫芦即可。在主题的functions.php 文件下加入以下代码：

然后创建一个my_quicktags.js文件，按钮便是在这里自定义的，先给出个定义< h1 >标签的例子：

分享到：

赞(1)