之前在多个博客都看到这种彩色美化框,感觉好看,而且把文章分得很有层次感,体验方便,所以仙踪小栈博客也用上了,效果不错哦。这里也分享给大家。
其美化效果是有了,但是却并不方便,所以对整个代码做了修改,增加了几个WordPress默认TinyMCE编辑器自定义按钮。点击按钮直接插入标签,更加方便实用。
输入文字
输入文字
输入文字
输入文字
输入文字
输入文字
输入文字
输入文字
输入文字
输入文字
很多博客都有这样的代码教程,但是基本上都是没有添加到后台自定义按钮。
效果实现
1.更改编辑器默认视图为HTML
大家都知道,在后台新建文章后,编辑器就自动跳转到“可视化”视图,对于一些经常要插入代码或者WEB设计者们来说,可能更习惯使用HTML视图手动编辑。
设置方法:将以下代码添加到主题的functions.php文件里即可:
2.新增WordPress默认TinyMCE编辑器自定义按钮
在WordPress主题的functions.php最后一个?>前加入一下代码:
- //添加HTML编辑器自定义快捷标签按钮
- add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
- function bolo_after_wp_tiny_mce($mce_settings) {
- ?>
- <script type="text/javascript">
- QTags.addButton( 'v_notice', '绿框', '<div id="sc_notice">绿色提示框</div>n', "" );
- QTags.addButton( 'v_error', '红框', '<div id="sc_error">红色提示框</div>n', "" );
- QTags.addButton( 'v_warn', '黄框', '<div id="sc_warn">黄色提示框</div>n', "" );
- QTags.addButton( 'v_tips', '灰框', '<div id="sc_tips">灰色提示框</div>n', "" );
- QTags.addButton( 'v_blue', '蓝框', '<div id="sc_blue">蓝色提示框</div>n', "" );
- QTags.addButton( 'v_black', '黑框', '<div id="sc_black">黑色提示框</div>n', "" );
- QTags.addButton( 'v_xuk', '虚线', '<div id="sc_xuk">虚线提示框</div>n', "" );
- QTags.addButton( 'v_lvb', '绿边', '<div id="sc_lvb">绿边提示框</div>n', "" );
- QTags.addButton( 'v_redb', '红边', '<div id="sc_redb">红边提示框</div>n', "" );
- QTags.addButton( 'v_orange', '橙边', '<div id="sc_orange">橙边提示框</div>n', "" );
- function bolo_QTnextpage_arg1() {
- }
- </script>
- <?php
- }
其中,主要设置自定义按钮的是这个函数:
- QTags.addButton( ‘ 按钮ID‘, ‘按钮显示名‘, ‘点一下输入内容‘, ‘点一下关闭内容‘ );
四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),\n表示换行
3.CSS美化
将css代码放入主题的style.css文件中或其他地方:
- /*彩色美化框*/
- #sc_notice {
- color: #7da33c;
- background: #ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat;
- border: 1px solid #aac66d;
- overflow: hidden;
- margin: 10px 0;
- padding: 15px 15px 15px 35px;
- width: 98%;
- }
- #sc_warn, .post-password-form {
- color: #ad9948;
- background: #fff4b9 url('img/sc_warn.png') -1px -1px no-repeat;
- border: 1px solid #eac946;
- overflow: hidden;
- margin: 10px 0;
- padding: 15px 15px 15px 35px;
- width: 98%;
- }
- #sc_error {
- color: #c66;
- background: #ffecea url('img/sc_error.png') -1px -1px no-repeat;
- border: 1px solid #ebb1b1;
- overflow: hidden;
- margin: 10px 0;
- padding: 15px 15px 15px 35px;
- width: 98%;
- }
- #sc_tips {
- color: #888888;
- background: #f1f1f1 url('img/sc_tips.png') -1px -1px no-repeat;
- border: 1px solid #bbbbbb;
- padding: 15px 15px 5px 35px;
- margin: 10px 0;
- width: 98%;
- overflow: hidden;
- }
- #sc_blue {
- color: #1ba1e2;
- background: rgba(27, 161, 226, 0.26) url('img/sc_blue.png') -1px -1px no-repeat;
- border: 1px solid #1ba1e2;
- overflow: hidden;
- margin: 10px 0;
- padding: 15px 15px 15px 35px;
- }
- #sc_black {
- border-width: 1px 4px 4px 1px;
- border-style: solid;
- border-color: #3e3e3e;
- margin: 10px 0;
- padding: 15px 15px 15px 35px;
- }
- #sc_xuk {
- border: 2px dashed rgb(41, 170, 227);
- background-color: rgb(248, 247, 245);
- margin: 10px 0;
- padding: 15px 15px 15px 35px;
- }
- #sc_lvb {
- margin: 10px 0;
- padding: 10px 15px;
- border: 1px solid #e3e3e3;
- border-left: 2px solid #05B536;
- background: #FFF;
- }
- #sc_redb {
- margin: 10px 0;
- padding: 10px 15px;
- border: 1px solid #e3e3e3;
- border-left: 2px solid #ED0505;
- background: #FFF;
- }
- #sc_organge {
- margin: 10px 0;
- padding: 10px 15px;
- border: 1px solid #e3e3e3;
- border-left: 2px solid #EC8006;
- background: #FFF;
CSS代码中有5个图标链接,请将链接改为你保存的位置
下载地址见文章末尾
4.后台效果
完成以上步骤后,打开文章编辑界面,应该会看到以下效果:
【提醒】在新版知更鸟Begin主题LTS版中,已经集成了此按钮,无需我们自己部署代码。
若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
2017年9月10日 16:14 沙发
久伴来踩踩
2017年9月11日 00:29 1层
@久伴— 欢迎啊,常来逛逛,这还有不少美化教程呢
2017年9月24日 22:52 板凳
又要评论啊啊啊
2017年11月2日 23:11 1层
@晓影 其实也就想大家来了,能多多交流
2017年10月5日 22:10 地板
此评论仅博主可见
2017年11月2日 23:13 1层
@tencent 呵呵,非常的用心哦
2017年10月10日 17:02 4楼
我看看啊
2017年10月13日 09:30 5楼
这个很眼熟啊!!!
2017年11月2日 23:14 1层
@九哥 眼熟就对了,看的多了自然熟了
2017年10月26日 10:31 6楼
看看
2017年10月31日 16:04 7楼
此评论仅博主可见
2017年11月1日 12:38 8楼
小白菜到此一游,好东西全带走!
2017年11月2日 23:15 1层
@小白菜 这就是我分享的意义所在哦
2017年11月2日 10:43 9楼
不错的教程
2017年11月6日 21:40 10楼
带走
2017年11月17日 00:37 11楼
涨姿势
2017年11月18日 21:47 12楼
厉害
2017年11月26日 22:49 13楼
厉害了
2017年12月7日 10:57 14楼
厉害了
2017年12月28日 13:29 15楼
对对对
2018年1月3日 23:52 16楼
刚刚需要 哈哈
2018年2月6日 12:42 17楼
作者辛苦啦
2018年2月10日 20:14 18楼
谢谢
2018年8月15日 17:07 19楼
希望能成功
2018年8月31日 14:52 20楼
感谢博主分享!