WordPress短代码给文章添加彩色美化框+按钮

  • A+
所属分类:网站运营
看到很多博客都在用这个美化框,感觉不错,南城也用上了,自己拓展了一下,增加了几个,并在后台文章文本编辑器添加了自定义快捷标签按钮。WP自带的摘要也太素了,而且看着感觉不清楚。有需要的朋友也可以拿去试试。

效果展示:

绿色提示框
红色提示框
黄色提示框
灰色提示框
蓝色提示框
黑色提示框
虚线提示框
绿边提示框
红边提示框

代码部署:

❶.编辑WordPress主题目录下的functions.php文件,添加如下代码:

❷.CSS代码:添加到style.css文件中,或者直接在主题选项—定制风格—自定义样式中添加。

使用方法:

在文章编辑时插入以下代码即可,注意修改下括号。

{v_notice]绿色提示框[/v_notice}

{v_error]红色提示框[/v_error}

{v_warn]黄色提示框[/v_warn}

{v_tips]灰色提示框[/v_tips}

{v_blue]蓝色提示框[/v_blue}

{v_black]黑色提示框[/v_black}

{v_xuk]虚线提示框[/v_xuk}

{v_lvb]绿边提示框[/v_lvb}

{v_redb]红边提示框[/v_redb}

{v_orange]橙边提示框[/v_orange}

给后台文章文本编辑器添加按钮的方法:

如果添加提示框,每次都填写这么多代码的话,那不就既枯燥又麻烦死!那么怎么解决呢?
最简单的是通过在后台文本编辑器上面加上一些按钮来避免这种重复的输入。
好了,直接给出比较全的代码吧,在functions.php文件中加入以下代码,就可以在后台文本编辑器上面加上下面这些短代码了:

代码解析:

四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),\n表示换行;

形象说明:QTags.addButton( ' 按钮ID', '按钮显示名', '点一下输入内容', '点一下关闭内容' );

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

效果展示:

WordPress短代码给文章添加彩色美化框+按钮

重要提醒:如果使用按钮的话,文章最开始的代码部署第一步和使用方法中的短代码就可以不用了。
weinxin
微信公众号
关注网络安全,黑客技术,黑客教程,黑客文章,黑客博客,web安全,网站漏洞,网络安全,网络安全技术,网络安全知识,网络安全
Reminiscence
阿里云幸运券

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: